first commit

resources/js/pages/Auth/Login.tsx

@@ -0,0 +1,56 @@
+import React, {FormEvent, SyntheticEvent, useState} from "react"
+import axios from "axios";
+import {Link, useNavigate} from "react-router-dom";
+import useAxiosTools from "../../hooks/AxiosTools";
+import Field from "../../components/Field";
+import useAuthUser from "../../hooks/AuthUser";
+import Card from "../../components/Card";
+
+const Login = () => {
+
+    const navigate = useNavigate()
+    const {setAuthUser} = useAuthUser()
+    const [email, setEmail] = useState('')
+    const [password, setPassword] = useState('')
+    const {errorCatch, errorLabel, cleanErrors, axiosGet, axiosPost} = useAxiosTools()
+
+    const handleSubmit = async (event: FormEvent) => {
+        event.preventDefault()
+        try {
+            cleanErrors()
+            await axiosGet('/sanctum/csrf-cookie')
+            const res = await axiosPost('/api/login', {email, password})
+            setAuthUser(res.data)
+            navigate('/')
+        } catch (e) {
+            errorCatch(e)
+        }
+    }
+
+    return <div>
+        <Card className="w-96 mx-auto mt-10 p-2 overflow-hidden">
+            <form onSubmit={handleSubmit}>
+                <h1 className="text-center bg-blue-500 -mx-2 -mt-1 text-lg font-bold px-2 py-1 mb-2">
+                    Connexion
+                </h1>
+                {errorLabel()}
+
+                <Field type="email"
+                       name="email"
+                       placeholder="Email"
+                       value={email}
+                       onChange={event => setEmail(event.target.value)}
+                       autoFocus>Email</Field>
+                <Field type="password"
+                       name="password"
+                       placeholder="******"
+                       value={password}
+                       onChange={event => setPassword(event.target.value)}>Mot de passe</Field>
+                <button type="submit" className="mt-5 btn-primary w-full block text-lg">Valider</button>
+                <Link to="/mot-de-passe-oubliee" className="mt-2 inline-block">Mot de passe oublié ?</Link>
+            </form>
+        </Card>
+    </div>
+}
+
+export default Login