expo-starter/app/(tabs)/index.tsx

98 lines
2.4 KiB
TypeScript

import { Redirect, router } from 'expo-router';
import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
import { Button } from '@/components/common/Button';
import { Catamaran, FunnelSans } from '@/constants/fonts';
import { Palette } from '@/constants/palette';
import { Radius, Spacing } from '@/constants/styles';
import { useAuth } from '@/providers/AuthProvider';
import { logout } from '@/services/auth';
export default function Home() {
const { initializing, user } = useAuth();
if (initializing) {
return (
<View style={styles.centered}>
<ActivityIndicator color={Palette.black} />
</View>
);
}
if (!user) {
return <Redirect href="/login" />;
}
return (
<View style={styles.container}>
<Text style={styles.title}>Bienvenue</Text>
<Text style={styles.subtitle}>
{user.username || user.email || user.uid}
</Text>
<View style={styles.card}>
<Text style={styles.label}>UID</Text>
<Text style={styles.value}>{user.uid}</Text>
<Text style={styles.label}>Email</Text>
<Text style={styles.value}>{user.email || 'Aucun email'}</Text>
</View>
<Button onPress={() => void logout()} title="Se deconnecter" />
<Button
onPress={() => router.push('/register')}
style={styles.secondaryButton}
textStyle={styles.secondaryButtonText}
title="Creer un autre compte"
variant="secondary"
/>
</View>
);
}
const styles = StyleSheet.create({
centered: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: Palette.cream,
},
container: {
flex: 1,
justifyContent: 'center',
paddingHorizontal: Spacing.lg,
gap: 20,
backgroundColor: Palette.cream,
},
title: {
...Catamaran.extraBold34,
color: Palette.black,
},
subtitle: {
...FunnelSans.regular16,
color: Palette.gray,
},
card: {
gap: Spacing.sm,
padding: 18,
borderRadius: Radius.xl,
borderWidth: 1,
borderColor: Palette.cream,
backgroundColor: Palette.white,
},
label: {
...FunnelSans.medium12,
color: Palette.gray,
textTransform: 'uppercase',
},
value: {
...FunnelSans.regular16,
color: Palette.black,
},
secondaryButton: {
borderColor: Palette.black,
},
secondaryButtonText: {
color: Palette.black,
},
});