feat: 切换邮箱认证并重构前后端启动与门禁
This commit is contained in:
qzl
@@ -0,0 +1,388 @@
|
||||
import 'dart:async';
|
||||
|
||||
import 'package:flutter/gestures.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../../core/logging/logger.dart';
|
||||
import '../../../../core/network/api_problem.dart';
|
||||
import '../../../../core/network/api_problem_mapper.dart';
|
||||
import '../../../../l10n/app_localizations.dart';
|
||||
import '../../../../shared/theme/design_tokens.dart';
|
||||
import '../../../../shared/widgets/toast/toast.dart';
|
||||
import '../../../../shared/widgets/toast/toast_type.dart';
|
||||
|
||||
class LoginScreen extends StatefulWidget {
|
||||
const LoginScreen({
|
||||
super.key,
|
||||
required this.onRequestOtp,
|
||||
required this.onLoginWithOtp,
|
||||
required this.onLocaleChanged,
|
||||
required this.currentLocale,
|
||||
});
|
||||
|
||||
final Future<void> Function(String email) onRequestOtp;
|
||||
final Future<void> Function(String email, String otp) onLoginWithOtp;
|
||||
final ValueChanged<Locale> onLocaleChanged;
|
||||
final Locale currentLocale;
|
||||
|
||||
@override
|
||||
State<LoginScreen> createState() => _LoginScreenState();
|
||||
}
|
||||
|
||||
class _LoginScreenState extends State<LoginScreen> {
|
||||
final Logger _logger = getLogger('features.auth.login');
|
||||
final TextEditingController _emailController = TextEditingController();
|
||||
final TextEditingController _codeController = TextEditingController();
|
||||
Timer? _timer;
|
||||
int _countdown = 0;
|
||||
bool _isSending = false;
|
||||
bool _agreementChecked = false;
|
||||
|
||||
bool get _isValidEmail {
|
||||
return RegExp(
|
||||
r'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$',
|
||||
).hasMatch(_emailController.text.trim());
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_timer?.cancel();
|
||||
_emailController.dispose();
|
||||
_codeController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
void _showMessage(String message) {
|
||||
Toast.show(context, message, type: ToastType.info);
|
||||
}
|
||||
|
||||
Future<void> _sendCode() async {
|
||||
final l10n = AppLocalizations.of(context)!;
|
||||
if (!_isValidEmail) {
|
||||
_showMessage(l10n.invalidEmail);
|
||||
return;
|
||||
}
|
||||
if (_countdown > 0 || _isSending) {
|
||||
return;
|
||||
}
|
||||
|
||||
setState(() {
|
||||
_isSending = true;
|
||||
});
|
||||
|
||||
try {
|
||||
await widget.onRequestOtp(_emailController.text.trim());
|
||||
if (!mounted) {
|
||||
return;
|
||||
}
|
||||
setState(() {
|
||||
_isSending = false;
|
||||
_countdown = 60;
|
||||
});
|
||||
|
||||
_timer = Timer.periodic(const Duration(seconds: 1), (timer) {
|
||||
if (!mounted) {
|
||||
timer.cancel();
|
||||
return;
|
||||
}
|
||||
if (_countdown <= 1) {
|
||||
timer.cancel();
|
||||
setState(() {
|
||||
_countdown = 0;
|
||||
});
|
||||
} else {
|
||||
setState(() {
|
||||
_countdown -= 1;
|
||||
});
|
||||
}
|
||||
});
|
||||
} catch (error, stackTrace) {
|
||||
_logger.error(
|
||||
message: 'Send OTP failed',
|
||||
error: error,
|
||||
stackTrace: stackTrace,
|
||||
);
|
||||
if (!mounted) {
|
||||
return;
|
||||
}
|
||||
setState(() {
|
||||
_isSending = false;
|
||||
});
|
||||
_showMessage(_safeErrorMessage(error));
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> _login() async {
|
||||
final l10n = AppLocalizations.of(context)!;
|
||||
if (!_isValidEmail) {
|
||||
_showMessage(l10n.invalidEmail);
|
||||
return;
|
||||
}
|
||||
if (_codeController.text.length != 6) {
|
||||
_showMessage(l10n.invalidCode);
|
||||
return;
|
||||
}
|
||||
if (!_agreementChecked) {
|
||||
_showMessage(l10n.agreementRequired);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await widget.onLoginWithOtp(
|
||||
_emailController.text.trim(),
|
||||
_codeController.text,
|
||||
);
|
||||
if (!mounted) {
|
||||
return;
|
||||
}
|
||||
} catch (error, stackTrace) {
|
||||
_logger.error(
|
||||
message: 'Login with OTP failed',
|
||||
error: error,
|
||||
stackTrace: stackTrace,
|
||||
);
|
||||
_showMessage(_safeErrorMessage(error));
|
||||
}
|
||||
}
|
||||
|
||||
String _safeErrorMessage(Object error) {
|
||||
final l10n = AppLocalizations.of(context)!;
|
||||
if (error is ApiProblem) {
|
||||
return mapApiProblemToMessage(error, l10n);
|
||||
}
|
||||
return l10n.errorRequestGeneric;
|
||||
}
|
||||
|
||||
void _showPolicyDialog(String title, String content) {
|
||||
showDialog<void>(
|
||||
context: context,
|
||||
builder: (context) {
|
||||
return AlertDialog(
|
||||
title: Text(title),
|
||||
content: Text(content),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () => Navigator.of(context).pop(),
|
||||
child: Text(AppLocalizations.of(context)!.dialogConfirm),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final l10n = AppLocalizations.of(context)!;
|
||||
final colors = Theme.of(context).colorScheme;
|
||||
final canLogin =
|
||||
_isValidEmail && _codeController.text.length == 6 && _agreementChecked;
|
||||
|
||||
return Scaffold(
|
||||
body: GestureDetector(
|
||||
onTap: () => FocusScope.of(context).unfocus(),
|
||||
child: SafeArea(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppSpacing.xl,
|
||||
vertical: AppSpacing.lg,
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const SizedBox(height: AppSpacing.xxxl),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
l10n.welcomeLogin,
|
||||
style: Theme.of(context).textTheme.headlineMedium,
|
||||
),
|
||||
const SizedBox(height: AppSpacing.sm),
|
||||
Text(
|
||||
l10n.loginSubtitleEmail,
|
||||
style: Theme.of(context).textTheme.bodyLarge,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
PopupMenuButton<Locale>(
|
||||
icon: Icon(Icons.language, color: colors.primary),
|
||||
onSelected: widget.onLocaleChanged,
|
||||
itemBuilder: (context) => [
|
||||
PopupMenuItem<Locale>(
|
||||
value: const Locale('zh'),
|
||||
child: Text(l10n.chinese),
|
||||
),
|
||||
PopupMenuItem<Locale>(
|
||||
value: const Locale('en'),
|
||||
child: Text(l10n.english),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: AppSpacing.xxl),
|
||||
TextField(
|
||||
controller: _emailController,
|
||||
keyboardType: TextInputType.emailAddress,
|
||||
onChanged: (_) => setState(() {}),
|
||||
decoration: InputDecoration(
|
||||
hintText: l10n.emailHint,
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadius.sm),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppSpacing.lg),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: TextField(
|
||||
controller: _codeController,
|
||||
keyboardType: TextInputType.number,
|
||||
maxLength: 6,
|
||||
onChanged: (_) => setState(() {}),
|
||||
decoration: InputDecoration(
|
||||
counterText: '',
|
||||
hintText: l10n.codeHint,
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadius.sm),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: AppSpacing.sm),
|
||||
SizedBox(
|
||||
width: 130,
|
||||
height: 48,
|
||||
child: FilledButton(
|
||||
style: FilledButton.styleFrom(
|
||||
backgroundColor: colors.surfaceContainerHighest,
|
||||
foregroundColor: colors.primary,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadius.sm),
|
||||
),
|
||||
),
|
||||
onPressed: _sendCode,
|
||||
child: Text(
|
||||
_isSending
|
||||
? l10n.sending
|
||||
: _countdown > 0
|
||||
? l10n.retryAfter(_countdown)
|
||||
: l10n.sendCode,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: AppSpacing.xl),
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
child: FilledButton(
|
||||
style: FilledButton.styleFrom(
|
||||
backgroundColor: colors.primary,
|
||||
foregroundColor: colors.onPrimary,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadius.sm),
|
||||
),
|
||||
),
|
||||
onPressed: canLogin ? _login : null,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
vertical: AppSpacing.sm,
|
||||
),
|
||||
child: Text(
|
||||
l10n.login,
|
||||
style: const TextStyle(fontSize: 16),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppSpacing.md),
|
||||
Center(
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Checkbox(
|
||||
value: _agreementChecked,
|
||||
onChanged: (value) {
|
||||
setState(() {
|
||||
_agreementChecked = value ?? false;
|
||||
});
|
||||
},
|
||||
),
|
||||
Flexible(
|
||||
child: RichText(
|
||||
text: TextSpan(
|
||||
style: Theme.of(context).textTheme.bodySmall,
|
||||
children: [
|
||||
TextSpan(text: l10n.agreementPrefix),
|
||||
TextSpan(
|
||||
text: l10n.privacyPolicy,
|
||||
style: TextStyle(
|
||||
color: colors.primary,
|
||||
decoration: TextDecoration.underline,
|
||||
),
|
||||
recognizer: TapGestureRecognizer()
|
||||
..onTap = () => _showPolicyDialog(
|
||||
l10n.privacyPolicy,
|
||||
l10n.privacyContent,
|
||||
),
|
||||
),
|
||||
TextSpan(text: l10n.agreementSeparator),
|
||||
TextSpan(
|
||||
text: l10n.termsOfService,
|
||||
style: TextStyle(
|
||||
color: colors.primary,
|
||||
decoration: TextDecoration.underline,
|
||||
),
|
||||
recognizer: TapGestureRecognizer()
|
||||
..onTap = () => _showPolicyDialog(
|
||||
l10n.termsOfService,
|
||||
l10n.termsContent,
|
||||
),
|
||||
),
|
||||
TextSpan(text: l10n.agreementAnd),
|
||||
TextSpan(
|
||||
text: l10n.disclaimer,
|
||||
style: TextStyle(
|
||||
color: colors.primary,
|
||||
decoration: TextDecoration.underline,
|
||||
),
|
||||
recognizer: TapGestureRecognizer()
|
||||
..onTap = () => _showPolicyDialog(
|
||||
l10n.disclaimer,
|
||||
l10n.disclaimerContent,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const Spacer(),
|
||||
Center(
|
||||
child: Text(
|
||||
l10n.icp,
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: colors.primary,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppSpacing.sm),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user