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