feat(01-09): integrate enhanced auth components into auth pages

Updated login and signup pages:
- Replace inline error displays with AuthForm.formWideError
- Add onErrorDismissed callbacks for better UX
- Maintain consistent error handling across auth flows

Updated password reset form:
- Add form-wide error display matching AuthForm style
- Add field-specific error styling with icons
- Implement auto-clear error when user starts typing
- Add accessibility announcements for error clearing
- Maintain consistent visual hierarchy
This commit is contained in:
Dani B
2026-01-28 12:49:19 -05:00
parent 501951d3bb
commit ec1b7648db
3 changed files with 109 additions and 78 deletions

View File

@@ -98,42 +98,13 @@ class _LoginPageState extends ConsumerState<LoginPage> {
submitButtonText: 'Sign In',
isLoading: _isLoading,
autofocusEmail: true,
),
const SizedBox(height: 16),
// Error message display
if (_errorMessage != null) ...[
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.errorContainer,
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: Theme.of(context).colorScheme.error,
width: 1,
),
),
child: Row(
children: [
Icon(
Icons.error_outline,
size: 20,
color: Theme.of(context).colorScheme.error,
),
const SizedBox(width: 8),
Expanded(
child: Text(
_errorMessage!,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Theme.of(context).colorScheme.onErrorContainer,
),
),
),
],
),
),
const SizedBox(height: 16),
],
formWideError: _errorMessage,
onErrorDismissed: () {
setState(() {
_errorMessage = null;
});
},
),
// Forgot password link
Align(

View File

@@ -109,42 +109,13 @@ class _SignupPageState extends ConsumerState<SignupPage> {
submitButtonText: 'Create Account',
isLoading: _isLoading,
autofocusEmail: true,
),
const SizedBox(height: 16),
// Error message display
if (_errorMessage != null) ...[
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.errorContainer,
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: Theme.of(context).colorScheme.error,
width: 1,
),
),
child: Row(
children: [
Icon(
Icons.error_outline,
size: 20,
color: Theme.of(context).colorScheme.error,
),
const SizedBox(width: 8),
Expanded(
child: Text(
_errorMessage!,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Theme.of(context).colorScheme.onErrorContainer,
),
),
),
],
),
),
const SizedBox(height: 16),
],
formWideError: _errorMessage,
onErrorDismissed: () {
setState(() {
_errorMessage = null;
});
},
),
// Terms and conditions checkbox
_buildTermsCheckbox(),