104 lines
3.2 KiB
TypeScript
104 lines
3.2 KiB
TypeScript
import { router } from 'expo-router';
|
||
import { useState } from 'react';
|
||
import {
|
||
KeyboardAvoidingView,
|
||
Platform,
|
||
ScrollView,
|
||
StyleSheet,
|
||
Text,
|
||
View,
|
||
} from 'react-native';
|
||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||
import { LabeledField } from '../../src/components/LabeledField';
|
||
import { PrimaryButton } from '../../src/components/PrimaryButton';
|
||
import { useApp } from '../../src/context/AppContext';
|
||
import { colors } from '../../src/theme/colors';
|
||
|
||
export default function RegisterScreen() {
|
||
const insets = useSafeAreaInsets();
|
||
const app = useApp();
|
||
const [name, setName] = useState('');
|
||
const [email, setEmail] = useState('');
|
||
const [password, setPassword] = useState('');
|
||
const [err, setErr] = useState<string | null>(null);
|
||
const [loading, setLoading] = useState(false);
|
||
const [info, setInfo] = useState<string | null>(null);
|
||
|
||
if (app.runtimeMode !== 'cloud' || !app.supabase) {
|
||
return (
|
||
<View style={[styles.box, { paddingTop: insets.top }]}>
|
||
<Text style={styles.err}>
|
||
Configurez d’abord Supabase dans Réglages.
|
||
</Text>
|
||
<PrimaryButton
|
||
title="Ouvrir Réglages"
|
||
onPress={() => router.replace('/(tabs)/reglages')}
|
||
/>
|
||
</View>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<KeyboardAvoidingView
|
||
style={{ flex: 1, backgroundColor: colors.bg }}
|
||
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
|
||
>
|
||
<ScrollView
|
||
keyboardShouldPersistTaps="handled"
|
||
contentContainerStyle={{
|
||
padding: 20,
|
||
paddingTop: insets.top + 12,
|
||
paddingBottom: insets.bottom + 24,
|
||
}}
|
||
>
|
||
<LabeledField label="Nom affiché" value={name} onChangeText={setName} />
|
||
<LabeledField
|
||
label="E-mail"
|
||
autoCapitalize="none"
|
||
keyboardType="email-address"
|
||
value={email}
|
||
onChangeText={setEmail}
|
||
/>
|
||
<LabeledField
|
||
label="Mot de passe"
|
||
secureTextEntry
|
||
value={password}
|
||
onChangeText={setPassword}
|
||
/>
|
||
{err ? <Text style={styles.err}>{err}</Text> : null}
|
||
{info ? <Text style={styles.info}>{info}</Text> : null}
|
||
<PrimaryButton
|
||
title="S’inscrire"
|
||
loading={loading}
|
||
onPress={async () => {
|
||
setErr(null);
|
||
setInfo(null);
|
||
setLoading(true);
|
||
const r = await app.signUp(email.trim(), password, name.trim());
|
||
setLoading(false);
|
||
if (r.error) {
|
||
setErr(r.error);
|
||
return;
|
||
}
|
||
setInfo(
|
||
'Si la confirmation e-mail est activée sur votre projet, vérifiez votre boîte avant de vous connecter.',
|
||
);
|
||
}}
|
||
/>
|
||
<PrimaryButton
|
||
title="J’ai déjà un compte"
|
||
variant="ghost"
|
||
onPress={() => router.back()}
|
||
containerStyle={{ marginTop: 12 }}
|
||
/>
|
||
</ScrollView>
|
||
</KeyboardAvoidingView>
|
||
);
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
box: { flex: 1, padding: 20, backgroundColor: colors.bg, gap: 12 },
|
||
err: { color: colors.danger, marginBottom: 12 },
|
||
info: { color: colors.flash, marginBottom: 12, lineHeight: 20 },
|
||
});
|