Authentification

front/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@headlessui/react": "^2.2.0",
+    "@tasoskakour/react-use-oauth2": "^2.0.2",
     "framer-motion": "^12.4.3",
     "lucide-react": "^0.475.0",
     "react": "^19.0.0",

front/src/App.jsx

@@ -1,9 +1,11 @@
+/* eslint-disable react/jsx-no-comment-textnodes */
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Header from "./components/Header";
 import Footer from "./components/Footer";
-import { ThemeProvider, useTheme } from "./ThemeProvider";
+import { ThemeProvider } from "./ThemeProvider";
 import ScrollToTopButton from "./components/ScrollTop";
 import ScrollToTop from './components/ScrollTopImmediate';
+import { OAuthPopup } from "@tasoskakour/react-use-oauth2";
 
 
 import Exemple from "./pages/Exemple-page";
@@ -89,6 +91,7 @@ function App() {
       <Header />
       <Routes>
         <Route path="/" element={<Home />} />
+        <Route element={<OAuthPopup />} path="/callback" />
         <Route path="/Exemple" element={<Exemple />} />
 
         //Vie courante

front/src/auth.jsx

@@ -0,0 +1,41 @@
+import { useOAuth2 } from "@tasoskakour/react-use-oauth2";
+
+export const useAuth = () => {
+
+    const { data, loading, error, getAuth, logout } = useOAuth2({
+        authorizeUrl: "http://localhost:8000/auth/authorize",
+        clientId: "SafetyCards",
+        clientSecret: "SafetyCards",
+        redirectUri: `${document.location.origin}/callback`,
+        scope: "API",
+        responseType: "code",
+        // Suppression de exchangeCodeForTokenQuery
+        exchangeCodeForTokenQueryFn: async (callbackParameters) => {
+            const params = new URLSearchParams(callbackParameters);
+            params.append("grant_type", "authorization_code");
+            params.append("client_id", "SafetyCards");
+            params.append("client_secret", "SafetyCards");
+            const response = await fetch("http://localhost:8000/auth/token", {
+                method: "POST",
+                body: params.toString(),
+                headers: {
+                    "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
+                }
+            });
+            if (!response.ok) {
+                throw new Error("Token exchange failed: " + response.statusText);
+            }
+            return response.json();
+        },
+        onSuccess: (payload) => console.log("Success", payload),
+        onError: (error_) => console.log("Error", error_)
+    });
+
+    return {
+        data,
+        loading,
+        error,
+        getAuth,
+        logout
+    };
+}

front/src/pages/Contact/Infirmerie.jsx

@@ -1,27 +1,82 @@
-import Quote from "../../components/Citation"; 
-import ImageTextPopup from "../../components/Cartes"; 
-import ListeNumerotee from "../../components/Listes";
-import ExternalLinkBlock from "../../components/Liens-ext";
-import Components from "../../components/Common";
-import ContactCard from "../../components/Contact";
-import React from "react";
-import { Chiffre, ChiffresGroup } from "../../components/Chiffres";
-import Separateur from "../../components/Separateur";
+import { useEffect, useState } from "react";
 import "../../App.css";
+import { useAuth } from "../../auth";
 
-const { BulletList, NumberedList, TextImageRight, ImageCenter, Navbar, YouTubeVideo} = Components;
-
-
 
 const Infirmerie = () => {
+
+  const { data, loading, error, getAuth, logout } = useAuth(); // Assurez-vous que le hook useAuth est correctement importé
+
+  const isLoggedIn = Boolean(data?.access_token); // or whatever...
+
+  const [contacts, setContacts] = useState([]);
+
+  useEffect(() => {
+    async function fetchContacts() {
+      if (!data?.access_token) return; // ne fetch pas si l'utilisateur n'est pas authentifié
+
+      await new Promise((resolve) => setTimeout(resolve, 1000)); // Simule un délai de 1 seconde
+      setContacts({
+        mail: "test.exemple@ex.com",
+        phone: "01 02 03 04 05",
+        adresse: "1 rue de la sécurité, 75000 Paris",
+        horaire: "Lundi au Vendredi, 9h-17h",
+      });
+
+      /*try {
+        const response = await fetch("http://localhost:8000/advert/adverts", {
+          headers: {
+            "Content-Type": "application/json",
+            "Authorization": "Bearer " + data?.access_token,
+          },
+        });
+        if (!response.ok) {
+          data.access_token = null; // Réinitialiser le token si la requête échoue
+          logout(); // Déconnexion de l'utilisateur
+          throw new Error("Failed to fetch users");
+        }
+        const contactsData = await response.json();
+        setContacts(contactsData);
+      } catch (err) {
+        console.error("Error fetching contacts:", err);
+      }*/
+    }
+    fetchContacts();
+  }, [data, data?.access_token, logout]);
+
+  if (error) {
+    return <div>Erreur lors de la connexion à MyECL.</div>;
+  }
+
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+
+  if (isLoggedIn) {
     return (
       <div className="page">
         <h1 className="titre-page">Infirmerie</h1>
 
           <h1 className="sous-titre-2">Contact</h1>
+          <p className="texte"> Mail : {contacts.mail}</p>
+          <p className="texte"> Téléphone : {contacts.phone}</p>
+          <p className="texte"> Adresse : {contacts.adresse}</p>
+          <p className="texte"> Horaires : {contacts.horaire}</p>
+
+          <button onClick={logout}>Logout</button>
+      </div>
+    )
+  }
+
+    return (
+      <div className="page">
+        <h1 className="titre-page">Connexion</h1>
+
+        <p className="texte"> Vous devez vous connecter pour accéder à ses informations :</p>
 
-          <p className="texte"> Mail :</p>
-          <p className = "texte"> Téléphone : </p>
+        <button style={{ margin: "24px" }} type="button" onClick={() => getAuth()}>
+          Se connecter
+        </button>
 
       </div>
     );