From 69ecd250b05eabcd724dca31244d6fec586a15d8 Mon Sep 17 00:00:00 2001 From: Charles Mendiburu Date: Fri, 4 Apr 2025 10:43:42 +0200 Subject: [PATCH] Session de connexion utilisateur --- Front-end/package-lock.json | 1 - Front-end/src/App.jsx | 35 ++++++++-------- Front-end/src/AuthContext.jsx | 42 +++++++++++++++++++ Front-end/src/components/Header.jsx | 64 ++++++++++++++++++----------- Front-end/src/pages/Home.jsx | 15 +++---- Front-end/src/pages/Login.jsx | 32 +++++++++------ 6 files changed, 128 insertions(+), 61 deletions(-) create mode 100644 Front-end/src/AuthContext.jsx diff --git a/Front-end/package-lock.json b/Front-end/package-lock.json index ef59651..d8b5823 100644 --- a/Front-end/package-lock.json +++ b/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", diff --git a/Front-end/src/App.jsx b/Front-end/src/App.jsx index ed03803..36e3226 100644 --- a/Front-end/src/App.jsx +++ b/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,23 +8,25 @@ 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 ( - -
-
- - } /> - } /> - } /> - } /> - } /> - } /> - }/> - -
- + {/* Enveloppe l'application avec AuthProvider */} + +
+
+ + } /> + } /> + } /> + } /> + } /> + } /> + } /> + +
+ + ); } diff --git a/Front-end/src/AuthContext.jsx b/Front-end/src/AuthContext.jsx new file mode 100644 index 0000000..ca5abc9 --- /dev/null +++ b/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 ( + + {children} + + ); +}; diff --git a/Front-end/src/components/Header.jsx b/Front-end/src/components/Header.jsx index c50e3b4..31d0542 100644 --- a/Front-end/src/components/Header.jsx +++ b/Front-end/src/components/Header.jsx @@ -1,35 +1,51 @@ -import React from "react"; -import { LogIn, UserPlus } from "lucide-react"; -import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; +import React, { useState, useEffect } from "react"; +import { LogIn, UserPlus, LogOut } from "lucide-react"; +import { Link } from "react-router-dom"; + +import { useAuth } from "../AuthContext"; function Header() { + const { token, logout } = useAuth(); + return (

Hopital de Pau

+
    +
  • + Accueil +
    • +
  • + A propos +
    • +
  • + Gestion +
    • +
+
- - - Connexion - - - - Inscription - + {token ? ( + + ) : ( + <> + + + Connexion + + + + Inscription + + + )}
@@ -37,4 +53,4 @@ function Header() { ); } -export default Header; \ No newline at end of file +export default Header; diff --git a/Front-end/src/pages/Home.jsx b/Front-end/src/pages/Home.jsx index 057a81d..dfa1187 100644 --- a/Front-end/src/pages/Home.jsx +++ b/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 [activeFilter, setActiveFilter] = useState('all'); - + const token = localStorage.getItem("token"); return ( -
Home - - +
+ {token ? ( + <>Home + + ):( +

Non connecté

+ )}
) } diff --git a/Front-end/src/pages/Login.jsx b/Front-end/src/pages/Login.jsx index ebc3102..5aab8e4 100644 --- a/Front-end/src/pages/Login.jsx +++ b/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 })); @@ -19,7 +22,7 @@ function Login() { const handleSubmit = async (e) => { e.preventDefault(); - + try { const response = await fetch("http://localhost:8888/login", { method: "POST", @@ -28,21 +31,24 @@ 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) { - throw new Error(data.error || "Erreur lors de la connexion"); + + // Vérifiez que la réponse contient bien un token + 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 (