Ajout connexion au serveur

client/app/(tabs)/settings.tsx

@@ -1,12 +1,18 @@
-import { FlatList } from 'react-native'
+import { useRouter } from 'expo-router'
-import { Surface, Text } from 'react-native-paper'
+import { FAB, List, Surface } from 'react-native-paper'
-// import * as SecureStore from 'expo-secure-store'
+import * as SecureStore from 'expo-secure-store'
 
 export default function HistoryScreen() {
-  // const token = SecureStore.getItem("apiToken")
+  const router = useRouter()
+  const isLoggedIn = SecureStore.getItem("apiToken") !== null
   return (
-    <Surface>
+    <Surface
-      <FlatList data={["Se connecter à l'API"]} renderItem={({item}) => <Text>{item}</Text>} />
+      style={{ flex: 1 }}>
+      <List.Item
+          title="Connexion au serveur"
+          description={isLoggedIn ? "Vous êtes déjà connecté⋅e" : "Vous n'êtes pas connecté⋅e"}
+          right={() => <FAB icon="login" size="small" onPress={() => router.navigate('/login')} />}
+          onPress={() => router.navigate('/login')} />
     </Surface>
   )
 }

client/app/_layout.tsx

@@ -17,6 +17,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="+not-found" />
           </Stack>
           <StatusBar style="auto" />

client/app/login.tsx

@@ -0,0 +1,77 @@
+import { useRouter } from "expo-router"
+import { useRef, useState } from "react"
+import { Button, Dialog, Portal, Surface, Text, TextInput } from "react-native-paper"
+import * as SecureStore from 'expo-secure-store'
+
+export default function Login() {
+  const router = useRouter()
+  const [name, setName] = useState(SecureStore.getItem('apiName') ?? "")
+  const [password, setPassword] = useState("")
+  const [errorDialogVisible, setErrorDialogVisible] = useState(false)
+  const [errorTitle, setErrorTitle] = useState("")
+  const [errorText, setErrorText] = useState("")
+
+  const loginRef = useRef<any | null>()
+  const passwordRef = useRef<any | null>()
+
+  const hideErrorDialog = () => setErrorDialogVisible(false)
+
+  async function onLogin() {
+    const resp = await fetch("http://192.168.1.198:3000/auth/login/", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name: name, password: password })
+    })
+    .then(resp => resp.json())
+    .catch(err => {
+      setErrorDialogVisible(true)
+      setErrorTitle("Erreur")
+      setErrorText("Une erreur inconnue est survenue lors de la connexion. Veuillez réessayer plus tard. " + err)
+    })
+    console.log(resp)
+    if (resp.error) {
+      setErrorDialogVisible(true)
+      setErrorTitle(resp.error)
+      setErrorText(resp.message)
+      return
+    }
+    SecureStore.setItem("apiName", name)
+    SecureStore.setItem("apiPassword", password)
+    SecureStore.setItem("apiToken", resp.accessToken)
+    router.back()
+  }
+
+  return (
+    <Surface style={{ flex: 1 }}>
+      <TextInput
+          ref={loginRef}
+          label="Nom"
+          value={name}
+          onChangeText={(text) => setName(text)}
+          onSubmitEditing={() => passwordRef?.current.focus()}
+          style={{ margin: 8 }} />
+      <TextInput
+          ref={passwordRef}
+          label="Mot de passe"
+          value={password}
+          onChangeText={(text) => setPassword(text)}
+          onSubmitEditing={onLogin}
+          secureTextEntry={true}
+          style={{ margin: 8 }} />
+      <Button onPress={onLogin} mode="contained" icon="login" style={{ margin: 8 }}>
+        Se connecter
+      </Button>
+      <Portal>
+        <Dialog visible={errorDialogVisible} onDismiss={hideErrorDialog}>
+          <Dialog.Title>{errorTitle}</Dialog.Title>
+          <Dialog.Content>
+            <Text variant="bodyMedium">{errorText}</Text>
+          </Dialog.Content>
+          <Dialog.Actions>
+            <Button onPress={hideErrorDialog}>Ok</Button>
+          </Dialog.Actions>
+        </Dialog>
+      </Portal>
+    </Surface>
+  )
+}