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

87
components/4nk/AuthModal.tsx
View File

@ -2,7 +2,7 @@ import { useState, useEffect, memo } from 'react';
import Iframe from './Iframe'; import Iframe from './Iframe';
import MessageBus from '@/lib/4nk/MessageBus'; import MessageBus from '@/lib/4nk/MessageBus';
import Loader from '@/lib/4nk/Loader'; import Loader from '@/lib/4nk/Loader';
import Modal from '../modal/Modal'; import Modal from '../ui/modal/Modal';
interface AuthModalProps { interface AuthModalProps {
isOpen: boolean; isOpen: boolean;
@ -52,48 +52,63 @@ function AuthModal({ isOpen, onConnect, onClose, iframeUrl }: AuthModalProps) {
<Modal <Modal
isOpen={isOpen} isOpen={isOpen}
onClose={onClose} onClose={onClose}
title='Authentification 4nk' 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} /> <Loader width={40} />
<div style={{ fontWeight: 600, fontSize: 18 }}>Chargement de l'authentification...</div> <div style={{ fontWeight: 600, fontSize: 18 }}>
Chargement de l'authentification...
</div>
</div> </div>
)} )}
{authSuccess ? (
<div style={{ {/* Message de succès */}
display: 'flex', {authSuccess && (
flexDirection: 'column', <div
alignItems: 'center', style={{
justifyContent: 'center', display: "flex",
height: '400px', flexDirection: "column",
gap: 20 alignItems: "center",
}}> justifyContent: "center",
<div style={{ fontWeight: 600, fontSize: 18, color: '#43a047' }}> height: "400px",
Authentification réussie ! gap: 20,
animation: "fadeInSuccess 0.4s ease-out",
}}
>
<div style={{ fontWeight: 600, fontSize: 18, color: "#43a047" }}>
✅ Authentification réussie !
</div> </div>
</div> </div>
) : (
<div style={{
display: showIframe ? 'flex' : 'none',
justifyContent: 'center',
alignItems: 'center',
width: '100%'
}}>
<Iframe
iframeUrl={iframeUrl}
showIframe={showIframe}
/>
</div>
)} )}
</Modal>
{/* 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>
); );
} }