128 lines
4.1 KiB
TypeScript
128 lines
4.1 KiB
TypeScript
import { Link } from 'expo-router';
|
|
import { useState } from 'react';
|
|
import { KeyboardAvoidingView, Platform, Pressable, ScrollView, Text, View } from 'react-native';
|
|
import { Button, TextInput } from 'react-native-paper';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import { useAuth } from '@/context/AuthContext';
|
|
|
|
export default function RegisterScreen() {
|
|
const { signUp } = useAuth();
|
|
const [firstName, setFirstName] = useState('');
|
|
const [lastName, setLastName] = useState('');
|
|
const [email, setEmail] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [info, setInfo] = useState<string | null>(null);
|
|
|
|
return (
|
|
<SafeAreaView className="flex-1 bg-slate-50">
|
|
<KeyboardAvoidingView
|
|
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
|
|
className="flex-1"
|
|
>
|
|
<ScrollView
|
|
keyboardShouldPersistTaps="handled"
|
|
contentContainerClassName="flex-grow px-6 py-8"
|
|
>
|
|
<View className="mb-8">
|
|
<Text className="text-3xl font-bold text-slate-900">Inscription</Text>
|
|
<Text className="mt-2 text-base text-slate-600">
|
|
Créez votre accès professionnel
|
|
</Text>
|
|
</View>
|
|
|
|
{error ? (
|
|
<Text className="mb-3 rounded-lg bg-red-50 px-3 py-2 text-sm text-red-700">
|
|
{error}
|
|
</Text>
|
|
) : null}
|
|
{info ? (
|
|
<Text className="mb-3 rounded-lg bg-emerald-50 px-3 py-2 text-sm text-emerald-800">
|
|
{info}
|
|
</Text>
|
|
) : null}
|
|
|
|
<TextInput
|
|
label="Prénom"
|
|
mode="outlined"
|
|
value={firstName}
|
|
onChangeText={setFirstName}
|
|
autoComplete="given-name"
|
|
className="mb-3"
|
|
style={{ backgroundColor: '#fff' }}
|
|
/>
|
|
<TextInput
|
|
label="Nom"
|
|
mode="outlined"
|
|
value={lastName}
|
|
onChangeText={setLastName}
|
|
autoComplete="family-name"
|
|
className="mb-3"
|
|
style={{ backgroundColor: '#fff' }}
|
|
/>
|
|
<TextInput
|
|
label="E-mail"
|
|
mode="outlined"
|
|
value={email}
|
|
onChangeText={setEmail}
|
|
autoCapitalize="none"
|
|
keyboardType="email-address"
|
|
autoComplete="email"
|
|
className="mb-3"
|
|
style={{ backgroundColor: '#fff' }}
|
|
/>
|
|
<TextInput
|
|
label="Mot de passe"
|
|
mode="outlined"
|
|
value={password}
|
|
onChangeText={setPassword}
|
|
secureTextEntry
|
|
autoComplete="new-password"
|
|
className="mb-6"
|
|
style={{ backgroundColor: '#fff' }}
|
|
/>
|
|
|
|
<Button
|
|
mode="contained"
|
|
onPress={async () => {
|
|
setError(null);
|
|
setInfo(null);
|
|
setLoading(true);
|
|
const r = await signUp({
|
|
email: email.trim(),
|
|
password,
|
|
firstName: firstName.trim(),
|
|
lastName: lastName.trim(),
|
|
});
|
|
setLoading(false);
|
|
if (r.error) {
|
|
setError(r.error);
|
|
return;
|
|
}
|
|
setInfo(
|
|
'Si la confirmation e-mail est activée sur votre projet Supabase, vérifiez votre boîte avant de vous connecter.',
|
|
);
|
|
}}
|
|
loading={loading}
|
|
disabled={loading}
|
|
buttonColor="#1D4ED8"
|
|
textColor="#ffffff"
|
|
style={{ borderRadius: 10, paddingVertical: 4 }}
|
|
>
|
|
S'inscrire
|
|
</Button>
|
|
|
|
<View className="mt-8 items-center">
|
|
<Link href="/auth/login" asChild>
|
|
<Pressable className="py-2">
|
|
<Text className="font-semibold text-primary">Retour à la connexion</Text>
|
|
</Pressable>
|
|
</Link>
|
|
</View>
|
|
</ScrollView>
|
|
</KeyboardAvoidingView>
|
|
</SafeAreaView>
|
|
);
|
|
}
|