Assessment - WM Feuvrel - Login, Tokens, and more

app.json

@@ -33,7 +33,8 @@
           "resizeMode": "contain",
           "backgroundColor": "#ffffff"
         }
-      ]
+      ],
+      "expo-web-browser"
     ],
     "experiments": {
       "typedRoutes": true

app/_layout.tsx

@@ -4,7 +4,10 @@ import { Stack } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
 import 'react-native-reanimated';
 
+import { AuthProvider, useAuth } from '@/components/hooks/AuthContext';
+import { sharedStyles } from '@/components/styles/styles';
 import { useColorScheme } from '@/hooks/useColorScheme';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 export default function RootLayout() {
   const colorScheme = useColorScheme();
@@ -18,12 +21,30 @@ export default function RootLayout() {
   }
 
   return (
-    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-      <Stack>
-        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        <Stack.Screen name="+not-found" />
-      </Stack>
-      <StatusBar style="auto" />
-    </ThemeProvider>
+    <SafeAreaView style={sharedStyles.container}>
+      <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+        <AuthProvider>
+          <StatusBar style="auto" />
+          <RootNavigator />
+        </AuthProvider>
+      </ThemeProvider>
+    </SafeAreaView>
   );
 }
+
+const options = { headerShown: false };
+const RootNavigator = () => {
+  const { isLoggedIn } = useAuth();
+  // const isLoggedIn = true;
+  console.log('AppStack isLoggedIn', isLoggedIn)
+  return (
+    <Stack screenOptions={options}>
+      <Stack.Protected guard={isLoggedIn}>
+        <Stack.Screen name="home" />
+      </Stack.Protected>
+      <Stack.Protected guard={!isLoggedIn}>
+        <Stack.Screen name="login" />
+      </Stack.Protected>
+    </Stack>
+  )
+}

app/home.tsx

@@ -0,0 +1,50 @@
+import { StyleSheet } from 'react-native';
+
+import PageWrapper from '@/components/PageWrapper';
+import { ThemedText } from '@/components/ThemedText';
+import { ThemedView } from '@/components/ThemedView';
+import { Button } from '@/components/buttons/Button';
+import { useAuth } from '@/components/hooks/AuthContext';
+
+const dailyAffirmations = [
+  "You are a thoughtful and well liked individual.",
+  "You look fantastic today!",
+  "Everyone is so proud of you!"
+];
+
+const getAffirmation = () => {
+  const randomInt = Math.floor(Math.random() * dailyAffirmations.length );
+  return dailyAffirmations[randomInt];
+}
+
+export default function HomeScreen() {
+  const {logout} = useAuth();
+
+    const handleLogout = async () => {
+    logout();
+  };
+
+
+  return (
+    <PageWrapper>
+      <ThemedView style={styles.titleContainer}>
+        <ThemedText type="title">Home</ThemedText>
+      </ThemedView>
+      <ThemedView style={styles.titleContainer}>
+        <ThemedText>{getAffirmation()}</ThemedText>
+      </ThemedView>
+      <Button label="Logout" press={handleLogout} style={styles.logoutButton}/>
+    </PageWrapper>
+  );
+}
+
+const styles = StyleSheet.create({
+  titleContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  logoutButton: {
+    marginTop: 10
+  }
+});

app/index.tsx

@@ -0,0 +1,5 @@
+import { Redirect } from "expo-router";
+
+export default function Index() {
+  return <Redirect href="/login" />
+}

app/login.tsx

@@ -0,0 +1,74 @@
+import { StyleSheet, TextInput, View } from 'react-native';
+
+import { Button } from '@/components/buttons/Button';
+import { useAuth } from '@/components/hooks/AuthContext';
+import PageWrapper from '@/components/PageWrapper';
+import { colors, defaultFormBase } from '@/components/styles/styles';
+import { ThemedText } from '@/components/ThemedText';
+import { ThemedView } from '@/components/ThemedView';
+import { useRef, useState } from 'react';
+
+export default function LoginScreen() {
+  const { login } = useAuth();
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const usernameInputRef = useRef<TextInput>(null);
+  const passwordInputRef = useRef<TextInput>(null);
+
+  const handleSetUsername = (value: string) => {
+    setUsername(value);
+  }
+
+  const handleSetPassword = (value: string) => {
+    setPassword(value);
+  }
+
+  const handleSubmit = async () => {
+    if (!username || !password) {
+      alert('Both fields are required.');
+      return;
+    }
+
+    // Blur on submit
+    const currentField = usernameInputRef.current ?? passwordInputRef.current
+    currentField && currentField.blur();
+
+    login(username, password);
+  };
+
+  return (
+    <PageWrapper>
+      <ThemedView style={styles.titleContainer}>
+        <View>
+          <ThemedText type="title">Login</ThemedText>
+          <ThemedText type="subtitle">Sign in to view your information</ThemedText>
+        </View>
+      </ThemedView>
+      <ThemedView style={styles.fieldContainer}>
+        <TextInput style={styles.input} value={username} onChangeText={handleSetUsername} placeholder='Username' />
+        <TextInput style={styles.input} value={password} onChangeText={handleSetPassword} placeholder='Password' />
+        <Button label="Login" press={handleSubmit}/>
+      </ThemedView>
+    </PageWrapper>
+  );
+}
+
+const styles = StyleSheet.create({
+  titleContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  input: {
+    ...defaultFormBase,
+    borderColor: colors.border,
+    borderWidth: 1,
+    padding: 5,
+    height: 44,
+    marginVertical: 16,
+    borderRadius: 4,
+  },
+  fieldContainer: {
+    marginTop: 20
+  }
+});