feat(auth): transition from email to phone-based OTP authentication
- 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
@@ -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(),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user