update pages with non password message tools

parlemonde · Dec 5, 2024 · feb2995 · feb2995
1 parent 51a47a8
commit feb2995
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 73 deletions.
diff --git a/src/pages/inscription.tsx b/src/pages/inscription.tsx
@@ -8,10 +8,12 @@ import { Box, Button, Checkbox, FormControlLabel, Grid, IconButton, InputAdornme
 import LanguageFilter from 'src/components/LanguageFilter';
 import { Modal } from 'src/components/Modal';
 import { ParentsCGU } from 'src/components/ParentsCGU';
+import PasswordMessagesDisplayer from 'src/components/PasswordMessagesDisplayer';
 import { useLanguages } from 'src/services/useLanguages';
 import { useUserRequests } from 'src/services/useUsers';
 import ArrowBack from 'src/svg/arrow_back.svg';
 import Logo from 'src/svg/logo_1village_famille.svg';
+import { invalidPasswordMessageBuilder } from 'src/utils/invalidPasswordMessageBuilder';
 import { UserType } from 'types/user.type';
 import type { UserForm } from 'types/user.type';
 
@@ -22,7 +24,7 @@ const Inscription = () => {
   const [lastname, setLastname] = useState<string>('');
   const [isLastnameValid, setIsLastnameValid] = useState<boolean>(true);
   const [password, setPassword] = useState<string>('');
-  const passwordMessageRef = useRef<string>('');
+  const [passwordMessages, setPasswordMessages] = useState<{ badLength: string; missingDigits: string }>({ badLength: '', missingDigits: '' });
   const [confirmPassword, setConfirmPassword] = useState<string>('');
   const [isPasswordValid, setIsPasswordValid] = useState<boolean>(true);
   const [isPasswordMatch, setIsPasswordMatch] = useState<boolean>(true);
@@ -56,44 +58,13 @@ const Inscription = () => {
     const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
 
     if (password !== '') {
-      passwordMessageRef.current = '';
-      setIsPasswordValid(false);
-
-      if (!password.match(/\d/)) {
-        passwordMessageRef.current = 'Le mot de passe doit contenir au moins un chiffre';
-      }
-      if (!password.match(/[A-Z]/)) {
-        if (passwordMessageRef.current) {
-          passwordMessageRef.current += ' et ';
-        }
-        passwordMessageRef.current += ' une lettre majuscule';
-      }
-      if (!password.match(/[\w\s]/)) {
-        if (passwordMessageRef.current) {
-          passwordMessageRef.current += ' et ';
-        }
-        passwordMessageRef.current += 'un caractère spécial';
-      }
-      if (password.length < 12) {
-        if (passwordMessageRef.current) {
-          passwordMessageRef.current += ' et ';
-        }
-        passwordMessageRef.current += 'faire au moins 12 caractères';
-      }
-
-      if (!password.match(/\d/) || !password.match(/[A-Z]/) || password.length < 12) {
-        setIsPasswordValid(false);
-      } else {
-        setIsPasswordValid(true);
-      }
+      const invalidPasswordMessage = invalidPasswordMessageBuilder(password);
+      setPasswordMessages({ badLength: invalidPasswordMessage.badLengthMessage, missingDigits: invalidPasswordMessage.missingDigitMessage });
+      setIsPasswordValid(invalidPasswordMessage.badLengthMessage === '' && invalidPasswordMessage.missingDigitMessage === '');
     }
 
     if (confirmPassword !== '') {
-      if (password !== confirmPassword) {
-        setIsPasswordMatch(false);
-      } else {
-        setIsPasswordMatch(true);
-      }
+      setIsPasswordMatch(password === confirmPassword);
     }
 
     if (email !== '') {
@@ -200,8 +171,6 @@ const Inscription = () => {
     setIsConfirmationPasswordVisible(!isConfirmationPasswordVisible);
   };
 
-  const passwordMessage = passwordMessageRef.current;
-
   return (
     <Grid
       container
@@ -358,7 +327,13 @@ const Inscription = () => {
                     }}
                     type={isPasswordVisible === false ? 'password' : 'text'}
                     error={isPasswordValid === false}
-                    helperText={isPasswordValid === true ? '8 lettres minimum, une majuscule et un chiffre' : passwordMessage}
+                    helperText={
+                      <PasswordMessagesDisplayer
+                        isErrors={!isPasswordValid}
+                        badLengthMessage={passwordMessages.badLength}
+                        missingDigitsMessage={passwordMessages.missingDigits}
+                      />
+                    }
                     InputLabelProps={{ shrink: true }}
                     onChange={(event) => {
                       setPassword(event.target.value);

diff --git a/src/pages/update-password.tsx b/src/pages/update-password.tsx
@@ -1,23 +1,25 @@
 import { useRouter } from 'next/router';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import { Button, IconButton, InputAdornment, Link, TextField } from '@mui/material';
 
 import { KeepRatio } from '../components/KeepRatio';
+import PasswordMessagesDisplayer from 'src/components/PasswordMessagesDisplayer';
 import { useUserRequests } from 'src/services/useUsers';
 import ArrowBack from 'src/svg/arrow_back.svg';
 import Logo from 'src/svg/logo_1village_famille.svg';
 import PelicoSouriant from 'src/svg/pelico/pelico-souriant.svg';
+import { invalidPasswordMessageBuilder } from 'src/utils/invalidPasswordMessageBuilder';
 import type { UserUpdatePassword } from 'types/user.type';
 
 const UpdatePassword = () => {
   const [isPasswordTouched, setIsPasswordTouched] = useState(false);
   const [isConfirmationPasswordTouched, setIsConfirmationPasswordTouched] = useState(false);
   const [password, setPassword] = useState<string>('');
   const [isSubmitSuccessfull, setIsSubmitSuccessfull] = useState<boolean>(false);
-  const passwordMessageRef = useRef<string>('');
+  const [passwordMessages, setPasswordMessages] = useState<{ badLength: string; missingDigits: string }>({ badLength: '', missingDigits: '' });
   const [confirmPassword, setConfirmPassword] = useState<string>('');
   const [isPasswordValid, setIsPasswordValid] = useState<boolean>(false);
   const [isPasswordMatch, setIsPasswordMatch] = useState<boolean>(false);
@@ -35,38 +37,16 @@ const UpdatePassword = () => {
 
   useEffect(() => {
     if (password !== '') {
-      passwordMessageRef.current = '';
-      setIsPasswordValid(false);
-
-      if (!password.match(/\d/)) {
-        passwordMessageRef.current = 'Le mot de passe doit contenir un chiffre';
-      }
-      if (!password.match(/[A-Z]/)) {
-        if (passwordMessageRef.current) {
-          passwordMessageRef.current += ' et ';
-        }
-        passwordMessageRef.current += ' une lettre majuscule';
-      }
-      if (password.length < 8) {
-        if (passwordMessageRef.current) {
-          passwordMessageRef.current += ' et ';
-        }
-        passwordMessageRef.current += 'faire au moins 8 caractères';
-      }
-
-      if (!password.match(/\d/) || !password.match(/[A-Z]/) || password.length < 8) {
-        setIsPasswordValid(false);
-      } else {
-        setIsPasswordValid(true);
-      }
+      const invalidPasswordMessage = invalidPasswordMessageBuilder(password);
+      setPasswordMessages({
+        badLength: invalidPasswordMessage.badLengthMessage,
+        missingDigits: invalidPasswordMessage.missingDigitMessage,
+      });
+      setIsPasswordValid(invalidPasswordMessage.badLengthMessage.length === 0 && invalidPasswordMessage.missingDigitMessage.length === 0);
     }
 
     if (confirmPassword !== '') {
-      if (password !== confirmPassword) {
-        setIsPasswordMatch(false);
-      } else {
-        setIsPasswordMatch(true);
-      }
+      setIsPasswordMatch(password === confirmPassword);
     }
 
     setUpdatedUser({
@@ -103,8 +83,6 @@ const UpdatePassword = () => {
     setIsConfirmationPasswordVisible(!isConfirmationPasswordVisible);
   };
 
-  const passwordMessage = passwordMessageRef.current;
-
   return (
     <>
       <div className="bg-gradiant" style={{ display: 'flex', flexDirection: 'column' }}>
@@ -186,7 +164,13 @@ const UpdatePassword = () => {
                     }}
                     type={!isPasswordVisible ? 'password' : 'text'}
                     error={!isPasswordValid && isPasswordTouched}
-                    helperText={isPasswordValid ? '8 lettres minimum, une majuscule et un chiffre' : passwordMessage}
+                    helperText={
+                      <PasswordMessagesDisplayer
+                        isErrors={!isPasswordValid}
+                        badLengthMessage={passwordMessages.badLength}
+                        missingDigitsMessage={passwordMessages.missingDigits}
+                      />
+                    }
                     InputLabelProps={{ shrink: true }}
                     sx={{
                       width: '40ch',