feat: add proconnect btn

SocialGouv · Jan 24, 2025 · c2a2b25 · c2a2b25
1 parent 6aa4d44
commit c2a2b25
Show file tree

Hide file tree

Showing 20 changed files with 3,531 additions and 2,763 deletions.
diff --git a/src/client/src/components/App/App.js b/src/client/src/components/App/App.js
@@ -1,10 +1,11 @@
 import "./app.scss";
 
 import { ApolloProvider } from "@apollo/client";
+import axios from "axios";
 import { createBrowserHistory } from "history";
 import PiwikReactRouter from "piwik-react-router";
 import PropTypes from "prop-types";
-import React from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { Provider } from "react-redux";
 import {
   BrowserRouter,
@@ -21,6 +22,7 @@ import Enterprise from "../../containers/Enterprise";
 import LegacyEtablissement from "../../containers/Enterprise/LegacyEtablissement";
 import ListEtablissements from "../../containers/Enterprise/ListEtablissements.jsx";
 import Login from "../../containers/Login";
+import Compte from "../../containers/ProConnectCompte/Compte.jsx";
 import PublicPage from "../../containers/PublicPage";
 import Search from "../../containers/Search";
 import SetMatomo from "../../helpers/Matomo/SetMatomo.js";
@@ -32,6 +34,7 @@ import CustomLayout from "../../services/PrivateRoute/CustomLayout.jsx";
 import configureStore from "../../services/Store";
 import { getSirenFromSiret } from "../../utils/establishment/establishment.js";
 import HomePage from "../HomePage";
+import { UserContext } from "../Login/UserContext.js";
 import Maintenance from "../Maintenance";
 import Statistics from "../PublicPage/Statistics";
 import RequestAccess from "../RequestAccessForm/RequestAccess";
@@ -50,19 +53,50 @@ const setupMatomo = (history, matomoConfig) => {
     piwik.connectToHistory(history, SetMatomo(matomoConfig));
   }
 };
+const SERVER_URL = process.env.REACT_APP_SERVER_URL;
 
-const ProtectedRoute = ({ children, redirectTo = "/login" }) => {
+const ProtectedRoute = ({
+  children,
+  redirectTo = "/login",
+  isProConnected = true,
+  isProLoading = true,
+}) => {
+  if (isProLoading) {
+    return <p>Checking Authentication...</p>;
+  }
   const auth = Auth.isLogged();
-  return auth ? children : <Navigate to={redirectTo} />;
+
+  return isProConnected || auth ? children : <Navigate to={redirectTo} />;
 };
 
 ProtectedRoute.propTypes = {
   children: PropTypes.node.isRequired,
+  isProConnected: PropTypes.bool,
+  isProLoading: PropTypes.bool,
   redirectTo: PropTypes.string.isRequired,
 };
 
 const App = () => {
   setupMatomo(browserHistory, globalMatomoConfig);
+  const { updateUser, user } = useContext(UserContext);
+  const [isProConnected, setIsProConnected] = useState(false);
+  const [isProLoading, setIsProLoading] = useState(true);
+
+  useEffect(() => {
+    axios
+      .get(`${SERVER_URL}/current_user`, { withCredentials: true })
+      .then((response) => {
+        setIsProLoading(true);
+        console.log("response current_user", response, user);
+        updateUser(response.data.user);
+        setIsProConnected(true);
+      })
+      .catch((error) => {
+        console.log("Utilisateur non connecté", error);
+        setIsProConnected(false);
+      })
+      .finally(() => setIsProLoading(false));
+  }, []);
 
   return (
     <Provider store={store}>
@@ -79,7 +113,11 @@ const App = () => {
                       <Route
                         path="/"
                         element={
-                          <ProtectedRoute redirectTo="/home">
+                          <ProtectedRoute
+                            redirectTo="/home"
+                            isProConnected={isProConnected}
+                            isProLoading={isProLoading}
+                          >
                             <IEChecker>
                               <Layout displayMessage>
                                 <Search />
@@ -88,10 +126,30 @@ const App = () => {
                           </ProtectedRoute>
                         }
                       />
+                      <Route
+                        path="/compte"
+                        element={
+                          <ProtectedRoute
+                            redirectTo="/home"
+                            isProConnected={isProConnected}
+                            isProLoading={isProLoading}
+                          >
+                            <IEChecker>
+                              <Layout>
+                                <Compte />
+                              </Layout>
+                            </IEChecker>
+                          </ProtectedRoute>
+                        }
+                      />
                       <Route
                         path="/search"
                         element={
-                          <ProtectedRoute redirectTo="/home">
+                          <ProtectedRoute
+                            redirectTo="/home"
+                            isProConnected={isProConnected}
+                            isProLoading={isProLoading}
+                          >
                             <IEChecker>
                               <Layout displayMessage>
                                 <Search />
@@ -103,23 +161,36 @@ const App = () => {
                       <Route
                         path="/enterprise/:siren"
                         element={
-                          <ProtectedRoute redirectTo="/home">
+                          <ProtectedRoute
+                            redirectTo="/home"
+                            isProConnected={isProConnected}
+                            isProLoading={isProLoading}
+                          >
                             <EnterpriseWrapper />
                           </ProtectedRoute>
                         }
                       />
                       <Route
                         path="/establishment/:siret"
                         element={
-                          <ProtectedRoute redirectTo="/home">
+                          <ProtectedRoute
+                            redirectTo="/home"
+                            isProConnected={isProConnected}
+                            isProLoading={isProLoading}
+                          >
                             <EstablishmentWrapper />
                           </ProtectedRoute>
                         }
                       />
+
                       <Route
                         path="/list-establishments/:siren"
                         element={
-                          <ProtectedRoute redirectTo="/home">
+                          <ProtectedRoute
+                            redirectTo="/home"
+                            isProConnected={isProConnected}
+                            isProLoading={isProLoading}
+                          >
                             <ListEstablishmentsWrapper />
                           </ProtectedRoute>
                         }

diff --git a/src/client/src/components/App/Breadcrumbs/Breadcrumbs.jsx b/src/client/src/components/App/Breadcrumbs/Breadcrumbs.jsx
@@ -10,6 +10,7 @@ const Breadcrumbs = () => {
   const invalidPaths = [
     "",
     "/",
+    "/compte",
     "/search",
     "/a-propos",
     "/faq",

diff --git a/src/client/src/components/App/Header/Header.js b/src/client/src/components/App/Header/Header.js
@@ -1,18 +1,28 @@
 import "./header.scss";
 
 import PropTypes from "prop-types";
-import React from "react";
+import React, { useContext } from "react";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 
 import LogoFCE from "../../../assets/img/FCE.svg";
 import Logo from "../../../assets/img/Footer_Logo.svg";
+import Auth from "../../../services/Auth/index.js";
 import { resetSearch } from "../../../services/Store/actions";
+import { UserContext } from "../../Login/UserContext.js";
+import ArrowDown from "../../shared/Icons/ArrowDown.jsx";
 import MessageIcon from "../../shared/Icons/MessageIcon.jsx";
 import Tooltip from "../../shared/Tooltip/Tooltip.jsx";
 import HeaderLogo from "../Logo/Logo.jsx";
 
 const Header = ({ resetSearch, hasSharedButton = false }) => {
+  const { user, logout } = useContext(UserContext);
+  const auth = Auth.isLogged();
+  const handleLogoutClick = (event) => {
+    event.stopPropagation();
+    logout();
+  };
+  const SERVER_URL = process.env.REACT_APP_SERVER_URL;
   return (
     <header className="app-header ">
       <div className="container is-fluid ">
@@ -51,17 +61,82 @@ const Header = ({ resetSearch, hasSharedButton = false }) => {
               </div>
             </Link>
 
-            {hasSharedButton && (
+            {
               <div className="header__mailto">
-                <Tooltip content="Partager FCE avec un agent" position={"left"}>
-                  <div className="icon-button-link">
-                    <a href="mailto:?subject=FCE - le portail de l'intelligence collective des agents publics&body=https://fce.fabrique.social.gouv.fr/">
-                      <MessageIcon />
+                {!auth && !user && (
+                  <div className="header__proConnect">
+                    <a
+                      href={`${SERVER_URL}/auth/proconnect`}
+                      className="proconnect-button"
+                    >
+                      <span className="proconnect-sr-only">
+                        S’identifier avec ProConnect
+                      </span>
                     </a>
+                    <p>
+                      <a
+                        href="https://www.proconnect.gouv.fr/"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        title="Qu’est-ce que ProConnect ? - nouvelle fenêtre"
+                      >
+                        Qu’est-ce que ProConnect ?
+                      </a>
+                    </p>
+                  </div>
+                )}
+                {!auth && user && (
+                  <div className="logout-btn-div">
+                    <div className=" dropdown is-hoverable">
+                      <div className="dropdown-trigger">
+                        <button
+                          className="button logout-btn-div-dropdown"
+                          aria-haspopup="true"
+                          aria-controls="dropdown-menu3"
+                        >
+                          <span className="is-link ">{user?.email}</span>
+
+                          <span>
+                            <ArrowDown size={18} color="#161616" />
+                          </span>
+                        </button>
+                      </div>
+                      <div
+                        className="dropdown-menu"
+                        id="dropdown-menu3"
+                        role="menu"
+                      >
+                        <div className="dropdown-content">
+                          <a href="/compte" className="dropdown-item">
+                            Compte
+                          </a>
+
+                          <hr className="dropdown-divider" />
+                          <button
+                            className="dropdown-item dropdown-item-btn"
+                            onClick={handleLogoutClick}
+                          >
+                            Se déconnecter
+                          </button>
+                        </div>
+                      </div>
+                    </div>
                   </div>
-                </Tooltip>
+                )}
+                {!hasSharedButton && (
+                  <Tooltip
+                    content="Partager FCE avec un agent"
+                    position={"left"}
+                  >
+                    <div className="icon-button-link">
+                      <a href="mailto:?subject=FCE - le portail de l'intelligence collective des agents publics&body=https://fce.fabrique.social.gouv.fr/">
+                        <MessageIcon />
+                      </a>
+                    </div>
+                  </Tooltip>
+                )}
               </div>
-            )}
+            }
           </div>
         </nav>
       </div>

diff --git a/src/client/src/components/App/Header/header.scss b/src/client/src/components/App/Header/header.scss
diff --git a/src/client/src/components/DataSheets/Sections/SharedComponents/EstablishmentContext.jsx b/src/client/src/components/DataSheets/Sections/SharedComponents/EstablishmentContext.jsx
@@ -7,13 +7,8 @@ import { useSidebarData } from "../../Sidebar/Sidebar.gql";
 const EstablishmentContext = createContext();
 
 export const EstablishmentProvider = ({ siren, children }) => {
-  const {
-    loading,
-    data: entreprise,
-    error,
-  } = useSidebarData(siren, {
-    limit: undefined,
-  });
+  const { loading, data: entreprise, error } = useSidebarData(siren);
+
   if (loading || error) {
     return null;
   }

diff --git a/src/client/src/components/HomePage/HomePage.js b/src/client/src/components/HomePage/HomePage.js
@@ -1,15 +1,18 @@
 import "./homePage.scss";
 
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { Navigate } from "react-router-dom";
 
 import Auth from "../../services/Auth";
 import Http from "../../services/Http";
+import { UserContext } from "../Login/UserContext";
 import Search from "../Search/Search";
 import { DailyUse, Footer, HowItWork, IconItems, Summary } from "./sections";
 
 const HomePage = () => {
   const isLogged = Auth.isLogged();
+  const { user } = useContext(UserContext);
+
   const [users, setUsers] = useState();
   const [isLoading, setIsLoading] = useState(false);
 
@@ -34,7 +37,7 @@ const HomePage = () => {
     getUsers();
   }, [setUsers, setIsLoading]);
 
-  if (isLogged)
+  if (isLogged || user)
     return (
       <Navigate
         to={{

diff --git a/src/client/src/components/HomePage/homePage.scss b/src/client/src/components/HomePage/homePage.scss
diff --git a/src/client/src/components/Login/UserContext.js b/src/client/src/components/Login/UserContext.js
@@ -0,0 +1,42 @@
+import axios from "axios";
+import PropTypes from "prop-types";
+import React, { createContext, useState } from "react";
+
+const SERVER_URL = process.env.REACT_APP_SERVER_URL;
+
+export const UserContext = createContext(null);
+
+export const UserProvider = ({ children }) => {
+  const [user, setUser] = useState(null);
+
+  // Fonction pour mettre à jour l'utilisateur
+  const updateUser = (userData) => {
+    setUser(userData);
+  };
+
+  const logout = () => {
+    axios
+      .get(`${SERVER_URL}/logout`, { withCredentials: true })
+      .then((res) => {
+        console.log(res);
+
+        // Mettre à jour le contexte utilisateur
+        updateUser(null);
+        // Rediriger vers la page de connexion ou d'accueil
+        window.location.href = "/login";
+      })
+      .catch((error) => {
+        console.error("Erreur lors de la déconnexion", error);
+      });
+  };
+
+  return (
+    <UserContext.Provider value={{ logout, updateUser, user }}>
+      {children}
+    </UserContext.Provider>
+  );
+};
+
+UserProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};