162 lines
3.7 KiB
TypeScript
162 lines
3.7 KiB
TypeScript
import React, { useState } from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
TextInput,
|
|
TouchableOpacity,
|
|
StyleSheet,
|
|
Alert,
|
|
KeyboardAvoidingView,
|
|
Platform,
|
|
ActivityIndicator,
|
|
} from 'react-native';
|
|
import { useAuth } from '../contexts/AuthContext';
|
|
|
|
export function RegisterScreen({ navigation }: any) {
|
|
const { register } = useAuth();
|
|
const [username, setUsername] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [confirmPassword, setConfirmPassword] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
async function handleRegister() {
|
|
if (!username.trim() || !password || !confirmPassword) {
|
|
Alert.alert('Erreur', 'Veuillez remplir tous les champs');
|
|
return;
|
|
}
|
|
|
|
if (password !== confirmPassword) {
|
|
Alert.alert('Erreur', 'Les mots de passe ne correspondent pas');
|
|
return;
|
|
}
|
|
|
|
if (password.length < 8) {
|
|
Alert.alert('Erreur', 'Le mot de passe doit contenir au moins 8 caractères');
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
try {
|
|
await register(username.trim(), password);
|
|
} catch (error: any) {
|
|
Alert.alert('Erreur', error.message || "Inscription échouée");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<KeyboardAvoidingView
|
|
style={styles.container}
|
|
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
|
>
|
|
<View style={styles.inner}>
|
|
<Text style={styles.title}>Dot.</Text>
|
|
<Text style={styles.subtitle}>Créez votre compte</Text>
|
|
|
|
<TextInput
|
|
style={styles.input}
|
|
placeholder="Nom d'utilisateur"
|
|
value={username}
|
|
onChangeText={setUsername}
|
|
autoCapitalize="none"
|
|
autoCorrect={false}
|
|
editable={!loading}
|
|
/>
|
|
|
|
<TextInput
|
|
style={styles.input}
|
|
placeholder="Mot de passe"
|
|
value={password}
|
|
onChangeText={setPassword}
|
|
secureTextEntry
|
|
editable={!loading}
|
|
/>
|
|
|
|
<TextInput
|
|
style={styles.input}
|
|
placeholder="Confirmer le mot de passe"
|
|
value={confirmPassword}
|
|
onChangeText={setConfirmPassword}
|
|
secureTextEntry
|
|
editable={!loading}
|
|
/>
|
|
|
|
<TouchableOpacity
|
|
style={[styles.button, loading && styles.buttonDisabled]}
|
|
onPress={handleRegister}
|
|
disabled={loading}
|
|
>
|
|
{loading ? (
|
|
<ActivityIndicator color="#fff" />
|
|
) : (
|
|
<Text style={styles.buttonText}>S'inscrire</Text>
|
|
)}
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={styles.linkButton}
|
|
onPress={() => navigation.navigate('Login')}
|
|
disabled={loading}
|
|
>
|
|
<Text style={styles.linkText}>Déjà un compte ? Se connecter</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</KeyboardAvoidingView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#fff',
|
|
},
|
|
inner: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
paddingHorizontal: 32,
|
|
},
|
|
title: {
|
|
fontSize: 32,
|
|
fontWeight: 'bold',
|
|
textAlign: 'center',
|
|
marginBottom: 8,
|
|
},
|
|
subtitle: {
|
|
fontSize: 16,
|
|
color: '#666',
|
|
textAlign: 'center',
|
|
marginBottom: 32,
|
|
},
|
|
input: {
|
|
borderWidth: 1,
|
|
borderColor: '#ddd',
|
|
borderRadius: 8,
|
|
padding: 16,
|
|
fontSize: 16,
|
|
marginBottom: 16,
|
|
},
|
|
button: {
|
|
backgroundColor: '#000',
|
|
borderRadius: 8,
|
|
padding: 16,
|
|
alignItems: 'center',
|
|
marginBottom: 16,
|
|
},
|
|
buttonDisabled: {
|
|
opacity: 0.6,
|
|
},
|
|
buttonText: {
|
|
color: '#fff',
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
},
|
|
linkButton: {
|
|
alignItems: 'center',
|
|
},
|
|
linkText: {
|
|
color: '#000',
|
|
fontSize: 14,
|
|
},
|
|
});
|