Session de connexion utilisateur
This commit is contained in:
Charles Mendiburu
parent
7395063bf2
commit
69ecd250b0
1
Front-end/package-lock.json
generated
1
Front-end/package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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 (
|
||||
<Router>
|
||||
<div>
|
||||
<Header />
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/about" element={<About />} />
|
||||
<Route path="/gestion" element={<Gestion />} />
|
||||
<Route path="/gestionObjets" element={<ObjectManagement />} />
|
||||
<Route path="/objet" element={<Objet />} />
|
||||
<Route path="/signup" element={<Signup />} />
|
||||
<Route path="/login" element={<Login/>}/>
|
||||
</Routes>
|
||||
</div>
|
||||
</Router>
|
||||
<AuthProvider> {/* Enveloppe l'application avec AuthProvider */}
|
||||
<Router>
|
||||
<div>
|
||||
<Header />
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/about" element={<About />} />
|
||||
<Route path="/gestion" element={<Gestion />} />
|
||||
<Route path="/gestionObjets" element={<ObjectManagement />} />
|
||||
<Route path="/objet" element={<Objet />} />
|
||||
<Route path="/signup" element={<Signup />} />
|
||||
<Route path="/login" element={<Login />} />
|
||||
</Routes>
|
||||
</div>
|
||||
</Router>
|
||||
</AuthProvider>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
42
Front-end/src/AuthContext.jsx
Normal file
42
Front-end/src/AuthContext.jsx
Normal file
@ -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>
|
||||
);
|
||||
};
|
||||
@ -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 (
|
||||
<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>
|
||||
<li>
|
||||
<a href="/">Accueil</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/about">A propos</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/gestion">Gestion</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<ul className="flex gap-4">
|
||||
<li>
|
||||
<Link to="/" className="text-gray-600 hover:text-indigo-600">Accueil</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/about" className="text-gray-600 hover:text-indigo-600">A propos</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/gestion" className="text-gray-600 hover:text-indigo-600">Gestion</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div className="flex gap-4">
|
||||
<Link to="/login" className="flex items-center gap-2 text-gray-600 hover:text-indigo-600">
|
||||
<LogIn size={20} />
|
||||
<span>Connexion</span>
|
||||
</Link>
|
||||
<Link to="/signup" className="flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700">
|
||||
<UserPlus size={20} />
|
||||
<span>Inscription</span>
|
||||
</Link>
|
||||
{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>
|
||||
</Link>
|
||||
<Link to="/signup" className="flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700">
|
||||
<UserPlus size={20} />
|
||||
<span>Inscription</span>
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -37,4 +53,4 @@ function Header() {
|
||||
);
|
||||
}
|
||||
|
||||
export default Header;
|
||||
export default Header;
|
||||
|
||||
@ -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 (
|
||||
|
||||
<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
|
||||
<img src='../../public/images/snow.jpg' />
|
||||
|
||||
<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]'>
|
||||
{token ? (
|
||||
<>Home
|
||||
<img src='public/images/snow.jpg' />
|
||||
</>):(
|
||||
<h2>Non connecté</h2>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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 (
|
||||
<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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user