frontend/auth: add auth screens, login, sign up and reset password

Pedro Lucas Porcellis porcellis@eletrotupi.com 2 months ago c167b931829e73be76860df22b78f8ac0951550e

Parents: ae44a25

8 file(s) changed

frontend/app/(tabs)/_layout.tsx +23 -2
frontend/app/(tabs)/index.tsx +28 -2
frontend/app/_layout.tsx +17 -7
frontend/app/auth/_layout.tsx +31 -0
frontend/app/auth/forgot-password.tsx +251 -0
frontend/app/auth/login.tsx +172 -0
frontend/app/auth/reset-password.tsx +184 -0
frontend/app/auth/signup.tsx +214 -0

frontend/app/(tabs)/_layout.tsx

@@ -1,13 +1,34 @@
  - import { Tabs } from 'expo-router';
  - import React from 'react';
  + import { Tabs, Redirect, router } from 'expo-router';
  + import React, { useEffect } from 'react';
  + import { View, ActivityIndicator } from 'react-native';
    
    import { HapticTab } from '@/components/misc/haptic-tab';
    import { IconSymbol } from '@/components/ui/icon-symbol';
    import { Colors } from '@/constants/theme';
    import { useColorScheme } from '@/hooks/use-color-scheme';
  + import { useAuth } from '@/context/AuthContext';
    
    export default function TabLayout() {
      const colorScheme = useColorScheme();
  +   const { isAuthenticated, isLoading } = useAuth();
  + 
  +   useEffect(() => {
  +     if (!isLoading && !isAuthenticated) {
  +       router.replace('/auth/login');
  +     }
  +   }, [isAuthenticated, isLoading]);
  + 
  +   if (isLoading) {
  +     return (
  +       <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
  +         <ActivityIndicator size="large" />
  +       </View>
  +     );
  +   }
  + 
  +   if (!isAuthenticated) {
  +     return <Redirect href="/auth/login" />;
  +   }
    
      return (
        <Tabs

frontend/app/(tabs)/index.tsx

@@ -1,13 +1,32 @@
    import { Image } from 'expo-image';
  - import { Platform, StyleSheet } from 'react-native';
  + import { Platform, StyleSheet, TouchableOpacity, Alert } from 'react-native';
    
    import { HelloWave } from '@/components/hello-wave';
    import ParallaxScrollView from '@/components/misc/parallax-scroll-view';
    import { ThemedText } from '@/components/misc/themed-text';
    import { ThemedView } from '@/components/misc/themed-view';
    import { Link } from 'expo-router';
  + import { useAuth } from '@/context/AuthContext';
  + import { Button } from '@/components/ui';
    
    export default function HomeScreen() {
  +   const { user, logout } = useAuth();
  + 
  +   const handleLogout = async () => {
  +     Alert.alert(
  +       'Sair',
  +       'Tem certeza que quer sair?',
  +       [
  +         { text: 'Cancelar', style: 'cancel' },
  +         {
  +           text: 'Sair',
  +           style: 'destructive',
  +           onPress: logout
  +         },
  +       ]
  +     );
  +   };
  + 
      return (
        <ParallaxScrollView
          headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}

@@ -18,8 +37,15 @@ style={styles.reactLogo}
            />
          }>
          <ThemedView style={styles.titleContainer}>
  -         <ThemedText type="title">Welcome!</ThemedText>
  +         <ThemedText type="title">Bem vindo{user?.firstName ? `, ${user.firstName}` : ''}!</ThemedText>
            <HelloWave />
  +       </ThemedView>
  +       <ThemedView style={styles.stepContainer}>
  +         <Button
  +           title="Sair"
  +           variant="outline"
  +           onPress={handleLogout}
  +         />
          </ThemedView>
          <ThemedView style={styles.stepContainer}>
            <ThemedText type="subtitle">Step 1: Try it</ThemedText>

frontend/app/_layout.tsx

@@ -4,6 +4,7 @@ import { StatusBar } from 'expo-status-bar';
    import 'react-native-reanimated';
    
    import { useColorScheme } from '@/hooks/use-color-scheme';
  + import { AuthProvider } from '@/context/AuthContext';
    
    export const unstable_settings = {
      anchor: '(tabs)',

@@ -13,12 +14,21 @@ export default function RootLayout() {
      const colorScheme = useColorScheme();
    
      return (
  -     <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
  -       <Stack>
  -         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
  -         <Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Modal' }} />
  -       </Stack>
  -       <StatusBar style="auto" />
  -     </ThemeProvider>
  +     <AuthProvider>
  +       <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
  +         <Stack>
  +           <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
  +           <Stack.Screen
  +             name="auth"
  +             options={{
  +               headerShown: false,
  +               presentation: 'modal'
  +             }}
  +           />
  +           <Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Modal' }} />
  +         </Stack>
  +         <StatusBar style="auto" />
  +       </ThemeProvider>
  +     </AuthProvider>
      );
    }

frontend/app/auth/_layout.tsx

@@ -0,0 +1,32 @@
  + import { Stack } from 'expo-router';
  + 
  + export default function AuthLayout() {
  +   return (
  +     <Stack>
  +       <Stack.Screen
  +         name="login"
  +         options={{
  +           headerShown: false,
  +         }}
  +       />
  +       <Stack.Screen
  +         name="signup"
  +         options={{
  +           headerShown: false,
  +         }}
  +       />
  +       <Stack.Screen
  +         name="forgot-password"
  +         options={{
  +           headerShown: false,
  +         }}
  +       />
  +       <Stack.Screen
  +         name="reset-password"
  +         options={{
  +           headerShown: false,
  +         }}
  +       />
  +     </Stack>
  +   );
  + }

frontend/app/auth/forgot-password.tsx

@@ -0,0 +1,251 @@
  + import React, { useState } from 'react';
  + import {
  +   View,
  +   Text,
  +   StyleSheet,
  +   ScrollView,
  +   KeyboardAvoidingView,
  +   Platform,
  +   Alert,
  + } from 'react-native';
  + import { Link, router } from 'expo-router';
  + import { SafeAreaView } from 'react-native-safe-area-context';
  + import { useThemeColor } from '@/hooks/use-theme-color';
  + import { Button, Input } from '@/components/ui';
  + import { useAuth } from '@/context/AuthContext';
  + 
  + export default function ForgotPasswordScreen() {
  +   const [email, setEmail] = useState('');
  +   const [emailSent, setEmailSent] = useState(false);
  +   const [resetToken, setResetToken] = useState(''); // Only for development
  +   const [errors, setErrors] = useState<{ email?: string }>({});
  + 
  +   const { forgotPassword } = useAuth();
  +   const [loading, setLoading] = useState(false);
  +   const textColor = useThemeColor({}, 'text');
  +   const backgroundColor = useThemeColor({}, 'background');
  +   const tintColor = useThemeColor({}, 'tint');
  + 
  +   const validateForm = () => {
  +     const newErrors: { email?: string } = {};
  + 
  +     if (!email) {
  +       newErrors.email = 'Email is required';
  +     } else if (!/\S+@\S+\.\S+/.test(email)) {
  +       newErrors.email = 'Please enter a valid email';
  +     }
  + 
  +     setErrors(newErrors);
  +     return Object.keys(newErrors).length === 0;
  +   };
  + 
  +   const handleForgotPassword = async () => {
  +     if (!validateForm()) return;
  + 
  +     setLoading(true);
  +     try {
  +       const data = await forgotPassword(email);
  +       setEmailSent(true);
  +       // In development, show the reset token
  +       if (data.token) {
  +         setResetToken(data.token);
  +       }
  +     } catch (error: any) {
  +       Alert.alert('Erro: ', error.message || 'Falha ao enviar link de recuperação');
  +     } finally {
  +       setLoading(false);
  +     }
  +   };
  + 
  +   const handleUseToken = () => {
  +     if (resetToken) {
  +       router.push({
  +         pathname: '/auth/reset-password',
  +         params: { token: resetToken },
  +       });
  +     }
  +   };
  + 
  +   if (emailSent) {
  +     return (
  +       <SafeAreaView style={[styles.container, { backgroundColor }]}>
  +         <View style={styles.successContainer}>
  +           <Text style={[styles.title, { color: textColor }]}>Verifique seu email</Text>
  +           <Text style={[styles.message, { color: textColor, opacity: 0.7 }]}>
  +             Enviamos as instruções para resetar sua senha para {email}
  +           </Text>
  + 
  +           {/* Development only - show reset token */}
  +           {resetToken && (
  +             <View style={styles.devSection}>
  +               <Text style={[styles.devTitle, { color: tintColor }]}>
  +                 Dev mode:
  +               </Text>
  +               <Text style={[styles.devText, { color: textColor, opacity: 0.7 }]}>
  +                 Token: {resetToken}
  +               </Text>
  +               <Button
  +                 title="Usar token para resetar senha"
  +                 onPress={handleUseToken}
  +                 style={styles.devButton}
  +               />
  +             </View>
  +           )}
  + 
  +           <View style={styles.actions}>
  +             <Button
  +               title="Reenviar email"
  +               variant="outline"
  +               onPress={() => setEmailSent(false)}
  +               style={styles.resendButton}
  +             />
  + 
  +             <Link href="/auth/login" asChild style={[styles.link, { color: tintColor }]}>
  +               <Text style={[styles.link, { color: tintColor }]}>
  +                 Voltar para login
  +               </Text>
  +             </Link>
  +           </View>
  +         </View>
  +       </SafeAreaView>
  +     );
  +   }
  + 
  +   return (
  +     <SafeAreaView style={[styles.container, { backgroundColor }]}>
  +       <KeyboardAvoidingView
  +         behavior='height'
  +         style={styles.keyboardView}
  +       >
  +         <ScrollView
  +           contentContainerStyle={styles.scrollContainer}
  +           showsVerticalScrollIndicator={false}
  +         >
  +           <View style={styles.header}>
  +             <Text style={[styles.title, { color: textColor }]}>Esqueceu a senha?</Text>
  +             <Text style={[styles.subtitle, { color: textColor, opacity: 0.7 }]}>
  +               Insira seu email para receber as instruções de recuperação
  +             </Text>
  +           </View>
  + 
  +           <View style={styles.form}>
  +             <Input
  +               label="Email"
  +               type="email"
  +               value={email}
  +               onChangeText={setEmail}
  +               placeholder="Qual seu email?"
  +               error={errors.email}
  +               autoCapitalize="none"
  +             />
  + 
  +             <Button
  +               title="Enviar link de recuperação"
  +               onPress={handleForgotPassword}
  +               loading={loading}
  +               style={styles.resetButton}
  +             />
  +           </View>
  + 
  +           <View style={styles.footer}>
  +             <Text style={[styles.footerText, { color: textColor, opacity: 0.7 }]}>
  +               Lembra tua senha?{' '}
  +             </Text>
  +             <Link href="/auth/login" asChild style={[styles.link, { color: tintColor }]}>
  +               <Text style={[styles.link, { color: tintColor }]}>
  +                 Faça login
  +               </Text>
  +             </Link>
  +           </View>
  +         </ScrollView>
  +       </KeyboardAvoidingView>
  +     </SafeAreaView>
  +   );
  + }
  + 
  + const styles = StyleSheet.create({
  +   container: {
  +     flex: 1,
  +   },
  +   keyboardView: {
  +     flex: 1,
  +   },
  +   scrollContainer: {
  +     flexGrow: 1,
  +     paddingHorizontal: 24,
  +     justifyContent: 'center',
  +     minHeight: '100%',
  +   },
  +   successContainer: {
  +     flex: 1,
  +     justifyContent: 'center',
  +     paddingHorizontal: 24,
  +   },
  +   header: {
  +     alignItems: 'center',
  +     marginBottom: 40,
  +   },
  +   title: {
  +     fontSize: 28,
  +     fontWeight: 'bold',
  +     marginBottom: 8,
  +     textAlign: 'center',
  +   },
  +   subtitle: {
  +     fontSize: 16,
  +     textAlign: 'center',
  +     lineHeight: 24,
  +   },
  +   message: {
  +     fontSize: 16,
  +     textAlign: 'center',
  +     lineHeight: 24,
  +     marginBottom: 32,
  +   },
  +   form: {
  +     marginBottom: 32,
  +   },
  +   resetButton: {
  +     marginTop: 8,
  +   },
  +   actions: {
  +     gap: 16,
  +   },
  +   resendButton: {
  +     marginBottom: 8,
  +   },
  +   devSection: {
  +     marginBottom: 32,
  +     padding: 16,
  +     borderRadius: 8,
  +     backgroundColor: 'rgba(74, 144, 226, 0.1)',
  +   },
  +   devTitle: {
  +     fontSize: 14,
  +     fontWeight: '600',
  +     marginBottom: 8,
  +   },
  +   devText: {
  +     fontSize: 12,
  +     marginBottom: 12,
  +     fontFamily: 'monospace',
  +   },
  +   devButton: {
  +     marginTop: 8,
  +   },
  +   link: {
  +     textAlign: 'center',
  +     fontSize: 14,
  +     fontWeight: '500',
  +   },
  +   footer: {
  +     flexDirection: 'row',
  +     justifyContent: 'center',
  +     alignItems: 'center',
  +     marginTop: 'auto',
  +     paddingBottom: 20,
  +   },
  +   footerText: {
  +     fontSize: 14,
  +   },
  + });

frontend/app/auth/login.tsx

@@ -0,0 +1,172 @@
  + import React, { useState } from 'react';
  + import {
  +   View,
  +   Text,
  +   StyleSheet,
  +   ScrollView,
  +   KeyboardAvoidingView,
  +   Platform,
  +   Alert,
  + } from 'react-native';
  + import { Link, router } from 'expo-router';
  + import { SafeAreaView } from 'react-native-safe-area-context';
  + import { useThemeColor } from '@/hooks/use-theme-color';
  + import { Button, Input } from '@/components/ui';
  + import { useAuth } from '@/context/AuthContext';
  + 
  + export default function LoginScreen() {
  +   const [email, setEmail] = useState('');
  +   const [password, setPassword] = useState('');
  +   const [errors, setErrors] = useState<{ email?: string; password?: string }>({});
  + 
  +   const { login, isLoading } = useAuth();
  +   const textColor = useThemeColor({}, 'text');
  +   const backgroundColor = useThemeColor({}, 'background');
  +   const tintColor = useThemeColor({}, 'tint');
  + 
  +   const validateForm = () => {
  +     const newErrors: { email?: string; password?: string } = {};
  + 
  +     if (!email) {
  +       newErrors.email = 'Email é obrigatório';
  +     } else if (!/\S+@\S+\.\S+/.test(email)) {
  +       newErrors.email = 'Por favor, use um email válido';
  +     }
  + 
  +     if (!password) {
  +       newErrors.password = 'Senha é obrigatória';
  +     }
  + 
  +     setErrors(newErrors);
  +     return Object.keys(newErrors).length === 0;
  +   };
  + 
  +   const handleLogin = async () => {
  +     if (!validateForm()) return;
  + 
  +     try {
  +       await login(email, password);
  +       router.replace('/(tabs)');
  +     } catch (error: any) {
  + 	  Alert.alert('Erro: ', error.message || 'Falha ao fazer login');
  +     }
  +   };
  + 
  +   return (
  +     <SafeAreaView style={[styles.container, { backgroundColor }]}>
  +       <KeyboardAvoidingView
  +         behavior='height'
  +         style={styles.keyboardView}
  +       >
  +         <ScrollView
  +           contentContainerStyle={styles.scrollContainer}
  +           showsVerticalScrollIndicator={false}
  +         >
  +           <View style={styles.header}>
  +             <Text style={[styles.title, { color: textColor }]}>Bem vindo de volta</Text>
  +             <Text style={[styles.subtitle, { color: textColor, opacity: 0.7 }]}>
  +               Logue na sua conta
  +             </Text>
  +           </View>
  + 
  +           <View style={styles.form}>
  +             <Input
  +               label="Email"
  +               type="email"
  +               value={email}
  +               onChangeText={setEmail}
  +               placeholder="Qual seu email?"
  +               error={errors.email}
  +               autoCapitalize="none"
  +             />
  + 
  +             <Input
  +               label="Senha"
  +               type="password"
  +               value={password}
  +               onChangeText={setPassword}
  +               placeholder="Qual sua senha?"
  +               error={errors.password}
  +               showPasswordToggle
  +             />
  + 
  +             <Button
  +               title="Entrar"
  +               onPress={handleLogin}
  +               loading={isLoading}
  +               style={styles.loginButton}
  +             />
  + 
  +             <Link href="/auth/forgot-password" style={[styles.link, {color: tintColor }]} asChild>
  +               <Text style={[styles.footerText, { color: textColor, opacity: 0.7 }]}>
  +                 Esqueceu a senha?
  +               </Text>
  +             </Link>
  +           </View>
  + 
  +           <View style={styles.footer}>
  +             <Text style={[styles.footerText, { color: textColor, opacity: 0.7 }]}>
  +               Não tem uma conta ainda?{' '}
  +             </Text>
  + 
  +             <Link href="/auth/signup" asChild style={[styles.link, { color: tintColor }]}>
  +               <Text style={[styles.footerText, { color: textColor, opacity: 0.7 }]}>
  +                 Cadastre-se
  +               </Text>
  +             </Link>
  +           </View>
  +         </ScrollView>
  +       </KeyboardAvoidingView>
  +     </SafeAreaView>
  +   );
  + }
  + 
  + const styles = StyleSheet.create({
  +   container: {
  +     flex: 1,
  +   },
  +   keyboardView: {
  +     flex: 1,
  +   },
  +   scrollContainer: {
  +     flexGrow: 1,
  +     paddingHorizontal: 24,
  +     justifyContent: 'center',
  +     minHeight: '100%',
  +   },
  +   header: {
  +     alignItems: 'center',
  +     marginBottom: 40,
  +   },
  +   title: {
  +     fontSize: 28,
  +     fontWeight: 'bold',
  +     marginBottom: 8,
  +   },
  +   subtitle: {
  +     fontSize: 16,
  +     textAlign: 'center',
  +   },
  +   form: {
  +     marginBottom: 32,
  +   },
  +   loginButton: {
  +     marginTop: 8,
  +     marginBottom: 16,
  +   },
  +   link: {
  +     textAlign: 'center',
  +     fontSize: 14,
  +     fontWeight: '500',
  +   },
  +   footer: {
  +     flexDirection: 'row',
  +     justifyContent: 'center',
  +     alignItems: 'center',
  +     marginTop: 'auto',
  +     paddingBottom: 20,
  +   },
  +   footerText: {
  +     fontSize: 14,
  +   },
  + });

frontend/app/auth/reset-password.tsx

@@ -0,0 +1,184 @@
  + import React, { useState } from 'react';
  + import {
  +   View,
  +   Text,
  +   StyleSheet,
  +   ScrollView,
  +   KeyboardAvoidingView,
  +   Platform,
  +   Alert,
  + } from 'react-native';
  + import { Link, useLocalSearchParams, router } from 'expo-router';
  + import { SafeAreaView } from 'react-native-safe-area-context';
  + import { useThemeColor } from '@/hooks/use-theme-color';
  + import { Button, Input } from '@/components/ui';
  + import { useAuth } from '@/context/AuthContext';
  + 
  + export default function ResetPasswordScreen() {
  +   const { token } = useLocalSearchParams<{ token: string }>();
  +   const [password, setPassword] = useState('');
  +   const [confirmPassword, setConfirmPassword] = useState('');
  +   const [errors, setErrors] = useState<{
  +     password?: string;
  +     confirmPassword?: string;
  +   }>({});
  + 
  +   const { resetPassword } = useAuth();
  +   const [loading, setLoading] = useState(false);
  +   const textColor = useThemeColor({}, 'text');
  +   const backgroundColor = useThemeColor({}, 'background');
  +   const tintColor = useThemeColor({}, 'tint');
  + 
  +   const validateForm = () => {
  +     const newErrors: typeof errors = {};
  + 
  +     if (!password) {
  +       newErrors.password = 'A senha é obrigatória';
  +     } else if (password.length < 6) {
  +       newErrors.password = 'A senha deve conter pelo menos 6 caracteres';
  +     }
  + 
  +     if (!confirmPassword) {
  +       newErrors.confirmPassword = 'Por favor confirme sua senha';
  +     } else if (password !== confirmPassword) {
  +       newErrors.confirmPassword = 'As senhas não coincidem';
  +     }
  + 
  +     setErrors(newErrors);
  +     return Object.keys(newErrors).length === 0;
  +   };
  + 
  +   const handleResetPassword = async () => {
  +     if (!validateForm()) return;
  + 
  +     if (!token) {
  +       Alert.alert('Erro: ', 'Token de reset não encontrado. Por favor, solicite um novo link de recuperação.');
  +       return;
  +     }
  + 
  +     setLoading(true);
  +     try {
  +       await resetPassword(token, password);
  +       Alert.alert('Sucesso!', 'Senha recuperada com sucesso', [
  +         {
  +           text: 'OK',
  +           onPress: () => router.replace('/auth/login'),
  +         },
  +       ]);
  +     } catch (error: any) {
  +       Alert.alert('Erro: ', error.message || 'Falha em recuperar a conta');
  +     } finally {
  +       setLoading(false);
  +     }
  +   };
  + 
  +   return (
  +     <SafeAreaView style={[styles.container, { backgroundColor }]}>
  +       <KeyboardAvoidingView
  +         behavior='height'
  +         style={styles.keyboardView}
  +       >
  +         <ScrollView
  +           contentContainerStyle={styles.scrollContainer}
  +           showsVerticalScrollIndicator={false}
  +         >
  +           <View style={styles.header}>
  +             <Text style={[styles.title, { color: textColor }]}>Recuperar a conta</Text>
  +             <Text style={[styles.subtitle, { color: textColor, opacity: 0.7 }]}>
  +               Digite uma nova senha para sua conta
  +             </Text>
  +           </View>
  + 
  +           <View style={styles.form}>
  +             <Input
  +               label="Nova senha"
  +               type="password"
  +               value={password}
  +               onChangeText={setPassword}
  +               placeholder="Digite uma nova senha"
  +               error={errors.password}
  +               showPasswordToggle
  +             />
  + 
  +             <Input
  +               label="Confirmar nova senha"
  +               type="password"
  +               value={confirmPassword}
  +               onChangeText={setConfirmPassword}
  +               placeholder="Confirme a nova senha"
  +               error={errors.confirmPassword}
  +               showPasswordToggle
  +             />
  + 
  +             <Button
  +               title="Trocar senha"
  +               onPress={handleResetPassword}
  +               loading={loading}
  +               style={styles.resetButton}
  +             />
  +           </View>
  + 
  +           <View style={styles.footer}>
  +             <Text style={[styles.footerText, { color: textColor, opacity: 0.7 }]}>
  +               Lembrou da senha?{' '}
  +             </Text>
  +             <Link href="/auth/login" asChild style={[styles.link, { color: tintColor }]}>
  +               <Text style={[styles.link, { color: tintColor }]}>
  +                 Faça login
  +               </Text>
  +             </Link>
  +           </View>
  +         </ScrollView>
  +       </KeyboardAvoidingView>
  +     </SafeAreaView>
  +   );
  + }
  + 
  + const styles = StyleSheet.create({
  +   container: {
  +     flex: 1,
  +   },
  +   keyboardView: {
  +     flex: 1,
  +   },
  +   scrollContainer: {
  +     flexGrow: 1,
  +     paddingHorizontal: 24,
  +     justifyContent: 'center',
  +     minHeight: '100%',
  +   },
  +   header: {
  +     alignItems: 'center',
  +     marginBottom: 40,
  +   },
  +   title: {
  +     fontSize: 28,
  +     fontWeight: 'bold',
  +     marginBottom: 8,
  +   },
  +   subtitle: {
  +     fontSize: 16,
  +     textAlign: 'center',
  +   },
  +   form: {
  +     marginBottom: 32,
  +   },
  +   resetButton: {
  +     marginTop: 8,
  +   },
  +   link: {
  +     textAlign: 'center',
  +     fontSize: 14,
  +     fontWeight: '500',
  +   },
  +   footer: {
  +     flexDirection: 'row',
  +     justifyContent: 'center',
  +     alignItems: 'center',
  +     marginTop: 'auto',
  +     paddingBottom: 20,
  +   },
  +   footerText: {
  +     fontSize: 14,
  +   },
  + });

frontend/app/auth/signup.tsx

@@ -0,0 +1,214 @@
  + import React, { useState } from 'react';
  + import {
  +   View,
  +   Text,
  +   StyleSheet,
  +   ScrollView,
  +   KeyboardAvoidingView,
  +   Platform,
  +   Alert,
  + } from 'react-native';
  + import { Link, router } from 'expo-router';
  + import { SafeAreaView } from 'react-native-safe-area-context';
  + import { useThemeColor } from '@/hooks/use-theme-color';
  + import { Button, Input } from '@/components/ui';
  + import { useAuth } from '@/context/AuthContext';
  + 
  + export default function SignupScreen() {
  +   const [firstName, setFirstName] = useState('');
  +   const [lastName, setLastName] = useState('');
  +   const [email, setEmail] = useState('');
  +   const [password, setPassword] = useState('');
  +   const [confirmPassword, setConfirmPassword] = useState('');
  +   const [errors, setErrors] = useState<{
  +     firstName?: string;
  +     email?: string;
  +     password?: string;
  +     confirmPassword?: string;
  +   }>({});
  + 
  +   const { signup, isLoading } = useAuth();
  +   const textColor = useThemeColor({}, 'text');
  +   const backgroundColor = useThemeColor({}, 'background');
  +   const tintColor = useThemeColor({}, 'tint');
  + 
  +   const validateForm = () => {
  +     const newErrors: typeof errors = {};
  + 
  +     if (!firstName.trim()) {
  +       newErrors.firstName = 'O nome é obrigatório';
  +     }
  + 
  +     if (!email) {
  +       newErrors.email = 'Email é obrigatório';
  +     } else if (!/\S+@\S+\.\S+/.test(email)) {
  +       newErrors.email = 'Por favor entre um email válido';
  +     }
  + 
  +     if (!password) {
  +       newErrors.password = 'Senha é obrigatório';
  +     } else if (password.length < 6) {
  +       newErrors.password = 'A senha deve conter pelo menos 6 caracteres';
  +     }
  + 
  +     if (!confirmPassword) {
  +       newErrors.confirmPassword = 'Por favor confirme sua senha';
  +     } else if (password !== confirmPassword) {
  +       newErrors.confirmPassword = 'As senhas não coincidem';
  +     }
  + 
  +     setErrors(newErrors);
  +     return Object.keys(newErrors).length === 0;
  +   };
  + 
  +   const handleSignup = async () => {
  +     if (!validateForm()) return;
  + 
  +     try {
  +       await signup({
  +         first_name: firstName,
  +         last_name: lastName || undefined,
  +         email,
  +         password,
  +       });
  +       router.replace('/(tabs)');
  +     } catch (error: any) {
  + 	  Alert.alert('Erro:', error.message || 'Falha no cadastro. Tente novamente.');
  +     }
  +   };
  + 
  +   return (
  +     <SafeAreaView style={[styles.container, { backgroundColor }]}>
  +       <KeyboardAvoidingView
  +         behavior='height'
  +         style={styles.keyboardView}
  +       >
  +         <ScrollView
  +           contentContainerStyle={styles.scrollContainer}
  +           showsVerticalScrollIndicator={false}
  +         >
  +           <View style={styles.header}>
  +             <Text style={[styles.title, { color: textColor }]}>Criar conta</Text>
  +             <Text style={[styles.subtitle, { color: textColor, opacity: 0.7 }]}>
  +               Cadastre-se para começar a monitorar o seu humor.
  +             </Text>
  +           </View>
  + 
  +           <View style={styles.form}>
  +             <Input
  +               label="Nome"
  +               value={firstName}
  +               onChangeText={setFirstName}
  +               placeholder="Digite seu nome"
  +               error={errors.firstName}
  +             />
  + 
  +             <Input
  +               label="Sobrenome (opcional)"
  +               value={lastName}
  +               onChangeText={setLastName}
  +               placeholder="Digite seu sobrenome"
  +             />
  + 
  +             <Input
  +               label="Email"
  +               type="email"
  +               value={email}
  +               onChangeText={setEmail}
  +               placeholder="Qual seu email?"
  +               error={errors.email}
  +               autoCapitalize="none"
  +             />
  + 
  +             <Input
  +               label="Password"
  +               type="password"
  +               value={password}
  +               onChangeText={setPassword}
  +               placeholder="Escolha uma senha (min. 6 caracteres)"
  +               error={errors.password}
  +               showPasswordToggle
  +             />
  + 
  +             <Input
  +               label="Confirme a senha"
  +               type="password"
  +               value={confirmPassword}
  +               onChangeText={setConfirmPassword}
  +               placeholder="Confirme sua senha"
  +               error={errors.confirmPassword}
  +               showPasswordToggle
  +             />
  + 
  +             <Button
  +               title="Criar conta"
  +               onPress={handleSignup}
  +               loading={isLoading}
  +               style={styles.signupButton}
  +             />
  +           </View>
  + 
  +           <View style={styles.footer}>
  +             <Text style={[styles.footerText, { color: textColor, opacity: 0.7 }]}>
  +               Já tem uma conta?{' '}
  +             </Text>
  +             <Link href="/auth/login" asChild style={[styles.link, { color: tintColor }]}>
  +               <Text style={[styles.link, { color: tintColor }]}>
  +                 Faça login
  +               </Text>
  +             </Link>
  +           </View>
  +         </ScrollView>
  +       </KeyboardAvoidingView>
  +     </SafeAreaView>
  +   );
  + }
  + 
  + const styles = StyleSheet.create({
  +   container: {
  +     flex: 1,
  +   },
  +   keyboardView: {
  +     flex: 1,
  +   },
  +   scrollContainer: {
  +     flexGrow: 1,
  +     paddingHorizontal: 24,
  +     justifyContent: 'center',
  +     minHeight: '100%',
  +   },
  +   header: {
  +     alignItems: 'center',
  +     marginBottom: 40,
  +   },
  +   title: {
  +     fontSize: 28,
  +     fontWeight: 'bold',
  +     marginBottom: 8,
  +   },
  +   subtitle: {
  +     fontSize: 16,
  +     textAlign: 'center',
  +   },
  +   form: {
  +     marginBottom: 32,
  +   },
  +   signupButton: {
  +     marginTop: 8,
  +   },
  +   link: {
  +     textAlign: 'center',
  +     fontSize: 14,
  +     fontWeight: '500',
  +   },
  +   footer: {
  +     flexDirection: 'row',
  +     justifyContent: 'center',
  +     alignItems: 'center',
  +     marginTop: 'auto',
  +     paddingBottom: 20,
  +   },
  +   footerText: {
  +     fontSize: 14,
  +   },
  + });