Session de connexion utilisateur

Front-end/package-lock.json

@@ -1475,7 +1475,6 @@
       "version": "1.8.4",
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.8.4.tgz",
       "integrity": "sha512-eBSYY4Y68NNlHbHBMdeDmKNtDgXWhQsJcGqzO3iLUM0GraQFSS9cVgPX5I9b3lbdFKyYoAEGAZF1DwhTaljNAw==",
-      "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",

Front-end/src/App.jsx

@@ -1,4 +1,5 @@
-import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { AuthProvider } from './AuthContext.jsx';
 import Home from "./pages/Home.jsx";
 import About from "./pages/About.jsx";
 import Gestion from "./pages/Gestion/Gestion.jsx";
@@ -7,9 +8,10 @@ import ObjectManagement from "./pages/Gestion/ObjectManagement.jsx";
 import Objet from "./pages/Gestion/Objet.jsx";
 import Signup from './pages/Signup.jsx';
 import Login from './pages/Login.jsx';
-function App() {
 
+function App() {
   return (
+    <AuthProvider>  {/* Enveloppe l'application avec AuthProvider */}
       <Router>
         <div>
           <Header />
@@ -24,6 +26,7 @@ function App() {
           </Routes>
         </div>
       </Router>
+    </AuthProvider>
   );
 }
 

Front-end/src/AuthContext.jsx

@@ -0,0 +1,42 @@
+// src/AuthContext.js
+import React, { createContext, useContext, useState, useEffect } from "react";
+
+// Créer le contexte
+const AuthContext = createContext();
+
+// Hook pour accéder facilement au contexte
+export const useAuth = () => useContext(AuthContext);
+
+// Fournisseur de contexte qui gère l'état du token
+export const AuthProvider = ({ children }) => {
+  const [token, setToken] = useState(localStorage.getItem("token"));
+
+  // Met à jour le token lorsque localStorage change
+  useEffect(() => {
+    const handleStorageChange = () => {
+      setToken(localStorage.getItem("token"));
+    };
+
+    window.addEventListener("storage", handleStorageChange);
+
+    return () => {
+      window.removeEventListener("storage", handleStorageChange);
+    };
+  }, []);
+
+  const login = (newToken) => {
+    localStorage.setItem("token", newToken);
+    setToken(newToken);
+  };
+
+  const logout = () => {
+    localStorage.removeItem("token");
+    setToken(null);
+  };
+
+  return (
+    <AuthContext.Provider value={{ token, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};

Front-end/src/components/Header.jsx

@@ -1,27 +1,41 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
-import { LogIn, UserPlus } from "lucide-react";
+import { LogIn, UserPlus, LogOut } from "lucide-react";
-import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
+
+import { useAuth } from "../AuthContext";
 
 function Header() {
+  const { token, logout } = useAuth();
+
   return (
     <header className="bg-white shadow-sm">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
         <div className="flex justify-between items-center">
           <h1 className="text-2xl font-bold text-indigo-600">Hopital de Pau</h1>
           <nav>
-          <ul>
+            <ul className="flex gap-4">
               <li>
-              <a href="/">Accueil</a>
+                <Link to="/" className="text-gray-600 hover:text-indigo-600">Accueil</Link>
               </li>
               <li>
-              <a href="/about">A propos</a>
+                <Link to="/about" className="text-gray-600 hover:text-indigo-600">A propos</Link>
               </li>
               <li>
-              <a href="/gestion">Gestion</a>
+                <Link to="/gestion" className="text-gray-600 hover:text-indigo-600">Gestion</Link>
               </li>
             </ul>
           </nav>
           <div className="flex gap-4">
+            {token ? (
+              <button
+                onClick={logout}
+                className="flex items-center gap-2 text-gray-600 hover:text-red-600"
+              >
+                <LogOut size={20} />
+                <span>Déconnexion</span>
+              </button>
+            ) : (
+              <>
                 <Link to="/login" className="flex items-center gap-2 text-gray-600 hover:text-indigo-600">
                   <LogIn size={20} />
                   <span>Connexion</span>
@@ -30,6 +44,8 @@ function Header() {
                   <UserPlus size={20} />
                   <span>Inscription</span>
                 </Link>
+              </>
+            )}
           </div>
         </div>
       </div>

Front-end/src/pages/Home.jsx

@@ -1,15 +1,16 @@
 import React, { useState } from 'react';
-import { Search, MapPin, Calendar, Bus, ArrowRight } from 'lucide-react';
 
 function Home() {
-  const [searchQuery, setSearchQuery] = useState('');
+  const token = localStorage.getItem("token");
-  const [activeFilter, setActiveFilter] = useState('all');
-
   return (
 
-    <div className='max-w-[1296px] m-auto flex flex-col md:flex-row items-center justify-between p-[50px_0_60px] md:p-[104px_0]'>Home
+    <div className='max-w-[1296px] m-auto flex flex-col md:flex-row items-center justify-between p-[50px_0_60px] md:p-[104px_0]'>
-      <img src='../../public/images/snow.jpg' />
+      {token ? (
-
+        <>Home
+      <img src='public/images/snow.jpg' />
+        </>):(
+        <h2>Non connecté</h2>
+      )}
     </div>
   )
 }

Front-end/src/pages/Login.jsx

@@ -1,17 +1,20 @@
 import React, { useState } from 'react';
 import { Mail, Lock } from 'lucide-react';
-import { useNavigate, Link } from 'react-router-dom'; // Importation du hook useNavigate
+import { useNavigate, Link } from 'react-router-dom';
+import axios from 'axios'; // Assurez-vous d'avoir axios importé
+import { useAuth } from '../AuthContext';
 
 function Login() {
   const [formData, setFormData] = useState({
     email: '',
     password: ''
   });
+  const { login } = useAuth(); // Utilisation du hook useAuth pour accéder à la fonction login
   const navigate = useNavigate(); // Initialisation de useNavigate
 
   const handleChange = (e) => {
     const { name, value } = e.target;
-    setFormData(prev => ({
+    setFormData((prev) => ({
       ...prev,
       [name]: value
     }));
@@ -29,20 +32,23 @@ function Login() {
         body: JSON.stringify(formData),
       });
 
+      // Récupérer les données JSON de la réponse
       const data = await response.json();
 
-      if (!response.ok) {
+      // Vérifiez que la réponse contient bien un token
-        throw new Error(data.error || "Erreur lors de la connexion");
+      if (data.token) {
+        // Appel de la fonction login du contexte pour stocker le token
+        login(data.token);
+
+        // Rediriger vers la page d'accueil après la connexion
+        navigate('/');
+      } else {
+        console.error('Token manquant dans la réponse');
       }
-  
-      localStorage.setItem("token", data.token);
-      navigate("/");
-      
     } catch (error) {
-      alert(error.message);
+      console.error('Erreur lors de la connexion', error);
     }
   };
-
   return (
     <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50 py-12 px-4 sm:px-6 lg:px-8">
       <div className="w-96 bg-white rounded-lg shadow-md p-6 mx-auto">