4nk/docv
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated AuthModal design

Browse Source
This commit is contained in:
Sadrinho27 2025-10-02 23:22:37 +02:00
parent df1e345748
commit b32fccdb7f
1 changed files with 59 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
components/4nk/AuthModal.tsx
View File

@ -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>
);
}