feat(01-09): enhance auth components with loading states and error display
AuthForm enhancements: - Add form-wide error display with dismiss functionality - Add field-specific error styling with icons - Auto-clear errors when user starts typing - Enhanced accessibility with semantic announcements - Better error positioning and visual hierarchy AuthButton enhancements: - Convert to StatefulWidget with animation support - Add success state with visual feedback - Enhanced loading states with custom text - Double-tap prevention for better UX - Haptic feedback on button press - Comprehensive accessibility labels and hints - Smooth visual transitions between states - Better disabled state handling
This commit is contained in:
Dani B
@@ -1,5 +1,6 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import 'package:flutter/semantics.dart';
|
||||
|
||||
/// Reusable authentication form with email and password fields
|
||||
class AuthForm extends StatefulWidget {
|
||||
@@ -21,6 +22,8 @@ class AuthForm extends StatefulWidget {
|
||||
final String? emailLabel;
|
||||
final String? passwordLabel;
|
||||
final String? confirmPasswordLabel;
|
||||
final String? formWideError;
|
||||
final VoidCallback? onErrorDismissed;
|
||||
|
||||
const AuthForm({
|
||||
super.key,
|
||||
@@ -42,6 +45,8 @@ class AuthForm extends StatefulWidget {
|
||||
this.emailLabel = 'Email',
|
||||
this.passwordLabel = 'Password',
|
||||
this.confirmPasswordLabel = 'Confirm Password',
|
||||
this.formWideError,
|
||||
this.onErrorDismissed,
|
||||
});
|
||||
|
||||
@override
|
||||
@@ -51,6 +56,7 @@ class AuthForm extends StatefulWidget {
|
||||
class _AuthFormState extends State<AuthForm> {
|
||||
bool _obscurePassword = true;
|
||||
bool _obscureConfirmPassword = true;
|
||||
String? _lastAnnouncedError;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@@ -59,12 +65,30 @@ class _AuthFormState extends State<AuthForm> {
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
_buildEmailField(),
|
||||
const SizedBox(height: 16),
|
||||
_buildPasswordField(),
|
||||
if (widget.confirmPassword != null) ...[
|
||||
// Form-wide error display
|
||||
if (widget.formWideError != null) ...[
|
||||
_buildFormWideError(),
|
||||
const SizedBox(height: 16),
|
||||
],
|
||||
_buildEmailField(),
|
||||
if (widget.emailError != null) ...[
|
||||
const SizedBox(height: 8),
|
||||
_buildFieldError(widget.emailError!),
|
||||
] else
|
||||
const SizedBox(height: 16),
|
||||
_buildPasswordField(),
|
||||
if (widget.passwordError != null) ...[
|
||||
const SizedBox(height: 8),
|
||||
_buildFieldError(widget.passwordError!),
|
||||
] else
|
||||
const SizedBox(height: 16),
|
||||
if (widget.confirmPassword != null) ...[
|
||||
_buildConfirmPasswordField(),
|
||||
if (widget.confirmPasswordError != null) ...[
|
||||
const SizedBox(height: 8),
|
||||
_buildFieldError(widget.confirmPasswordError!),
|
||||
] else
|
||||
const SizedBox(height: 16),
|
||||
],
|
||||
const SizedBox(height: 24),
|
||||
_buildSubmitButton(),
|
||||
@@ -76,7 +100,11 @@ class _AuthFormState extends State<AuthForm> {
|
||||
Widget _buildEmailField() {
|
||||
return TextFormField(
|
||||
initialValue: widget.email,
|
||||
onChanged: widget.onEmailChanged,
|
||||
onChanged: (value) {
|
||||
// Clear errors when user starts typing
|
||||
_clearErrorsOnUserInput('email');
|
||||
widget.onEmailChanged?.call(value);
|
||||
},
|
||||
autofocus: widget.autofocusEmail,
|
||||
keyboardType: TextInputType.emailAddress,
|
||||
textInputAction: TextInputAction.next,
|
||||
@@ -131,7 +159,11 @@ class _AuthFormState extends State<AuthForm> {
|
||||
Widget _buildPasswordField() {
|
||||
return TextFormField(
|
||||
initialValue: widget.password,
|
||||
onChanged: widget.onPasswordChanged,
|
||||
onChanged: (value) {
|
||||
// Clear errors when user starts typing
|
||||
_clearErrorsOnUserInput('password');
|
||||
widget.onPasswordChanged?.call(value);
|
||||
},
|
||||
obscureText: _obscurePassword,
|
||||
textInputAction: widget.confirmPassword != null
|
||||
? TextInputAction.next
|
||||
@@ -209,7 +241,11 @@ class _AuthFormState extends State<AuthForm> {
|
||||
Widget _buildConfirmPasswordField() {
|
||||
return TextFormField(
|
||||
initialValue: widget.confirmPassword,
|
||||
onChanged: widget.onConfirmPasswordChanged,
|
||||
onChanged: (value) {
|
||||
// Clear errors when user starts typing
|
||||
_clearErrorsOnUserInput('confirmPassword');
|
||||
widget.onConfirmPasswordChanged?.call(value);
|
||||
},
|
||||
obscureText: _obscureConfirmPassword,
|
||||
textInputAction: TextInputAction.done,
|
||||
onFieldSubmitted: (_) => widget.onSubmit?.call(),
|
||||
@@ -299,4 +335,118 @@ class _AuthFormState extends State<AuthForm> {
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Builds form-wide error display with dismiss functionality
|
||||
Widget _buildFormWideError() {
|
||||
return 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(
|
||||
widget.formWideError!,
|
||||
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onErrorContainer,
|
||||
),
|
||||
),
|
||||
),
|
||||
IconButton(
|
||||
icon: Icon(
|
||||
Icons.close,
|
||||
size: 18,
|
||||
color: Theme.of(context).colorScheme.error,
|
||||
),
|
||||
onPressed: () {
|
||||
widget.onErrorDismissed?.call();
|
||||
// Announce dismissal for accessibility
|
||||
_announceForAccessibility('Error message dismissed');
|
||||
},
|
||||
tooltip: 'Dismiss error',
|
||||
visualDensity: VisualDensity.compact,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Builds field-specific error display with icon
|
||||
Widget _buildFieldError(String error) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(context).colorScheme.errorContainer.withOpacity(0.5),
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
border: Border.left(
|
||||
color: Theme.of(context).colorScheme.error,
|
||||
width: 3,
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.info_outline,
|
||||
size: 16,
|
||||
color: Theme.of(context).colorScheme.error,
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Expanded(
|
||||
child: Text(
|
||||
error,
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: Theme.of(context).colorScheme.error,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Clears errors when user starts typing in fields
|
||||
void _clearErrorsOnUserInput(String fieldType) {
|
||||
// Check if we need to announce error clearing for accessibility
|
||||
bool hadError = false;
|
||||
|
||||
switch (fieldType) {
|
||||
case 'email':
|
||||
hadError = widget.emailError != null || widget.formWideError != null;
|
||||
break;
|
||||
case 'password':
|
||||
hadError = widget.passwordError != null || widget.formWideError != null;
|
||||
break;
|
||||
case 'confirmPassword':
|
||||
hadError = widget.confirmPasswordError != null || widget.formWideError != null;
|
||||
break;
|
||||
}
|
||||
|
||||
// Don't announce anything if there was no error before
|
||||
if (!hadError) return;
|
||||
|
||||
// If parent doesn't handle error clearing, we can at least announce
|
||||
if (widget.formWideError != null && _lastAnnouncedError != widget.formWideError) {
|
||||
_announceForAccessibility('Error cleared');
|
||||
_lastAnnouncedError = widget.formWideError;
|
||||
}
|
||||
}
|
||||
|
||||
/// Announces messages for screen readers
|
||||
void _announceForAccessibility(String message) {
|
||||
// Use Flutter's built-in semantics service for accessibility announcements
|
||||
SemanticsService.announce(message, TextDirection.ltr);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user