Ajout de la connexion utilisateur

src/components/form.jsx

@@ -1,22 +1,39 @@
+import { useState } from "react";
+import login from "../utils/login.js";
+import getUser from "../utils/getUser.js";
+
 function LoginForm({ className }) {
+
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+
+    async function handleSubmit(e) {
+
+        e.preventDefault();
+
+        await login(email, password);
+        getUser();
+
+    }
+
     return (
-        <form className={className} method="POST" action="#">
+        <div className={className}>
             <h1>Connexion</h1>
 
             <div className="form-group">
                 <br/>
                 <label htmlFor="email" className="floating-label">Adresse e-mail</label>
-                <input type="email"id="email"required/>
+                <input type="email" id="email" value={email} onChange={e => setEmail(e.target.value)} required/>
             </div>
 
             <div className="form-group">
                 <label htmlFor="password" className="floating-label">Mot de passe</label>
-                <input type="password"id="password"required/>
+                <input type="password" id="password" value={password} onChange={e => setPassword(e.target.value)} required/>
                 <br/>
             </div>
 
-            <button type="submit" className="login-button">Se connecter</button>
-        </form>
+            <button className="login-button" onClick={e => handleSubmit(e)}>Se connecter</button>
+        </div>
     );
 }
 export default LoginForm;

src/utils/getUser.js

@@ -0,0 +1,12 @@
+export default async function getUser() {
+    await fetch('http://localhost:8000/api/me', {
+        method: 'GET',
+        credentials: 'include',
+        headers: {
+            'Accept': 'application/json'
+        }
+    })
+        .then(res => res.json())
+        .then(data => console.log('Utilisateur connecté :', data))
+        .catch(err => console.error('Erreur :', err));
+}

src/utils/getXSRF.js

@@ -0,0 +1,19 @@
+export default async function getXSRFToken() {
+    const response = await fetch('http://localhost:8000/sanctum/csrf-cookie', {
+        method: 'GET',
+        credentials: 'include'
+    });
+
+    if (!response.ok && response.status !== 204) {
+        throw new Error(`Error : ${response.status}`);
+    }
+
+    const name = 'XSRF-TOKEN';
+    const value = `; ${document.cookie}`;
+    const parts = value.split(`; ${name}=`);
+    if (parts.length === 2) {
+        return decodeURIComponent(parts.pop().split(';').shift());
+    }
+
+    throw new Error('Error: Invalid XSRF-TOKEN');
+}

src/utils/login.js

@@ -0,0 +1,33 @@
+import getXSRFToken from "./getXSRF.js";
+
+export default async function login(email, password) {
+    const csrfToken = await getXSRFToken();
+
+
+    await fetch('http://localhost:8000/api/login', {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-XSRF-TOKEN': csrfToken,
+            'Accept': 'application/json'
+        },
+        body: JSON.stringify({
+            email: email,
+            password: password
+        })
+    })
+        .then(response => {
+            console.log('Code HTTP :', response.status);
+            if (!response.ok) {
+                throw new Error(`Erreur HTTP ${response.status}`);
+            }
+            return response.json();
+        })
+        .then(data => {
+            console.log('Connexion réussie ! Données utilisateur :', data);
+        })
+        .catch(error => {
+            console.error('Erreur lors de la connexion :', error.message);
+        });
+}