chore: application prettier

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

@@ -1,7 +1,5 @@
-"use client";
+'use client';
 
-function ErrorBoundary({
-  error
-}) {
+function ErrorBoundary({ error }) {
   return <>{error.message}</>;
-}
+}

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

@@ -1,116 +1,159 @@
-'use client'
-import React, { useState } from 'react'
-import DjangoCSRFToken from '@/components/DjangoCSRFToken'
+'use client';
+import React, { useState } from 'react';
+import DjangoCSRFToken from '@/components/DjangoCSRFToken';
 import Logo from '@/components/Logo';
-import { useSearchParams, useRouter } from 'next/navigation'
+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 { User, KeySquare } from 'lucide-react'; // Importez directement les icônes nécessaires
-import {
-    FE_USERS_NEW_PASSWORD_URL,
-    getRedirectUrlFromRole
-} from '@/utils/Url';
+import { FE_USERS_NEW_PASSWORD_URL, getRedirectUrlFromRole } from '@/utils/Url';
 import { login } from '@/app/actions/authAction';
 import { getSession } from 'next-auth/react';
 import { useCsrfToken } from '@/context/CsrfContext'; // Importez le hook useCsrfToken
 import logger from '@/utils/logger';
 
-
 import { useEstablishment } from '@/context/EstablishmentContext';
 
-
-
 export default function Page() {
-    const searchParams = useSearchParams();
-    const [errorMessage, setErrorMessage] = useState("");
-    const [userFieldError, setUserFieldError] = useState("")
-    const [passwordFieldError, setPasswordFieldError] = useState("")
-    const { setUser } = useEstablishment();
-    const [isLoading, setIsLoading] = useState(false);
+  const searchParams = useSearchParams();
+  const [errorMessage, setErrorMessage] = useState('');
+  const [userFieldError, setUserFieldError] = useState('');
+  const [passwordFieldError, setPasswordFieldError] = useState('');
+  const { setUser } = useEstablishment();
+  const [isLoading, setIsLoading] = useState(false);
 
-    const router = useRouter();
-    const csrfToken = useCsrfToken(); // Utilisez le hook useCsrfToken
+  const router = useRouter();
+  const csrfToken = useCsrfToken(); // Utilisez le hook useCsrfToken
 
-    function isOK(data) {
-        return data.errorMessage === ""
-    }
+  function isOK(data) {
+    return data.errorMessage === '';
+  }
 
+  function handleFormLogin(formData) {
+    setIsLoading(true);
+    setErrorMessage('');
 
+    login({
+      email: formData.get('login'),
+      password: formData.get('password'),
+    })
+      .then((result) => {
+        logger.debug('Sign In Result', result);
 
-    function handleFormLogin(formData) {
-        setIsLoading(true);
-        setErrorMessage("");
-
-        login({
-            email: formData.get('login'),
-            password: formData.get('password')
-        }).then(result => {
-            logger.debug('Sign In Result', result);
-
-            if (result.error) {
-                setErrorMessage(result.error);
+        if (result.error) {
+          setErrorMessage(result.error);
+          setIsLoading(false);
+        } else {
+          getSession()
+            .then((session) => {
+              if (!session || !session.user) {
+                throw new Error('Session not found');
+              }
+              const user = session.user;
+              logger.debug('User Session:', user);
+              setUser(session.user);
+              if (session.user.roles && session.user.roles.length > 0) {
+                let roleIndex = 0;
+                if (
+                  session.user.roles.length > session.user.roleIndexLoginDefault
+                ) {
+                  roleIndex = session.user.roleIndexLoginDefault;
+                }
+                const role = session.user.roles[roleIndex].role_type;
+                const url = getRedirectUrlFromRole(role);
+                if (url) {
+                  router.push(url);
+                } else {
+                  setIsLoading(false);
+                  setErrorMessage('Type de rôle non géré');
+                }
+              } else {
                 setIsLoading(false);
-            } else {
-                getSession().then(session => {
-                    if (!session || !session.user) {
-                        throw new Error('Session not found');
-                    }
-                    const user = session.user;
-                    logger.debug('User Session:', user);
-                    setUser(session.user);
-                    if (session.user.roles && session.user.roles.length > 0) {
-                        let roleIndex = 0;
-                        if( session.user.roles.length >  session.user.roleIndexLoginDefault){
-                            roleIndex = session.user.roleIndexLoginDefault;
-                        }
-                        const role = session.user.roles[roleIndex].role_type;
-                        const url = getRedirectUrlFromRole(role);
-                        if (url) {
-                            router.push(url);
-                        } else {
-                            setIsLoading(false);
-                            setErrorMessage('Type de rôle non géré');
-                        }
-                    } else {
-                        setIsLoading(false);
-                        setErrorMessage('Aucun rôle trouvé pour le profil sélectionné.');
-                    }
-                }).catch(error => {
-                    logger.error('Erreur lors de la récupération de la session:', error);
-                    setIsLoading(false);
-                    setErrorMessage('Une erreur est survenue lors de la récupération de la session.');
-                });
-            }
-        }).catch(error => {
-            logger.error('Erreur lors de la connexion:', error);
-            setIsLoading(false);
-            setErrorMessage('Une erreur est survenue lors de la connexion.');
-        });
-    }
+                setErrorMessage(
+                  'Aucun rôle trouvé pour le profil sélectionné.'
+                );
+              }
+            })
+            .catch((error) => {
+              logger.error(
+                'Erreur lors de la récupération de la session:',
+                error
+              );
+              setIsLoading(false);
+              setErrorMessage(
+                'Une erreur est survenue lors de la récupération de la session.'
+              );
+            });
+        }
+      })
+      .catch((error) => {
+        logger.error('Erreur lors de la connexion:', error);
+        setIsLoading(false);
+        setErrorMessage('Une erreur est survenue lors de la connexion.');
+      });
+  }
 
-    if (isLoading === true) {
-        return <Loader /> // Affichez le composant Loader
-    } else {
-        return <>
-            <div className="container max mx-auto p-4">
-                <div className="flex justify-center mb-4">
-                    <Logo className="h-150 w-150" />
-                </div>
-                <h1 className="text-2xl font-bold text-center mb-4">Authentification</h1>
-                <form className="max-w-md mx-auto" onSubmit={(e) => { e.preventDefault(); handleFormLogin(new FormData(e.target)); }}>
-                    <DjangoCSRFToken csrfToken={csrfToken} />
-                    <InputTextIcon name="login" type="text" IconItem={User} label="Identifiant" placeholder="Identifiant" errorMsg={userFieldError} className="w-full mb-5" />
-                    <InputTextIcon name="password" type="password" 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" href={`${FE_USERS_NEW_PASSWORD_URL}`}>Mot de passe oublié ?</a></label>
-                    <div className="form-group-submit mt-4">
-                        <Button text="Se Connecter" className="w-full" primary type="submit" name="connect" />
-                    </div>
-                </form>
+  if (isLoading === true) {
+    return <Loader />; // Affichez le composant Loader
+  } else {
+    return (
+      <>
+        <div className="container max mx-auto p-4">
+          <div className="flex justify-center mb-4">
+            <Logo className="h-150 w-150" />
+          </div>
+          <h1 className="text-2xl font-bold text-center mb-4">
+            Authentification
+          </h1>
+          <form
+            className="max-w-md mx-auto"
+            onSubmit={(e) => {
+              e.preventDefault();
+              handleFormLogin(new FormData(e.target));
+            }}
+          >
+            <DjangoCSRFToken csrfToken={csrfToken} />
+            <InputTextIcon
+              name="login"
+              type="text"
+              IconItem={User}
+              label="Identifiant"
+              placeholder="Identifiant"
+              errorMsg={userFieldError}
+              className="w-full mb-5"
+            />
+            <InputTextIcon
+              name="password"
+              type="password"
+              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"
+                href={`${FE_USERS_NEW_PASSWORD_URL}`}
+              >
+                Mot de passe oublié ?
+              </a>
+            </label>
+            <div className="form-group-submit mt-4">
+              <Button
+                text="Se Connecter"
+                className="w-full"
+                primary
+                type="submit"
+                name="connect"
+              />
             </div>
-        </>
-    }
-};
+          </form>
+        </div>
+      </>
+    );
+  }
+}

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

@@ -1,7 +1,7 @@
-'use client'
+'use client';
 
 import React, { useState } from 'react';
-import DjangoCSRFToken from '@/components/DjangoCSRFToken'
+import DjangoCSRFToken from '@/components/DjangoCSRFToken';
 import Logo from '@/components/Logo';
 import { useSearchParams } from 'next/navigation';
 import InputTextIcon from '@/components/InputTextIcon';
@@ -17,80 +17,108 @@ import logger from '@/utils/logger';
 const useFakeData = process.env.NEXT_PUBLIC_USE_FAKE_DATA === 'true';
 
 export default function Page() {
-    const searchParams = useSearchParams();
-    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();
+  const searchParams = useSearchParams();
+  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(() => {
-                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);
-                    }
-                }
-            })
-            .catch(error => {
-                logger.error('Error fetching data:', error);
-                error = error.errorMessage;
-                logger.debug(error);
-            });
-        }
-    }
-
-    if (isLoading === true) {
-        return <Loader /> // Affichez le composant Loader
+  function validate(formData) {
+    if (useFakeData) {
+      setTimeout(() => {
+        setUserFieldError('');
+        setErrorMessage('');
+        setPopupMessage('Mot de passe réinitialisé avec succès !');
+        setPopupConfirmAction(() => () => setPopupVisible(false));
+        setPopupVisible(true);
+      }, 1000); // Simule un délai de traitement
     } else {
-        return <>
-            <div className="container max mx-auto p-4">
-                <div className="flex justify-center mb-4">
-                    <Logo className="h-150 w-150" />
-                </div>
-                <h1 className="text-2xl font-bold text-center mb-4">Nouveau Mot de passe</h1>
-                <form className="max-w-md mx-auto" onSubmit={(e) => { e.preventDefault(); validate(new FormData(e.target)); }}>
-                    <DjangoCSRFToken csrfToken={csrfToken} />
-                    <InputTextIcon name="email" type="text" 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" className="w-full" primary type="submit" name="validate" />
-                    </div>
-                </form>
-                <br />
-                <div className='flex justify-center mt-2 max-w-md mx-auto'>
-                    <Button text="Annuler" className="w-full" href={ `${FE_USERS_LOGIN_URL}`} />
-                </div>
-            </div>
-            <Popup
-                visible={popupVisible}
-                message={popupMessage}
-                onConfirm={popupConfirmAction}
-                onCancel={() => setPopupVisible(false)}
-            />
-        </>
+      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);
+            }
+          }
+        })
+        .catch((error) => {
+          logger.error('Error fetching data:', error);
+          error = error.errorMessage;
+          logger.debug(error);
+        });
     }
-}
+  }
+
+  if (isLoading === true) {
+    return <Loader />; // Affichez le composant Loader
+  } else {
+    return (
+      <>
+        <div className="container max mx-auto p-4">
+          <div className="flex justify-center mb-4">
+            <Logo className="h-150 w-150" />
+          </div>
+          <h1 className="text-2xl font-bold text-center mb-4">
+            Nouveau Mot de passe
+          </h1>
+          <form
+            className="max-w-md mx-auto"
+            onSubmit={(e) => {
+              e.preventDefault();
+              validate(new FormData(e.target));
+            }}
+          >
+            <DjangoCSRFToken csrfToken={csrfToken} />
+            <InputTextIcon
+              name="email"
+              type="text"
+              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"
+                className="w-full"
+                primary
+                type="submit"
+                name="validate"
+              />
+            </div>
+          </form>
+          <br />
+          <div className="flex justify-center mt-2 max-w-md mx-auto">
+            <Button
+              text="Annuler"
+              className="w-full"
+              href={`${FE_USERS_LOGIN_URL}`}
+            />
+          </div>
+        </div>
+        <Popup
+          visible={popupVisible}
+          message={popupMessage}
+          onConfirm={popupConfirmAction}
+          onCancel={() => setPopupVisible(false)}
+        />
+      </>
+    );
+  }
+}

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

@@ -1,10 +1,10 @@
-'use client'
+'use client';
 // src/app/pages/subscribe.js
 
 import React, { useState, useEffect } from 'react';
-import DjangoCSRFToken from '@/components/DjangoCSRFToken'
+import DjangoCSRFToken from '@/components/DjangoCSRFToken';
 import Logo from '@/components/Logo';
-import { useSearchParams, useRouter } from 'next/navigation'
+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
@@ -18,113 +18,149 @@ import logger from '@/utils/logger';
 const useFakeData = process.env.NEXT_PUBLIC_USE_FAKE_DATA === 'true';
 
 export default function Page() {
-    const searchParams = useSearchParams();
-    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 searchParams = useSearchParams();
+  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();
+  const router = useRouter();
+  const csrfToken = useCsrfToken();
 
-    useEffect(() => {
-        if (useFakeData) {
-            setTimeout(() => {
-                setIsLoading(false);
-            }, 1000);
-        } else {
-            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) {
-        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);
-            });
-        }
-    }
-
-    if (isLoading === true) {
-        return <Loader /> // Affichez le composant Loader
+  useEffect(() => {
+    if (useFakeData) {
+      setTimeout(() => {
+        setIsLoading(false);
+      }, 1000);
     } else {
-        return <>
-            <Popup
-                visible={popupVisible}
-                message={popupMessage}
-                onConfirm={() => {
-                    setPopupVisible(false);
-                    router.push(`${FE_USERS_LOGIN_URL}`);
-                }}
-                onCancel={() => setPopupVisible(false)}
-            />
-            <div className="container max mx-auto p-4">
-                <div className="flex justify-center mb-4">
-                    <Logo className="h-150 w-150" />
-                </div>
-                <h1 className="text-2xl font-bold text-center mb-4">Réinitialisation du mot de passe</h1>
-                <form className="max-w-md mx-auto" onSubmit={(e) => { e.preventDefault(); validate(new FormData(e.target)); }}>
-                    <DjangoCSRFToken csrfToken={csrfToken} />
-                    <InputTextIcon name="password1" type="password" IconItem={KeySquare} label="Mot de passe" placeholder="Mot de passe" errorMsg={password1FieldError} className="w-full mb-5" />
-                    <InputTextIcon name="password2" type="password" 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" className="w-full" primary type="submit" name="validate" />
-                    </div>
-                </form>
-                <br/>
-                <div className="flex justify-center mt-2 max-w-md mx-auto">
-                <Button text="Annuler" className="w-full" href={`${FE_USERS_LOGIN_URL}`} />
-                </div>
-            </div>
-        </>
+      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) {
+    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);
+        });
+    }
+  }
+
+  if (isLoading === true) {
+    return <Loader />; // Affichez le composant Loader
+  } else {
+    return (
+      <>
+        <Popup
+          visible={popupVisible}
+          message={popupMessage}
+          onConfirm={() => {
+            setPopupVisible(false);
+            router.push(`${FE_USERS_LOGIN_URL}`);
+          }}
+          onCancel={() => setPopupVisible(false)}
+        />
+        <div className="container max mx-auto p-4">
+          <div className="flex justify-center mb-4">
+            <Logo className="h-150 w-150" />
+          </div>
+          <h1 className="text-2xl font-bold text-center mb-4">
+            Réinitialisation du mot de passe
+          </h1>
+          <form
+            className="max-w-md mx-auto"
+            onSubmit={(e) => {
+              e.preventDefault();
+              validate(new FormData(e.target));
+            }}
+          >
+            <DjangoCSRFToken csrfToken={csrfToken} />
+            <InputTextIcon
+              name="password1"
+              type="password"
+              IconItem={KeySquare}
+              label="Mot de passe"
+              placeholder="Mot de passe"
+              errorMsg={password1FieldError}
+              className="w-full mb-5"
+            />
+            <InputTextIcon
+              name="password2"
+              type="password"
+              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"
+                className="w-full"
+                primary
+                type="submit"
+                name="validate"
+              />
+            </div>
+          </form>
+          <br />
+          <div className="flex justify-center mt-2 max-w-md mx-auto">
+            <Button
+              text="Annuler"
+              className="w-full"
+              href={`${FE_USERS_LOGIN_URL}`}
+            />
+          </div>
+        </div>
+      </>
+    );
+  }
+}

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

@@ -1,106 +1,155 @@
-'use client'
+'use client';
 // src/app/pages/subscribe.js
 
 import React, { useState, useEffect } from 'react';
-import DjangoCSRFToken from '@/components/DjangoCSRFToken'
+import DjangoCSRFToken from '@/components/DjangoCSRFToken';
 import Logo from '@/components/Logo';
-import { useSearchParams, useRouter } from 'next/navigation'
+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 { FE_USERS_LOGIN_URL } from '@/utils/Url';
 import { useCsrfToken } from '@/context/CsrfContext';
 import { subscribe } from '@/app/actions/authAction';
 import logger from '@/utils/logger';
 import { useEstablishment } from '@/context/EstablishmentContext';
 
 export default function Page() {
-    const searchParams = useSearchParams();
+  const searchParams = useSearchParams();
 
-    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 [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();
-    
-    const establishment_id = searchParams.get('establishment_id');
+  const router = useRouter();
+  const csrfToken = useCsrfToken();
 
-    function isOK(data) {
-        return data.errorMessage === ""
-    }
+  const establishment_id = searchParams.get('establishment_id');
 
-    function subscribeFormSubmit(formData) {
-        const data ={
-            email: formData.get('login'),
-            password1: formData.get('password1'),
-            password2: formData.get('password2'),
-            establishment_id: establishment_id
+  function isOK(data) {
+    return data.errorMessage === '';
+  }
+
+  function subscribeFormSubmit(formData) {
+    const data = {
+      email: formData.get('login'),
+      password1: formData.get('password1'),
+      password2: formData.get('password2'),
+      establishment_id: establishment_id,
+    };
+    subscribe(data, csrfToken)
+      .then((data) => {
+        logger.debug('Success:', data);
+        setUserFieldError('');
+        setPassword1FieldError('');
+        setPassword2FieldError('');
+        setErrorMessage('');
+        if (isOK(data)) {
+          setPopupMessage(data.message);
+          setPopupVisible(true);
+        } else {
+          if (data.errorMessage) {
+            setErrorMessage(data.errorMessage);
+          }
+          if (data.errorFields) {
+            setUserFieldError(data.errorFields.email);
+            setPassword1FieldError(data.errorFields.password1);
+            setPassword2FieldError(data.errorFields.password2);
+          }
         }
-        subscribe(data,csrfToken).then(data => {
-            logger.debug('Success:', data);
-            setUserFieldError("")
-            setPassword1FieldError("")
-            setPassword2FieldError("")
-            setErrorMessage("")
-            if(isOK(data)){
-                setPopupMessage(data.message);
-                setPopupVisible(true);
-            } else {
-                if(data.errorMessage){
-                    setErrorMessage(data.errorMessage);
-                }
-                if(data.errorFields){
-                    setUserFieldError(data.errorFields.email)
-                    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) {
-        return <Loader /> // Affichez le composant Loader
-    } else {
-        return <>
-            <div className="container max mx-auto p-4">
-                <div className="flex justify-center mb-4">
-                    <Logo className="h-150 w-150" />
-                </div>
-                <h1 className="text-2xl font-bold text-center mb-4">Nouveau profil</h1>
-                <form className="max-w-md mx-auto" onSubmit={(e) => { e.preventDefault();  subscribeFormSubmit(new FormData(e.target)); }}>
-                    <DjangoCSRFToken csrfToken={csrfToken} />
-                    <InputTextIcon name="login" type="text" IconItem={User} label="Identifiant" placeholder="Identifiant" errorMsg={userFieldError} className="w-full mb-5" />
-                    <InputTextIcon name="password1" type="password" IconItem={KeySquare} label="Mot de passe" placeholder="Mot de passe" errorMsg={password1FieldError} className="w-full mb-5" />
-                    <InputTextIcon name="password2" type="password" IconItem={KeySquare} label="Confirmation mot de passe" placeholder="Confirmation mot de passe" errorMsg={password2FieldError} className="w-full" />
-                    <p className="text-red-500">{errorMessage}</p>
-                    <div className="form-group-submit mt-4">
-                        <Button text="Enregistrer" className="w-full" primary type="submit" name="validate" />
-                    </div>
-                </form>
-                        <br/>
-                        <div className='flex justify-center mt-2 max-w-md mx-auto'><Button text="Annuler" className="w-full" onClick={()=>{router.push(`${FE_USERS_LOGIN_URL}`)}} /></div>
-            </div>
-            <Popup
-                visible={popupVisible}
-                message={popupMessage}
-                onConfirm={() => {
-                    setPopupVisible(false);
-                    router.push(`${FE_USERS_LOGIN_URL}`);
-                }}
-                onCancel={() => setPopupVisible(false)}
+  if (isLoading === true) {
+    return <Loader />; // Affichez le composant Loader
+  } else {
+    return (
+      <>
+        <div className="container max mx-auto p-4">
+          <div className="flex justify-center mb-4">
+            <Logo className="h-150 w-150" />
+          </div>
+          <h1 className="text-2xl font-bold text-center mb-4">
+            Nouveau profil
+          </h1>
+          <form
+            className="max-w-md mx-auto"
+            onSubmit={(e) => {
+              e.preventDefault();
+              subscribeFormSubmit(new FormData(e.target));
+            }}
+          >
+            <DjangoCSRFToken csrfToken={csrfToken} />
+            <InputTextIcon
+              name="login"
+              type="text"
+              IconItem={User}
+              label="Identifiant"
+              placeholder="Identifiant"
+              errorMsg={userFieldError}
+              className="w-full mb-5"
             />
-        </>
-    }
-}
+            <InputTextIcon
+              name="password1"
+              type="password"
+              IconItem={KeySquare}
+              label="Mot de passe"
+              placeholder="Mot de passe"
+              errorMsg={password1FieldError}
+              className="w-full mb-5"
+            />
+            <InputTextIcon
+              name="password2"
+              type="password"
+              IconItem={KeySquare}
+              label="Confirmation mot de passe"
+              placeholder="Confirmation mot de passe"
+              errorMsg={password2FieldError}
+              className="w-full"
+            />
+            <p className="text-red-500">{errorMessage}</p>
+            <div className="form-group-submit mt-4">
+              <Button
+                text="Enregistrer"
+                className="w-full"
+                primary
+                type="submit"
+                name="validate"
+              />
+            </div>
+          </form>
+          <br />
+          <div className="flex justify-center mt-2 max-w-md mx-auto">
+            <Button
+              text="Annuler"
+              className="w-full"
+              onClick={() => {
+                router.push(`${FE_USERS_LOGIN_URL}`);
+              }}
+            />
+          </div>
+        </div>
+        <Popup
+          visible={popupVisible}
+          message={popupMessage}
+          onConfirm={() => {
+            setPopupVisible(false);
+            router.push(`${FE_USERS_LOGIN_URL}`);
+          }}
+          onCancel={() => setPopupVisible(false)}
+        />
+      </>
+    );
+  }
+}