-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[MOT DE PASSE OUBLIE] Appelle l'API patch pour enregistrer le nouveau…
… mot de passe
- Loading branch information
Showing
10 changed files
with
441 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
10 changes: 4 additions & 6 deletions
10
...-cyber-ui/src/domaine/vitrine/reinitialiser-mot-de-passe/EcranReinitialiserMotDePasse.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
127 changes: 124 additions & 3 deletions
127
...-mot-de-passe/formulaire-reinitialiser-mot-de-passe/FormulaireReinitialiserMotDePasse.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,128 @@ | ||
| import React from 'react'; | ||
| import { FormEvent, useReducer } from 'react'; | ||
| import { | ||
| confirmationMotDePasseSaisi, | ||
| initialiseFormulaireReinitialiserMotDePasse, | ||
| motDePasseSaisi, | ||
| reducteurFormulaireReinitialiserMotDePasse, | ||
| } from './reducteurFormulaireReinitialiserMotDePasse.ts'; | ||
| import Button from '../../../../composants/atomes/Button/Button.tsx'; | ||
| import { PasswordInput } from '../../../../composants/atomes/Input/PasswordInput.tsx'; | ||
|
|
||
| export const FormulaireReinitialiserMotDePasse = ({ | ||
| surSoumission, | ||
| }: { | ||
| surSoumission: ({ | ||
| motDePasse, | ||
| confirmationMotDePasse, | ||
| }: { | ||
| motDePasse: string; | ||
| confirmationMotDePasse: string; | ||
| }) => void; | ||
| }) => { | ||
| const [etatFormulaire, declencheActionFormulaire] = useReducer( | ||
| reducteurFormulaireReinitialiserMotDePasse, | ||
| initialiseFormulaireReinitialiserMotDePasse() | ||
| ); | ||
|
|
||
| const soumetFormulaire = (e: FormEvent<HTMLFormElement>) => { | ||
| e.preventDefault(); | ||
| surSoumission({ | ||
| motDePasse: etatFormulaire.motDePasse, | ||
| confirmationMotDePasse: etatFormulaire.confirmationMotDePasse, | ||
| }); | ||
| }; | ||
|
|
||
| export const FormulaireReinitialiserMotDePasse = () => { | ||
| return ( | ||
| <div>FormulaireReinitialiserMotDePasse</div> | ||
| <div className="formulaire-reinitialiser-mot-de-passe-layout"> | ||
| <p style={{ textAlign: 'center' }}> | ||
| Veuillez spécifier un nouveau mot de passe pour accéder à votre compte | ||
| Aidant MonAideCyber | ||
| </p> | ||
| <p> | ||
| Le mot de passe doit comporter <b>16 caractères minimum</b>, dont au | ||
| moins : | ||
| <br /> | ||
| <ul> | ||
| <li>1 majuscule</li> | ||
| <li>1 minuscule</li> | ||
| <li>1 chiffre</li> | ||
| <li>1 caractère spécial parmi #?!@$%^&*-'+_()[]</li> | ||
| </ul> | ||
| </p> | ||
| <div className="mac-callout mac-callout-information"> | ||
| <i className="mac-icone-information" /> | ||
| <div> | ||
| Évitez d’utiliser des mots du dictionnaire, des suites de lettres, des | ||
| suites de chiffre, des dates, des informations personnelles (ex: nom, | ||
| prénom, date de naissance). | ||
| </div> | ||
| </div> | ||
| <form | ||
| className="formulaire-reinitialiser-mot-de-passe" | ||
| onSubmit={soumetFormulaire} | ||
| > | ||
| <fieldset className="fr-col-12"> | ||
| <div | ||
| className={`fr-input-group ${ | ||
| etatFormulaire.erreurs?.motDePasse ? 'fr-input-group--error' : '' | ||
| }`} | ||
| > | ||
| <label className="fr-label" htmlFor="motDePasse"> | ||
| <span className="asterisque">*</span> | ||
| <span> Choisissez un nouveau mot de passe</span> | ||
| </label> | ||
| <PasswordInput | ||
| id="motDePasse" | ||
| name="motDePasse" | ||
| onBlur={(e) => | ||
| declencheActionFormulaire(motDePasseSaisi(e.target.value)) | ||
| } | ||
| /> | ||
| {etatFormulaire.erreurs?.motDePasse ? ( | ||
| <p className="fr-error-text"> | ||
| {etatFormulaire.erreurs?.motDePasse} | ||
| </p> | ||
| ) : null} | ||
| </div> | ||
| </fieldset> | ||
| <fieldset className="fr-col-12"> | ||
| <div | ||
| className={`fr-input-group ${ | ||
| etatFormulaire.erreurs?.confirmationMotDePasse | ||
| ? 'fr-input-group--error' | ||
| : '' | ||
| }`} | ||
| > | ||
| <label className="fr-label" htmlFor="confirmationMotDePasse"> | ||
| <span className="asterisque">*</span> | ||
| <span> Confirmez votre nouveau mot de passe</span> | ||
| </label> | ||
| <PasswordInput | ||
| id="confirmationMotDePasse" | ||
| name="confirmationMotDePasse" | ||
| onBlur={(e) => | ||
| declencheActionFormulaire( | ||
| confirmationMotDePasseSaisi(e.target.value) | ||
| ) | ||
| } | ||
| /> | ||
| {etatFormulaire.erreurs?.confirmationMotDePasse ? ( | ||
| <p className="fr-error-text"> | ||
| {etatFormulaire.erreurs?.confirmationMotDePasse} | ||
| </p> | ||
| ) : null} | ||
| </div> | ||
| </fieldset> | ||
| <div className="actions"> | ||
| <Button | ||
| type="submit" | ||
| variant="primary" | ||
| disabled={!etatFormulaire.pretPourEnvoi} | ||
| > | ||
| Valider | ||
| </Button> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| ); | ||
| }; |
73 changes: 72 additions & 1 deletion
73
...passe/formulaire-reinitialiser-mot-de-passe/FormulaireReinitialiserMotDePasseConnecte.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,80 @@ | ||
| import { FormulaireReinitialiserMotDePasse } from './FormulaireReinitialiserMotDePasse.tsx'; | ||
| 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 { useNavigate } from 'react-router-dom'; | ||
| import { Toast } from '../../../../composants/communs/Toasts/Toast.tsx'; | ||
|
|
||
| export type CorpsReinitialiserMotDePasse = { | ||
| token: string; | ||
| motDePasse: string; | ||
| confirmationMotDePasse: string; | ||
| }; | ||
| export const FormulaireReinitialiserMotDePasseConnecte = ({ | ||
| token, | ||
| }: { | ||
| token: string; | ||
| }) => { | ||
| return <FormulaireReinitialiserMotDePasse />; | ||
| const navigationMAC = useNavigationMAC(); | ||
| const macAPI = useMACAPI(); | ||
| const navigate = useNavigate(); | ||
|
|
||
| useRecupereContexteNavigation( | ||
| 'reinitialisation-mot-de-passe:reinitialiser-mot-de-passe' | ||
| ); | ||
|
|
||
| const { mutate, isError } = useMutation({ | ||
| mutationKey: ['changer-mot-de-passe'], | ||
| mutationFn: ({ | ||
| motDePasse, | ||
| confirmationMotDePasse, | ||
| }: { | ||
| motDePasse: string; | ||
| confirmationMotDePasse: string; | ||
| }) => { | ||
| if (!token || token.length === 0 || token === '') | ||
| throw new Error( | ||
| 'Une erreur est survenue lors de la demande de réinitialisation de mot de passe' | ||
| ); | ||
| if (!motDePasse) Promise.reject('Aucun mot de passe renseigné !'); | ||
|
|
||
| const actionSoumettre = new MoteurDeLiens( | ||
| navigationMAC.etat | ||
| ).trouveEtRenvoie('reinitialiser-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, CorpsReinitialiserMotDePasse>( | ||
| constructeurParametresAPI<CorpsReinitialiserMotDePasse>() | ||
| .url(actionSoumettre.url) | ||
| .methode(actionSoumettre.methode!) | ||
| .corps({ | ||
| token: token, | ||
| motDePasse: motDePasse, | ||
| confirmationMotDePasse: confirmationMotDePasse, | ||
| }) | ||
| .construis(), | ||
| (corps) => corps | ||
| ); | ||
| }, | ||
| onSuccess: () => { | ||
| navigate('/aidant/tableau-de-bord'); | ||
| }, | ||
| }); | ||
|
|
||
| if (isError) | ||
| return ( | ||
| <Toast | ||
| message="Une erreur est survenue lors de votre modification de mot de passe. Veuillez réessayer ultérieurement." | ||
| type="ERREUR" | ||
| /> | ||
| ); | ||
|
|
||
| return <FormulaireReinitialiserMotDePasse surSoumission={mutate} />; | ||
| }; |
Oops, something went wrong.