146 lines
4.5 KiB
TypeScript
146 lines
4.5 KiB
TypeScript
import { Link, router } from 'expo-router';
|
|
import { useState } from 'react';
|
|
import { KeyboardAvoidingView, Platform, ScrollView, StyleSheet, Text, View } from 'react-native';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Button } from '@/src/components/Button';
|
|
import { Input } from '@/src/components/Input';
|
|
import { Screen } from '@/src/components/Screen';
|
|
import { useAuth } from '@/src/context/AuthContext';
|
|
import { useAppearance } from '@/src/context/AppearanceContext';
|
|
import { extractApiError } from '@/src/utils/apiError';
|
|
|
|
function validatePassword(password: string, t: (key: string) => string): string | null {
|
|
if (password.length < 8) return t('validation.passwordMinLength');
|
|
if (!/[A-Z]/.test(password)) return t('validation.passwordUppercase');
|
|
if (!/[a-z]/.test(password)) return t('validation.passwordLowercase');
|
|
if (!/\d/.test(password)) return t('validation.passwordDigit');
|
|
return null;
|
|
}
|
|
|
|
export default function RegisterScreen() {
|
|
const { t } = useTranslation();
|
|
const { register } = useAuth();
|
|
const { colors } = useAppearance();
|
|
const [email, setEmail] = useState('');
|
|
const [userName, setUserName] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [confirmPassword, setConfirmPassword] = useState('');
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
async function handleSubmit() {
|
|
setError(null);
|
|
if (!email.trim()) {
|
|
setError(t('validation.emailRequired'));
|
|
return;
|
|
}
|
|
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())) {
|
|
setError(t('validation.emailInvalid'));
|
|
return;
|
|
}
|
|
const passwordError = validatePassword(password, t);
|
|
if (passwordError) {
|
|
setError(passwordError);
|
|
return;
|
|
}
|
|
if (!confirmPassword) {
|
|
setError(t('validation.confirmPasswordRequired'));
|
|
return;
|
|
}
|
|
if (password !== confirmPassword) {
|
|
setError(t('validation.passwordsMismatch'));
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
try {
|
|
await register({
|
|
email: email.trim(),
|
|
password,
|
|
userName: userName.trim() || undefined,
|
|
});
|
|
router.replace('/(main)/(tabs)');
|
|
} catch (err) {
|
|
setError(extractApiError(err, t('errors.registerFailed')));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Screen title={t('auth.createAccountTitle')} subtitle={t('auth.createAccountSubtitle')}>
|
|
<KeyboardAvoidingView
|
|
style={styles.flex}
|
|
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
|
|
>
|
|
<ScrollView contentContainerStyle={styles.scroll} keyboardShouldPersistTaps="handled">
|
|
<View style={styles.form}>
|
|
<Input
|
|
label={t('auth.email')}
|
|
autoCapitalize="none"
|
|
keyboardType="email-address"
|
|
placeholder={t('auth.emailPlaceholder')}
|
|
value={email}
|
|
onChangeText={setEmail}
|
|
/>
|
|
<Input
|
|
label={t('auth.displayName')}
|
|
placeholder={t('auth.displayNamePlaceholder')}
|
|
value={userName}
|
|
onChangeText={setUserName}
|
|
/>
|
|
<Input
|
|
label={t('auth.password')}
|
|
secureTextEntry
|
|
value={password}
|
|
onChangeText={setPassword}
|
|
/>
|
|
<Text style={[styles.hint, { color: colors.textMuted }]}>{t('auth.passwordHint')}</Text>
|
|
<Input
|
|
label={t('auth.confirmPassword')}
|
|
secureTextEntry
|
|
value={confirmPassword}
|
|
onChangeText={setConfirmPassword}
|
|
/>
|
|
{error ? <Text style={[styles.error, { color: colors.danger }]}>{error}</Text> : null}
|
|
<Button
|
|
title={loading ? t('auth.creatingAccount') : t('auth.createAccount')}
|
|
loading={loading}
|
|
onPress={handleSubmit}
|
|
/>
|
|
</View>
|
|
|
|
<Text style={[styles.footer, { color: colors.textMuted }]}>
|
|
{t('auth.hasAccount')}{' '}
|
|
<Link href="/(auth)/login" style={{ color: colors.brand, fontWeight: '600' }}>
|
|
{t('auth.signIn')}
|
|
</Link>
|
|
</Text>
|
|
</ScrollView>
|
|
</KeyboardAvoidingView>
|
|
</Screen>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
flex: { flex: 1 },
|
|
scroll: {
|
|
gap: 16,
|
|
paddingBottom: 24,
|
|
},
|
|
form: {
|
|
gap: 14,
|
|
},
|
|
hint: {
|
|
fontSize: 13,
|
|
marginTop: -6,
|
|
},
|
|
error: {
|
|
fontSize: 14,
|
|
},
|
|
footer: {
|
|
textAlign: 'center',
|
|
fontSize: 15,
|
|
},
|
|
});
|