519 lines
19 KiB
Dart
519 lines
19 KiB
Dart
import 'package:flutter/material.dart';
|
||
import 'package:flutter/services.dart';
|
||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||
import '../../../core/theme/app_colors.dart';
|
||
import '../../../core/theme/app_text_styles.dart';
|
||
import '../../../core/theme/app_dimensions.dart';
|
||
import '../../../core/widgets/custom_button.dart';
|
||
import '../../../core/widgets/custom_text_field.dart';
|
||
import '../../../core/routes/app_routes.dart';
|
||
import '../providers/auth_provider.dart';
|
||
|
||
/// 注册页面
|
||
class RegisterScreen extends ConsumerStatefulWidget {
|
||
const RegisterScreen({super.key});
|
||
|
||
@override
|
||
ConsumerState<RegisterScreen> createState() => _RegisterScreenState();
|
||
}
|
||
|
||
class _RegisterScreenState extends ConsumerState<RegisterScreen> {
|
||
final _formKey = GlobalKey<FormState>();
|
||
final _usernameController = TextEditingController();
|
||
final _nicknameController = TextEditingController();
|
||
final _emailController = TextEditingController();
|
||
final _passwordController = TextEditingController();
|
||
final _confirmPasswordController = TextEditingController();
|
||
|
||
bool _obscurePassword = true;
|
||
bool _obscureConfirmPassword = true;
|
||
bool _agreeToTerms = false;
|
||
bool _isLoading = false;
|
||
|
||
// 密码强度提示
|
||
bool _hasMinLength = false;
|
||
bool _hasNumber = false;
|
||
bool _hasLowerCase = false;
|
||
bool _hasUpperCase = false;
|
||
bool _hasSpecialChar = false;
|
||
|
||
@override
|
||
void initState() {
|
||
super.initState();
|
||
// 监听密码输入，实时验证
|
||
_passwordController.addListener(_validatePasswordStrength);
|
||
}
|
||
|
||
/// 验证密码强度
|
||
void _validatePasswordStrength() {
|
||
final password = _passwordController.text;
|
||
setState(() {
|
||
_hasMinLength = password.length >= 8;
|
||
_hasNumber = RegExp(r'[0-9]').hasMatch(password);
|
||
_hasLowerCase = RegExp(r'[a-z]').hasMatch(password);
|
||
_hasUpperCase = RegExp(r'[A-Z]').hasMatch(password);
|
||
_hasSpecialChar = RegExp(r'[!@#\$%^&*()_+\-=\[\]{};:"\\|,.<>\/?]').hasMatch(password);
|
||
});
|
||
}
|
||
|
||
@override
|
||
void dispose() {
|
||
_usernameController.dispose();
|
||
_nicknameController.dispose();
|
||
_emailController.dispose();
|
||
_passwordController.dispose();
|
||
_confirmPasswordController.dispose();
|
||
super.dispose();
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Scaffold(
|
||
backgroundColor: AppColors.background,
|
||
appBar: AppBar(
|
||
backgroundColor: Colors.transparent,
|
||
elevation: 0,
|
||
leading: IconButton(
|
||
icon: const Icon(Icons.arrow_back_ios, color: AppColors.onSurface),
|
||
onPressed: () => Navigator.of(context).pop(),
|
||
),
|
||
),
|
||
body: SafeArea(
|
||
child: SingleChildScrollView(
|
||
padding: const EdgeInsets.all(AppDimensions.pagePadding),
|
||
child: Form(
|
||
key: _formKey,
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
// 标题
|
||
Text(
|
||
'创建账户',
|
||
style: AppTextStyles.headlineLarge.copyWith(
|
||
color: AppColors.onSurface,
|
||
fontWeight: FontWeight.bold,
|
||
),
|
||
),
|
||
const SizedBox(height: AppDimensions.spacingSm),
|
||
Text(
|
||
'加入AI英语学习平台，开启智能学习之旅',
|
||
style: AppTextStyles.bodyMedium.copyWith(
|
||
color: AppColors.onSurfaceVariant,
|
||
),
|
||
),
|
||
const SizedBox(height: AppDimensions.spacingXl),
|
||
|
||
// 用户名输入框
|
||
CustomTextField(
|
||
controller: _usernameController,
|
||
labelText: '用户名',
|
||
hintText: '请输入用户名',
|
||
prefixIcon: Icons.person_outline,
|
||
validator: (value) {
|
||
if (value == null || value.isEmpty) {
|
||
return '请输入用户名';
|
||
}
|
||
if (value.length < 3) {
|
||
return '用户名至少3个字符';
|
||
}
|
||
if (value.length > 20) {
|
||
return '用户名不能超过20个字符';
|
||
}
|
||
if (!RegExp(r'^[a-zA-Z0-9_]+$').hasMatch(value)) {
|
||
return '用户名只能包含字母、数字和下划线';
|
||
}
|
||
return null;
|
||
},
|
||
),
|
||
const SizedBox(height: AppDimensions.spacingMd),
|
||
|
||
// 昵称输入框
|
||
CustomTextField(
|
||
controller: _nicknameController,
|
||
labelText: '昵称',
|
||
hintText: '请输入昵称',
|
||
prefixIcon: Icons.badge_outlined,
|
||
validator: (value) {
|
||
if (value == null || value.isEmpty) {
|
||
return '请输入昵称';
|
||
}
|
||
if (value.length < 2) {
|
||
return '昵称至少2个字符';
|
||
}
|
||
if (value.length > 20) {
|
||
return '昵称不能超过20个字符';
|
||
}
|
||
return null;
|
||
},
|
||
),
|
||
const SizedBox(height: AppDimensions.spacingMd),
|
||
|
||
// 邮箱输入框
|
||
CustomTextField(
|
||
controller: _emailController,
|
||
labelText: '邮箱',
|
||
hintText: '请输入邮箱地址',
|
||
prefixIcon: Icons.email_outlined,
|
||
keyboardType: TextInputType.emailAddress,
|
||
validator: (value) {
|
||
if (value == null || value.isEmpty) {
|
||
return '请输入邮箱地址';
|
||
}
|
||
if (!RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$').hasMatch(value)) {
|
||
return '请输入有效的邮箱地址';
|
||
}
|
||
return null;
|
||
},
|
||
),
|
||
const SizedBox(height: AppDimensions.spacingMd),
|
||
|
||
// 密码输入框
|
||
CustomTextField(
|
||
controller: _passwordController,
|
||
labelText: '密码',
|
||
hintText: '请输入密码',
|
||
prefixIcon: Icons.lock_outline,
|
||
obscureText: _obscurePassword,
|
||
suffixIcon: IconButton(
|
||
icon: Icon(
|
||
_obscurePassword ? Icons.visibility_off : Icons.visibility,
|
||
color: AppColors.onSurfaceVariant,
|
||
),
|
||
onPressed: () {
|
||
setState(() {
|
||
_obscurePassword = !_obscurePassword;
|
||
});
|
||
},
|
||
),
|
||
validator: (value) {
|
||
if (value == null || value.isEmpty) {
|
||
return '请输入密码';
|
||
}
|
||
if (value.length < 8) {
|
||
return '密码至少8个字符';
|
||
}
|
||
// 至少包含一个数字
|
||
if (!RegExp(r'[0-9]').hasMatch(value)) {
|
||
return '密码必须包含数字';
|
||
}
|
||
// 至少包含一个小写字母
|
||
if (!RegExp(r'[a-z]').hasMatch(value)) {
|
||
return '密码必须包含小写字母';
|
||
}
|
||
// 至少包含一个大写字母
|
||
if (!RegExp(r'[A-Z]').hasMatch(value)) {
|
||
return '密码必须包含大写字母';
|
||
}
|
||
// 至少包含一个特殊字符
|
||
if (!RegExp(r'[!@#\$%^&*()_+\-=\[\]{};:"\\|,.<>\/?]').hasMatch(value)) {
|
||
return '密码必须包含特殊字符 (!@#\$%^&*等)';
|
||
}
|
||
return null;
|
||
},
|
||
),
|
||
const SizedBox(height: 8),
|
||
// 密码强度提示
|
||
Container(
|
||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||
decoration: BoxDecoration(
|
||
color: Colors.grey[50],
|
||
borderRadius: BorderRadius.circular(8),
|
||
border: Border.all(color: Colors.grey[200]!),
|
||
),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Text(
|
||
'密码必须包含：',
|
||
style: AppTextStyles.bodySmall.copyWith(
|
||
fontWeight: FontWeight.w600,
|
||
color: Colors.grey[700],
|
||
),
|
||
),
|
||
const SizedBox(height: 8),
|
||
_buildPasswordRequirement('至少8个字符', _hasMinLength),
|
||
_buildPasswordRequirement('至少一个数字', _hasNumber),
|
||
_buildPasswordRequirement('至少一个小写字母', _hasLowerCase),
|
||
_buildPasswordRequirement('至少一个大写字母', _hasUpperCase),
|
||
_buildPasswordRequirement('至少一个特殊字符 (!@#\$%^&*等)', _hasSpecialChar),
|
||
],
|
||
),
|
||
),
|
||
const SizedBox(height: AppDimensions.spacingMd),
|
||
|
||
// 确认密码输入框
|
||
CustomTextField(
|
||
controller: _confirmPasswordController,
|
||
labelText: '确认密码',
|
||
hintText: '请再次输入密码',
|
||
prefixIcon: Icons.lock_outline,
|
||
obscureText: _obscureConfirmPassword,
|
||
suffixIcon: IconButton(
|
||
icon: Icon(
|
||
_obscureConfirmPassword ? Icons.visibility_off : Icons.visibility,
|
||
color: AppColors.onSurfaceVariant,
|
||
),
|
||
onPressed: () {
|
||
setState(() {
|
||
_obscureConfirmPassword = !_obscureConfirmPassword;
|
||
});
|
||
},
|
||
),
|
||
validator: (value) {
|
||
if (value == null || value.isEmpty) {
|
||
return '请确认密码';
|
||
}
|
||
if (value != _passwordController.text) {
|
||
return '两次输入的密码不一致';
|
||
}
|
||
return null;
|
||
},
|
||
),
|
||
const SizedBox(height: AppDimensions.spacingMd),
|
||
|
||
// 同意条款
|
||
Row(
|
||
children: [
|
||
Checkbox(
|
||
value: _agreeToTerms,
|
||
onChanged: (value) {
|
||
setState(() {
|
||
_agreeToTerms = value ?? false;
|
||
});
|
||
},
|
||
activeColor: AppColors.primary,
|
||
),
|
||
Expanded(
|
||
child: GestureDetector(
|
||
onTap: () {
|
||
setState(() {
|
||
_agreeToTerms = !_agreeToTerms;
|
||
});
|
||
},
|
||
child: RichText(
|
||
text: TextSpan(
|
||
style: AppTextStyles.bodySmall.copyWith(
|
||
color: AppColors.onSurfaceVariant,
|
||
),
|
||
children: [
|
||
const TextSpan(text: '我已阅读并同意'),
|
||
TextSpan(
|
||
text: '《用户协议》',
|
||
style: TextStyle(
|
||
color: AppColors.primary,
|
||
decoration: TextDecoration.underline,
|
||
),
|
||
),
|
||
const TextSpan(text: '和'),
|
||
TextSpan(
|
||
text: '《隐私政策》',
|
||
style: TextStyle(
|
||
color: AppColors.primary,
|
||
decoration: TextDecoration.underline,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
const SizedBox(height: AppDimensions.spacingLg),
|
||
|
||
// 注册按钮
|
||
CustomButton(
|
||
text: '注册',
|
||
onPressed: _agreeToTerms ? _handleRegister : null,
|
||
isLoading: _isLoading,
|
||
width: double.infinity,
|
||
),
|
||
const SizedBox(height: AppDimensions.spacingMd),
|
||
|
||
// 分割线
|
||
Row(
|
||
children: [
|
||
const Expanded(child: Divider(color: AppColors.divider)),
|
||
Padding(
|
||
padding: const EdgeInsets.symmetric(horizontal: AppDimensions.buttonPadding),
|
||
child: Text(
|
||
'或',
|
||
style: AppTextStyles.bodySmall.copyWith(
|
||
color: AppColors.onSurfaceVariant,
|
||
),
|
||
),
|
||
),
|
||
const Expanded(child: Divider(color: AppColors.divider)),
|
||
],
|
||
),
|
||
const SizedBox(height: AppDimensions.spacingMd),
|
||
|
||
// 第三方注册
|
||
Row(
|
||
children: [
|
||
Expanded(
|
||
child: CustomButton(
|
||
text: '微信注册',
|
||
onPressed: () => _handleSocialRegister('wechat'),
|
||
backgroundColor: const Color(0xFF07C160),
|
||
textColor: Colors.white,
|
||
icon: Icons.wechat,
|
||
),
|
||
),
|
||
const SizedBox(width: AppDimensions.spacingMd),
|
||
Expanded(
|
||
child: CustomButton(
|
||
text: 'QQ注册',
|
||
onPressed: () => _handleSocialRegister('qq'),
|
||
backgroundColor: const Color(0xFF12B7F5),
|
||
textColor: Colors.white,
|
||
icon: Icons.chat,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
const SizedBox(height: AppDimensions.spacingLg),
|
||
|
||
// 登录链接
|
||
Center(
|
||
child: GestureDetector(
|
||
onTap: () {
|
||
Navigator.of(context).pop();
|
||
},
|
||
child: RichText(
|
||
text: TextSpan(
|
||
style: AppTextStyles.bodyMedium.copyWith(
|
||
color: AppColors.onSurfaceVariant,
|
||
),
|
||
children: [
|
||
const TextSpan(text: '已有账户？'),
|
||
TextSpan(
|
||
text: '立即登录',
|
||
style: TextStyle(
|
||
color: AppColors.primary,
|
||
fontWeight: FontWeight.w600,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
/// 构建密码要求项
|
||
Widget _buildPasswordRequirement(String text, bool isMet) {
|
||
return Padding(
|
||
padding: const EdgeInsets.only(bottom: 4),
|
||
child: Row(
|
||
children: [
|
||
Icon(
|
||
isMet ? Icons.check_circle : Icons.circle_outlined,
|
||
size: 16,
|
||
color: isMet ? AppColors.success : Colors.grey[400],
|
||
),
|
||
const SizedBox(width: 8),
|
||
Text(
|
||
text,
|
||
style: AppTextStyles.bodySmall.copyWith(
|
||
color: isMet ? AppColors.success : Colors.grey[600],
|
||
fontSize: 13,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
/// 处理注册
|
||
Future<void> _handleRegister() async {
|
||
if (!_formKey.currentState!.validate()) {
|
||
return;
|
||
}
|
||
|
||
if (!_agreeToTerms) {
|
||
_showSnackBar('请先同意用户协议和隐私政策');
|
||
return;
|
||
}
|
||
|
||
setState(() {
|
||
_isLoading = true;
|
||
});
|
||
|
||
try {
|
||
await ref.read(authProvider.notifier).register(
|
||
username: _usernameController.text.trim(),
|
||
email: _emailController.text.trim(),
|
||
password: _passwordController.text,
|
||
nickname: _nicknameController.text.trim(),
|
||
);
|
||
|
||
if (mounted) {
|
||
_showSnackBar('注册成功，正在自动登录...', isSuccess: true);
|
||
|
||
// 注册成功后自动登录
|
||
try {
|
||
await ref.read(authProvider.notifier).login(
|
||
account: _usernameController.text.trim(),
|
||
password: _passwordController.text,
|
||
);
|
||
|
||
if (mounted) {
|
||
// 登录成功，跳转到首页
|
||
Navigator.of(context).pushReplacementNamed(Routes.home);
|
||
}
|
||
} catch (loginError) {
|
||
if (mounted) {
|
||
// 自动登录失败，跳转到登录页
|
||
_showSnackBar('注册成功，请登录', isSuccess: true);
|
||
Future.delayed(const Duration(milliseconds: 1500), () {
|
||
if (mounted) {
|
||
Navigator.of(context).pushReplacementNamed(Routes.login);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
} catch (e) {
|
||
if (mounted) {
|
||
_showSnackBar(e.toString());
|
||
}
|
||
} finally {
|
||
if (mounted) {
|
||
setState(() {
|
||
_isLoading = false;
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
/// 处理第三方注册
|
||
Future<void> _handleSocialRegister(String provider) async {
|
||
try {
|
||
// TODO: 实现第三方注册逻辑
|
||
_showSnackBar('第三方注册功能即将上线');
|
||
} catch (e) {
|
||
_showSnackBar(e.toString());
|
||
}
|
||
}
|
||
|
||
/// 显示提示信息
|
||
void _showSnackBar(String message, {bool isSuccess = false}) {
|
||
ScaffoldMessenger.of(context).showSnackBar(
|
||
SnackBar(
|
||
content: Text(message),
|
||
backgroundColor: isSuccess ? AppColors.success : AppColors.error,
|
||
behavior: SnackBarBehavior.floating,
|
||
shape: RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.circular(8.0),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
} |