feat(01-03): create signup page with password confirmation
- Complete registration screen with email/password/confirm password fields - Integrated AuthForm widget for consistent form handling - Terms of Service and Privacy Policy checkboxes with placeholder dialogs - Password confirmation validation matching requirement - Sign in navigation to login screen - Loading states during registration process - Responsive design matching login page layout - Error handling for duplicate emails and registration failures Authentication UI components complete and ready for backend integration.
This commit is contained in:
Dani B
338
lib/features/authentication/presentation/pages/signup_page.dart
Normal file
338
lib/features/authentication/presentation/pages/signup_page.dart
Normal file
@@ -0,0 +1,338 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import '../widgets/auth_form.dart';
|
||||
import '../widgets/auth_button.dart';
|
||||
|
||||
/// Sign up screen with user registration
|
||||
class SignupPage extends StatefulWidget {
|
||||
const SignupPage({super.key});
|
||||
|
||||
@override
|
||||
State<SignupPage> createState() => _SignupPageState();
|
||||
}
|
||||
|
||||
class _SignupPageState extends State<SignupPage> {
|
||||
final _formKey = GlobalKey<FormState>();
|
||||
final _emailController = TextEditingController();
|
||||
final _passwordController = TextEditingController();
|
||||
final _confirmPasswordController = TextEditingController();
|
||||
|
||||
bool _isLoading = false;
|
||||
String? _emailError;
|
||||
String? _passwordError;
|
||||
String? _confirmPasswordError;
|
||||
bool _agreedToTerms = false;
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_emailController.dispose();
|
||||
_passwordController.dispose();
|
||||
_confirmPasswordController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('Sign Up'),
|
||||
centerTitle: true,
|
||||
elevation: 0,
|
||||
backgroundColor: Colors.transparent,
|
||||
foregroundColor: Theme.of(context).colorScheme.onSurface,
|
||||
),
|
||||
body: SafeArea(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(24.0),
|
||||
child: Center(
|
||||
child: SingleChildScrollView(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
// Logo or app title could go here
|
||||
Icon(
|
||||
Icons.inventory_2_outlined,
|
||||
size: 80,
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
),
|
||||
const SizedBox(height: 32),
|
||||
|
||||
Text(
|
||||
'Create Account',
|
||||
style: Theme.of(context).textTheme.headlineMedium?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Theme.of(context).colorScheme.onSurface,
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
|
||||
Text(
|
||||
'Start tracking your household inventory today',
|
||||
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
const SizedBox(height: 32),
|
||||
|
||||
// Authentication form
|
||||
AuthForm(
|
||||
formKey: _formKey,
|
||||
email: _emailController.text,
|
||||
onEmailChanged: (value) {
|
||||
setState(() {
|
||||
_emailError = null;
|
||||
_emailController.text = value;
|
||||
});
|
||||
},
|
||||
emailError: _emailError,
|
||||
password: _passwordController.text,
|
||||
onPasswordChanged: (value) {
|
||||
setState(() {
|
||||
_passwordError = null;
|
||||
_passwordController.text = value;
|
||||
});
|
||||
},
|
||||
passwordError: _passwordError,
|
||||
confirmPassword: _confirmPasswordController.text,
|
||||
onConfirmPasswordChanged: (value) {
|
||||
setState(() {
|
||||
_confirmPasswordError = null;
|
||||
_confirmPasswordController.text = value;
|
||||
});
|
||||
},
|
||||
confirmPasswordError: _confirmPasswordError,
|
||||
onSubmit: _handleSignup,
|
||||
submitButtonText: 'Create Account',
|
||||
isLoading: _isLoading,
|
||||
autofocusEmail: true,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
|
||||
// Terms and conditions checkbox
|
||||
_buildTermsCheckbox(),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Sign in link
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Text(
|
||||
'Already have an account? ',
|
||||
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
TextButton(
|
||||
onPressed: _handleSignIn,
|
||||
child: Text(
|
||||
'Sign In',
|
||||
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildTermsCheckbox() {
|
||||
return Row(
|
||||
children: [
|
||||
Checkbox(
|
||||
value: _agreedToTerms,
|
||||
onChanged: (value) {
|
||||
setState(() {
|
||||
_agreedToTerms = value ?? false;
|
||||
});
|
||||
},
|
||||
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
||||
),
|
||||
Expanded(
|
||||
child: GestureDetector(
|
||||
onTap: () {
|
||||
setState(() {
|
||||
_agreedToTerms = !_agreedToTerms;
|
||||
});
|
||||
},
|
||||
child: Text.rich(
|
||||
TextSpan(
|
||||
text: 'I agree to the ',
|
||||
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurface,
|
||||
),
|
||||
children: [
|
||||
WidgetSpan(
|
||||
child: GestureDetector(
|
||||
onTap: _handleTermsOfService,
|
||||
child: Text(
|
||||
'Terms of Service',
|
||||
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
decoration: TextDecoration.underline,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const TextSpan(text: ' and '),
|
||||
WidgetSpan(
|
||||
child: GestureDetector(
|
||||
onTap: _handlePrivacyPolicy,
|
||||
child: Text(
|
||||
'Privacy Policy',
|
||||
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
decoration: TextDecoration.underline,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Future<void> _handleSignup() async {
|
||||
// Clear previous errors
|
||||
setState(() {
|
||||
_emailError = null;
|
||||
_passwordError = null;
|
||||
_confirmPasswordError = null;
|
||||
});
|
||||
|
||||
// Validate terms agreement
|
||||
if (!_agreedToTerms) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(
|
||||
content: Text('Please agree to the Terms of Service and Privacy Policy'),
|
||||
duration: Duration(seconds: 3),
|
||||
),
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate form
|
||||
if (!_formKey.currentState!.validate()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Show loading state
|
||||
setState(() {
|
||||
_isLoading = true;
|
||||
});
|
||||
|
||||
try {
|
||||
// TODO: Implement actual registration logic
|
||||
// For now, simulate API call
|
||||
await Future.delayed(const Duration(seconds: 2));
|
||||
|
||||
// Simulate successful registration
|
||||
if (mounted) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(
|
||||
content: Text('Account created successfully! Please sign in.'),
|
||||
duration: Duration(seconds: 3),
|
||||
backgroundColor: Colors.green,
|
||||
),
|
||||
);
|
||||
|
||||
// Navigate to login page
|
||||
context.go('/login');
|
||||
}
|
||||
} catch (e) {
|
||||
// Handle registration errors
|
||||
setState(() {
|
||||
_isLoading = false;
|
||||
|
||||
// TODO: Implement proper error handling
|
||||
// For now, show generic errors based on common scenarios
|
||||
if (e.toString().contains('email')) {
|
||||
_emailError = 'Email is already registered';
|
||||
} else {
|
||||
_passwordError = 'Registration failed. Please try again.';
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
void _handleTermsOfService() {
|
||||
// TODO: Navigate to Terms of Service screen or open web view
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (BuildContext context) {
|
||||
return AlertDialog(
|
||||
title: const Text('Terms of Service'),
|
||||
content: const SingleChildScrollView(
|
||||
child: Text(
|
||||
'Terms of Service placeholder...\n\n'
|
||||
'This is a placeholder for the actual Terms of Service document. '
|
||||
'In a real application, this would contain detailed information about:\n'
|
||||
'- User responsibilities\n'
|
||||
'- Data usage policies\n'
|
||||
'- Service limitations\n'
|
||||
'- Account termination policies\n'
|
||||
'- Legal disclaimers\n\n'
|
||||
'Please review the actual terms before agreeing.',
|
||||
),
|
||||
),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () => Navigator.of(context).pop(),
|
||||
child: const Text('Close'),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
void _handlePrivacyPolicy() {
|
||||
// TODO: Navigate to Privacy Policy screen or open web view
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (BuildContext context) {
|
||||
return AlertDialog(
|
||||
title: const Text('Privacy Policy'),
|
||||
content: const SingleChildScrollView(
|
||||
child: Text(
|
||||
'Privacy Policy placeholder...\n\n'
|
||||
'This is a placeholder for the actual Privacy Policy document. '
|
||||
'In a real application, this would contain detailed information about:\n'
|
||||
'- What data we collect\n'
|
||||
'- How we use your data\n'
|
||||
'- Data sharing practices\n'
|
||||
'- Data security measures\n'
|
||||
'- User rights and choices\n\n'
|
||||
'Please review the actual policy before agreeing.',
|
||||
),
|
||||
),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () => Navigator.of(context).pop(),
|
||||
child: const Text('Close'),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
void _handleSignIn() {
|
||||
// Navigate to sign in page
|
||||
context.go('/login');
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user