refactor: Affichage des notifications dans la partie "Users"

(login/new/reset)

Back-End/Auth/views.py

@@ -437,7 +437,7 @@ class NewPasswordView(APIView):
         }
     )
     def post(self, request):
-        retourErreur = error.returnMessage[error.BAD_URL]
+        retourErreur = ''
         retour = ''
         newProfilConnection = JSONParser().parse(request)
 

Front-End/src/app/[locale]/users/login/page.js

@@ -14,20 +14,18 @@ import { useCsrfToken } from '@/context/CsrfContext'; // Importez le hook useCsr
 import logger from '@/utils/logger';
 
 import { useEstablishment } from '@/context/EstablishmentContext';
+import { useNotification } from '@/context/NotificationContext';
 
 export default function Page() {
-  const [errorMessage, setErrorMessage] = useState('');
-  const [userFieldError, setUserFieldError] = useState('');
-  const [passwordFieldError, setPasswordFieldError] = useState('');
   const { initializeContextWithSession } = useEstablishment();
   const [isLoading, setIsLoading] = useState(false);
 
   const router = useRouter();
   const csrfToken = useCsrfToken(); // Utilisez le hook useCsrfToken
+  const { showNotification } = useNotification();
 
   function handleFormLogin(formData) {
     setIsLoading(true);
-    setErrorMessage('');
 
     login({
       email: formData.get('login'),
@@ -37,7 +35,11 @@ export default function Page() {
         logger.debug('Sign In Result', result);
 
         if (result.error) {
-          setErrorMessage(result.error);
+          showNotification(
+            result.error,
+            'error',
+            'Erreur'
+          );
           setIsLoading(false);
         } else {
           // On initialise le contexte establishement avec la session
@@ -48,7 +50,11 @@ export default function Page() {
                 if (url) {
                   router.push(url);
                 } else {
-                  setErrorMessage('Type de rôle non géré');
+                  showNotification(
+                    'Type de rôle non géré',
+                    'error',
+                    'Erreur'
+                  );
                 }
               });
               setIsLoading(false);
@@ -59,8 +65,10 @@ export default function Page() {
                 error
               );
               setIsLoading(false);
-              setErrorMessage(
-                'Une erreur est survenue lors de la récupération de la session.'
+              showNotification(
+                'Une erreur est survenue lors de la récupération de la session.',
+                'error',
+                'Erreur'
               );
             });
         }
@@ -68,7 +76,11 @@ export default function Page() {
       .catch((error) => {
         logger.error('Erreur lors de la connexion:', error);
         setIsLoading(false);
-        setErrorMessage('Une erreur est survenue lors de la connexion.');
+        showNotification(
+          'Une erreur est survenue lors de la connexion.',
+          'error',
+          'Erreur'
+        );
       });
   }
 
@@ -98,7 +110,6 @@ export default function Page() {
               IconItem={User}
               label="Identifiant"
               placeholder="Identifiant"
-              errorMsg={userFieldError}
               className="w-full mb-5"
             />
             <InputTextIcon
@@ -107,11 +118,9 @@ export default function Page() {
               IconItem={KeySquare}
               label="Mot de passe"
               placeholder="Mot de passe"
-              errorMsg={passwordFieldError}
               className="w-full mb-5"
             />
             <div className="input-group mb-4"></div>
-            <label className="text-red-500">{errorMessage}</label>
             <label>
               <a
                 className="float-right mb-4"

Front-End/src/app/[locale]/users/password/new/page.js

@@ -3,11 +3,10 @@
 import React, { useState } from 'react';
 import DjangoCSRFToken from '@/components/DjangoCSRFToken';
 import Logo from '@/components/Logo';
-import { useSearchParams } from 'next/navigation';
 import InputTextIcon from '@/components/InputTextIcon';
-import Loader from '@/components/Loader'; // Importez le composant Loader
-import Button from '@/components/Button'; // Importez le composant Button
-import { User } from 'lucide-react'; // Importez directement les icônes nécessaires
+import Loader from '@/components/Loader';
+import Button from '@/components/Button';
+import { User } from 'lucide-react';
 import { FE_USERS_LOGIN_URL } from '@/utils/Url';
 import { useCsrfToken } from '@/context/CsrfContext';
 import { sendNewPassword } from '@/app/actions/authAction';
@@ -15,21 +14,16 @@ import logger from '@/utils/logger';
 import { useNotification } from '@/context/NotificationContext';
 
 export default function Page() {
-  const searchParams = useSearchParams();
   const { showNotification } = useNotification();
-  const [errorMessage, setErrorMessage] = useState('');
-  const [userFieldError, setUserFieldError] = useState('');
   const [isLoading, setIsLoading] = useState(false);
-  const [popupConfirmAction, setPopupConfirmAction] = useState(null);
   const csrfToken = useCsrfToken();
 
   function validate(formData) {
     const data = { email: formData.get('email') };
+    setIsLoading(true);
     sendNewPassword(data, csrfToken)
       .then((data) => {
         logger.debug('Success:', data);
-        setUserFieldError('');
-        setErrorMessage('');
         if (data.message !== '') {
           showNotification(
             data.message,
@@ -38,32 +32,32 @@ export default function Page() {
           );
           router.push(`${FE_USERS_LOGIN_URL}`);
         } else {
-          if (data.errorFields) {
-            setUserFieldError(data.errorFields.email);
-            showNotification(
-              data.errorMessage,
-              'error',
-              'Erreur'
-            );
-          }
           if (data.errorMessage) {
             showNotification(
               data.errorMessage,
               'error',
               'Erreur'
             );
+          } else if (data.errorFields) {
+            showNotification(
+              data.errorFields.email,
+              'error',
+              'Erreur'
+            );
           }
         }
+        setIsLoading(false);
       })
       .catch((error) => {
         logger.error('Error fetching data:', error);
+        setIsLoading(false);
         error = error.errorMessage;
         logger.debug(error);
       });
   }
 
   if (isLoading === true) {
-    return <Loader />; // Affichez le composant Loader
+    return <Loader />;
   } else {
     return (
       <>
@@ -88,10 +82,8 @@ export default function Page() {
               IconItem={User}
               label="Identifiant"
               placeholder="Identifiant"
-              errorMsg={userFieldError}
               className="w-full"
             />
-            <p className="text-red-500">{errorMessage}</p>
             <div className="form-group-submit mt-4">
               <Button
                 text="Réinitialiser"

Front-End/src/app/[locale]/users/password/reset/page.js

@@ -6,12 +6,12 @@ import DjangoCSRFToken from '@/components/DjangoCSRFToken';
 import Logo from '@/components/Logo';
 import { useSearchParams, useRouter } from 'next/navigation';
 import InputTextIcon from '@/components/InputTextIcon';
-import Loader from '@/components/Loader'; // Importez le composant Loader
-import Button from '@/components/Button'; // Importez le composant Button
+import Loader from '@/components/Loader';
+import Button from '@/components/Button';
 import { FE_USERS_LOGIN_URL } from '@/utils/Url';
-import { KeySquare } from 'lucide-react'; // Importez directement les icônes nécessaires
+import { KeySquare } from 'lucide-react';
 import { useCsrfToken } from '@/context/CsrfContext';
-import { getResetPassword, resetPassword } from '@/app/actions/authAction';
+import { resetPassword } from '@/app/actions/authAction';
 import logger from '@/utils/logger';
 import { useNotification } from '@/context/NotificationContext';
 
@@ -19,44 +19,20 @@ export default function Page() {
   const searchParams = useSearchParams();
   const { showNotification } = useNotification();
   const uuid = searchParams.get('uuid');
-  const [errorMessage, setErrorMessage] = useState('');
-  const [password1FieldError, setPassword1FieldError] = useState('');
-  const [password2FieldError, setPassword2FieldError] = useState('');
   const [isLoading, setIsLoading] = useState(false);
 
   const router = useRouter();
   const csrfToken = useCsrfToken();
 
-  useEffect(() => {
-    getResetPassword(uuid)
-      .then((data) => {
-        logger.debug('Success:', data);
-        setIsLoading(true);
-        if (data.errorFields) {
-          setPassword1FieldError(data.errorFields.password1);
-          setPassword2FieldError(data.errorFields.password2);
-        }
-        if (data.errorMessage) {
-          setErrorMessage(data.errorMessage);
-        }
-        setIsLoading(false);
-      })
-      .catch((error) => {
-        logger.error('Error fetching data:', error);
-      });
-}, []);
-
   function validate(formData) {
     const data = {
       password1: formData.get('password1'),
       password2: formData.get('password2'),
     };
+    setIsLoading(true);
     resetPassword(uuid, data, csrfToken)
       .then((data) => {
         if (data.message !== '') {
-          setPassword1FieldError('');
-          setPassword2FieldError('');
-          setErrorMessage('');
 
           logger.debug('Success:', data);
           showNotification(
@@ -66,34 +42,32 @@ export default function Page() {
             );
           router.push(`${FE_USERS_LOGIN_URL}`);
         } else {
-
           if (data.errorMessage) {
-            showNotification(
-              data.errorMessage,
-              'error',
-              'Erreur'
-            );
-          }
-          if (data.errorFields) {
+          showNotification(
+            data.errorMessage,
+            'error',
+            'Erreur'
+          );
+          } else if (data.errorFields) {
             showNotification(
               data.errorFields.password1,
               'error',
               'Erreur'
             );
-            setPassword1FieldError(data.errorFields.password1);
-            setPassword2FieldError(data.errorFields.password2);
           }
         }
+        setIsLoading(false);
       })
       .catch((error) => {
         logger.error('Error fetching data:', error);
         error = error.errorMessage;
         logger.debug(error);
+        setIsLoading(false);
       });
   }
 
   if (isLoading === true) {
-    return <Loader />; // Affichez le composant Loader
+    return <Loader />;
   } else {
     return (
       <>
@@ -118,7 +92,6 @@ export default function Page() {
               IconItem={KeySquare}
               label="Mot de passe"
               placeholder="Mot de passe"
-              errorMsg={password1FieldError}
               className="w-full mb-5"
             />
             <InputTextIcon
@@ -127,10 +100,8 @@ export default function Page() {
               IconItem={KeySquare}
               label="Confirmation mot de passe"
               placeholder="Confirmation mot de passe"
-              errorMsg={password2FieldError}
               className="w-full"
             />
-            <label className="text-red-500">{errorMessage}</label>
             <div className="form-group-submit mt-4">
               <Button
                 text="Enregistrer"

Front-End/src/app/actions/authAction.js

@@ -199,14 +199,3 @@ export const resetPassword = (uuid, data, csrfToken) => {
   });
   return fetch(request).then(requestResponseHandler).catch(errorHandler);
 };
-
-export const getResetPassword = (uuid) => {
-  const url = `${BE_AUTH_RESET_PASSWORD_URL}/${uuid}`;
-  return fetch(url, {
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  })
-    .then(requestResponseHandler)
-    .catch(errorHandler);
-};