feat(mobile): UI-03 theme calibration and account pages (01-04)
Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
@@ -1,10 +1,12 @@
|
||||
/// 修改密码页(UI-01 §4.5 主题统一,P3 计划 Task 3 基础;入口在设置页)。
|
||||
/// 修改密码页(UI-03 页面 03 重设计,图01;入口在设置页)。
|
||||
///
|
||||
/// 当前/新/确认三字段;客户端校验(新密码 ≥8 位、两次一致)先行,
|
||||
/// 服务端 [ApiClient.changePassword] 成功后 204——当前会话被服务端保留,
|
||||
/// 返回标题 + 简短安全提示 + 当前/新/确认三字段 + Save password。
|
||||
/// 客户端校验(新密码 ≥8 位、两次一致)先行——新密码变更时若确认字段
|
||||
/// 已填写会即时复验(不匹配当场提示);服务端
|
||||
/// [ApiClient.changePassword] 成功后 204——当前会话被服务端保留,
|
||||
/// 无需重登录:toast 提示后直接 pop 回设置页。失败以内联 StateBadge
|
||||
/// (图标 + 文案 + 错误色)展示;AUTH_INVALID_CREDENTIALS 在本页语义为
|
||||
/// 「当前密码错误」(覆写通用映射)。
|
||||
/// 「当前密码错误」(覆写通用映射)。提交中防重复。
|
||||
library;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
@@ -33,14 +35,29 @@ class _PasswordChangePageState extends ConsumerState<PasswordChangePage> {
|
||||
final _newController = TextEditingController();
|
||||
final _confirmController = TextEditingController();
|
||||
|
||||
bool _obscureAll = true;
|
||||
bool _obscureOld = true;
|
||||
bool _obscureNew = true;
|
||||
bool _obscureConfirm = true;
|
||||
bool _submitting = false;
|
||||
|
||||
/// 最近一次提交失败文案(内联 StateBadge 展示;null = 无错误)。
|
||||
String? _errorText;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
// 新密码变更 → 确认字段已填写时即时复验(不匹配当场提示,不等提交)。
|
||||
_newController.addListener(_revalidateConfirm);
|
||||
}
|
||||
|
||||
void _revalidateConfirm() {
|
||||
if (_confirmController.text.isEmpty) return;
|
||||
_formKey.currentState?.validate();
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_newController.removeListener(_revalidateConfirm);
|
||||
_oldController.dispose();
|
||||
_newController.dispose();
|
||||
_confirmController.dispose();
|
||||
@@ -85,6 +102,7 @@ class _PasswordChangePageState extends ConsumerState<PasswordChangePage> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final l10n = AppLocalizations.of(context);
|
||||
final theme = Theme.of(context);
|
||||
return Scaffold(
|
||||
appBar: AppBar(title: Text(l10n.passwordChangeTitle)),
|
||||
body: Center(
|
||||
@@ -97,16 +115,30 @@ class _PasswordChangePageState extends ConsumerState<PasswordChangePage> {
|
||||
key: _formKey,
|
||||
autovalidateMode: AutovalidateMode.onUserInteraction,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Text(
|
||||
l10n.passwordSecurityHint,
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: kSpace16),
|
||||
TextFormField(
|
||||
controller: _oldController,
|
||||
obscureText: _obscureAll,
|
||||
obscureText: _obscureOld,
|
||||
enableSuggestions: false,
|
||||
autocorrect: false,
|
||||
textInputAction: TextInputAction.next,
|
||||
autofillHints: const [AutofillHints.password],
|
||||
decoration: InputDecoration(
|
||||
labelText: l10n.currentPassword,
|
||||
suffixIcon: _visibilityToggle(
|
||||
obscure: _obscureOld,
|
||||
onPressed: () => setState(
|
||||
() => _obscureOld = !_obscureOld,
|
||||
),
|
||||
),
|
||||
),
|
||||
validator: (value) => (value == null || value.isEmpty)
|
||||
? l10n.fieldRequired
|
||||
@@ -115,11 +147,19 @@ class _PasswordChangePageState extends ConsumerState<PasswordChangePage> {
|
||||
const SizedBox(height: kSpace16),
|
||||
TextFormField(
|
||||
controller: _newController,
|
||||
obscureText: _obscureAll,
|
||||
obscureText: _obscureNew,
|
||||
enableSuggestions: false,
|
||||
autocorrect: false,
|
||||
textInputAction: TextInputAction.next,
|
||||
autofillHints: const [AutofillHints.newPassword],
|
||||
decoration: InputDecoration(
|
||||
labelText: l10n.newPassword,
|
||||
suffixIcon: _visibilityToggle(
|
||||
obscure: _obscureNew,
|
||||
onPressed: () => setState(
|
||||
() => _obscureNew = !_obscureNew,
|
||||
),
|
||||
),
|
||||
),
|
||||
validator: (value) {
|
||||
if (value == null || value.isEmpty) {
|
||||
@@ -132,12 +172,20 @@ class _PasswordChangePageState extends ConsumerState<PasswordChangePage> {
|
||||
const SizedBox(height: kSpace16),
|
||||
TextFormField(
|
||||
controller: _confirmController,
|
||||
obscureText: _obscureAll,
|
||||
obscureText: _obscureConfirm,
|
||||
enableSuggestions: false,
|
||||
autocorrect: false,
|
||||
textInputAction: TextInputAction.done,
|
||||
autofillHints: const [AutofillHints.newPassword],
|
||||
onFieldSubmitted: (_) => _submitting ? null : _submit(),
|
||||
decoration: InputDecoration(
|
||||
labelText: l10n.confirmNewPassword,
|
||||
suffixIcon: _visibilityToggle(
|
||||
obscure: _obscureConfirm,
|
||||
onPressed: () => setState(
|
||||
() => _obscureConfirm = !_obscureConfirm,
|
||||
),
|
||||
),
|
||||
),
|
||||
validator: (value) {
|
||||
if (value == null || value.isEmpty) {
|
||||
@@ -149,27 +197,14 @@ class _PasswordChangePageState extends ConsumerState<PasswordChangePage> {
|
||||
return null;
|
||||
},
|
||||
),
|
||||
const SizedBox(height: kSpace8),
|
||||
Align(
|
||||
alignment: Alignment.centerRight,
|
||||
child: IconButton(
|
||||
onPressed: () =>
|
||||
setState(() => _obscureAll = !_obscureAll),
|
||||
icon: Icon(
|
||||
_obscureAll
|
||||
? Icons.visibility_outlined
|
||||
: Icons.visibility_off_outlined,
|
||||
),
|
||||
),
|
||||
),
|
||||
if (_errorText != null) ...[
|
||||
const SizedBox(height: kSpace8),
|
||||
const SizedBox(height: kSpace16),
|
||||
StateBadge(
|
||||
variant: BadgeVariant.error,
|
||||
label: _errorText!,
|
||||
),
|
||||
],
|
||||
const SizedBox(height: kSpace16),
|
||||
const SizedBox(height: kSpace24),
|
||||
FilledButton(
|
||||
onPressed: _submitting ? null : _submit,
|
||||
child: _submitting
|
||||
@@ -178,7 +213,7 @@ class _PasswordChangePageState extends ConsumerState<PasswordChangePage> {
|
||||
width: 20,
|
||||
child: CircularProgressIndicator(strokeWidth: 2),
|
||||
)
|
||||
: Text(l10n.passwordChangeTitle),
|
||||
: Text(l10n.passwordSave),
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -189,4 +224,22 @@ class _PasswordChangePageState extends ConsumerState<PasswordChangePage> {
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// 显示/隐藏切换(Tooltip 提供语义标签;触控目标 48)。
|
||||
Widget _visibilityToggle({
|
||||
required bool obscure,
|
||||
required VoidCallback onPressed,
|
||||
}) {
|
||||
final l10n = AppLocalizations.of(context);
|
||||
return Tooltip(
|
||||
message: obscure ? l10n.loginShowPassword : l10n.loginHidePassword,
|
||||
child: IconButton(
|
||||
onPressed: onPressed,
|
||||
icon: Icon(
|
||||
obscure ? Icons.visibility_outlined : Icons.visibility_off_outlined,
|
||||
size: 24,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user