83 lines
2.7 KiB
TypeScript

import 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"
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)
})
if (!resp)
return
else if (resp.error) {
setErrorDialogVisible(true)
setErrorTitle(resp.error)
setErrorText(resp.message)
return
}
SecureStore.setItem("apiName", name)
if (Platform.OS !== "web") {
// Le stockage navigateur n'est pas sûr, on évite de stocker un mot de passe à l'intérieur
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>
)
}