eb04163b3b
- Add API integration layer with axios and token management - Create Zustand auth store for state management - Implement login screen with validation - Implement signup screen with password strength indicator - Implement forgot password flow with multi-step UI - Update root layout with auth state protection - Integrate profile screen with auth store - Install AsyncStorage and expo-secure-store dependencies
475 lines
13 KiB
TypeScript
475 lines
13 KiB
TypeScript
import React, { useState } from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
TextInput,
|
|
TouchableOpacity,
|
|
StyleSheet,
|
|
ScrollView,
|
|
KeyboardAvoidingView,
|
|
Platform,
|
|
ActivityIndicator,
|
|
} from 'react-native';
|
|
import { useRouter } from 'expo-router';
|
|
import { useAuthStore } from '../lib/auth-store';
|
|
|
|
export default function SignupScreen() {
|
|
const router = useRouter();
|
|
const { signup, isLoading, error, clearError } = useAuthStore();
|
|
|
|
const [name, setName] = useState('');
|
|
const [email, setEmail] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [confirmPassword, setConfirmPassword] = useState('');
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
const [validationErrors, setValidationErrors] = useState<{
|
|
name?: string;
|
|
email?: string;
|
|
password?: string;
|
|
confirmPassword?: string;
|
|
}>({});
|
|
|
|
// Validate email format
|
|
const validateEmail = (email: string): boolean => {
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
return emailRegex.test(email);
|
|
};
|
|
|
|
// Calculate password strength
|
|
const getPasswordStrength = (password: string): { level: number; text: string; color: string } => {
|
|
if (!password) {
|
|
return { level: 0, text: '', color: '#E0E0E0' };
|
|
}
|
|
|
|
let strength = 0;
|
|
|
|
if (password.length >= 8) strength++;
|
|
if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength++;
|
|
if (/\d/.test(password)) strength++;
|
|
if (/[^a-zA-Z0-9]/.test(password)) strength++;
|
|
|
|
const levels = [
|
|
{ level: 1, text: 'Weak', color: '#FF3B30' },
|
|
{ level: 2, text: 'Fair', color: '#FF9500' },
|
|
{ level: 3, text: 'Good', color: '#FFCC00' },
|
|
{ level: 4, text: 'Strong', color: '#34C759' },
|
|
];
|
|
|
|
return levels[Math.min(strength, 4) - 1] || { level: 0, text: 'Too short', color: '#FF3B30' };
|
|
};
|
|
|
|
// Validate form
|
|
const validateForm = (): boolean => {
|
|
const errors: {
|
|
name?: string;
|
|
email?: string;
|
|
password?: string;
|
|
confirmPassword?: string;
|
|
} = {};
|
|
|
|
if (!name.trim()) {
|
|
errors.name = 'Name is required';
|
|
} else if (name.trim().length < 2) {
|
|
errors.name = 'Name must be at least 2 characters';
|
|
}
|
|
|
|
if (!email.trim()) {
|
|
errors.email = 'Email is required';
|
|
} else if (!validateEmail(email)) {
|
|
errors.email = 'Please enter a valid email';
|
|
}
|
|
|
|
if (!password) {
|
|
errors.password = 'Password is required';
|
|
} else if (password.length < 8) {
|
|
errors.password = 'Password must be at least 8 characters';
|
|
}
|
|
|
|
if (!confirmPassword) {
|
|
errors.confirmPassword = 'Please confirm your password';
|
|
} else if (password !== confirmPassword) {
|
|
errors.confirmPassword = 'Passwords do not match';
|
|
}
|
|
|
|
setValidationErrors(errors);
|
|
return Object.keys(errors).length === 0;
|
|
};
|
|
|
|
// Handle signup
|
|
const handleSignup = async () => {
|
|
clearError();
|
|
|
|
if (!validateForm()) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await signup({
|
|
name: name.trim(),
|
|
email: email.trim().toLowerCase(),
|
|
password,
|
|
});
|
|
router.replace('/(tabs)');
|
|
} catch {
|
|
// Error is handled by the store
|
|
}
|
|
};
|
|
|
|
// Navigate to login
|
|
const handleLogin = () => {
|
|
clearError();
|
|
router.push('/(auth)/login');
|
|
};
|
|
|
|
const passwordStrength = getPasswordStrength(password);
|
|
|
|
return (
|
|
<KeyboardAvoidingView
|
|
style={styles.container}
|
|
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
|
>
|
|
<ScrollView
|
|
contentContainerStyle={styles.scrollContent}
|
|
keyboardShouldPersistTaps="handled"
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
{/* Header */}
|
|
<View style={styles.header}>
|
|
<Text style={styles.title}>Create Account</Text>
|
|
<Text style={styles.subtitle}>Join our community today</Text>
|
|
</View>
|
|
|
|
{/* Form */}
|
|
<View style={styles.form}>
|
|
{/* Name Input */}
|
|
<View style={styles.inputContainer}>
|
|
<Text style={styles.label}>Name</Text>
|
|
<TextInput
|
|
style={[styles.input, validationErrors.name && styles.inputError]}
|
|
placeholder="Enter your name"
|
|
placeholderTextColor="#999"
|
|
value={name}
|
|
onChangeText={(text) => {
|
|
setName(text);
|
|
if (validationErrors.name) {
|
|
setValidationErrors((prev) => ({ ...prev, name: undefined }));
|
|
}
|
|
}}
|
|
autoCapitalize="words"
|
|
autoCorrect={false}
|
|
autoComplete="name"
|
|
editable={!isLoading}
|
|
/>
|
|
{validationErrors.name && (
|
|
<Text style={styles.errorText}>{validationErrors.name}</Text>
|
|
)}
|
|
</View>
|
|
|
|
{/* Email Input */}
|
|
<View style={styles.inputContainer}>
|
|
<Text style={styles.label}>Email</Text>
|
|
<TextInput
|
|
style={[styles.input, validationErrors.email && styles.inputError]}
|
|
placeholder="Enter your email"
|
|
placeholderTextColor="#999"
|
|
value={email}
|
|
onChangeText={(text) => {
|
|
setEmail(text);
|
|
if (validationErrors.email) {
|
|
setValidationErrors((prev) => ({ ...prev, email: undefined }));
|
|
}
|
|
}}
|
|
keyboardType="email-address"
|
|
autoCapitalize="none"
|
|
autoCorrect={false}
|
|
autoComplete="email"
|
|
editable={!isLoading}
|
|
/>
|
|
{validationErrors.email && (
|
|
<Text style={styles.errorText}>{validationErrors.email}</Text>
|
|
)}
|
|
</View>
|
|
|
|
{/* Password Input */}
|
|
<View style={styles.inputContainer}>
|
|
<Text style={styles.label}>Password</Text>
|
|
<View style={styles.passwordContainer}>
|
|
<TextInput
|
|
style={[
|
|
styles.input,
|
|
styles.passwordInput,
|
|
validationErrors.password && styles.inputError,
|
|
]}
|
|
placeholder="Create a password"
|
|
placeholderTextColor="#999"
|
|
value={password}
|
|
onChangeText={(text) => {
|
|
setPassword(text);
|
|
if (validationErrors.password) {
|
|
setValidationErrors((prev) => ({ ...prev, password: undefined }));
|
|
}
|
|
}}
|
|
secureTextEntry={!showPassword}
|
|
autoCapitalize="none"
|
|
autoCorrect={false}
|
|
autoComplete="password-new"
|
|
editable={!isLoading}
|
|
/>
|
|
<TouchableOpacity
|
|
style={styles.showPasswordButton}
|
|
onPress={() => setShowPassword(!showPassword)}
|
|
disabled={isLoading}
|
|
>
|
|
<Text style={styles.showPasswordText}>
|
|
{showPassword ? 'Hide' : 'Show'}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
{validationErrors.password && (
|
|
<Text style={styles.errorText}>{validationErrors.password}</Text>
|
|
)}
|
|
{/* Password Strength Indicator */}
|
|
{password.length > 0 && (
|
|
<View style={styles.strengthContainer}>
|
|
<View style={styles.strengthBars}>
|
|
{[1, 2, 3, 4].map((level) => (
|
|
<View
|
|
key={level}
|
|
style={[
|
|
styles.strengthBar,
|
|
{
|
|
backgroundColor:
|
|
level <= passwordStrength.level
|
|
? passwordStrength.color
|
|
: '#E0E0E0',
|
|
},
|
|
]}
|
|
/>
|
|
))}
|
|
</View>
|
|
<Text style={[styles.strengthText, { color: passwordStrength.color }]}>
|
|
{passwordStrength.text}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
{/* Confirm Password Input */}
|
|
<View style={styles.inputContainer}>
|
|
<Text style={styles.label}>Confirm Password</Text>
|
|
<TextInput
|
|
style={[
|
|
styles.input,
|
|
validationErrors.confirmPassword && styles.inputError,
|
|
]}
|
|
placeholder="Confirm your password"
|
|
placeholderTextColor="#999"
|
|
value={confirmPassword}
|
|
onChangeText={(text) => {
|
|
setConfirmPassword(text);
|
|
if (validationErrors.confirmPassword) {
|
|
setValidationErrors((prev) => ({
|
|
...prev,
|
|
confirmPassword: undefined,
|
|
}));
|
|
}
|
|
}}
|
|
secureTextEntry={!showPassword}
|
|
autoCapitalize="none"
|
|
autoCorrect={false}
|
|
autoComplete="password-new"
|
|
editable={!isLoading}
|
|
/>
|
|
{validationErrors.confirmPassword && (
|
|
<Text style={styles.errorText}>{validationErrors.confirmPassword}</Text>
|
|
)}
|
|
</View>
|
|
|
|
{/* API Error */}
|
|
{error && (
|
|
<View style={styles.apiError}>
|
|
<Text style={styles.apiErrorText}>{error}</Text>
|
|
</View>
|
|
)}
|
|
|
|
{/* Create Account Button */}
|
|
<TouchableOpacity
|
|
style={[styles.button, isLoading && styles.buttonDisabled]}
|
|
onPress={handleSignup}
|
|
disabled={isLoading}
|
|
>
|
|
{isLoading ? (
|
|
<ActivityIndicator color="#FFFFFF" />
|
|
) : (
|
|
<Text style={styles.buttonText}>Create Account</Text>
|
|
)}
|
|
</TouchableOpacity>
|
|
|
|
{/* Terms */}
|
|
<Text style={styles.termsText}>
|
|
By creating an account, you agree to our{' '}
|
|
<Text style={styles.termsLink}>Terms of Service</Text> and{' '}
|
|
<Text style={styles.termsLink}>Privacy Policy</Text>
|
|
</Text>
|
|
|
|
{/* Sign In Link */}
|
|
<View style={styles.loginContainer}>
|
|
<Text style={styles.loginText}>Already have an account? </Text>
|
|
<TouchableOpacity onPress={handleLogin} disabled={isLoading}>
|
|
<Text style={styles.loginLink}>Sign In</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</ScrollView>
|
|
</KeyboardAvoidingView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#FFFFFF',
|
|
},
|
|
scrollContent: {
|
|
flexGrow: 1,
|
|
paddingHorizontal: 24,
|
|
paddingTop: 60,
|
|
paddingBottom: 40,
|
|
},
|
|
header: {
|
|
marginBottom: 32,
|
|
},
|
|
title: {
|
|
fontSize: 32,
|
|
fontWeight: 'bold',
|
|
color: '#333333',
|
|
marginBottom: 8,
|
|
},
|
|
subtitle: {
|
|
fontSize: 16,
|
|
color: '#666666',
|
|
},
|
|
form: {
|
|
flex: 1,
|
|
},
|
|
inputContainer: {
|
|
marginBottom: 20,
|
|
},
|
|
label: {
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
color: '#333333',
|
|
marginBottom: 8,
|
|
},
|
|
input: {
|
|
height: 50,
|
|
borderWidth: 1,
|
|
borderColor: '#E0E0E0',
|
|
borderRadius: 8,
|
|
paddingHorizontal: 16,
|
|
fontSize: 16,
|
|
color: '#333333',
|
|
backgroundColor: '#FAFAFA',
|
|
},
|
|
inputError: {
|
|
borderColor: '#FF3B30',
|
|
},
|
|
passwordContainer: {
|
|
position: 'relative',
|
|
},
|
|
passwordInput: {
|
|
paddingRight: 60,
|
|
},
|
|
showPasswordButton: {
|
|
position: 'absolute',
|
|
right: 16,
|
|
top: 0,
|
|
bottom: 0,
|
|
justifyContent: 'center',
|
|
},
|
|
showPasswordText: {
|
|
fontSize: 14,
|
|
color: '#007AFF',
|
|
fontWeight: '600',
|
|
},
|
|
errorText: {
|
|
fontSize: 12,
|
|
color: '#FF3B30',
|
|
marginTop: 4,
|
|
},
|
|
strengthContainer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
marginTop: 8,
|
|
},
|
|
strengthBars: {
|
|
flexDirection: 'row',
|
|
flex: 1,
|
|
gap: 4,
|
|
},
|
|
strengthBar: {
|
|
flex: 1,
|
|
height: 4,
|
|
borderRadius: 2,
|
|
},
|
|
strengthText: {
|
|
fontSize: 12,
|
|
fontWeight: '600',
|
|
marginLeft: 8,
|
|
minWidth: 50,
|
|
},
|
|
apiError: {
|
|
backgroundColor: '#FFF0F0',
|
|
borderRadius: 8,
|
|
padding: 12,
|
|
marginBottom: 16,
|
|
borderWidth: 1,
|
|
borderColor: '#FF3B30',
|
|
},
|
|
apiErrorText: {
|
|
fontSize: 14,
|
|
color: '#FF3B30',
|
|
textAlign: 'center',
|
|
},
|
|
button: {
|
|
height: 50,
|
|
backgroundColor: '#007AFF',
|
|
borderRadius: 8,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
marginBottom: 16,
|
|
},
|
|
buttonDisabled: {
|
|
backgroundColor: '#B0B0B0',
|
|
},
|
|
buttonText: {
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
color: '#FFFFFF',
|
|
},
|
|
termsText: {
|
|
fontSize: 12,
|
|
color: '#666666',
|
|
textAlign: 'center',
|
|
marginBottom: 24,
|
|
lineHeight: 18,
|
|
},
|
|
termsLink: {
|
|
color: '#007AFF',
|
|
fontWeight: '600',
|
|
},
|
|
loginContainer: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
loginText: {
|
|
fontSize: 14,
|
|
color: '#666666',
|
|
},
|
|
loginLink: {
|
|
fontSize: 14,
|
|
color: '#007AFF',
|
|
fontWeight: '600',
|
|
},
|
|
});
|