feat: Implement initial authentication, multi-environment support, and core app infrastructure.
This commit is contained in:
159
lib/features/auth/presentation/providers/auth_provider.dart
Normal file
159
lib/features/auth/presentation/providers/auth_provider.dart
Normal file
@@ -0,0 +1,159 @@
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:real_estate_mobile/core/network/api_exceptions.dart';
|
||||
import 'package:real_estate_mobile/features/auth/data/auth_repository.dart';
|
||||
import 'package:real_estate_mobile/features/auth/data/models/register_request.dart';
|
||||
import 'package:real_estate_mobile/features/auth/data/models/user_model.dart';
|
||||
|
||||
// Auth state
|
||||
enum AuthStatus { initial, loading, success, error }
|
||||
|
||||
class AuthState {
|
||||
final AuthStatus status;
|
||||
final UserModel? user;
|
||||
final String? errorMessage;
|
||||
final List<FieldError> fieldErrors;
|
||||
final String registeredEmail;
|
||||
|
||||
const AuthState({
|
||||
this.status = AuthStatus.initial,
|
||||
this.user,
|
||||
this.errorMessage,
|
||||
this.fieldErrors = const [],
|
||||
this.registeredEmail = '',
|
||||
});
|
||||
|
||||
AuthState copyWith({
|
||||
AuthStatus? status,
|
||||
UserModel? user,
|
||||
String? errorMessage,
|
||||
List<FieldError>? fieldErrors,
|
||||
String? registeredEmail,
|
||||
}) {
|
||||
return AuthState(
|
||||
status: status ?? this.status,
|
||||
user: user ?? this.user,
|
||||
errorMessage: errorMessage,
|
||||
fieldErrors: fieldErrors ?? this.fieldErrors,
|
||||
registeredEmail: registeredEmail ?? this.registeredEmail,
|
||||
);
|
||||
}
|
||||
|
||||
String? getFieldError(String fieldName) {
|
||||
final match = fieldErrors.where((e) => e.field == fieldName);
|
||||
if (match.isEmpty) return null;
|
||||
return match.first.errors.isNotEmpty ? match.first.errors.first : null;
|
||||
}
|
||||
}
|
||||
|
||||
// Auth notifier
|
||||
class AuthNotifier extends StateNotifier<AuthState> {
|
||||
final AuthRepository _repository;
|
||||
|
||||
AuthNotifier(this._repository) : super(const AuthState());
|
||||
|
||||
Future<void> login({
|
||||
required String email,
|
||||
required String password,
|
||||
}) async {
|
||||
state = state.copyWith(
|
||||
status: AuthStatus.loading,
|
||||
errorMessage: null,
|
||||
fieldErrors: [],
|
||||
);
|
||||
|
||||
try {
|
||||
final result = await _repository.login(
|
||||
email: email,
|
||||
password: password,
|
||||
);
|
||||
|
||||
if (result['requiresTwoFactor'] == true) {
|
||||
state = state.copyWith(
|
||||
status: AuthStatus.error,
|
||||
errorMessage: '2FA verification required',
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
state = state.copyWith(
|
||||
status: AuthStatus.success,
|
||||
user: result['user'] as UserModel,
|
||||
);
|
||||
} on ApiException catch (e) {
|
||||
state = state.copyWith(
|
||||
status: AuthStatus.error,
|
||||
errorMessage: e.fieldErrors.isNotEmpty
|
||||
? 'Please fix the errors below'
|
||||
: e.message,
|
||||
fieldErrors: e.fieldErrors,
|
||||
);
|
||||
} catch (e) {
|
||||
state = state.copyWith(
|
||||
status: AuthStatus.error,
|
||||
errorMessage: 'An unexpected error occurred',
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> register({
|
||||
required String name,
|
||||
required String email,
|
||||
required String password,
|
||||
required String role,
|
||||
}) async {
|
||||
state = state.copyWith(
|
||||
status: AuthStatus.loading,
|
||||
errorMessage: null,
|
||||
fieldErrors: [],
|
||||
);
|
||||
|
||||
// Split name into firstName and lastName
|
||||
final nameParts = name.trim().split(RegExp(r'\s+'));
|
||||
final firstName = nameParts.first;
|
||||
final lastName = nameParts.length > 1 ? nameParts.sublist(1).join(' ') : null;
|
||||
|
||||
try {
|
||||
final user = await _repository.register(
|
||||
RegisterRequest(
|
||||
email: email,
|
||||
password: password,
|
||||
role: role,
|
||||
firstName: firstName,
|
||||
lastName: lastName,
|
||||
),
|
||||
);
|
||||
|
||||
state = state.copyWith(
|
||||
status: AuthStatus.success,
|
||||
user: user,
|
||||
registeredEmail: email,
|
||||
);
|
||||
} on ApiException catch (e) {
|
||||
state = state.copyWith(
|
||||
status: AuthStatus.error,
|
||||
errorMessage: e.fieldErrors.isNotEmpty
|
||||
? 'Please fix the errors below'
|
||||
: e.message,
|
||||
fieldErrors: e.fieldErrors,
|
||||
);
|
||||
} catch (e) {
|
||||
state = state.copyWith(
|
||||
status: AuthStatus.error,
|
||||
errorMessage: 'An unexpected error occurred',
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
void reset() {
|
||||
state = const AuthState();
|
||||
}
|
||||
}
|
||||
|
||||
// Providers
|
||||
final authRepositoryProvider = Provider<AuthRepository>((ref) {
|
||||
return AuthRepository();
|
||||
});
|
||||
|
||||
final authProvider = StateNotifierProvider<AuthNotifier, AuthState>((ref) {
|
||||
return AuthNotifier(ref.watch(authRepositoryProvider));
|
||||
});
|
||||
252
lib/features/auth/presentation/screens/login_screen.dart
Normal file
252
lib/features/auth/presentation/screens/login_screen.dart
Normal file
@@ -0,0 +1,252 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:real_estate_mobile/core/constants/app_colors.dart';
|
||||
import 'package:real_estate_mobile/features/auth/presentation/providers/auth_provider.dart';
|
||||
import 'package:real_estate_mobile/features/auth/presentation/widgets/auth_text_field.dart';
|
||||
import 'package:real_estate_mobile/features/auth/presentation/widgets/or_divider.dart';
|
||||
import 'package:real_estate_mobile/features/auth/presentation/widgets/role_toggle.dart';
|
||||
import 'package:real_estate_mobile/features/auth/presentation/widgets/social_login_buttons.dart';
|
||||
|
||||
class LoginScreen extends ConsumerStatefulWidget {
|
||||
const LoginScreen({super.key});
|
||||
|
||||
@override
|
||||
ConsumerState<LoginScreen> createState() => _LoginScreenState();
|
||||
}
|
||||
|
||||
class _LoginScreenState extends ConsumerState<LoginScreen> {
|
||||
final _nameController = TextEditingController();
|
||||
final _emailController = TextEditingController();
|
||||
final _passwordController = TextEditingController();
|
||||
String _selectedRole = 'USER';
|
||||
bool _obscurePassword = true;
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_nameController.dispose();
|
||||
_emailController.dispose();
|
||||
_passwordController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
String? _validateLocally() {
|
||||
if (_emailController.text.trim().isEmpty) {
|
||||
return 'Please enter your email';
|
||||
}
|
||||
if (_passwordController.text.isEmpty) {
|
||||
return 'Please enter a password';
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
void _handleLogin() {
|
||||
final localError = _validateLocally();
|
||||
if (localError != null) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(
|
||||
content: Text(localError),
|
||||
behavior: SnackBarBehavior.floating,
|
||||
),
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
ref.read(authProvider.notifier).login(
|
||||
email: _emailController.text.trim(),
|
||||
password: _passwordController.text,
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final authState = ref.watch(authProvider);
|
||||
final isLoading = authState.status == AuthStatus.loading;
|
||||
|
||||
return Scaffold(
|
||||
body: Container(
|
||||
width: double.infinity,
|
||||
height: double.infinity,
|
||||
decoration: const BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [AppColors.gradientStart, AppColors.gradientEnd],
|
||||
),
|
||||
),
|
||||
child: SafeArea(
|
||||
child: SingleChildScrollView(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 24),
|
||||
child: Column(
|
||||
children: [
|
||||
const SizedBox(height: 40),
|
||||
|
||||
// Logo
|
||||
Image.asset(
|
||||
'assets/icons/logo.png',
|
||||
width: 143,
|
||||
height: 41,
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Title
|
||||
const Text(
|
||||
'Login',
|
||||
style: TextStyle(
|
||||
fontFamily: 'Fractul',
|
||||
fontSize: 25,
|
||||
fontWeight: FontWeight.w400,
|
||||
color: AppColors.primaryDark,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Role toggle (User / Admin)
|
||||
RoleToggle(
|
||||
selectedRole: _selectedRole,
|
||||
onChanged: (role) => setState(() => _selectedRole = role),
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
|
||||
// Subtitle
|
||||
const Padding(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16),
|
||||
child: Text(
|
||||
'Login or create an account to enjoy FREE consultation on all property inquiries.',
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(
|
||||
fontFamily: 'SourceSerif4',
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: AppColors.primaryDark,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Error banner
|
||||
if (authState.errorMessage != null &&
|
||||
authState.fieldErrors.isEmpty) ...[
|
||||
Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 16, vertical: 12),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.errorBg,
|
||||
border: Border.all(color: AppColors.errorBorder),
|
||||
borderRadius: BorderRadius.circular(7),
|
||||
),
|
||||
child: Text(
|
||||
authState.errorMessage!,
|
||||
style: const TextStyle(
|
||||
fontFamily: 'Fractul',
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w300,
|
||||
color: AppColors.error,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
],
|
||||
|
||||
// Name field
|
||||
AuthTextField(
|
||||
hintText: 'Name',
|
||||
controller: _nameController,
|
||||
keyboardType: TextInputType.name,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
|
||||
// Email field
|
||||
AuthTextField(
|
||||
hintText: 'Email',
|
||||
controller: _emailController,
|
||||
keyboardType: TextInputType.emailAddress,
|
||||
errorText: authState.getFieldError('email'),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
|
||||
// Password field
|
||||
AuthTextField(
|
||||
hintText: 'Password',
|
||||
controller: _passwordController,
|
||||
obscureText: _obscurePassword,
|
||||
textInputAction: TextInputAction.done,
|
||||
errorText: authState.getFieldError('password'),
|
||||
suffixIcon: IconButton(
|
||||
icon: Icon(
|
||||
_obscurePassword
|
||||
? Icons.visibility_off
|
||||
: Icons.visibility,
|
||||
color: AppColors.hintText,
|
||||
size: 22,
|
||||
),
|
||||
onPressed: () =>
|
||||
setState(() => _obscurePassword = !_obscurePassword),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Login button
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
child: ElevatedButton(
|
||||
onPressed: isLoading ? null : _handleLogin,
|
||||
child: isLoading
|
||||
? const SizedBox(
|
||||
height: 20,
|
||||
width: 20,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 2,
|
||||
color: AppColors.primaryDark,
|
||||
),
|
||||
)
|
||||
: const Text('Login'),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Don't have an account? Sign up
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
const Text(
|
||||
"Don't have an account? ",
|
||||
style: TextStyle(
|
||||
fontFamily: 'SourceSerif4',
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w400,
|
||||
color: AppColors.primaryDark,
|
||||
),
|
||||
),
|
||||
GestureDetector(
|
||||
onTap: () => context.go('/signup'),
|
||||
child: const Text(
|
||||
'Sign up',
|
||||
style: TextStyle(
|
||||
fontFamily: 'Fractul',
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: AppColors.primaryDark,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Or divider
|
||||
const OrDivider(),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Social login buttons
|
||||
const SocialLoginButtons(),
|
||||
const SizedBox(height: 40),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
359
lib/features/auth/presentation/screens/signup_screen.dart
Normal file
359
lib/features/auth/presentation/screens/signup_screen.dart
Normal file
@@ -0,0 +1,359 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:real_estate_mobile/core/constants/app_colors.dart';
|
||||
import 'package:real_estate_mobile/features/auth/presentation/providers/auth_provider.dart';
|
||||
import 'package:real_estate_mobile/features/auth/presentation/widgets/auth_text_field.dart';
|
||||
import 'package:real_estate_mobile/features/auth/presentation/widgets/or_divider.dart';
|
||||
import 'package:real_estate_mobile/features/auth/presentation/widgets/role_toggle.dart';
|
||||
import 'package:real_estate_mobile/features/auth/presentation/widgets/social_login_buttons.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
|
||||
class SignupScreen extends ConsumerStatefulWidget {
|
||||
const SignupScreen({super.key});
|
||||
|
||||
@override
|
||||
ConsumerState<SignupScreen> createState() => _SignupScreenState();
|
||||
}
|
||||
|
||||
class _SignupScreenState extends ConsumerState<SignupScreen> {
|
||||
final _nameController = TextEditingController();
|
||||
final _emailController = TextEditingController();
|
||||
final _passwordController = TextEditingController();
|
||||
String _selectedRole = 'USER';
|
||||
bool _obscurePassword = true;
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_nameController.dispose();
|
||||
_emailController.dispose();
|
||||
_passwordController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
String? _validateLocally() {
|
||||
if (_nameController.text.trim().isEmpty) {
|
||||
return 'Please enter your name';
|
||||
}
|
||||
if (_emailController.text.trim().isEmpty) {
|
||||
return 'Please enter your email';
|
||||
}
|
||||
if (_passwordController.text.isEmpty) {
|
||||
return 'Please enter a password';
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
void _handleSignup() {
|
||||
final localError = _validateLocally();
|
||||
if (localError != null) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(
|
||||
content: Text(localError),
|
||||
behavior: SnackBarBehavior.floating,
|
||||
),
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
ref.read(authProvider.notifier).register(
|
||||
name: _nameController.text.trim(),
|
||||
email: _emailController.text.trim(),
|
||||
password: _passwordController.text,
|
||||
role: _selectedRole,
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final authState = ref.watch(authProvider);
|
||||
|
||||
return Scaffold(
|
||||
body: Container(
|
||||
width: double.infinity,
|
||||
height: double.infinity,
|
||||
decoration: const BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [AppColors.gradientStart, AppColors.gradientEnd],
|
||||
),
|
||||
),
|
||||
child: SafeArea(
|
||||
child: SingleChildScrollView(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 24),
|
||||
child: authState.status == AuthStatus.success
|
||||
? _buildSuccessContent(authState)
|
||||
: _buildFormContent(authState),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSuccessContent(AuthState authState) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(top: 80),
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(32),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.white,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
const Icon(
|
||||
Icons.check_circle_outline,
|
||||
size: 64,
|
||||
color: AppColors.success,
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
const Text(
|
||||
'Check Your Email',
|
||||
style: TextStyle(
|
||||
fontFamily: 'Fractul',
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.w400,
|
||||
color: AppColors.primaryDark,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
'We\'ve sent a verification link to ',
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(
|
||||
fontFamily: 'Fractul',
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w300,
|
||||
color: AppColors.primaryDark.withValues(alpha: 0.7),
|
||||
),
|
||||
),
|
||||
Text(
|
||||
authState.registeredEmail,
|
||||
textAlign: TextAlign.center,
|
||||
style: const TextStyle(
|
||||
fontFamily: 'Fractul',
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.primaryDark,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
'Please check your inbox and click the link to verify your account before logging in.',
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(
|
||||
fontFamily: 'Fractul',
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w300,
|
||||
color: AppColors.primaryDark.withValues(alpha: 0.7),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
child: ElevatedButton(
|
||||
onPressed: () {
|
||||
ref.read(authProvider.notifier).reset();
|
||||
context.go('/login');
|
||||
},
|
||||
child: const Text('Go to Login'),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'Didn\'t receive the email? Check your spam folder or contact support.',
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(
|
||||
fontFamily: 'Fractul',
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w300,
|
||||
color: AppColors.primaryDark.withValues(alpha: 0.5),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildFormContent(AuthState authState) {
|
||||
final isLoading = authState.status == AuthStatus.loading;
|
||||
|
||||
return Column(
|
||||
children: [
|
||||
const SizedBox(height: 40),
|
||||
|
||||
// Logo
|
||||
Image.asset(
|
||||
'assets/icons/logo.png',
|
||||
width: 143,
|
||||
height: 41,
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Title
|
||||
const Text(
|
||||
'Sign Up',
|
||||
style: TextStyle(
|
||||
fontFamily: 'Fractul',
|
||||
fontSize: 30,
|
||||
fontWeight: FontWeight.w400,
|
||||
color: AppColors.primaryDark,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Role toggle
|
||||
RoleToggle(
|
||||
selectedRole: _selectedRole,
|
||||
onChanged: (role) => setState(() => _selectedRole = role),
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
|
||||
// Subtitle
|
||||
Text(
|
||||
'Enter Your Name to Continue',
|
||||
style: TextStyle(
|
||||
fontFamily: 'Fractul',
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w300,
|
||||
color: AppColors.primaryDark.withValues(alpha: 0.7),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
|
||||
// Error banner
|
||||
if (authState.errorMessage != null &&
|
||||
authState.fieldErrors.isEmpty) ...[
|
||||
Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.errorBg,
|
||||
border: Border.all(color: AppColors.errorBorder),
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
),
|
||||
child: Text(
|
||||
authState.errorMessage!,
|
||||
style: const TextStyle(
|
||||
fontFamily: 'Fractul',
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w300,
|
||||
color: AppColors.error,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
],
|
||||
|
||||
// Name field
|
||||
AuthTextField(
|
||||
hintText: 'Name',
|
||||
controller: _nameController,
|
||||
keyboardType: TextInputType.name,
|
||||
errorText: authState.getFieldError('firstName'),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
|
||||
// Email field
|
||||
AuthTextField(
|
||||
hintText: 'Email',
|
||||
controller: _emailController,
|
||||
keyboardType: TextInputType.emailAddress,
|
||||
errorText: authState.getFieldError('email'),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
|
||||
// Password field
|
||||
AuthTextField(
|
||||
hintText: 'Password',
|
||||
controller: _passwordController,
|
||||
obscureText: _obscurePassword,
|
||||
textInputAction: TextInputAction.done,
|
||||
errorText: authState.getFieldError('password'),
|
||||
suffixIcon: IconButton(
|
||||
icon: Icon(
|
||||
_obscurePassword ? Icons.visibility_off : Icons.visibility,
|
||||
color: AppColors.hintText,
|
||||
size: 22,
|
||||
),
|
||||
onPressed: () =>
|
||||
setState(() => _obscurePassword = !_obscurePassword),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 8, left: 8),
|
||||
child: Align(
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Min 8 chars, 1 uppercase, 1 lowercase, 1 number, 1 special character',
|
||||
style: TextStyle(
|
||||
fontFamily: 'Fractul',
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w300,
|
||||
color: AppColors.primaryDark.withValues(alpha: 0.6),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Sign Up button
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
child: ElevatedButton(
|
||||
onPressed: isLoading ? null : _handleSignup,
|
||||
child: isLoading
|
||||
? const SizedBox(
|
||||
height: 20,
|
||||
width: 20,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 2,
|
||||
color: AppColors.primaryDark,
|
||||
),
|
||||
)
|
||||
: const Text('Sign Up'),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Already have account
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
const Text(
|
||||
'Already Have An Account ? ',
|
||||
style: TextStyle(
|
||||
fontFamily: 'Fractul',
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w300,
|
||||
color: AppColors.primaryDark,
|
||||
),
|
||||
),
|
||||
GestureDetector(
|
||||
onTap: () => context.go('/login'),
|
||||
child: const Text(
|
||||
'Login',
|
||||
style: TextStyle(
|
||||
fontFamily: 'Fractul',
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w400,
|
||||
color: AppColors.primaryDark,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Or divider
|
||||
const OrDivider(),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Social login buttons
|
||||
const SocialLoginButtons(),
|
||||
const SizedBox(height: 40),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
67
lib/features/auth/presentation/widgets/auth_text_field.dart
Normal file
67
lib/features/auth/presentation/widgets/auth_text_field.dart
Normal file
@@ -0,0 +1,67 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:real_estate_mobile/core/constants/app_colors.dart';
|
||||
|
||||
class AuthTextField extends StatelessWidget {
|
||||
final String hintText;
|
||||
final TextEditingController controller;
|
||||
final bool obscureText;
|
||||
final TextInputType keyboardType;
|
||||
final Widget? suffixIcon;
|
||||
final String? errorText;
|
||||
final TextInputAction textInputAction;
|
||||
|
||||
const AuthTextField({
|
||||
super.key,
|
||||
required this.hintText,
|
||||
required this.controller,
|
||||
this.obscureText = false,
|
||||
this.keyboardType = TextInputType.text,
|
||||
this.suffixIcon,
|
||||
this.errorText,
|
||||
this.textInputAction = TextInputAction.next,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
TextField(
|
||||
controller: controller,
|
||||
obscureText: obscureText,
|
||||
keyboardType: keyboardType,
|
||||
textInputAction: textInputAction,
|
||||
style: const TextStyle(
|
||||
fontFamily: 'Fractul',
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w300,
|
||||
color: AppColors.primaryDark,
|
||||
),
|
||||
decoration: InputDecoration(
|
||||
hintText: hintText,
|
||||
suffixIcon: suffixIcon,
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
borderSide: errorText != null
|
||||
? const BorderSide(color: AppColors.error, width: 1.5)
|
||||
: BorderSide.none,
|
||||
),
|
||||
),
|
||||
),
|
||||
if (errorText != null)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 4, left: 8),
|
||||
child: Text(
|
||||
errorText!,
|
||||
style: const TextStyle(
|
||||
fontFamily: 'Fractul',
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w300,
|
||||
color: AppColors.error,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
32
lib/features/auth/presentation/widgets/or_divider.dart
Normal file
32
lib/features/auth/presentation/widgets/or_divider.dart
Normal file
@@ -0,0 +1,32 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:real_estate_mobile/core/constants/app_colors.dart';
|
||||
|
||||
class OrDivider extends StatelessWidget {
|
||||
const OrDivider({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Row(
|
||||
children: [
|
||||
const Expanded(
|
||||
child: Divider(color: AppColors.divider, thickness: 1),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||
child: Text(
|
||||
'Or',
|
||||
style: TextStyle(
|
||||
fontFamily: 'Fractul',
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w300,
|
||||
color: AppColors.primaryDark.withValues(alpha: 0.6),
|
||||
),
|
||||
),
|
||||
),
|
||||
const Expanded(
|
||||
child: Divider(color: AppColors.divider, thickness: 1),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
55
lib/features/auth/presentation/widgets/role_toggle.dart
Normal file
55
lib/features/auth/presentation/widgets/role_toggle.dart
Normal file
@@ -0,0 +1,55 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:real_estate_mobile/core/constants/app_colors.dart';
|
||||
|
||||
class RoleToggle extends StatelessWidget {
|
||||
final String selectedRole;
|
||||
final ValueChanged<String> onChanged;
|
||||
|
||||
const RoleToggle({
|
||||
super.key,
|
||||
required this.selectedRole,
|
||||
required this.onChanged,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.inputFill,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
),
|
||||
padding: const EdgeInsets.all(2),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
_buildToggleButton('User', 'USER'),
|
||||
_buildToggleButton('Admin', 'AGENT'),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildToggleButton(String label, String role) {
|
||||
final isSelected = selectedRole == role;
|
||||
return GestureDetector(
|
||||
onTap: () => onChanged(role),
|
||||
child: AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 28, vertical: 10),
|
||||
decoration: BoxDecoration(
|
||||
color: isSelected ? AppColors.primaryDark : Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
),
|
||||
child: Text(
|
||||
label,
|
||||
style: TextStyle(
|
||||
fontFamily: 'Fractul',
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w300,
|
||||
color: isSelected ? AppColors.inputFill : AppColors.primaryDark,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_svg/flutter_svg.dart';
|
||||
import 'package:real_estate_mobile/core/constants/app_colors.dart';
|
||||
|
||||
class SocialLoginButtons extends StatelessWidget {
|
||||
const SocialLoginButtons({super.key});
|
||||
|
||||
void _showComingSoon(BuildContext context) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(
|
||||
content: Text('Coming soon'),
|
||||
duration: Duration(seconds: 1),
|
||||
behavior: SnackBarBehavior.floating,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
// Apple
|
||||
_SocialButton(
|
||||
onTap: () => _showComingSoon(context),
|
||||
child: const Icon(
|
||||
Icons.apple,
|
||||
size: 28,
|
||||
color: AppColors.primaryDark,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 32),
|
||||
// Google
|
||||
_SocialButton(
|
||||
onTap: () => _showComingSoon(context),
|
||||
child: SvgPicture.asset(
|
||||
'assets/icons/google.svg',
|
||||
width: 24,
|
||||
height: 24,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 32),
|
||||
// X (Twitter)
|
||||
_SocialButton(
|
||||
onTap: () => _showComingSoon(context),
|
||||
child: SvgPicture.asset(
|
||||
'assets/icons/x.svg',
|
||||
width: 24,
|
||||
height: 24,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 32),
|
||||
// Facebook
|
||||
_SocialButton(
|
||||
onTap: () => _showComingSoon(context),
|
||||
child: SvgPicture.asset(
|
||||
'assets/icons/facebook.svg',
|
||||
width: 24,
|
||||
height: 24,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _SocialButton extends StatelessWidget {
|
||||
final VoidCallback onTap;
|
||||
final Widget child;
|
||||
|
||||
const _SocialButton({
|
||||
required this.onTap,
|
||||
required this.child,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return GestureDetector(
|
||||
onTap: onTap,
|
||||
child: SizedBox(
|
||||
width: 40,
|
||||
height: 40,
|
||||
child: Center(child: child),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user