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 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;
@ -50,50 +50,65 @@ function AuthModal({ isOpen, onConnect, onClose, iframeUrl }: AuthModalProps) {
return ( return (
<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 && ( <Loader width={40} />
<div style={{ <div style={{ fontWeight: 600, fontSize: 18 }}>
display: 'flex', Chargement de l'authentification...
flexDirection: 'column', </div>
alignItems: 'center', </div>
justifyContent: 'center', )}
height: '400px',
gap: 16 {/* Message de succès */}
}}> {authSuccess && (
<Loader width={40} /> <div
<div style={{ fontWeight: 600, fontSize: 18 }}>Chargement de l'authentification...</div> style={{
</div> display: "flex",
)} flexDirection: "column",
{authSuccess ? ( alignItems: "center",
<div style={{ justifyContent: "center",
display: 'flex', height: "400px",
flexDirection: 'column', gap: 20,
alignItems: 'center', animation: "fadeInSuccess 0.4s ease-out",
justifyContent: 'center', }}
height: '400px', >
gap: 20 <div style={{ fontWeight: 600, fontSize: 18, color: "#43a047" }}>
}}> ✅ Authentification réussie !
<div style={{ fontWeight: 600, fontSize: 18, color: '#43a047' }}> </div>
Authentification réussie ! </div>
</div> )}
</div>
) : ( {/* Iframe affichée uniquement si dispo */}
<div style={{ {!authSuccess && (
display: showIframe ? 'flex' : 'none', <div
justifyContent: 'center', style={{
alignItems: 'center', display: showIframe ? "flex" : "none",
width: '100%' justifyContent: "center",
}}> alignItems: "center",
<Iframe width: "100%",
iframeUrl={iframeUrl} minHeight: "400px",
showIframe={showIframe} }}
/> >
</div> <Iframe iframeUrl={iframeUrl} showIframe={showIframe} />
)} </div>
</Modal> )}
</Modal>
); );
} }