From b32fccdb7ff728f15e7a7312aa8ddc88396752c5 Mon Sep 17 00:00:00 2001
From: Sadrinho27 <Titouan.tabere@gmail.com>
Date: Thu, 2 Oct 2025 23:22:37 +0200
Subject: [PATCH] Updated AuthModal design

---
 components/4nk/AuthModal.tsx | 103 ++++++++++++++++++++---------------
 1 file changed, 59 insertions(+), 44 deletions(-)

diff --git a/components/4nk/AuthModal.tsx b/components/4nk/AuthModal.tsx
index 6d923ca..e96e7e6 100644
--- a/components/4nk/AuthModal.tsx
+++ b/components/4nk/AuthModal.tsx
@@ -2,7 +2,7 @@ import { useState, useEffect, memo } from 'react';
 import Iframe from './Iframe';
 import MessageBus from '@/lib/4nk/MessageBus';
 import Loader from '@/lib/4nk/Loader';
-import Modal from '../modal/Modal';
+import Modal from '../ui/modal/Modal';
 
 interface AuthModalProps {
   isOpen: boolean;
@@ -50,50 +50,65 @@ function AuthModal({ isOpen, onConnect, onClose, iframeUrl }: AuthModalProps) {
 
   return (
     <Modal
-      isOpen={isOpen}
-      onClose={onClose}
-      title='Authentification 4nk'
+  isOpen={isOpen}
+  onClose={onClose}
+  title="Authentification 4nk"
+  size="md"
+>
+  {/* Loader affiché tant que l'iframe n'est pas prête */}
+  {!isIframeReady && !authSuccess && (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "400px",
+        gap: 16,
+      }}
     >
-      {!isIframeReady && (
-        <div style={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-          height: '400px',
-          gap: 16
-        }}>
-          <Loader width={40} />
-          <div style={{ fontWeight: 600, fontSize: 18 }}>Chargement de l'authentification...</div>
-        </div>
-      )}
-      {authSuccess ? (
-        <div style={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-          height: '400px',
-          gap: 20
-        }}>
-          <div style={{ fontWeight: 600, fontSize: 18, color: '#43a047' }}>
-            Authentification réussie !
-          </div>
-        </div>
-      ) : (
-        <div style={{
-          display: showIframe ? 'flex' : 'none',
-          justifyContent: 'center',
-          alignItems: 'center',
-          width: '100%'
-        }}>
-          <Iframe
-            iframeUrl={iframeUrl}
-            showIframe={showIframe}
-          />
-        </div>
-      )}
-    </Modal>
+      <Loader width={40} />
+      <div style={{ fontWeight: 600, fontSize: 18 }}>
+        Chargement de l'authentification...
+      </div>
+    </div>
+  )}
+
+  {/* Message de succès */}
+  {authSuccess && (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "400px",
+        gap: 20,
+        animation: "fadeInSuccess 0.4s ease-out",
+      }}
+    >
+      <div style={{ fontWeight: 600, fontSize: 18, color: "#43a047" }}>
+        ✅ Authentification réussie !
+      </div>
+    </div>
+  )}
+
+  {/* Iframe affichée uniquement si dispo */}
+  {!authSuccess && (
+    <div
+      style={{
+        display: showIframe ? "flex" : "none",
+        justifyContent: "center",
+        alignItems: "center",
+        width: "100%",
+        minHeight: "400px",
+      }}
+    >
+      <Iframe iframeUrl={iframeUrl} showIframe={showIframe} />
+    </div>
+  )}
+</Modal>
+
   );
 }