feat(01-03): create reusable auth components
- AuthButton widget with loading states and variants (primary, secondary, outline) - AuthForm widget with email/password fields and real-time validation - Password visibility toggle functionality - Responsive design with proper accessibility labels - Form validation for email format and password strength Components ready for use in login/signup pages.
This commit is contained in:
Dani B
@@ -0,0 +1,120 @@
|
|||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
/// Custom authentication button with loading states and variants
|
||||||
|
class AuthButton extends StatelessWidget {
|
||||||
|
final String text;
|
||||||
|
final VoidCallback? onPressed;
|
||||||
|
final bool isLoading;
|
||||||
|
final AuthButtonVariant variant;
|
||||||
|
final bool fullWidth;
|
||||||
|
final Widget? icon;
|
||||||
|
|
||||||
|
const AuthButton({
|
||||||
|
super.key,
|
||||||
|
required this.text,
|
||||||
|
this.onPressed,
|
||||||
|
this.isLoading = false,
|
||||||
|
this.variant = AuthButtonVariant.primary,
|
||||||
|
this.fullWidth = true,
|
||||||
|
this.icon,
|
||||||
|
});
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
final theme = Theme.of(context);
|
||||||
|
final colors = _getColors(theme);
|
||||||
|
|
||||||
|
return SizedBox(
|
||||||
|
width: fullWidth ? double.infinity : null,
|
||||||
|
height: 48,
|
||||||
|
child: ElevatedButton(
|
||||||
|
onPressed: isLoading ? null : onPressed,
|
||||||
|
style: ElevatedButton.styleFrom(
|
||||||
|
backgroundColor: colors.background,
|
||||||
|
foregroundColor: colors.foreground,
|
||||||
|
disabledBackgroundColor: colors.disabledBackground,
|
||||||
|
disabledForegroundColor: colors.disabledForeground,
|
||||||
|
elevation: variant == AuthButtonVariant.primary ? 2 : 0,
|
||||||
|
shape: RoundedRectangleBorder(
|
||||||
|
borderRadius: BorderRadius.circular(8),
|
||||||
|
side: variant == AuthButtonVariant.outline
|
||||||
|
? BorderSide(color: colors.background)
|
||||||
|
: BorderSide.none,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
child: isLoading
|
||||||
|
? SizedBox(
|
||||||
|
height: 20,
|
||||||
|
width: 20,
|
||||||
|
child: CircularProgressIndicator(
|
||||||
|
strokeWidth: 2,
|
||||||
|
valueColor: AlwaysStoppedAnimation<Color>(colors.foreground),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
: Row(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
|
children: [
|
||||||
|
if (icon != null) ...[
|
||||||
|
icon!,
|
||||||
|
const SizedBox(width: 8),
|
||||||
|
],
|
||||||
|
Text(
|
||||||
|
text,
|
||||||
|
style: theme.textTheme.labelLarge?.copyWith(
|
||||||
|
fontWeight: FontWeight.w600,
|
||||||
|
color: colors.foreground,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
_ButtonColors _getColors(ThemeData theme) {
|
||||||
|
switch (variant) {
|
||||||
|
case AuthButtonVariant.primary:
|
||||||
|
return _ButtonColors(
|
||||||
|
background: theme.colorScheme.primary,
|
||||||
|
foreground: theme.colorScheme.onPrimary,
|
||||||
|
disabledBackground: theme.colorScheme.primary.withOpacity(0.12),
|
||||||
|
disabledForeground: theme.colorScheme.onPrimary.withOpacity(0.38),
|
||||||
|
);
|
||||||
|
case AuthButtonVariant.secondary:
|
||||||
|
return _ButtonColors(
|
||||||
|
background: theme.colorScheme.secondary,
|
||||||
|
foreground: theme.colorScheme.onSecondary,
|
||||||
|
disabledBackground: theme.colorScheme.secondary.withOpacity(0.12),
|
||||||
|
disabledForeground: theme.colorScheme.onSecondary.withOpacity(0.38),
|
||||||
|
);
|
||||||
|
case AuthButtonVariant.outline:
|
||||||
|
return _ButtonColors(
|
||||||
|
background: Colors.transparent,
|
||||||
|
foreground: theme.colorScheme.primary,
|
||||||
|
disabledBackground: Colors.transparent,
|
||||||
|
disabledForeground: theme.colorScheme.primary.withOpacity(0.38),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
enum AuthButtonVariant {
|
||||||
|
primary,
|
||||||
|
secondary,
|
||||||
|
outline,
|
||||||
|
}
|
||||||
|
|
||||||
|
class _ButtonColors {
|
||||||
|
final Color background;
|
||||||
|
final Color foreground;
|
||||||
|
final Color disabledBackground;
|
||||||
|
final Color disabledForeground;
|
||||||
|
|
||||||
|
const _ButtonColors({
|
||||||
|
required this.background,
|
||||||
|
required this.foreground,
|
||||||
|
required this.disabledBackground,
|
||||||
|
required this.disabledForeground,
|
||||||
|
});
|
||||||
|
}
|
||||||
302
lib/features/authentication/presentation/widgets/auth_form.dart
Normal file
302
lib/features/authentication/presentation/widgets/auth_form.dart
Normal file
@@ -0,0 +1,302 @@
|
|||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:flutter/services.dart';
|
||||||
|
|
||||||
|
/// Reusable authentication form with email and password fields
|
||||||
|
class AuthForm extends StatefulWidget {
|
||||||
|
final GlobalKey<FormState> formKey;
|
||||||
|
final String email;
|
||||||
|
final ValueChanged<String>? onEmailChanged;
|
||||||
|
final String? emailError;
|
||||||
|
final String password;
|
||||||
|
final ValueChanged<String>? onPasswordChanged;
|
||||||
|
final String? passwordError;
|
||||||
|
final VoidCallback? onSubmit;
|
||||||
|
final String submitButtonText;
|
||||||
|
final bool isLoading;
|
||||||
|
final bool showPasswordToggle;
|
||||||
|
final String? confirmPassword;
|
||||||
|
final ValueChanged<String>? onConfirmPasswordChanged;
|
||||||
|
final String? confirmPasswordError;
|
||||||
|
final bool autofocusEmail;
|
||||||
|
final String? emailLabel;
|
||||||
|
final String? passwordLabel;
|
||||||
|
final String? confirmPasswordLabel;
|
||||||
|
|
||||||
|
const AuthForm({
|
||||||
|
super.key,
|
||||||
|
required this.formKey,
|
||||||
|
this.email = '',
|
||||||
|
this.onEmailChanged,
|
||||||
|
this.emailError,
|
||||||
|
this.password = '',
|
||||||
|
this.onPasswordChanged,
|
||||||
|
this.passwordError,
|
||||||
|
this.onSubmit,
|
||||||
|
this.submitButtonText = 'Submit',
|
||||||
|
this.isLoading = false,
|
||||||
|
this.showPasswordToggle = true,
|
||||||
|
this.confirmPassword,
|
||||||
|
this.onConfirmPasswordChanged,
|
||||||
|
this.confirmPasswordError,
|
||||||
|
this.autofocusEmail = true,
|
||||||
|
this.emailLabel = 'Email',
|
||||||
|
this.passwordLabel = 'Password',
|
||||||
|
this.confirmPasswordLabel = 'Confirm Password',
|
||||||
|
});
|
||||||
|
|
||||||
|
@override
|
||||||
|
State<AuthForm> createState() => _AuthFormState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _AuthFormState extends State<AuthForm> {
|
||||||
|
bool _obscurePassword = true;
|
||||||
|
bool _obscureConfirmPassword = true;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Form(
|
||||||
|
key: widget.formKey,
|
||||||
|
child: Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||||
|
children: [
|
||||||
|
_buildEmailField(),
|
||||||
|
const SizedBox(height: 16),
|
||||||
|
_buildPasswordField(),
|
||||||
|
if (widget.confirmPassword != null) ...[
|
||||||
|
const SizedBox(height: 16),
|
||||||
|
_buildConfirmPasswordField(),
|
||||||
|
],
|
||||||
|
const SizedBox(height: 24),
|
||||||
|
_buildSubmitButton(),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget _buildEmailField() {
|
||||||
|
return TextFormField(
|
||||||
|
initialValue: widget.email,
|
||||||
|
onChanged: widget.onEmailChanged,
|
||||||
|
autofocus: widget.autofocusEmail,
|
||||||
|
keyboardType: TextInputType.emailAddress,
|
||||||
|
textInputAction: TextInputAction.next,
|
||||||
|
decoration: InputDecoration(
|
||||||
|
labelText: widget.emailLabel,
|
||||||
|
hintText: 'Enter your email address',
|
||||||
|
prefixIcon: const Icon(Icons.email_outlined),
|
||||||
|
errorText: widget.emailError,
|
||||||
|
border: OutlineInputBorder(
|
||||||
|
borderRadius: BorderRadius.circular(8),
|
||||||
|
),
|
||||||
|
enabledBorder: OutlineInputBorder(
|
||||||
|
borderRadius: BorderRadius.circular(8),
|
||||||
|
borderSide: BorderSide(
|
||||||
|
color: widget.emailError != null
|
||||||
|
? Theme.of(context).colorScheme.error
|
||||||
|
: Theme.of(context).colorScheme.outline,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
focusedBorder: OutlineInputBorder(
|
||||||
|
borderRadius: BorderRadius.circular(8),
|
||||||
|
borderSide: BorderSide(
|
||||||
|
color: widget.emailError != null
|
||||||
|
? Theme.of(context).colorScheme.error
|
||||||
|
: Theme.of(context).colorScheme.primary,
|
||||||
|
width: 2,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
validator: (value) {
|
||||||
|
if (value == null || value.trim().isEmpty) {
|
||||||
|
return 'Email is required';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Basic email validation regex
|
||||||
|
final emailRegex = RegExp(
|
||||||
|
r'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$',
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!emailRegex.hasMatch(value.trim())) {
|
||||||
|
return 'Please enter a valid email address';
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
inputFormatters: [
|
||||||
|
FilteringTextInputFormatter.deny(RegExp(r'\s')), // Prevent spaces
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget _buildPasswordField() {
|
||||||
|
return TextFormField(
|
||||||
|
initialValue: widget.password,
|
||||||
|
onChanged: widget.onPasswordChanged,
|
||||||
|
obscureText: _obscurePassword,
|
||||||
|
textInputAction: widget.confirmPassword != null
|
||||||
|
? TextInputAction.next
|
||||||
|
: TextInputAction.done,
|
||||||
|
onFieldSubmitted: (_) {
|
||||||
|
if (widget.confirmPassword != null) {
|
||||||
|
// Move focus to confirm password field
|
||||||
|
FocusScope.of(context).nextFocus();
|
||||||
|
} else {
|
||||||
|
// Submit form
|
||||||
|
widget.onSubmit?.call();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
decoration: InputDecoration(
|
||||||
|
labelText: widget.passwordLabel,
|
||||||
|
hintText: 'Enter your password',
|
||||||
|
prefixIcon: const Icon(Icons.lock_outline),
|
||||||
|
suffixIcon: widget.showPasswordToggle
|
||||||
|
? IconButton(
|
||||||
|
icon: Icon(
|
||||||
|
_obscurePassword ? Icons.visibility_off : Icons.visibility,
|
||||||
|
),
|
||||||
|
onPressed: () {
|
||||||
|
setState(() {
|
||||||
|
_obscurePassword = !_obscurePassword;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
tooltip: _obscurePassword ? 'Show password' : 'Hide password',
|
||||||
|
)
|
||||||
|
: null,
|
||||||
|
errorText: widget.passwordError,
|
||||||
|
border: OutlineInputBorder(
|
||||||
|
borderRadius: BorderRadius.circular(8),
|
||||||
|
),
|
||||||
|
enabledBorder: OutlineInputBorder(
|
||||||
|
borderRadius: BorderRadius.circular(8),
|
||||||
|
borderSide: BorderSide(
|
||||||
|
color: widget.passwordError != null
|
||||||
|
? Theme.of(context).colorScheme.error
|
||||||
|
: Theme.of(context).colorScheme.outline,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
focusedBorder: OutlineInputBorder(
|
||||||
|
borderRadius: BorderRadius.circular(8),
|
||||||
|
borderSide: BorderSide(
|
||||||
|
color: widget.passwordError != null
|
||||||
|
? Theme.of(context).colorScheme.error
|
||||||
|
: Theme.of(context).colorScheme.primary,
|
||||||
|
width: 2,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
validator: (value) {
|
||||||
|
if (value == null || value.isEmpty) {
|
||||||
|
return 'Password is required';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (value.length < 6) {
|
||||||
|
return 'Password must be at least 6 characters';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check for at least one letter and one number
|
||||||
|
final hasLetter = RegExp(r'[a-zA-Z]').hasMatch(value);
|
||||||
|
final hasNumber = RegExp(r'\d').hasMatch(value);
|
||||||
|
|
||||||
|
if (!hasLetter || !hasNumber) {
|
||||||
|
return 'Password must contain both letters and numbers';
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget _buildConfirmPasswordField() {
|
||||||
|
return TextFormField(
|
||||||
|
initialValue: widget.confirmPassword,
|
||||||
|
onChanged: widget.onConfirmPasswordChanged,
|
||||||
|
obscureText: _obscureConfirmPassword,
|
||||||
|
textInputAction: TextInputAction.done,
|
||||||
|
onFieldSubmitted: (_) => widget.onSubmit?.call(),
|
||||||
|
decoration: InputDecoration(
|
||||||
|
labelText: widget.confirmPasswordLabel,
|
||||||
|
hintText: 'Confirm your password',
|
||||||
|
prefixIcon: const Icon(Icons.lock_outline),
|
||||||
|
suffixIcon: widget.showPasswordToggle
|
||||||
|
? IconButton(
|
||||||
|
icon: Icon(
|
||||||
|
_obscureConfirmPassword ? Icons.visibility_off : Icons.visibility,
|
||||||
|
),
|
||||||
|
onPressed: () {
|
||||||
|
setState(() {
|
||||||
|
_obscureConfirmPassword = !_obscureConfirmPassword;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
tooltip: _obscureConfirmPassword ? 'Show password' : 'Hide password',
|
||||||
|
)
|
||||||
|
: null,
|
||||||
|
errorText: widget.confirmPasswordError,
|
||||||
|
border: OutlineInputBorder(
|
||||||
|
borderRadius: BorderRadius.circular(8),
|
||||||
|
),
|
||||||
|
enabledBorder: OutlineInputBorder(
|
||||||
|
borderRadius: BorderRadius.circular(8),
|
||||||
|
borderSide: BorderSide(
|
||||||
|
color: widget.confirmPasswordError != null
|
||||||
|
? Theme.of(context).colorScheme.error
|
||||||
|
: Theme.of(context).colorScheme.outline,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
focusedBorder: OutlineInputBorder(
|
||||||
|
borderRadius: BorderRadius.circular(8),
|
||||||
|
borderSide: BorderSide(
|
||||||
|
color: widget.confirmPasswordError != null
|
||||||
|
? Theme.of(context).colorScheme.error
|
||||||
|
: Theme.of(context).colorScheme.primary,
|
||||||
|
width: 2,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
validator: (value) {
|
||||||
|
if (value == null || value.isEmpty) {
|
||||||
|
return 'Please confirm your password';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (value != widget.password) {
|
||||||
|
return 'Passwords do not match';
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget _buildSubmitButton() {
|
||||||
|
return ElevatedButton(
|
||||||
|
onPressed: widget.isLoading ? null : widget.onSubmit,
|
||||||
|
style: ElevatedButton.styleFrom(
|
||||||
|
backgroundColor: Theme.of(context).colorScheme.primary,
|
||||||
|
foregroundColor: Theme.of(context).colorScheme.onPrimary,
|
||||||
|
disabledBackgroundColor: Theme.of(context).colorScheme.primary.withOpacity(0.12),
|
||||||
|
disabledForegroundColor: Theme.of(context).colorScheme.onPrimary.withOpacity(0.38),
|
||||||
|
elevation: 2,
|
||||||
|
shape: RoundedRectangleBorder(
|
||||||
|
borderRadius: BorderRadius.circular(8),
|
||||||
|
),
|
||||||
|
minimumSize: const Size(double.infinity, 48),
|
||||||
|
),
|
||||||
|
child: widget.isLoading
|
||||||
|
? SizedBox(
|
||||||
|
height: 20,
|
||||||
|
width: 20,
|
||||||
|
child: CircularProgressIndicator(
|
||||||
|
strokeWidth: 2,
|
||||||
|
valueColor: AlwaysStoppedAnimation<Color>(
|
||||||
|
Theme.of(context).colorScheme.onPrimary,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
: Text(
|
||||||
|
widget.submitButtonText,
|
||||||
|
style: Theme.of(context).textTheme.labelLarge?.copyWith(
|
||||||
|
fontWeight: FontWeight.w600,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user