qzl/social-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(auth): transition from email to phone-based OTP authentication

Browse Source 
- Replace Email+Password login with Phone+OTP flow
- Remove RegisterCubit and registration screens (email verification)
- Remove ResetPasswordCubit and reset password screens
- Add phone normalization and international dial code support
- Update LoginCubit with sendCode/resend cooldown logic
- Add new widgets: phone prefix selector, confirm sheet
- Update all auth API endpoints: /otp/send, /phone-session
- Update form inputs: Email -> Phone with E.164 validation
- Update tests for new auth flow
This commit is contained in:
qzl
2026-03-19 18:42:05 +08:00
parent 636b37ee5a
commit 0661016827
29 changed files with 615 additions and 2030 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/lib/features/auth/ui/screens/login_screen.dart
+241 -113
View File
@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:formz/formz.dart';
import 'package:go_router/go_router.dart';
@@ -8,7 +9,9 @@ import '../../../../core/router/app_routes.dart';
import '../../../../core/theme/design_tokens.dart';
import '../../../../shared/widgets/app_button.dart';
import '../../../../shared/widgets/banner/app_banner.dart';
import '../../../../shared/widgets/confirm_sheet.dart';
import '../../../../shared/widgets/link_button.dart';
import '../../../../shared/widgets/phone_prefix_selector.dart';
import '../../../../shared/widgets/toast/toast_type.dart';
import '../../data/auth_repository.dart';
import '../../presentation/bloc/auth_bloc.dart';
@@ -16,7 +19,6 @@ import '../../presentation/bloc/auth_event.dart';
import '../../presentation/cubits/login_cubit.dart';
import '../widgets/auth_field.dart';
import '../widgets/auth_page_scaffold.dart';
import '../widgets/password_field.dart';
class LoginScreen extends StatelessWidget {
const LoginScreen({super.key});
@@ -38,20 +40,23 @@ class LoginView extends StatefulWidget {
}
class _LoginViewState extends State<LoginView> {
final _emailController = TextEditingController();
final _passwordController = TextEditingController();
static const _dialCodes = <String>['+86', '+1', '+44', '+81', '+65'];
final _phoneController = TextEditingController();
final _codeController = TextEditingController();
bool _agreedToTerms = false;
@override
void dispose() {
_emailController.dispose();
_passwordController.dispose();
_phoneController.dispose();
_codeController.dispose();
super.dispose();
}
Future<void> _handleLogin() async {
final cubit = context.read<LoginCubit>();
cubit.emailChanged(_emailController.text);
cubit.passwordChanged(_passwordController.text);
cubit.phoneChanged(_phoneController.text);
cubit.codeChanged(_codeController.text);
if (!cubit.state.isValid) {
return;
@@ -64,120 +69,243 @@ class _LoginViewState extends State<LoginView> {
}
}
@override
Widget build(BuildContext context) {
return AuthPageScaffold(
mainContentKey: const Key('login_main_content'),
footerKey: const Key('login_footer'),
mainContent: Padding(
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.sm),
child: Center(
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 380),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const AuthHeroHeader(showBrand: true),
SizedBox(height: AppSpacing.xxl),
BlocBuilder<LoginCubit, LoginState>(
builder: (context, state) {
final fieldError = state.email.displayError != null
? state.email.error
: state.password.displayError != null
? state.password.error
: null;
Future<void> _handleSendCode() async {
if (!_agreedToTerms) {
final confirmed = await _showAgreementDialog();
if (!confirmed || !mounted) return;
setState(() => _agreedToTerms = true);
}
return AuthSurfaceCard(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const Text(
'登录账号',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w700,
color: AppColors.slate900,
),
),
SizedBox(height: AppSpacing.xs),
SizedBox(height: AppSpacing.xl),
AuthSection(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
AuthField(
label: '邮箱',
hint: 'name@example.com',
controller: _emailController,
keyboardType: TextInputType.emailAddress,
),
SizedBox(height: AppSpacing.lg),
PasswordField(
controller: _passwordController,
label: '密码',
hint: '请输入密码',
),
if (state.errorMessage != null ||
fieldError != null)
Padding(
padding: const EdgeInsets.only(
top: AppSpacing.lg,
),
child: AppBanner(
message:
state.errorMessage ?? fieldError!,
type: state.errorMessage != null
? ToastType.error
: ToastType.warning,
title: state.errorMessage != null
? '登录失败'
: '请检查输入',
),
),
],
),
),
SizedBox(height: AppSpacing.xl),
AppButton(
text: '登录',
onPressed:
state.status == FormzSubmissionStatus.inProgress
? null
: _handleLogin,
isLoading:
state.status ==
FormzSubmissionStatus.inProgress,
),
SizedBox(height: AppSpacing.sm),
Align(
alignment: Alignment.centerRight,
child: LinkButton(
text: '忘记密码？',
onTap: () => context.push('/reset-password'),
),
),
],
final cubit = context.read<LoginCubit>();
cubit.phoneChanged(_phoneController.text);
final sent = await cubit.sendCode();
if (!mounted || !sent) {
return;
}
}
Future<bool> _showAgreementDialog() async {
return await showConfirmSheet(
context,
title: '请先同意协议',
message: '在使用我们的服务之前，请先阅读并同意《用户协议》和《隐私政策》。\n\n只有您同意上述协议，我们才能为您提供服务。',
confirmText: '确认',
cancelText: '取消',
);
}
Widget _buildAgreementCheckbox() {
return Center(
child: Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Semantics(
label: '同意用户协议与隐私政策',
checked: _agreedToTerms,
button: true,
child: InkWell(
borderRadius: BorderRadius.circular(AppRadius.md),
onTap: () => setState(() => _agreedToTerms = !_agreedToTerms),
child: SizedBox(
width: 44,
height: 44,
child: Center(
child: Container(
width: 20,
height: 20,
margin: const EdgeInsets.only(right: AppSpacing.sm),
decoration: BoxDecoration(
color: _agreedToTerms
? AppColors.blue600
: Colors.transparent,
borderRadius: BorderRadius.circular(4),
border: Border.all(
color: _agreedToTerms
? AppColors.blue600
: AppColors.slate400,
width: 1.5,
),
);
},
),
child: _agreedToTerms
? const Icon(
Icons.check,
size: 14,
color: AppColors.white,
)
: null,
),
),
),
),
),
RichText(
text: TextSpan(
style: const TextStyle(fontSize: 13, color: AppColors.slate600),
children: [
const TextSpan(text: '我已同意'),
TextSpan(
text: '《用户协议》',
style: const TextStyle(
color: AppColors.blue600,
decoration: TextDecoration.underline,
),
),
const TextSpan(text: '与'),
TextSpan(
text: '《隐私政策》',
style: const TextStyle(
color: AppColors.blue600,
decoration: TextDecoration.underline,
),
),
],
),
),
),
),
footer: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Text(
'还没有账号？',
style: TextStyle(fontSize: 14, color: AppColors.authLinkMuted),
),
LinkButton(text: '去注册', onTap: () => context.push('/register')),
],
),
);
}
@override
Widget build(BuildContext context) {
return AuthPageScaffold(
resizeOnKeyboard: false,
mainContentKey: const Key('login_main_content'),
mainContent: LayoutBuilder(
builder: (context, constraints) {
final bottomInset = MediaQuery.of(context).viewInsets.bottom;
return SingleChildScrollView(
padding: EdgeInsets.fromLTRB(
AppSpacing.lg,
0,
AppSpacing.lg,
bottomInset + AppSpacing.lg,
),
child: ConstrainedBox(
constraints: BoxConstraints(minHeight: constraints.maxHeight),
child: Center(
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 320),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const AuthHeroHeader(showBrand: true),
SizedBox(height: AppSpacing.xxl),
BlocBuilder<LoginCubit, LoginState>(
builder: (context, state) {
final fieldError = state.phone.displayError != null
? state.phone.error
: state.code.displayError != null
? state.code.error
: null;
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
AuthSection(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.stretch,
children: [
AuthField(
hint: '输入手机号',
controller: _phoneController,
onChanged: (value) {
context.read<LoginCubit>().phoneChanged(
value,
);
},
keyboardType: TextInputType.phone,
prefix: PhonePrefixSelector(
value: state.dialCode,
items: _dialCodes,
onChanged: (value) {
context
.read<LoginCubit>()
.dialCodeChanged(value);
},
),
inputFormatters: [
FilteringTextInputFormatter.digitsOnly,
LengthLimitingTextInputFormatter(14),
],
),
SizedBox(height: AppSpacing.lg),
AuthField(
hint: '输入验证码',
controller: _codeController,
onChanged: (value) {
context.read<LoginCubit>().codeChanged(
value,
);
},
keyboardType: TextInputType.number,
inputFormatters: [
FilteringTextInputFormatter.digitsOnly,
LengthLimitingTextInputFormatter(6),
],
suffixIcon: Padding(
padding: const EdgeInsets.only(
right: AppSpacing.md,
),
child: LinkButton(
text: state.resendCooldownSeconds > 0
? '${state.resendCooldownSeconds}s'
: '发送验证码',
onTap: state.canSendCode
? _handleSendCode
: null,
),
),
),
if (state.errorMessage != null ||
fieldError != null)
Padding(
padding: const EdgeInsets.only(
top: AppSpacing.md,
),
child: AppBanner(
message:
state.errorMessage ?? fieldError!,
type: state.errorMessage != null
? ToastType.error
: ToastType.warning,
title: state.errorMessage != null
? '登录失败'
: '请检查输入',
),
),
],
),
),
SizedBox(height: AppSpacing.xxl),
AppButton(
text: '登录/注册',
onPressed:
state.status ==
FormzSubmissionStatus.inProgress
? null
: _handleLogin,
isLoading:
state.status ==
FormzSubmissionStatus.inProgress,
),
SizedBox(height: AppSpacing.xxl * 2),
_buildAgreementCheckbox(),
],
);
},
),
],
),
),
),
),
);
},
),
);
}
}
apps/lib/features/auth/ui/screens/register_screen.dart
-296
View File
@@ -1,296 +0,0 @@
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:formz/formz.dart';
import 'package:go_router/go_router.dart';
import '../../../../core/di/injection.dart';
import '../../../../core/theme/design_tokens.dart';
import '../../../../shared/widgets/app_button.dart';
import '../../../../shared/widgets/banner/app_banner.dart';
import '../../../../shared/widgets/fixed_length_code_input.dart';
import '../../../../shared/widgets/link_button.dart';
import '../../../../shared/widgets/toast/toast.dart';
import '../../../../shared/widgets/toast/toast_type.dart';
import '../../data/auth_repository.dart';
import '../../presentation/cubits/register_cubit.dart';
import '../widgets/auth_field.dart';
import '../widgets/auth_page_scaffold.dart';
import '../widgets/password_field.dart';
class RegisterScreen extends StatelessWidget {
const RegisterScreen({super.key});
@override
Widget build(BuildContext context) {
return BlocProvider(
create: (context) => RegisterCubit(sl<AuthRepository>()),
child: const RegisterView(),
);
}
}
class RegisterView extends StatefulWidget {
const RegisterView({super.key});
@override
State<RegisterView> createState() => _RegisterViewState();
}
class _RegisterViewState extends State<RegisterView> {
static const _inviteCodeLength = 4;
static const _inviteAllowedChars = <String>{
'A',
'B',
'C',
'D',
'E',
'F',
'G',
'H',
'J',
'K',
'M',
'N',
'P',
'Q',
'R',
'S',
'T',
'U',
'V',
'W',
'X',
'Y',
'Z',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
};
final _nicknameController = TextEditingController();
final _emailController = TextEditingController();
final _passwordController = TextEditingController();
final _inviteCodeController = TextEditingController();
@override
void dispose() {
_nicknameController.dispose();
_emailController.dispose();
_passwordController.dispose();
_inviteCodeController.dispose();
super.dispose();
}
Future<void> _handleNext() async {
final cubit = context.read<RegisterCubit>();
final inviteCode = _inviteCodeController.text.trim().toUpperCase();
final normalizedInviteCode = inviteCode.length == _inviteCodeLength
? inviteCode
: '';
cubit.usernameChanged(_nicknameController.text);
cubit.emailChanged(_emailController.text);
cubit.passwordChanged(_passwordController.text);
cubit.inviteCodeChanged(normalizedInviteCode);
if (!cubit.state.isStep1Valid || cubit.state.isSending) {
String? errorMsg;
if (!cubit.state.username.isValid) {
errorMsg = '请输入有效的昵称（3-30个字符）';
} else if (!cubit.state.email.isValid) {
errorMsg = '请输入有效的邮箱地址';
} else if (!cubit.state.password.isValid) {
errorMsg = '密码至少需要6个字符';
}
if (errorMsg != null && mounted) {
Toast.show(context, errorMsg, type: ToastType.warning);
}
return;
}
if (inviteCode.isNotEmpty && normalizedInviteCode.isEmpty && mounted) {
Toast.show(
context,
'邀请码需为 4 位，且仅支持 A-H/J-N/P-Z 与 2-9；已按无邀请码继续注册',
type: ToastType.warning,
);
}
if (mounted) {
context.push('/register/verification', extra: cubit);
}
unawaited(cubit.sendCodeSilently());
}
@override
Widget build(BuildContext context) {
return AuthPageScaffold(
mainContent: Padding(
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.sm),
child: Center(
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 388),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const AuthHeroHeader(showBrand: true),
SizedBox(height: AppSpacing.xxl),
BlocBuilder<RegisterCubit, RegisterState>(
builder: (context, state) {
return AuthSurfaceCard(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const Text(
'创建账号',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w700,
color: AppColors.slate900,
),
),
SizedBox(height: AppSpacing.lg),
AuthSection(
title: '基础信息',
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
AuthField(
label: '昵称',
hint: '请输入昵称（3-30字符）',
controller: _nicknameController,
),
SizedBox(height: AppSpacing.lg),
AuthField(
label: '邮箱',
hint: 'name@example.com',
controller: _emailController,
keyboardType: TextInputType.emailAddress,
),
SizedBox(height: AppSpacing.lg),
PasswordField(
controller: _passwordController,
label: '密码',
hint: '请输入至少 6 位密码',
),
],
),
),
SizedBox(height: AppSpacing.md),
AuthSection(
title: '邀请码（选填）',
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
FixedLengthCodeInput(
controller: _inviteCodeController,
length: _inviteCodeLength,
semanticLabel: '邀请码输入框',
uppercase: true,
allowedCharacters: _inviteAllowedChars,
onChanged: (value) {
context
.read<RegisterCubit>()
.inviteCodeChanged(value);
},
),
SizedBox(height: AppSpacing.md),
AppBanner(
title: '邀请码',
message: '4 位，支持 A-H/J-N/P-Z 与 2-9。',
type: ToastType.info,
),
],
),
),
if (state.errorMessage != null) ...[
SizedBox(height: AppSpacing.lg),
AppBanner(
title: '注册失败',
message: state.errorMessage!,
type: ToastType.error,
),
],
SizedBox(height: AppSpacing.lg),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Container(
height: 6,
decoration: BoxDecoration(
color: AppColors.authPrimaryButton,
borderRadius: BorderRadius.circular(
AppRadius.full,
),
),
),
),
SizedBox(width: AppSpacing.sm),
Expanded(
child: Container(
height: 6,
decoration: BoxDecoration(
color: AppColors.authSectionBorder,
borderRadius: BorderRadius.circular(
AppRadius.full,
),
),
),
),
],
),
SizedBox(height: AppSpacing.sm),
const Text(
'第 1 步：完善基础信息',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w600,
color: AppColors.authLinkMuted,
),
),
SizedBox(height: AppSpacing.lg),
AppButton(
text: '下一步',
onPressed:
state.status ==
FormzSubmissionStatus.inProgress ||
state.isSending
? null
: _handleNext,
isLoading: state.isSending,
),
],
),
);
},
),
],
),
),
),
),
footer: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Text(
'已有账号？',
style: TextStyle(fontSize: 14, color: AppColors.authLinkMuted),
),
LinkButton(text: '去登录', onTap: () => context.pop()),
],
),
);
}
}
apps/lib/features/auth/ui/screens/register_verification_screen.dart
-242
View File
@@ -1,242 +0,0 @@
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:formz/formz.dart';
import 'package:go_router/go_router.dart';
import '../../../../core/router/app_routes.dart';
import '../../../../core/theme/design_tokens.dart';
import '../../../../shared/widgets/app_button.dart';
import '../../../../shared/widgets/banner/app_banner.dart';
import '../../../../shared/widgets/fixed_length_code_input.dart';
import '../../../../shared/widgets/link_button.dart';
import '../../../../shared/widgets/toast/toast.dart';
import '../../../../shared/widgets/toast/toast_type.dart';
import '../../presentation/bloc/auth_bloc.dart';
import '../../presentation/bloc/auth_event.dart';
import '../../presentation/cubits/register_cubit.dart';
import '../widgets/auth_page_scaffold.dart';
class RegisterVerificationScreen extends StatelessWidget {
const RegisterVerificationScreen({super.key, this.cubit});
final RegisterCubit? cubit;
@override
Widget build(BuildContext context) {
final registerCubit =
cubit ?? (GoRouterState.of(context).extra as RegisterCubit?);
if (registerCubit == null) {
return const Scaffold(
body: Center(child: Text('RegisterCubit not found')),
);
}
return BlocProvider.value(
value: registerCubit,
child: const RegisterVerificationView(),
);
}
}
class RegisterVerificationView extends StatefulWidget {
const RegisterVerificationView({super.key});
@override
State<RegisterVerificationView> createState() =>
_RegisterVerificationViewState();
}
class _RegisterVerificationViewState extends State<RegisterVerificationView> {
final _codeController = TextEditingController();
Timer? _countdownTimer;
int _countdown = 0;
bool _firstSendCompleted = false;
@override
void dispose() {
_countdownTimer?.cancel();
_codeController.dispose();
super.dispose();
}
void _startCountdown() {
setState(() {
_countdown = 60;
});
_countdownTimer?.cancel();
_countdownTimer = Timer.periodic(const Duration(seconds: 1), (timer) {
if (_countdown > 0) {
setState(() {
_countdown--;
});
} else {
timer.cancel();
}
});
}
Future<void> _handleComplete() async {
final cubit = context.read<RegisterCubit>();
cubit.verificationCodeChanged(_codeController.text);
if (!cubit.state.isStep2Valid) {
Toast.show(
context,
_codeController.text.isEmpty ? '请输入验证码' : '验证码必须是 6 位数字',
type: ToastType.warning,
);
return;
}
final response = await cubit.submitStep2();
if (response != null && mounted) {
context.read<AuthBloc>().add(AuthLoggedIn(user: response.user));
context.go(AppRoutes.homeMain);
}
}
Future<void> _handleResendCode() async {
final cubit = context.read<RegisterCubit>();
final success = await cubit.resendCode();
if (success && mounted) {
_startCountdown();
Toast.show(context, '验证码已发送', type: ToastType.success);
}
}
@override
Widget build(BuildContext context) {
return AuthPageScaffold(
mainContent: Padding(
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.sm),
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 388),
child: BlocConsumer<RegisterCubit, RegisterState>(
listener: (context, state) {
if (!mounted) {
return;
}
if (state.status == FormzSubmissionStatus.failure &&
state.errorMessage != null) {
Toast.show(context, state.errorMessage!, type: ToastType.error);
if (!_firstSendCompleted) {
_firstSendCompleted = true;
setState(() {
_countdown = 0;
});
}
}
if (state.status == FormzSubmissionStatus.success &&
!_firstSendCompleted) {
_firstSendCompleted = true;
_startCountdown();
Toast.show(context, '验证码已发送', type: ToastType.info);
}
},
builder: (context, state) {
final isSubmitting =
state.status == FormzSubmissionStatus.inProgress;
final canResend = _countdown == 0 && !isSubmitting;
return Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const AuthHeroHeader(showBrand: true),
SizedBox(height: AppSpacing.xl),
AuthSurfaceCard(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const Text(
'验证邮箱',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w700,
color: AppColors.slate900,
),
),
SizedBox(height: AppSpacing.lg),
AuthSection(
title: '验证码',
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
FixedLengthCodeInput(
controller: _codeController,
length: 6,
semanticLabel: '邮箱验证码输入框',
keyboardType: TextInputType.number,
allowedCharacters: const {
'0',
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
},
onChanged: (value) {
context
.read<RegisterCubit>()
.verificationCodeChanged(value);
},
),
SizedBox(height: AppSpacing.md),
AppBanner(
title: '验证码',
message: canResend
? '6 位数字验证码。'
: '$_countdown 秒后可重新发送。',
type: ToastType.info,
),
],
),
),
SizedBox(height: AppSpacing.lg),
AppButton(
text: '完成注册',
onPressed: isSubmitting ? null : _handleComplete,
isLoading: isSubmitting,
),
SizedBox(height: AppSpacing.sm),
Center(
child: LinkButton(
text: canResend ? '重新发送验证码' : '$_countdown 秒后重发',
onTap: canResend ? _handleResendCode : null,
enabled: canResend,
),
),
],
),
),
],
);
},
),
),
),
footer: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Text(
'已有账号？',
style: TextStyle(fontSize: 14, color: AppColors.authLinkMuted),
),
LinkButton(text: '去登录', onTap: () => context.go('/')),
],
),
);
}
}
apps/lib/features/auth/ui/screens/reset_password_screen.dart
-267
View File
@@ -1,267 +0,0 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:formz/formz.dart';
import 'package:go_router/go_router.dart';
import '../../../../core/di/injection.dart';
import '../../../../core/theme/design_tokens.dart';
import '../../../../shared/widgets/app_button.dart';
import '../../../../shared/widgets/banner/app_banner.dart';
import '../../../../shared/widgets/fixed_length_code_input.dart';
import '../../../../shared/widgets/link_button.dart';
import '../../../../shared/widgets/toast/toast.dart';
import '../../../../shared/widgets/toast/toast_type.dart';
import '../../data/auth_repository.dart';
import '../../presentation/cubits/reset_password_cubit.dart';
import '../widgets/auth_field.dart';
import '../widgets/auth_page_scaffold.dart';
import '../widgets/password_field.dart';
class ResetPasswordScreen extends StatelessWidget {
const ResetPasswordScreen({super.key});
@override
Widget build(BuildContext context) {
return BlocProvider(
create: (context) => ResetPasswordCubit(sl<AuthRepository>()),
child: const ResetPasswordView(),
);
}
}
class ResetPasswordView extends StatefulWidget {
const ResetPasswordView({super.key});
@override
State<ResetPasswordView> createState() => _ResetPasswordViewState();
}
class _ResetPasswordViewState extends State<ResetPasswordView> {
final _emailController = TextEditingController();
final _codeController = TextEditingController();
final _passwordController = TextEditingController();
final _confirmPasswordController = TextEditingController();
@override
void dispose() {
_emailController.dispose();
_codeController.dispose();
_passwordController.dispose();
_confirmPasswordController.dispose();
super.dispose();
}
Future<void> _handleSubmit() async {
final cubit = context.read<ResetPasswordCubit>();
cubit.emailChanged(_emailController.text);
cubit.codeChanged(_codeController.text);
cubit.newPasswordChanged(_passwordController.text);
cubit.confirmPasswordChanged(_confirmPasswordController.text);
await cubit.submit();
}
void _handleSendCode(ResetPasswordState state) {
if (state.codeSent) {
context.read<ResetPasswordCubit>().resendCode();
return;
}
context.read<ResetPasswordCubit>().sendCode();
}
@override
Widget build(BuildContext context) {
return BlocListener<ResetPasswordCubit, ResetPasswordState>(
listenWhen: (previous, current) =>
previous.status != current.status ||
previous.errorMessage != current.errorMessage ||
previous.codeSent != current.codeSent,
listener: (context, state) {
if (state.status == FormzSubmissionStatus.success && state.isSuccess) {
Toast.show(context, '密码重置成功，请使用新密码登录', type: ToastType.success);
context.go('/');
} else if (state.status == FormzSubmissionStatus.success &&
state.codeSent &&
state.errorMessage == 'CODE_SENT_SUCCESS') {
Toast.show(context, '验证码已发送到您的邮箱', type: ToastType.success);
} else if (state.status == FormzSubmissionStatus.failure &&
state.errorMessage != null &&
state.errorMessage != '' &&
state.errorMessage != 'CODE_SENT_SUCCESS') {
Toast.show(context, state.errorMessage!, type: ToastType.error);
}
},
child: AuthPageScaffold(
mainContent: Padding(
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.sm),
child: Center(
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 392),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const AuthHeroHeader(title: '忘记密码'),
SizedBox(height: AppSpacing.xxl),
BlocBuilder<ResetPasswordCubit, ResetPasswordState>(
builder: (context, state) {
final isSending =
state.status == FormzSubmissionStatus.inProgress &&
!state.codeSent;
final isSubmitting =
state.status == FormzSubmissionStatus.inProgress &&
state.codeSent;
return AuthSurfaceCard(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const Text(
'找回访问权限',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w700,
color: AppColors.slate900,
),
),
SizedBox(height: AppSpacing.xs),
SizedBox(height: AppSpacing.xl),
AuthSection(
title: '第 1 步：验证邮箱',
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
AuthField(
label: '邮箱',
hint: 'name@example.com',
controller: _emailController,
keyboardType: TextInputType.emailAddress,
onChanged: (value) {
context
.read<ResetPasswordCubit>()
.emailChanged(value);
},
),
SizedBox(height: AppSpacing.lg),
AppButton(
text: state.resendCountdown > 0
? '${state.resendCountdown} 秒后可重发'
: state.codeSent
? '重新发送验证码'
: '发送验证码',
onPressed:
state.resendCountdown > 0 || isSending
? null
: () => _handleSendCode(state),
isOutlined: state.codeSent,
isLoading: isSending,
),
],
),
),
if (state.codeSent) ...[
SizedBox(height: AppSpacing.lg),
AuthSection(
title: '第 2 步：输入验证码并设置新密码',
child: Column(
crossAxisAlignment:
CrossAxisAlignment.stretch,
children: [
AppBanner(
title: '验证码已发送',
message: state.resendCountdown > 0
? '如未收到邮件，可在 ${state.resendCountdown} 秒后重新发送。'
: '如果没有收到邮件，可以再次发送验证码。',
type: ToastType.info,
),
SizedBox(height: AppSpacing.lg),
const Text(
'验证码',
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w700,
color: AppColors.slate700,
),
),
SizedBox(height: AppSpacing.sm),
FixedLengthCodeInput(
controller: _codeController,
length: 6,
semanticLabel: '重置密码验证码输入框',
keyboardType: TextInputType.number,
allowedCharacters: const {
'0',
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
},
onChanged: (value) {
context
.read<ResetPasswordCubit>()
.codeChanged(value);
},
),
SizedBox(height: AppSpacing.lg),
PasswordField(
controller: _passwordController,
label: '新密码',
hint: '请输入新密码（至少 6 位）',
onChanged: (value) {
context
.read<ResetPasswordCubit>()
.newPasswordChanged(value);
},
),
SizedBox(height: AppSpacing.lg),
PasswordField(
controller: _confirmPasswordController,
label: '确认密码',
hint: '请再次输入新密码',
onChanged: (value) {
context
.read<ResetPasswordCubit>()
.confirmPasswordChanged(value);
},
),
],
),
),
SizedBox(height: AppSpacing.xl),
AppButton(
text: '重置密码',
onPressed: isSubmitting ? null : _handleSubmit,
isLoading: isSubmitting,
),
],
],
),
);
},
),
],
),
),
),
),
footer: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Text(
'想起密码了？',
style: TextStyle(fontSize: 14, color: AppColors.authLinkMuted),
),
LinkButton(text: '返回登录', onTap: () => context.go('/')),
],
),
),
);
}
}
apps/lib/features/auth/ui/widgets/auth_field.dart
+19 -10
View File
@@ -1,41 +1,48 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import '../../../../core/theme/design_tokens.dart';
class AuthField extends StatelessWidget {
const AuthField({
super.key,
required this.label,
this.label,
required this.hint,
required this.controller,
this.keyboardType,
this.obscureText = false,
this.suffixIcon,
this.onChanged,
this.prefix,
this.inputFormatters,
});
final String label;
final String? label;
final String hint;
final TextEditingController controller;
final TextInputType? keyboardType;
final bool obscureText;
final Widget? suffixIcon;
final ValueChanged<String>? onChanged;
final Widget? prefix;
final List<TextInputFormatter>? inputFormatters;
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
label,
style: const TextStyle(
fontSize: 13,
fontWeight: FontWeight.w700,
color: AppColors.slate700,
if (label != null) ...[
Text(
label!,
style: const TextStyle(
fontSize: 13,
fontWeight: FontWeight.w700,
color: AppColors.slate700,
),
),
),
SizedBox(height: AppSpacing.sm),
SizedBox(height: AppSpacing.sm),
],
Semantics(
label: label,
textField: true,
@@ -44,6 +51,7 @@ class AuthField extends StatelessWidget {
keyboardType: keyboardType,
obscureText: obscureText,
onChanged: onChanged,
inputFormatters: inputFormatters,
style: const TextStyle(fontSize: 16, color: AppColors.slate900),
decoration: InputDecoration(
hintText: hint,
@@ -57,6 +65,7 @@ class AuthField extends StatelessWidget {
horizontal: AppSpacing.lg,
vertical: AppSpacing.lg,
),
prefixIcon: prefix,
suffixIcon: suffixIcon,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppRadius.lg),
apps/lib/features/auth/ui/widgets/auth_page_scaffold.dart
+28
View File
@@ -9,12 +9,14 @@ class AuthPageScaffold extends StatelessWidget {
this.footer,
this.mainContentKey,
this.footerKey,
this.resizeOnKeyboard = true,
});
final Widget mainContent;
final Widget? footer;
final Key? mainContentKey;
final Key? footerKey;
final bool resizeOnKeyboard;
@override
Widget build(BuildContext context) {
@@ -22,6 +24,7 @@ class AuthPageScaffold extends StatelessWidget {
return Scaffold(
backgroundColor: AppColors.authBackgroundBottom,
resizeToAvoidBottomInset: resizeOnKeyboard,
body: DecoratedBox(
decoration: const BoxDecoration(
gradient: LinearGradient(
@@ -37,8 +40,33 @@ class AuthPageScaffold extends StatelessWidget {
children: [
const _AuthBackgroundOrbs(),
SafeArea(
maintainBottomViewPadding: !resizeOnKeyboard,
child: LayoutBuilder(
builder: (context, constraints) {
if (!resizeOnKeyboard) {
return Padding(
padding: const EdgeInsets.symmetric(
horizontal: AppSpacing.lg,
),
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
KeyedSubtree(
key: mainContentKey,
child: mainContent,
),
if (footer != null) ...[
SizedBox(height: AppSpacing.md),
KeyedSubtree(key: footerKey, child: footer!),
],
],
),
),
);
}
return SingleChildScrollView(
keyboardDismissBehavior:
ScrollViewKeyboardDismissBehavior.onDrag,
apps/lib/features/auth/ui/widgets/password_field.dart
+2 -2
View File
@@ -7,13 +7,13 @@ class PasswordField extends StatefulWidget {
const PasswordField({
super.key,
required this.controller,
required this.label,
this.label,
required this.hint,
this.onChanged,
});
final TextEditingController controller;
final String label;
final String? label;
final String hint;
final ValueChanged<String>? onChanged;