refactor: Remplacement de quelques popup par les notifications

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

@@ -7,60 +7,53 @@ 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 Popup from '@/components/Popup'; // Importez le composant Popup
 import { User } from 'lucide-react'; // Importez directement les icônes nécessaires
 import { FE_USERS_LOGIN_URL } from '@/utils/Url';
 import { useCsrfToken } from '@/context/CsrfContext';
 import { sendNewPassword } from '@/app/actions/authAction';
 import logger from '@/utils/logger';
-
-const useFakeData = process.env.NEXT_PUBLIC_USE_FAKE_DATA === 'true';
+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 [popupVisible, setPopupVisible] = useState(false);
-  const [popupMessage, setPopupMessage] = useState('');
   const [popupConfirmAction, setPopupConfirmAction] = useState(null);
   const csrfToken = useCsrfToken();
 
   function validate(formData) {
-    if (useFakeData) {
-      setTimeout(() => {
+    const data = { email: formData.get('email') };
+    sendNewPassword(data, csrfToken)
+      .then((data) => {
+        logger.debug('Success:', data);
         setUserFieldError('');
         setErrorMessage('');
-        setPopupMessage('Mot de passe réinitialisé avec succès !');
-        setPopupConfirmAction(() => () => setPopupVisible(false));
-        setPopupVisible(true);
-      }, 1000); // Simule un délai de traitement
-    } else {
-      const data = { email: formData.get('email') };
-      sendNewPassword(data, csrfToken)
-        .then((data) => {
-          logger.debug('Success:', data);
-          setUserFieldError('');
-          setErrorMessage('');
-          if (data.errorMessage === '') {
-            setPopupMessage(data.message);
-            setPopupConfirmAction(() => () => setPopupVisible(false));
-            setPopupVisible(true);
-          } else {
-            if (data.errorFields) {
-              setUserFieldError(data.errorFields.email);
-            }
-            if (data.errorMessage) {
-              setErrorMessage(data.errorMessage);
-            }
+        if (data.errorMessage === '') {
+          showNotification(
+            data.message,
+            'success',
+            'Succès'
+          );
+        } else {
+          if (data.errorFields) {
+            setUserFieldError(data.errorFields.email);
           }
-        })
-        .catch((error) => {
-          logger.error('Error fetching data:', error);
-          error = error.errorMessage;
-          logger.debug(error);
-        });
-    }
+          if (data.errorMessage) {
+            showNotification(
+              data.errorMessage,
+              'error',
+              'Erreur'
+            );
+          }
+        }
+      })
+      .catch((error) => {
+        logger.error('Error fetching data:', error);
+        error = error.errorMessage;
+        logger.debug(error);
+      });
   }
 
   if (isLoading === true) {
@@ -112,12 +105,6 @@ export default function Page() {
             />
           </div>
         </div>
-        <Popup
-          isOpen={popupVisible}
-          message={popupMessage}
-          onConfirm={popupConfirmAction}
-          onCancel={() => setPopupVisible(false)}
-        />
       </>
     );
   }

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

@@ -8,89 +8,83 @@ 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 Popup from '@/components/Popup';
 import { FE_USERS_LOGIN_URL } from '@/utils/Url';
 import { KeySquare } from 'lucide-react'; // Importez directement les icônes nécessaires
 import { useCsrfToken } from '@/context/CsrfContext';
 import { getResetPassword, resetPassword } from '@/app/actions/authAction';
 import logger from '@/utils/logger';
-
-const useFakeData = process.env.NEXT_PUBLIC_USE_FAKE_DATA === 'true';
+import { useNotification } from '@/context/NotificationContext';
 
 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 [popupVisible, setPopupVisible] = useState(false);
-  const [popupMessage, setPopupMessage] = useState('');
 
   const router = useRouter();
   const csrfToken = useCsrfToken();
 
   useEffect(() => {
-    if (useFakeData) {
-      setTimeout(() => {
+    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);
-      }, 1000);
-    } else {
-      getResetPassword(uuid)
-        .then((data) => {
+      })
+      .catch((error) => {
+        logger.error('Error fetching data:', error);
+      });
+}, []);
+
+  function validate(formData) {
+    const data = {
+      password1: formData.get('password1'),
+      password2: formData.get('password2'),
+    };
+    resetPassword(uuid, data, csrfToken)
+      .then((data) => {
+        if (data.errorMessage === '') {
+          setPassword1FieldError('');
+          setPassword2FieldError('');
+          setErrorMessage('');
+
           logger.debug('Success:', data);
-          setIsLoading(true);
+          showNotification(
+              data.message,
+              'success',
+              'Succès'
+            );
+          router.push(`${FE_USERS_LOGIN_URL}`);
+        } else {
+
+          if (data.errorMessage) {
+            showNotification(
+              data.errorMessage,
+              'error',
+              'Erreur'
+            );
+          }
           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) {
-    if (useFakeData) {
-      setTimeout(() => {
-        setPopupMessage('Mot de passe réinitialisé avec succès');
-        setPopupVisible(true);
-      }, 1000);
-    } else {
-      const data = {
-        password1: formData.get('password1'),
-        password2: formData.get('password2'),
-      };
-      resetPassword(uuid, data, csrfToken)
-        .then((data) => {
-          logger.debug('Success:', data);
-          setPassword1FieldError('');
-          setPassword2FieldError('');
-          setErrorMessage('');
-          if (data.errorMessage === '') {
-            setPopupMessage(data.message);
-            setPopupVisible(true);
-          } else {
-            if (data.errorMessage) {
-              setErrorMessage(data.errorMessage);
-            }
-            if (data.errorFields) {
-              setPassword1FieldError(data.errorFields.password1);
-              setPassword2FieldError(data.errorFields.password2);
-            }
-          }
-        })
-        .catch((error) => {
-          logger.error('Error fetching data:', error);
-          error = error.errorMessage;
-          logger.debug(error);
-        });
-    }
+        }
+      })
+      .catch((error) => {
+        logger.error('Error fetching data:', error);
+        error = error.errorMessage;
+        logger.debug(error);
+      });
   }
 
   if (isLoading === true) {
@@ -98,18 +92,6 @@ export default function Page() {
   } else {
     return (
       <>
-        <Popup
-          isOpen={popupVisible}
-          setIsOpen={setPopupVisible}
-          message={popupMessage}
-          onConfirm={() => {
-            setPopupVisible(false);
-            router.push(`${FE_USERS_LOGIN_URL}`);
-          }}
-          onCancel={() => setPopupVisible(false)}
-          uniqueConfirmButton={true}
-          popupClassName="w-full max-w-xs sm:max-w-md"
-        />
         <div className="container max mx-auto p-4">
           <div className="flex justify-center mb-4">
             <Logo className="h-150 w-150" />

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

@@ -8,23 +8,22 @@ 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 Popup from '@/components/Popup'; // Importez le composant Popup
 import { User, KeySquare } from 'lucide-react'; // Importez directement les icônes nécessaires
 import { FE_USERS_LOGIN_URL } from '@/utils/Url';
 import { useCsrfToken } from '@/context/CsrfContext';
 import { subscribe } from '@/app/actions/authAction';
 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 [password1FieldError, setPassword1FieldError] = useState('');
   const [password2FieldError, setPassword2FieldError] = useState('');
   const [isLoading, setIsLoading] = useState(false);
-  const [popupVisible, setPopupVisible] = useState(false);
-  const [popupMessage, setPopupMessage] = useState('');
 
   const router = useRouter();
   const csrfToken = useCsrfToken();
@@ -52,13 +51,19 @@ export default function Page() {
         setErrorMessage('');
         if (isOK(data)) {
           setIsLoading(false);
-          setPopupMessage(data.message);
-          setPopupVisible(true);
+          showNotification(
+              data.message,
+              'success',
+              'Succès'
+            );
+          router.push(`${FE_USERS_LOGIN_URL}`);
         } else {
           setIsLoading(false);
-          if (data.errorMessage) {
-            setErrorMessage(data.errorMessage);
-          }
+          showNotification(
+            data.errorMessage,
+            'error',
+            'Erreur'
+          );
           if (data.errorFields) {
             setUserFieldError(data.errorFields.email);
             setPassword1FieldError(data.errorFields.password1);
@@ -143,18 +148,6 @@ export default function Page() {
             />
           </div>
         </div>
-        <Popup
-          isOpen={popupVisible}
-          setIsOpen={setPopupVisible}
-          message={popupMessage}
-          onConfirm={() => {
-            setPopupVisible(false);
-            router.push(`${FE_USERS_LOGIN_URL}`);
-          }}
-          onCancel={() => setPopupVisible(false)}
-          uniqueConfirmButton={true}
-          popupClassName="w-full max-w-xs sm:max-w-md"
-        />
       </>
     );
   }