first commt

resources/js/pages/Auth/Login.tsx

@@ -0,0 +1,46 @@
+import React, {FormEvent, SyntheticEvent, useState} from "react"
+import Field from "../../components/Field";
+import axios from "axios";
+import {useNavigate} from "react-router-dom";
+import useAuthUser from "../../hooks/AuthUser";
+
+const Login = () => {
+
+    const navigate = useNavigate()
+    const {setAuthUser} = useAuthUser()
+    const [email, setEmail] = useState('')
+    const [password, setPassword] = useState('')
+
+    const handleSubmit = async (event: FormEvent) => {
+        event.preventDefault()
+        try {
+            await axios.get('/sanctum/csrf-cookie')
+            const res = await axios.post('/api/login', {email, password})
+            setAuthUser(res.data.user)
+            navigate('/')
+        } catch (e) {
+            console.error(e)
+        }
+    }
+
+    return <div>
+        <form onSubmit={handleSubmit} className="w-96 mx-auto mt-10 border shadow p-3">
+            <h1 className="text-center">Connexion</h1>
+
+            <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 bg-blue-700 w-full block text-white px-5 py-2 text-lg rounded">Valider</button>
+        </form>
+    </div>
+}
+
+export default Login

resources/js/pages/Auth/Profile.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import useAuthUser from "../../hooks/AuthUser";
+
+const Profile = () => {
+
+    const {authUser} = useAuthUser()
+
+    return <>
+        <h1>Profile</h1>
+        <div>
+            <span>Nom: <strong>{authUser?.name}</strong></span>
+        </div>
+        <div>Update name & email</div>
+        <div>Change password</div>
+        <div>Delete Account</div>
+    </>
+}
+
+export default Profile

resources/js/pages/Auth/Register.tsx

@@ -0,0 +1,51 @@
+import React, {ChangeEvent, FormEvent, SyntheticEvent, useState} from "react"
+import Field from "../../components/Field";
+import axios from "axios";
+import {useNavigate} from "react-router-dom";
+
+const Register = () => {
+
+    const navigate = useNavigate()
+    const [name, setName] = useState('')
+    const [email, setEmail] = useState('')
+    const [password, setPassword] = useState('')
+
+    const handleSubmit = async (event: FormEvent) => {
+        event.preventDefault()
+        try {
+            await axios.get('/sanctum/csrf-cookie')
+            const res = await axios.post('/api/register', {name, email, password})
+            console.log(name, email, password)
+            navigate('/')
+        } catch (e) {
+            console.error(e)
+        }
+    }
+
+    return <div>
+        <form onSubmit={handleSubmit} className="w-96 mx-auto mt-10 border shadow p-3">
+            <h1 className="text-center">S'inscrire</h1>
+
+            <Field placeholder="Nom"
+                   name="name"
+                   value={name}
+                   onChange={event => setName(event.target.value)}
+                   autoFocus>Nom</Field>
+            <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)}
+                   autoFocus>Mot de passe</Field>
+            <button type="submit" className="mt-5 bg-blue-700 w-full block text-white px-5 py-2 text-lg rounded">Valider</button>
+        </form>
+    </div>
+}
+
+export default Register