Video 2

FIAP · Oct 19, 2024 · b7233d2 · b7233d2
1 parent 6358989
commit b7233d2
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 23 deletions.
diff --git a/app/(auth)/login.tsx b/app/(auth)/login.tsx
@@ -1,14 +1,44 @@
 import { View, Text, Button, TextInput } from 'react-native';
 import { Link } from 'expo-router';
 import { router } from 'expo-router';
+import { useState } from 'react';
+import { useAuth } from '@/context/AuthContext';
 
 export default function Login() {
+
+  const { login } = useAuth()
+
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+
+
   return (
     <View style={{ flex: 1, justifyContent: 'center', padding: 16 }}>
       <Text style={{ fontSize: 24, marginBottom: 16 }}>Login</Text>
-      <TextInput placeholder="Email" style={{ borderWidth: 1, marginBottom: 16, padding: 8 }} />
-      <TextInput placeholder="Password" secureTextEntry style={{ borderWidth: 1, marginBottom: 16, padding: 8 }} />
-      <Button title="Login" onPress={() => { router.replace('/(protected)/profile') }} />
+
+      <TextInput 
+        placeholder="Email" 
+        style={{ borderWidth: 1, marginBottom: 16, padding: 8 }} 
+        value={email}  
+        onChangeText={setEmail}
+      />
+
+      <TextInput 
+        placeholder="Password" 
+        secureTextEntry 
+        style={{ borderWidth: 1, marginBottom: 16, padding: 8 }} 
+        value={password}
+        onChangeText={setPassword}  
+      />
+
+      <Button title="Login" onPress={() => { 
+
+        const isAuthenticated = login(email, password)
+        if (isAuthenticated) {
+          router.replace('/(protected)/profile') 
+        }
+
+      }} />
       <Link href="/signup" style={{ marginTop: 16 }}>Don't have an account? Sign up</Link>
     </View>
   );

diff --git a/app/(auth)/signup.tsx b/app/(auth)/signup.tsx
@@ -1,13 +1,40 @@
 import { View, Text, Button, TextInput } from 'react-native';
-import { Link } from 'expo-router';
+import { Link, router } from 'expo-router';
+import { useState } from 'react';
+import { useAuth } from '@/context/AuthContext';
 
 export default function Signup() {
+
+  const { signUp } = useAuth()
+
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+
   return (
     <View style={{ flex: 1, justifyContent: 'center', padding: 16 }}>
       <Text style={{ fontSize: 24, marginBottom: 16 }}>Sign Up</Text>
-      <TextInput placeholder="Email" style={{ borderWidth: 1, marginBottom: 16, padding: 8 }} />
-      <TextInput placeholder="Password" secureTextEntry style={{ borderWidth: 1, marginBottom: 16, padding: 8 }} />
-      <Button title="Sign Up" onPress={() => {}} />
+
+      <TextInput 
+        placeholder="Email" 
+        style={{ borderWidth: 1, marginBottom: 16, padding: 8 }} 
+        value={email}  
+        onChangeText={setEmail}
+      />
+
+      <TextInput 
+        placeholder="Password" 
+        secureTextEntry 
+        style={{ borderWidth: 1, marginBottom: 16, padding: 8 }} 
+        value={password}
+        onChangeText={setPassword}  
+      />
+
+      <Button title="Sign Up" onPress={() => {
+
+        signUp(email, password)
+        router.replace('/login')
+
+      }} />
       <Link href="/login" style={{ marginTop: 16 }}>Already have an account? Log in</Link>
     </View>
   );

diff --git a/app/(protected)/_layout.tsx b/app/(protected)/_layout.tsx
@@ -1,12 +1,11 @@
 import { View, Text } from 'react-native';
-import { Slot, useRouter } from 'expo-router';
+import { Slot } from 'expo-router';
+import { useAuth } from '@/context/AuthContext';
 
 export default function ProtectedLayout() {
-  const isAuthenticated = true; // Mocked authentication, always true
+  const { isAuthenticated } = useAuth();
 
   if (!isAuthenticated) {
-    const router = useRouter();
-    router.replace('/login');
     return null;
   }
 

diff --git a/app/(protected)/profile.tsx b/app/(protected)/profile.tsx
@@ -1,11 +1,16 @@
+import { useAuth } from '@/context/AuthContext';
 import { router } from 'expo-router';
 import { View, Text, Button } from 'react-native';
 
 export default function Profile() {
+  const { logout } = useAuth()
   return (
     <View style={{ flex: 1, justifyContent: 'center', padding: 16 }}>
       <Text style={{ fontSize: 24 }}>Profile Page</Text>
-      <Button title="Logout" onPress={() => { router.replace('/(auth)/login') }} />
+      <Button title="Logout" onPress={() => { 
+        logout()
+        router.replace('/(auth)/login') 
+      }} />
     </View>
   );
 }
diff --git a/app/_layout.tsx b/app/_layout.tsx
@@ -6,6 +6,7 @@ import { useEffect } from 'react';
 import 'react-native-reanimated';
 
 import { useColorScheme } from '@/hooks/useColorScheme';
+import { AuthProvider } from '@/context/AuthContext';
 
 SplashScreen.preventAutoHideAsync();
 
@@ -29,10 +30,12 @@ export default function RootLayout() {
   }
 
   return (
-    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-      <Stack>
-        <Stack.Screen name="+not-found" />
-      </Stack>
-    </ThemeProvider>
+    <AuthProvider>
+      <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+        <Stack>
+          <Stack.Screen name="+not-found" />
+        </Stack>
+      </ThemeProvider>
+    </AuthProvider>
   );
 }
diff --git a/context/AuthContext.tsx b/context/AuthContext.tsx
@@ -8,7 +8,7 @@ interface User {
 interface IAuthContext {
     user: User | null
     users: User[]
-    login: (email: string, password: string) => void
+    login: (email: string, password: string) => boolean
     signUp: (email: string, password: string) => void
     logout: () => void
     isAuthenticated: boolean
@@ -19,27 +19,31 @@ const AuthContext = createContext<IAuthContext | undefined>(undefined)
 export const AuthProvider = ({ children }: { children: ReactNode }) => {
     const [user, setUser] = useState<User | null>(null)
     const [users, setUsers] = useState<User[]>([])
+    const [isAuthenticated, setIsAuthenticated] = useState(false)
 
     const login = (email: string, password: string) => {
         const foundUser = users.find(u => u.email === email && u.password === password)
         if (foundUser) {
             setUser(user)
+            setIsAuthenticated(true)
             console.log('AuthProvider :: login - usuário logado com sucesso')
-        } else {
-            console.log('AuthProvider :: login - usuário não encontrado')
-        }
+            return true
+        } 
+        console.log('AuthProvider :: login - usuário não encontrado')
+        return false
     }
 
     const signUp = (email: string, password: string) => {
         setUsers([...users, { email, password }])
+        console.log('AuthProvider :: signUp - usuário cadastrado com sucesso')
     }
 
     const logout = () => {
+        console.log('AuthProvider :: logout - usuário deslogado com sucesso')
         setUser(null)
+        setIsAuthenticated(false)
     }
 
-    const isAuthenticated = !!user
-
     return <AuthContext.Provider value={{
         user,
         users,