[REMANIEMENT][NAVIGATION PUBLIQUE] Masque le menu sur les pages du pa…

…rcours Mot de passe oublié [REMANIEMENT] Enleve du inline style pour centrer des textes et utilise une classe CSS [REMANIEMENT] Rajoute la propriété alt sur une illustration [REMANIEMENT][FORMULAIRE MOT DE PASSE OUBLIE] Affiche dans le message de succès l'email renseigné dans le formulaire [REMANIEMENT][FORMULAIRE MOT DE PASSE OUBLIE] Navigue via react-router vers la racine [REMANIEMENT] Renomme des variables prev en precedent [REMANIEMENT] Echappe les caractères spéciaux dans le formulaire réinitialiser mot de passe [REMANIEMENT] Trime le token lors de la vérification si il existe ou non
betagouv · Nov 14, 2024 · bab94b1 · bab94b1
1 parent ad104fd
commit bab94b1
Show file tree

Hide file tree

Showing 12 changed files with 100 additions and 60 deletions.
diff --git a/mon-aide-cyber-ui/src/RouteurPublic.tsx b/mon-aide-cyber-ui/src/RouteurPublic.tsx
@@ -48,7 +48,10 @@ export const RouteurPublic = () => {
         <Route path="connexion" element={<EcranConnexion />} />
       </Route>
 
-      <Route path="/utilisateur" element={<LayoutPublic />}>
+      <Route
+        path="/utilisateur"
+        element={<LayoutPublic afficheNavigation={false} />}
+      >
         <Route path="mot-de-passe-oublie" element={<EcranMotDePasseOublie />} />
         <Route
           path="reinitialiser-mot-de-passe"

diff --git a/mon-aide-cyber-ui/src/assets/styles/_commun.scss b/mon-aide-cyber-ui/src/assets/styles/_commun.scss
@@ -144,6 +144,10 @@ fieldset {
   align-items: center;
 }
 
+.text-center {
+  text-align: center;
+}
+
 .mac-sticky {
   position: sticky;
   top: 0;

diff --git a/mon-aide-cyber-ui/src/composants/layout/Header.tsx b/mon-aide-cyber-ui/src/composants/layout/Header.tsx
@@ -7,10 +7,15 @@ import { NavigationPublique } from './header/NavigationPublique.tsx';
 
 export type HeaderProprietes = PropsWithChildren<{
   lienMAC: ReactElement;
+  afficheNavigation?: boolean;
   enteteSimple?: boolean;
 }>;
 
-export const Header = ({ lienMAC, enteteSimple }: HeaderProprietes) => {
+export const Header = ({
+  lienMAC,
+  afficheNavigation = true,
+  enteteSimple,
+}: HeaderProprietes) => {
   const { utilisateur } = useUtilisateur();
 
   return (
@@ -35,17 +40,19 @@ export const Header = ({ lienMAC, enteteSimple }: HeaderProprietes) => {
                     alt="ANSSI"
                   />
                 </div>
-                <div className="fr-header__navbar icone-se-connecter-mobile">
-                  <button
-                    className="fr-btn--menu fr-btn"
-                    data-fr-opened="false"
-                    aria-controls="modal-491"
-                    id="button-492"
-                    title="Menu"
-                  >
-                    Menu
-                  </button>
-                </div>
+                {afficheNavigation ? (
+                  <div className="fr-header__navbar icone-se-connecter-mobile">
+                    <button
+                      className="fr-btn--menu fr-btn"
+                      data-fr-opened="false"
+                      aria-controls="modal-491"
+                      id="button-492"
+                      title="Menu"
+                    >
+                      Menu
+                    </button>
+                  </div>
+                ) : null}
               </div>
               <div className="fr-header__service fr-col-md-5">{lienMAC}</div>
             </div>
@@ -63,7 +70,7 @@ export const Header = ({ lienMAC, enteteSimple }: HeaderProprietes) => {
           </div>
         </div>
       </div>
-      {!enteteSimple ? (
+      {!enteteSimple && afficheNavigation ? (
         <div
           className="fr-header__menu fr-modal"
           id="modal-491"

diff --git a/mon-aide-cyber-ui/src/composants/layout/LayoutPublic.tsx b/mon-aide-cyber-ui/src/composants/layout/LayoutPublic.tsx
@@ -41,7 +41,11 @@ export const liensNavigation: LienNavigation[] = [
   },
 ];
 
-export const LayoutPublic = () => {
+export const LayoutPublic = ({
+  afficheNavigation = true,
+}: {
+  afficheNavigation?: boolean;
+}) => {
   const location = useLocation();
 
   // scroll to top of page after a page transition.
@@ -51,7 +55,10 @@ export const LayoutPublic = () => {
 
   return (
     <>
-      <Header lienMAC={<LienMAC titre="Accueil - MonAideCyber" route="/" />} />
+      <Header
+        lienMAC={<LienMAC titre="Accueil - MonAideCyber" route="/" />}
+        afficheNavigation={afficheNavigation}
+      />
       <Outlet />
       <Footer />
     </>

diff --git a/...ui/src/domaine/vitrine/ecran-annuaire/ecran-aidant/reducteurFormulaireSolliciterAidant.ts b/...ui/src/domaine/vitrine/ecran-annuaire/ecran-aidant/reducteurFormulaireSolliciterAidant.ts
@@ -97,10 +97,13 @@ const regenereEtatFormulaire = (
         ...construisErreurChamp(estChampValide),
       },
     }),
-    ...Object.entries(ajouteAuNouvelEtat()).reduce((prev, [clef, valeur]) => {
-      prev[clef] = valeur;
-      return prev;
-    }, {} as ChampNouvelEtat),
+    ...Object.entries(ajouteAuNouvelEtat()).reduce(
+      (precedent, [clef, valeur]) => {
+        precedent[clef] = valeur;
+        return precedent;
+      },
+      {} as ChampNouvelEtat
+    ),
   };
 };
 

diff --git a/mon-aide-cyber-ui/src/domaine/vitrine/mot-de-passe-oublie/EcranMotDePasseOublie.tsx b/mon-aide-cyber-ui/src/domaine/vitrine/mot-de-passe-oublie/EcranMotDePasseOublie.tsx
@@ -8,14 +8,17 @@ export const EcranMotDePasseOublie = () => {
     <main role="main" className="ecran-mot-de-passe-oublie">
       <div className="formulaire-colonne-gauche">
         <div className="fr-container">
-          <TypographieH3 style={{ textAlign: 'center' }}>
+          <TypographieH3 className="text-center">
             Réinitialisation de votre mot de passe
           </TypographieH3>
           <FormulaireMotDePasseOublieConnecte />
         </div>
       </div>
       <div className="fond-clair-mac icone-colonne-droite">
-        <img src={illustrationSecuritePostesSvg} alt="" />
+        <img
+          src={illustrationSecuritePostesSvg}
+          alt="illustration de deux écrans de connexion"
+        />
       </div>
     </main>
   );

diff --git a/...vitrine/mot-de-passe-oublie/formulaire-mot-de-passe-oublie/FormulaireMotDePasseOublie.tsx b/...vitrine/mot-de-passe-oublie/formulaire-mot-de-passe-oublie/FormulaireMotDePasseOublie.tsx
@@ -12,6 +12,7 @@ import {
 } from './reducteurFormulaireMotDePasseOublie.ts';
 import { Toast } from '../../../../composants/communs/Toasts/Toast.tsx';
 import { constructeurParametresAPI } from '../../../../fournisseurs/api/ConstructeurParametresAPI.ts';
+import { useNavigate } from 'react-router-dom';
 
 export type CorpsMotDePasseOublie = {
   email: string;
@@ -25,32 +26,33 @@ export const FormulaireMotDePasseOublieConnecte = () => {
     'reinitialisation-mot-de-passe:reinitialisation-mot-de-passe'
   );
 
-  const { mutate, isSuccess, error, isError, isPending } = useMutation({
-    mutationKey: ['reinitialisation-mot-de-passe'],
-    mutationFn: (email: string) => {
-      if (!email) Promise.reject('Aucun email renseigné !');
+  const { mutate, isSuccess, error, isError, isPending, variables } =
+    useMutation({
+      mutationKey: ['reinitialisation-mot-de-passe'],
+      mutationFn: (email: string) => {
+        if (!email) Promise.reject('Aucun email renseigné !');
 
-      const actionSoumettre = new MoteurDeLiens(
-        navigationMAC.etat
-      ).trouveEtRenvoie('reinitialisation-mot-de-passe');
+        const actionSoumettre = new MoteurDeLiens(
+          navigationMAC.etat
+        ).trouveEtRenvoie('reinitialisation-mot-de-passe');
 
-      if (!actionSoumettre)
-        throw new Error(
-          'Une erreur est survenue lors de la demande de réinitialisation de mot de passe'
-        );
+        if (!actionSoumettre)
+          throw new Error(
+            'Une erreur est survenue lors de la demande de réinitialisation de mot de passe'
+          );
 
-      return macAPI.execute<void, void, CorpsMotDePasseOublie>(
-        constructeurParametresAPI<CorpsMotDePasseOublie>()
-          .url(actionSoumettre.url)
-          .methode(actionSoumettre.methode!)
-          .corps({
-            email: email,
-          })
-          .construis(),
-        (corps) => corps
-      );
-    },
-  });
+        return macAPI.execute<void, void, CorpsMotDePasseOublie>(
+          constructeurParametresAPI<CorpsMotDePasseOublie>()
+            .url(actionSoumettre.url)
+            .methode(actionSoumettre.methode!)
+            .corps({
+              email: email,
+            })
+            .construis(),
+          (corps) => corps
+        );
+      },
+    });
 
   if (isPending)
     return (
@@ -70,7 +72,7 @@ export const FormulaireMotDePasseOublieConnecte = () => {
         <i className="mac-icone-information" />
         <div>
           Si le compte existe, un e-mail de redéfinition de mot de passe sera
-          envoyé à : <b>[email protected]</b> Veuillez vérifier votre boîte de
+          envoyé à : <b>{variables}</b>. Veuillez vérifier votre boîte de
           réception.
         </div>
       </div>
@@ -84,6 +86,8 @@ export const FormulaireMotDePasseOublie = ({
 }: {
   surSoumission: (email: string) => void;
 }) => {
+  const navigate = useNavigate();
+
   const [etatFormulaire, declencheActionFormulaire] = useReducer(
     reducteurFormulaireMotDePasseOublie,
     initialiseFormulaireMotDePasseOublie()
@@ -95,7 +99,7 @@ export const FormulaireMotDePasseOublie = ({
 
   return (
     <div className="formulaire-mot-de-passe-oublie-layout">
-      <p style={{ textAlign: 'center' }}>
+      <p className="text-center">
         Pour réinitialiser votre mot de passe, veuillez spécifier l’adresse
         email que vous avez utilisée pour vous inscrire.
       </p>
@@ -146,7 +150,7 @@ export const FormulaireMotDePasseOublie = ({
           <Button
             type="button"
             variant="secondary"
-            onClick={() => window.location.replace('/')}
+            onClick={() => navigate('/')}
           >
             Annuler
           </Button>

diff --git a/...mot-de-passe-oublie/formulaire-mot-de-passe-oublie/reducteurFormulaireMotDePasseOublie.ts b/...mot-de-passe-oublie/formulaire-mot-de-passe-oublie/reducteurFormulaireMotDePasseOublie.ts
@@ -51,10 +51,13 @@ const regenereEtatFormulaire = (
         ...construisErreurChamp(estChampValide),
       },
     }),
-    ...Object.entries(ajouteAuNouvelEtat()).reduce((prev, [clef, valeur]) => {
-      prev[clef] = valeur;
-      return prev;
-    }, {} as ChampNouvelEtat),
+    ...Object.entries(ajouteAuNouvelEtat()).reduce(
+      (precedent, [clef, valeur]) => {
+        precedent[clef] = valeur;
+        return precedent;
+      },
+      {} as ChampNouvelEtat
+    ),
   };
 };
 

diff --git a/...-cyber-ui/src/domaine/vitrine/reinitialiser-mot-de-passe/EcranReinitialiserMotDePasse.tsx b/...-cyber-ui/src/domaine/vitrine/reinitialiser-mot-de-passe/EcranReinitialiserMotDePasse.tsx
@@ -14,7 +14,7 @@ export const EcranReinitialiserMotDePasse = () => {
     <main role="main" className="ecran-reinitialiser-mot-de-passe">
       <div className="formulaire-colonne-gauche">
         <div className="fr-container">
-          <TypographieH3 style={{ textAlign: 'center' }}>
+          <TypographieH3 className="text-center">
             Réinitialisation de votre mot de passe
           </TypographieH3>
           <FormulaireReinitialiserMotDePasseConnecte

diff --git a/...-mot-de-passe/formulaire-reinitialiser-mot-de-passe/FormulaireReinitialiserMotDePasse.tsx b/...-mot-de-passe/formulaire-reinitialiser-mot-de-passe/FormulaireReinitialiserMotDePasse.tsx
@@ -34,7 +34,7 @@ export const FormulaireReinitialiserMotDePasse = ({
 
   return (
     <div className="formulaire-reinitialiser-mot-de-passe-layout">
-      <p style={{ textAlign: 'center' }}>
+      <p className="text-center">
         Veuillez spécifier un nouveau mot de passe pour accéder à votre compte
         Aidant MonAideCyber
       </p>
@@ -46,7 +46,10 @@ export const FormulaireReinitialiserMotDePasse = ({
           <li>1 majuscule</li>
           <li>1 minuscule</li>
           <li>1 chiffre</li>
-          <li>1 caractère spécial parmi #?!@$%^&*-'+_()[]</li>
+          <li>
+            1 caractère spécial parmi
+            &#35;?!@&#36;&#37;^&amp;*-&apos;+_&#40;&#41;[]
+          </li>
         </ul>
       </p>
       <div className="mac-callout mac-callout-information">

diff --git a/...passe/formulaire-reinitialiser-mot-de-passe/FormulaireReinitialiserMotDePasseConnecte.tsx b/...passe/formulaire-reinitialiser-mot-de-passe/FormulaireReinitialiserMotDePasseConnecte.tsx
@@ -35,7 +35,7 @@ export const FormulaireReinitialiserMotDePasseConnecte = ({
       motDePasse: string;
       confirmationMotDePasse: string;
     }) => {
-      if (!token || token.length === 0 || token === '')
+      if (!token || token.length === 0 || token.trim() === '')
         throw new Error(
           'Une erreur est survenue lors de la demande de réinitialisation de mot de passe'
         );

diff --git a/...passe/formulaire-reinitialiser-mot-de-passe/reducteurFormulaireReinitialiserMotDePasse.ts b/...passe/formulaire-reinitialiser-mot-de-passe/reducteurFormulaireReinitialiserMotDePasse.ts
@@ -50,10 +50,13 @@ const regenereEtatFormulaire = (
         ...construisErreurChamp(estChampValide),
       },
     }),
-    ...Object.entries(ajouteAuNouvelEtat()).reduce((prev, [clef, valeur]) => {
-      prev[clef] = valeur;
-      return prev;
-    }, {} as ChampNouvelEtat),
+    ...Object.entries(ajouteAuNouvelEtat()).reduce(
+      (precedent, [clef, valeur]) => {
+        precedent[clef] = valeur;
+        return precedent;
+      },
+      {} as ChampNouvelEtat
+    ),
   };
 };