[REMANIEMENT] Change la nomenclature des composants faisant le lien e…

…ntre un formulaire et son action vers un endpoint
betagouv · Nov 14, 2024 · 62432ec · 62432ec
1 parent 6e46fae
commit 62432ec
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 80 deletions.
diff --git a/mon-aide-cyber-ui/src/domaine/authentification/FormulaireAuthentification.tsx b/mon-aide-cyber-ui/src/domaine/authentification/FormulaireAuthentification.tsx
@@ -148,6 +148,7 @@ export const ComposantAuthentification = ({
                 {erreur?.motDePasse?.texteExplicatif}
               </div>
               <Button
+                type="button"
                 variant="link"
                 onClick={() => navigate('/utilisateur/mot-de-passe-oublie')}
               >

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
@@ -1,7 +1,7 @@
 import './ecran-mot-de-passe-oublie.scss';
-import { FormulaireMotDePasseOublieConnecte } from './formulaire-mot-de-passe-oublie/FormulaireMotDePasseOublie.tsx';
 import illustrationSecuritePostesSvg from '../../../../public/images/illustration-securite-des-postes.svg';
 import { TypographieH3 } from '../../../composants/communs/typographie/TypographieH3/TypographieH3.tsx';
+import { CapteurFormulaireMotDePasseOublie } from './formulaire-mot-de-passe-oublie/CapteurFormulaireMotDePasseOublie.tsx';
 
 export const EcranMotDePasseOublie = () => {
   return (
@@ -11,7 +11,7 @@ export const EcranMotDePasseOublie = () => {
           <TypographieH3 className="text-center">
             Réinitialisation de votre mot de passe
           </TypographieH3>
-          <FormulaireMotDePasseOublieConnecte />
+          <CapteurFormulaireMotDePasseOublie />
         </div>
       </div>
       <div className="fond-clair-mac icone-colonne-droite">

diff --git a/.../mot-de-passe-oublie/formulaire-mot-de-passe-oublie/CapteurFormulaireMotDePasseOublie.tsx b/.../mot-de-passe-oublie/formulaire-mot-de-passe-oublie/CapteurFormulaireMotDePasseOublie.tsx
@@ -0,0 +1,75 @@
+import { useNavigationMAC } from '../../../../fournisseurs/hooks.ts';
+import { useMACAPI } from '../../../../fournisseurs/api/useMACAPI.ts';
+import { useRecupereContexteNavigation } from '../../../../hooks/useRecupereContexteNavigation.ts';
+import { useMutation } from '@tanstack/react-query';
+import { MoteurDeLiens } from '../../../MoteurDeLiens.ts';
+import { constructeurParametresAPI } from '../../../../fournisseurs/api/ConstructeurParametresAPI.ts';
+import { Toast } from '../../../../composants/communs/Toasts/Toast.tsx';
+import { FormulaireMotDePasseOublie } from './FormulaireMotDePasseOublie.tsx';
+
+export type CorpsMotDePasseOublie = {
+  email: string;
+};
+
+export const CapteurFormulaireMotDePasseOublie = () => {
+  const navigationMAC = useNavigationMAC();
+  const macAPI = useMACAPI();
+
+  useRecupereContexteNavigation(
+    'reinitialisation-mot-de-passe:reinitialisation-mot-de-passe'
+  );
+
+  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');
+
+        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
+        );
+      },
+    });
+
+  if (isPending)
+    return (
+      <Toast
+        className="w-100"
+        type="INFO"
+        message="Traitement de votre demande en cours"
+      />
+    );
+
+  if (isError)
+    return <Toast className="w-100" type="ERREUR" message={error.message} />;
+
+  if (isSuccess)
+    return (
+      <div className="mac-callout mac-callout-information">
+        <i className="mac-icone-information" />
+        <div>
+          Si le compte existe, un e-mail de redéfinition de mot de passe sera
+          envoyé à : <b>{variables}</b>. Veuillez vérifier votre boîte de
+          réception.
+        </div>
+      </div>
+    );
+
+  return <FormulaireMotDePasseOublie surSoumission={mutate} />;
+};
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
@@ -1,86 +1,12 @@
 import Button from '../../../../composants/atomes/Button/Button.tsx';
 import { FormEvent, useReducer } from 'react';
-import { useRecupereContexteNavigation } from '../../../../hooks/useRecupereContexteNavigation.ts';
-import { useNavigationMAC } from '../../../../fournisseurs/hooks.ts';
-import { useMutation } from '@tanstack/react-query';
-import { MoteurDeLiens } from '../../../MoteurDeLiens.ts';
-import { useMACAPI } from '../../../../fournisseurs/api/useMACAPI.ts';
 import {
   adresseElectroniqueSaisie,
   initialiseFormulaireMotDePasseOublie,
   reducteurFormulaireMotDePasseOublie,
 } 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;
-};
-
-export const FormulaireMotDePasseOublieConnecte = () => {
-  const navigationMAC = useNavigationMAC();
-  const macAPI = useMACAPI();
-
-  useRecupereContexteNavigation(
-    'reinitialisation-mot-de-passe:reinitialisation-mot-de-passe'
-  );
-
-  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');
-
-        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
-        );
-      },
-    });
-
-  if (isPending)
-    return (
-      <Toast
-        className="w-100"
-        type="INFO"
-        message="Traitement de votre demande en cours"
-      />
-    );
-
-  if (isError)
-    return <Toast className="w-100" type="ERREUR" message={error.message} />;
-
-  if (isSuccess)
-    return (
-      <div className="mac-callout mac-callout-information">
-        <i className="mac-icone-information" />
-        <div>
-          Si le compte existe, un e-mail de redéfinition de mot de passe sera
-          envoyé à : <b>{variables}</b>. Veuillez vérifier votre boîte de
-          réception.
-        </div>
-      </div>
-    );
-
-  return <FormulaireMotDePasseOublie surSoumission={mutate} />;
-};
-
 export const FormulaireMotDePasseOublie = ({
   surSoumission,
 }: {

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
@@ -1,6 +1,6 @@
 import { TypographieH3 } from '../../../composants/communs/typographie/TypographieH3/TypographieH3.tsx';
 import illustrationSecuritePostesSvg from '../../../../public/images/illustration-securite-des-postes.svg';
-import { FormulaireReinitialiserMotDePasseConnecte } from './formulaire-reinitialiser-mot-de-passe/FormulaireReinitialiserMotDePasseConnecte.tsx';
+import { CapteurFormulaireReinitialiserMotDePasse } from './formulaire-reinitialiser-mot-de-passe/CapteurFormulaireReinitialiserMotDePasse.tsx';
 import './ecran-reinitialiser-mot-de-passe.scss';
 import { useSearchParams } from 'react-router-dom';
 
@@ -17,7 +17,7 @@ export const EcranReinitialiserMotDePasse = () => {
           <TypographieH3 className="text-center">
             Réinitialisation de votre mot de passe
           </TypographieH3>
-          <FormulaireReinitialiserMotDePasseConnecte
+          <CapteurFormulaireReinitialiserMotDePasse
             token={tokenDeReinitialisation}
           />
         </div>

diff --git a/...ulaireReinitialiserMotDePasseConnecte.tsx → ...teurFormulaireReinitialiserMotDePasse.tsx b/...ulaireReinitialiserMotDePasseConnecte.tsx → ...teurFormulaireReinitialiserMotDePasse.tsx
@@ -13,7 +13,7 @@ export type CorpsReinitialiserMotDePasse = {
   motDePasse: string;
   confirmationMotDePasse: string;
 };
-export const FormulaireReinitialiserMotDePasseConnecte = ({
+export const CapteurFormulaireReinitialiserMotDePasse = ({
   token,
 }: {
   token: string;
@@ -64,7 +64,7 @@ export const FormulaireReinitialiserMotDePasseConnecte = ({
       );
     },
     onSuccess: () => {
-      navigate('/aidant/tableau-de-bord');
+      navigate('/connexion');
     },
   });