Reworks Header and routing

MTES-MCT · Jan 17, 2025 · 20f8183 · 20f8183
1 parent 2237f4e
commit 20f8183
Show file tree

Hide file tree

Showing 6 changed files with 198 additions and 177 deletions.
diff --git a/back/src/routers/auth-router.ts b/back/src/routers/auth-router.ts
@@ -44,7 +44,7 @@ authRouter.post(
       }
       req.logIn(user, () => {
         storeUserSessionsId(user.id, req.session.id);
-        const returnTo = req.body.returnTo || "/";
+        const returnTo = req.body.returnTo || "/dashboard";
         return res.redirect(`${UI_BASE_URL}${returnTo}`);
       });
     })(req, res, next);

diff --git a/front/src/Apps/Dashboard/DashboardRoutes.tsx b/front/src/Apps/Dashboard/DashboardRoutes.tsx
@@ -65,7 +65,7 @@ const toRelative = route => {
 
 function DashboardRoutes() {
   const { siret } = useParams<{ siret: string }>();
-  const { data } = useQuery<Pick<Query, "me">>(GET_ME);
+  const { data, loading } = useQuery<Pick<Query, "me">>(GET_ME);
   const { updatePermissions } = usePermissions();
 
   const navigate = useNavigate();
@@ -108,7 +108,7 @@ function DashboardRoutes() {
     }
   }, [updatePermissions, data, siret]);
 
-  if (data?.me == null) {
+  if (loading || data?.me == null) {
     return <Loader />;
   }
 

diff --git a/front/src/Apps/common/Components/layout/Header.tsx b/front/src/Apps/common/Components/layout/Header.tsx
@@ -673,7 +673,153 @@ export default function Header() {
     canViewNewRegistry
   );
 
-  return !isAuthenticated ? (
+  return (
+    <>
+      <div id="header" className={`fr-header ${styles.header}`}>
+        <div className={styles.headerContent}>
+          <div className={`fr-enlarge-link ${styles.headerBranding}`}>
+            <Link to="/dashboard">
+              <img
+                src="/marianne.svg"
+                alt=""
+                style={{ height: "40px", width: "40px", marginRight: "24px" }}
+              />
+
+              <img
+                src="/trackdechets.png"
+                alt="trackdechets.data.gouv.fr"
+                style={{ height: "40px", width: "40px" }}
+              />
+            </Link>
+          </div>
+
+          <nav className={`fr-nav ${styles.headerNav}`}>
+            <ul
+              className={`fr-nav__list ${styles.headerNavList}`}
+              style={{ margin: "initial", maxWidth: "initial" }}
+            >
+              {menuEntries.map((e, idx) => (
+                <li
+                  id={
+                    e.caption === allBsdsMenuEntryLbl
+                      ? "header-all-bsds-link"
+                      : ""
+                  }
+                  className="fr-nav__item"
+                  key={idx}
+                >
+                  <MenuLink entry={e} />
+                </li>
+              ))}
+
+              <li className="fr-nav__item">
+                <button
+                  className="fr-nav__btn"
+                  style={{ width: "fit-content" }}
+                  aria-expanded="false"
+                  aria-controls="aidemenu"
+                >
+                  Aide
+                </button>
+                <div className="fr-collapse fr-menu" id="aidemenu">
+                  <ul className="fr-menu__list">
+                    <li>
+                      <a
+                        className="fr-nav__link"
+                        href="https://faq.trackdechets.fr/"
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        Foire aux questions
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        className="fr-nav__link"
+                        href="https://sandbox.trackdechets.beta.gouv.fr/"
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        Site de démonstration
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        className="fr-nav__link"
+                        href="https://trackdechets.beta.gouv.fr/"
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        Page d'accueil / Formations
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+              </li>
+            </ul>
+          </nav>
+
+          <div className={styles.headerActions}>
+            <form
+              name="logout"
+              action={`${VITE_API_ENDPOINT}/logout`}
+              method="post"
+            >
+              <Button
+                iconId="fr-icon-logout-box-r-line"
+                onClick={() => {
+                  localAuthService.locallySignOut();
+                  document.forms["logout"].submit();
+                  return false;
+                }}
+                priority="tertiary no outline"
+                title="Se déconnecter"
+              />
+            </form>
+          </div>
+
+          <button
+            className={`fr-btn fr-btn--tertiary fr-icon-menu-fill ${styles.headerToggle}`}
+            data-fr-opened="false"
+            aria-controls="header-menu-modal-fr-header-simple-header"
+            aria-haspopup="menu"
+            id="fr-header-simple-header-menu-button"
+            title="Menu"
+            data-fr-js-modal-button="true"
+          >
+            Menu
+          </button>
+        </div>
+
+        <MobileSubNav
+          currentCompany={currentCompany}
+          canViewNewRegistry={canViewNewRegistry}
+        />
+      </div>
+
+      {/* Company switcher on top of the page */}
+      {!!matchDashboard && companies && currentCompany && (
+        <div className={styles.companySelector}>
+          <div className="company-select">
+            <CompanySwitcher
+              currentOrgId={currentCompany.orgId}
+              companies={companies}
+              handleCompanyChange={handleCompanyChange}
+            />
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+/**
+ * Main nav when logged out
+ * Contains External and internal links
+ * On mobile appear as a sliding panel and includes other items
+ */
+export function UnauthenticatedHeader() {
+  return (
     <header
       role="banner"
       id="fr-header-with-horizontal-operator-logo"
@@ -852,142 +998,5 @@ export default function Header() {
         </div>
       </div>
     </header>
-  ) : (
-    <>
-      <div id="header" className={`fr-header ${styles.header}`}>
-        <div className={styles.headerContent}>
-          <div className={`fr-enlarge-link ${styles.headerBranding}`}>
-            <Link to="/">
-              <img
-                src="/marianne.svg"
-                alt=""
-                style={{ height: "40px", width: "40px", marginRight: "24px" }}
-              />
-
-              <img
-                src="/trackdechets.png"
-                alt="trackdechets.data.gouv.fr"
-                style={{ height: "40px", width: "40px" }}
-              />
-            </Link>
-          </div>
-
-          <nav className={`fr-nav ${styles.headerNav}`}>
-            <ul
-              className={`fr-nav__list ${styles.headerNavList}`}
-              style={{ margin: "initial", maxWidth: "initial" }}
-            >
-              {menuEntries.map((e, idx) => (
-                <li
-                  id={
-                    e.caption === allBsdsMenuEntryLbl
-                      ? "header-all-bsds-link"
-                      : ""
-                  }
-                  className="fr-nav__item"
-                  key={idx}
-                >
-                  <MenuLink entry={e} />
-                </li>
-              ))}
-
-              <li className="fr-nav__item">
-                <button
-                  className="fr-nav__btn"
-                  style={{ width: "fit-content" }}
-                  aria-expanded="false"
-                  aria-controls="aidemenu"
-                >
-                  Aide
-                </button>
-                <div className="fr-collapse fr-menu" id="aidemenu">
-                  <ul className="fr-menu__list">
-                    <li>
-                      <a
-                        className="fr-nav__link"
-                        href="https://faq.trackdechets.fr/"
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        Foire aux questions
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        className="fr-nav__link"
-                        href="https://sandbox.trackdechets.beta.gouv.fr/"
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        Site de démonstration
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        className="fr-nav__link"
-                        href="https://trackdechets.beta.gouv.fr/"
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        Page d'accueil / Formations
-                      </a>
-                    </li>
-                  </ul>
-                </div>
-              </li>
-            </ul>
-          </nav>
-
-          <div className={styles.headerActions}>
-            <form
-              name="logout"
-              action={`${VITE_API_ENDPOINT}/logout`}
-              method="post"
-            >
-              <Button
-                iconId="fr-icon-logout-box-r-line"
-                onClick={() => {
-                  localAuthService.locallySignOut();
-                  document.forms["logout"].submit();
-                  return false;
-                }}
-                priority="tertiary no outline"
-                title="Se déconnecter"
-              />
-            </form>
-          </div>
-
-          <button
-            className={`fr-btn fr-btn--tertiary fr-icon-menu-fill ${styles.headerToggle}`}
-            data-fr-opened="false"
-            aria-controls="header-menu-modal-fr-header-simple-header"
-            aria-haspopup="menu"
-            id="fr-header-simple-header-menu-button"
-            title="Menu"
-            data-fr-js-modal-button="true"
-          >
-            Menu
-          </button>
-        </div>
-
-        <MobileSubNav
-          currentCompany={currentCompany}
-          canViewNewRegistry={canViewNewRegistry}
-        />
-      </div>
-
-      {/* Company switcher on top of the page */}
-      {!!matchDashboard && companies && currentCompany && (
-        <div className={styles.companySelector}>
-          <div className="company-select">
-            <CompanySwitcher
-              currentOrgId={currentCompany.orgId}
-              companies={companies}
-              handleCompanyChange={handleCompanyChange}
-            />
-          </div>
-        </div>
-      )}
-    </>
   );
 }
diff --git a/front/src/Apps/common/Components/layout/Layout.tsx b/front/src/Apps/common/Components/layout/Layout.tsx
@@ -3,7 +3,7 @@ import { gql, useQuery } from "@apollo/client";
 import Button from "@codegouvfr/react-dsfr/Button";
 import { Query } from "@td/codegen-ui";
 import { Outlet } from "react-router-dom";
-import Header from "./Header";
+import Header, { UnauthenticatedHeader } from "./Header";
 import { Toaster } from "react-hot-toast";
 import sandboxIcon from "./assets/code-sandbox.svg";
 import downtimeIcon from "./assets/code-downtime.svg";
@@ -12,6 +12,7 @@ import A11ySkipLinks from "../A11ySkipLinks/A11ySkipLinks";
 
 interface AuthProps {
   v2banner?: JSX.Element;
+  unauthenticatedRoutes?: boolean;
 }
 const { VITE_WARNING_MESSAGE, VITE_DOWNTIME_MESSAGE, VITE_API_ENDPOINT } =
   import.meta.env;
@@ -25,7 +26,10 @@ const GET_WARNING_MESSAGE = gql`
 /**
  * Layout with common elements to all routes
  */
-export default function Layout({ v2banner }: AuthProps) {
+export default function Layout({
+  v2banner,
+  unauthenticatedRoutes = false
+}: AuthProps) {
   const { data } = useQuery<Pick<Query, "warningMessage">>(GET_WARNING_MESSAGE);
 
   const isIE11 = !!navigator.userAgent.match(/Trident.*rv:11\./);
@@ -95,7 +99,7 @@ export default function Layout({ v2banner }: AuthProps) {
         </div>
       )}
       <A11ySkipLinks />
-      <Header />
+      {unauthenticatedRoutes ? <UnauthenticatedHeader /> : <Header />}
       <Outlet />
       <PageTitle />
     </>