90 lines
2.3 KiB
TypeScript
90 lines
2.3 KiB
TypeScript
import { useState, useEffect, memo } from 'react';
|
|
import Iframe from './Iframe';
|
|
import MessageBus from '@/lib/4nk/MessageBus';
|
|
import Loader from './Loader';
|
|
import Modal from './Modal';
|
|
|
|
interface AuthModalProps {
|
|
isOpen: boolean;
|
|
onConnect: () => void;
|
|
onClose: () => void;
|
|
iframeUrl: string;
|
|
}
|
|
|
|
function AuthModal({ isOpen, onConnect, onClose, iframeUrl }: AuthModalProps) {
|
|
const [isIframeReady, setIsIframeReady] = useState(false);
|
|
const [showIframe, setShowIframe] = useState(false);
|
|
const [authSuccess, setAuthSuccess] = useState(false);
|
|
|
|
useEffect(() => {
|
|
MessageBus.getInstance(iframeUrl).isReady().then(() => {
|
|
setIsIframeReady(true);
|
|
});
|
|
}, [iframeUrl]);
|
|
|
|
useEffect(() => {
|
|
if (!isOpen) {
|
|
setShowIframe(false);
|
|
setIsIframeReady(false);
|
|
setAuthSuccess(false);
|
|
}
|
|
}, [isOpen]);
|
|
|
|
useEffect(() => {
|
|
if (isIframeReady && !showIframe) {
|
|
setShowIframe(true);
|
|
|
|
MessageBus.getInstance(iframeUrl).requestLink().then(() => {
|
|
setAuthSuccess(true);
|
|
|
|
setTimeout(() => onConnect(), 500);
|
|
}).catch((_error: string) => {
|
|
setShowIframe(false);
|
|
setIsIframeReady(false);
|
|
setAuthSuccess(false);
|
|
|
|
onClose();
|
|
});
|
|
}
|
|
}, [isIframeReady, showIframe]);
|
|
|
|
return (
|
|
<Modal
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
title="Authentification 4nk"
|
|
size="md"
|
|
>
|
|
{/* Loader affiché tant que l'iframe n'est pas prête */}
|
|
{!isIframeReady && !authSuccess && (
|
|
<div className="flex flex-col items-center justify-center h-96 gap-4">
|
|
<Loader width={40} />
|
|
<div className="font-semibold text-lg">
|
|
Chargement de l'authentification...
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Message de succès */}
|
|
{authSuccess && (
|
|
<div className="flex flex-col items-center justify-center h-96 gap-5 animate-fade-in">
|
|
<div className="font-semibold text-lg text-green-600">
|
|
✅ Authentification réussie !
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Iframe affichée uniquement si dispo */}
|
|
{!authSuccess && (
|
|
<div className={`${showIframe ? 'flex' : 'hidden'} justify-center items-center w-full min-h-96`}>
|
|
<Iframe iframeUrl={iframeUrl} showIframe={showIframe} />
|
|
</div>
|
|
)}
|
|
</Modal>
|
|
|
|
);
|
|
}
|
|
|
|
AuthModal.displayName = 'AuthModal';
|
|
export default memo(AuthModal);
|