Add logout btn

src/contexts/auth/authProvider.jsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
 import loginFunction from "../../utils/login.js";
 import getUser from "../../utils/getUser.js";
 import { AuthContext } from "./AuthContext";
+import logoutFunction from "../../utils/auth/logout.js"
 
 
 export function AuthProvider({ children }) {
@@ -25,7 +26,7 @@ export function AuthProvider({ children }) {
     };
 
     const logout = async () => {
-        // TODO: Appeller fonction logout
+        await logoutFunction();
         setUser(null);
     };
 

src/index.css

@@ -3,7 +3,6 @@
   padding: 0;
   width: 100%;
   box-sizing: border-box;
-  overflow-x: hidden;
 }
 
 :root {

src/pages/Profile/ProfilePage.jsx

@@ -8,9 +8,13 @@ import { useNavigate } from "react-router";
 
 function ProfilePage() {
 
-    const { user } = useContext(AuthContext);
+    const { user, logout } = useContext(AuthContext);
     const navigate = useNavigate();
 
+    const handleLogout = () => {
+        logout();
+    }
+
   return (
     <div className={styles.container}>
       <div className={`${styles.profileboard} glassCard`}>
@@ -23,7 +27,10 @@ function ProfilePage() {
             />
           </div>
           <div className={styles.description}>
+            <div className={styles.headerProfile}>
                 <h2> {user.name} {user.lastname} </h2>
+                <Button variant={"danger"} onClick={handleLogout}> Déconnexion </Button>
+            </div>
             <div className={styles.topDescription}>
               <div className={styles.infoBlock}>
                 <p><strong>Role :</strong> {user.role}</p>

src/pages/Profile/ProfilePage.module.css

@@ -66,7 +66,7 @@
 }
 .description h2{
     font-size:30px;
-    margin-bottom: 2%;
+
 }
 .profilePicture{
     width:90%;
@@ -105,7 +105,6 @@
   }
   .description h2{
     font-size:30px;
-    margin-bottom: 2%;
 }
 .profilePicture{
     width:90%;
@@ -122,6 +121,14 @@
     width:50px;
 }
 
+.headerProfile {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
 /* Desktop (1024px et plus) */
 @media screen and (min-width: 1024px) {
   .container {
@@ -151,6 +158,5 @@
   }
   .description h2{
     font-size:30px;
-    margin-bottom: 2%;
 }
 }

src/utils/auth/logout.js

@@ -0,0 +1,28 @@
+import getXSRFToken from "../getXSRF.js";
+
+export default async function logout() {
+
+    const csrfToken = await getXSRFToken();
+
+    try {
+        const response = await fetch(`http://${import.meta.env.VITE_API_URL}/api/users/logout`, {
+            method: 'POST',
+            credentials: 'include',
+            headers: {
+                'Content-Type': 'application/json',
+                'Accept': 'application/json',
+                'X-XSRF-TOKEN': csrfToken
+            },
+        });
+
+        console.log('Code HTTP :', response.status);
+
+        if (!response.ok) {
+            throw new Error(`Erreur HTTP ${response.status}`);
+        }
+
+        return { status: response.status };
+    } catch (error) {
+        return error;
+    }
+}