From 8e182b4601f75d2dc7b224349ef939173ecc598f Mon Sep 17 00:00:00 2001
From: "Orace.A" <orace@intside.com>
Date: Fri, 28 Mar 2025 12:50:20 +0100
Subject: [PATCH] feat: add loading state to buttons and center align
 confirmation messages

---
 src/app/(auth)/login/page.tsx        |  2 +-
 src/app/admin/admins/page.tsx        | 12 +++++++-----
 src/app/admin/home/page.tsx          |  2 +-
 src/app/admin/organizations/page.tsx |  7 ++++---
 src/app/globals.css                  |  8 ++++++++
 5 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx
index d7e2105..0256b1a 100644
--- a/src/app/(auth)/login/page.tsx
+++ b/src/app/(auth)/login/page.tsx
@@ -70,7 +70,7 @@ export default function LoginPage() {
                 ]}
                 submit={mutation.mutate} 
                 schema={loginSchema}
-                child={<button type="submit" className="btn-auth mt-4">Connexion</button>}
+                child={<button disabled={mutation.isPending} type="submit" className={`${mutation.isPending ? "btn-auth-loading" : "btn-auth"} mt-4`}>{mutation.isPending ? "Chargement..." : "Connexion"}</button>}
              />
         </div>
     )
diff --git a/src/app/admin/admins/page.tsx b/src/app/admin/admins/page.tsx
index 88219a5..bb3c666 100644
--- a/src/app/admin/admins/page.tsx
+++ b/src/app/admin/admins/page.tsx
@@ -230,9 +230,10 @@ export default function Admins() {
                   child={
                     <button
                       type="submit"
-                      className="btn-auth mt-4 cursor-pointer"
+                      disabled={updateMutation.isPending}
+                      className={`${updateMutation.isPending ? "btn-auth-loading" : "btn-auth"} mt-4 cursor-pointer`}
                     >
-                      Modifier
+                      {updateMutation.isPending ? "En cours..." : "Modifier"}
                     </button>
                   }
                 />
@@ -265,7 +266,7 @@ export default function Admins() {
               title="Supprimer un admin"
               content={
                 <div>
-                  <p>Voulez-vous vraiment supprimer cet admin ?</p>
+                  <p className="text-center">Voulez-vous vraiment supprimer cet admin ?</p>
                   <div className="grid grid-cols-2 gap-3 mt-3">
                     <button
                       className="bg-blue-100 text-blue-600 py-2 px-4 rounded-full cursor-pointer"
@@ -387,9 +388,10 @@ export default function Admins() {
                     child={
                       <button
                         type="submit"
-                        className="btn-auth mt-4 cursor-pointer"
+                        disabled={createMutation.isPending}
+                        className={`${createMutation.isPending ? "btn-auth-loading" : "btn-auth"} mt-4 cursor-pointer`}
                       >
-                        Créer le compte
+                        {createMutation.isPending ? "Création de l'admin..." : "Créer le compte"}
                       </button>
                     }
                   />
diff --git a/src/app/admin/home/page.tsx b/src/app/admin/home/page.tsx
index 879891a..760bb20 100644
--- a/src/app/admin/home/page.tsx
+++ b/src/app/admin/home/page.tsx
@@ -151,7 +151,7 @@ export default function HomePage () {
               }
               content={
                 <div>
-                  <p>Voulez-vous vraiment supprimer cette organisation ?</p>
+                  <p className="text-center">Voulez-vous vraiment supprimer cette organisation ?</p>
 
                   <div className="grid grid-cols-2 gap-3 mt-3">
                     <button 
diff --git a/src/app/admin/organizations/page.tsx b/src/app/admin/organizations/page.tsx
index 8da469e..e78c127 100644
--- a/src/app/admin/organizations/page.tsx
+++ b/src/app/admin/organizations/page.tsx
@@ -276,7 +276,7 @@ export default function Organizations() {
                   title="Supprimer une organisation"
                   content={
                     <div>
-                      <p>Voulez-vous vraiment supprimer cette organisation ?</p>
+                      <p className="text-center">Voulez-vous vraiment supprimer cette organisation ?</p>
                       <div className="grid grid-cols-2 gap-3 mt-3">
                         <button
                           className="bg-blue-100 text-blue-600 py-2 px-4 rounded-full cursor-pointer"
@@ -412,9 +412,10 @@ export default function Organizations() {
                     child={
                       <button
                         type="submit"
-                        className="btn-auth mt-4 cursor-pointer"
+                        disabled={createMutation.isPending}
+                        className={`${createMutation.isPending ? "btn-auth-loading" : "btn-auth"} mt-4 cursor-pointer`}
                       >
-                        Créer l'organisation
+                        {createMutation.isPending ? "En cours..." : "Créer l'organisation"}
                       </button>
                     }
                   />
diff --git a/src/app/globals.css b/src/app/globals.css
index 83decf8..3cfcd0b 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -80,4 +80,12 @@ body {
   &:hover {
     background-color: rgb(22, 77, 185);
   }
+}
+
+.btn-auth-loading {
+  border-radius: 9999px;
+  background-color: #93b4f8;
+  color: white;
+  width: 100%;
+  padding: 8px;
 }
\ No newline at end of file