Déconnexion permise

client/app/(tabs)/_layout.tsx

@@ -2,10 +2,18 @@ import { Tabs } from 'expo-router'
 import React from 'react'
 import { FontAwesome6, MaterialIcons } from '@expo/vector-icons'
 import TabBar from '@/components/ui/TabBar'
+import TabsHeader from '@/components/ui/TabsHeader'
 
 export default function TabLayout() {
   return (
-    <Tabs tabBar={(props) => <TabBar {...props} />}>
+    <>
+    <Tabs
+      tabBar={(props) => <TabBar {...props} />}
+      screenOptions={{
+        tabBarHideOnKeyboard: true,
+        header: (props) => <TabsHeader navProps={props} children={undefined} />,
+      }}
+    >
       <Tabs.Screen
         name="index"
         options={{
@@ -47,5 +55,6 @@ export default function TabLayout() {
         }}
       />
     </Tabs>
+    </>
   )
 }

client/app/_layout.tsx

@@ -9,6 +9,7 @@ import * as SecureStore from '@/utils/SecureStore'
 import { useStartGeolocationServiceEffect } from '@/utils/geolocation'
 import { useEffect } from 'react'
 import { useRouteInfo } from 'expo-router/build/hooks'
+import TabsHeader from '@/components/ui/TabsHeader'
 
 export default function RootLayout() {
   useStartGeolocationServiceEffect()
@@ -29,7 +30,7 @@ export default function RootLayout() {
         <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
           <Stack>
             <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-            <Stack.Screen name="login" options={{ title: "Connexion" }} />
+            <Stack.Screen name="login" options={{ headerShown: false }} />
             <Stack.Screen name="+not-found" />
           </Stack>
           <StatusBar style="auto" />

client/app/login.tsx

@@ -2,10 +2,12 @@ import * as SecureStore from "@/utils/SecureStore"
 import { useRouter } from "expo-router"
 import { useRef, useState } from "react"
 import { Platform } from "react-native"
-import { Button, Dialog, Portal, Surface, Text, TextInput } from "react-native-paper"
+import { Appbar, Button, Dialog, Portal, Surface, Text, TextInput } from "react-native-paper"
 
 export default function Login() {
   const router = useRouter()
+  const [isLoggedIn, setIsLoggedIn] = useState(SecureStore.getItem("apiToken") !== null)
+  console.log(SecureStore.getItem("apiToken"))
   const [name, setName] = useState(SecureStore.getItem('apiName') ?? "")
   const [password, setPassword] = useState("")
   const [errorDialogVisible, setErrorDialogVisible] = useState(false)
@@ -17,7 +19,7 @@ export default function Login() {
 
   const hideErrorDialog = () => setErrorDialogVisible(false)
 
-  async function onLogin() {
+  async function login() {
     const resp = await fetch("http://192.168.1.198:3000/auth/login/", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
@@ -49,8 +51,20 @@ export default function Login() {
       router.navigate('/')
   }
 
+  async function logout() {
+    await SecureStore.deleteItemAsync("apiName")
+    await SecureStore.deleteItemAsync("apiPassword")
+    await SecureStore.deleteItemAsync("apiToken")
+    setIsLoggedIn(false)
+  }
+
   return (
     <Surface style={{ flex: 1 }}>
+      <Appbar.Header>
+        {isLoggedIn && router.canGoBack() ? <Appbar.BackAction onPress={() => router.back()} /> : undefined}
+        <Appbar.Content title={"Connexion"} />
+        {isLoggedIn ? <Appbar.Action icon={"logout"} onPress={logout} /> : undefined}
+      </Appbar.Header>
       <TextInput
           ref={loginRef}
           label="Nom"
@@ -63,10 +77,10 @@ export default function Login() {
           label="Mot de passe"
           value={password}
           onChangeText={(text) => setPassword(text)}
-          onSubmitEditing={onLogin}
+          onSubmitEditing={login}
           secureTextEntry={true}
           style={{ margin: 8 }} />
-      <Button onPress={onLogin} mode="contained" icon="login" style={{ margin: 8 }}>
+      <Button onPress={login} mode="contained" icon="login" style={{ margin: 8 }}>
         Se connecter
       </Button>
       <Portal>