117 lines
2.7 KiB
TypeScript
117 lines
2.7 KiB
TypeScript
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';
|
|
|
|
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
|
|
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>
|
|
)}
|
|
|
|
{/* 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>
|
|
|
|
);
|
|
}
|
|
|
|
AuthModal.displayName = 'AuthModal';
|
|
export default memo(AuthModal);
|