240 lines
9.2 KiB
TypeScript
240 lines
9.2 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { createPortal } from 'react-dom';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import {
|
|
ShieldAlert,
|
|
RefreshCw,
|
|
LogOut,
|
|
UserCheck,
|
|
CheckCircle2,
|
|
AlertTriangle,
|
|
ArrowLeft,
|
|
Mail,
|
|
Building2,
|
|
Fingerprint,
|
|
} from 'lucide-react';
|
|
import { BrandLogo } from '../ui/BrandLogo';
|
|
import { AuthUserProfile, UserClaims } from '../../auth/AuthProvider';
|
|
import { cancelSessionExpiration, dismissSubordinateModals } from '../../services/sessionExpiration';
|
|
|
|
interface AccountActivationModalProps {
|
|
user: AuthUserProfile | null;
|
|
claims: UserClaims;
|
|
sub: string;
|
|
onSync: (force?: boolean) => Promise<{ success: boolean; isUnauthorized?: boolean; errorMessage?: string }>;
|
|
onLogout: () => Promise<void>;
|
|
initialError?: string | null;
|
|
}
|
|
|
|
export const AccountActivationModal: React.FC<AccountActivationModalProps> = ({
|
|
user,
|
|
claims,
|
|
sub,
|
|
onSync,
|
|
onLogout,
|
|
initialError,
|
|
}) => {
|
|
const navigate = useNavigate();
|
|
const [isSyncing, setIsSyncing] = useState(false);
|
|
const [errorMessage, setErrorMessage] = useState<string | null>(initialError || null);
|
|
const [syncAttemptCount, setSyncAttemptCount] = useState(0);
|
|
|
|
// Sync errorMessage when initialError updates
|
|
useEffect(() => {
|
|
if (initialError !== undefined) {
|
|
setErrorMessage(initialError);
|
|
}
|
|
}, [initialError]);
|
|
|
|
// Clear any existing session prompt and close background dialogs
|
|
useEffect(() => {
|
|
cancelSessionExpiration();
|
|
dismissSubordinateModals();
|
|
}, []);
|
|
|
|
const displayName =
|
|
user?.name ||
|
|
(claims.name as string) ||
|
|
(claims.preferred_username as string) ||
|
|
'Registered User';
|
|
|
|
const displayEmail =
|
|
user?.email ||
|
|
(claims.email as string) ||
|
|
(claims['http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress'] as string) ||
|
|
'';
|
|
|
|
const tenant = user?.tenant || (claims.tenant as string) || (claims.org as string) || 'Standard Enterprise';
|
|
const role = user?.role || (claims.role as string) || 'User';
|
|
|
|
const handleSyncClick = async () => {
|
|
if (isSyncing) return;
|
|
setIsSyncing(true);
|
|
setErrorMessage(null);
|
|
|
|
try {
|
|
const result = await onSync(true);
|
|
|
|
if (result.isUnauthorized) {
|
|
// HTTP 401: Routine process of routing user to landing page
|
|
await onLogout();
|
|
navigate('/', { replace: true });
|
|
return;
|
|
}
|
|
|
|
if (!result.success) {
|
|
setSyncAttemptCount((prev) => prev + 1);
|
|
setErrorMessage(
|
|
result.errorMessage ||
|
|
'Account is not yet enabled. The administrator has not activated your account in the system directory.'
|
|
);
|
|
}
|
|
// If result.success is true, AuthProvider updates state, and this modal unmounts automatically!
|
|
} catch (err: unknown) {
|
|
const errObj = err as { response?: { status?: number }; message?: string };
|
|
if (errObj?.response?.status === 401) {
|
|
await onLogout();
|
|
navigate('/', { replace: true });
|
|
return;
|
|
}
|
|
setErrorMessage(
|
|
errObj?.message ||
|
|
'Account activation check encountered an error. Please confirm with your administrator and try again.'
|
|
);
|
|
} finally {
|
|
setIsSyncing(false);
|
|
}
|
|
};
|
|
|
|
const handleSignOut = async () => {
|
|
await onLogout();
|
|
navigate('/', { replace: true });
|
|
};
|
|
|
|
const handleNavigateLanding = () => {
|
|
navigate('/');
|
|
};
|
|
|
|
const isTenantIssue = !!errorMessage?.toLowerCase().includes('tenant');
|
|
|
|
const modalContent = (
|
|
<div
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="activation-modal-title"
|
|
className="fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-[#060a12]/85 backdrop-blur-md animate-in fade-in duration-200 select-none overflow-y-auto"
|
|
>
|
|
<div
|
|
className="relative w-full max-w-lg bg-[#0d1322] border border-slate-800 rounded-2xl shadow-2xl shadow-black/80 overflow-hidden flex flex-col text-slate-100 my-auto"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
{/* Subtle accent top border */}
|
|
<div className={`h-1 w-full ${isTenantIssue ? 'bg-amber-500' : 'bg-blue-600'}`} />
|
|
|
|
{/* Header */}
|
|
<div className="p-5 pb-4 border-b border-slate-800/80 bg-[#0f172a]/60">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className={`p-2.5 rounded-xl border ${isTenantIssue ? 'bg-amber-500/10 border-amber-500/20 text-amber-400' : 'bg-blue-500/10 border-blue-500/20 text-blue-400'}`}>
|
|
<ShieldAlert className="w-5 h-5" />
|
|
</div>
|
|
<div>
|
|
<h2 id="activation-modal-title" className="text-base font-bold text-white tracking-tight">
|
|
{isTenantIssue ? 'Tenant Access Restricted' : 'Account Pending Activation'}
|
|
</h2>
|
|
<p className="text-xs text-slate-400 mt-0.5">
|
|
{isTenantIssue
|
|
? 'The assigned tenant partition is currently inactive or restricted.'
|
|
: 'Your account is authenticated and awaiting administrator enablement.'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<BrandLogo size={32} showGlow={false} animateOnHover={false} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Body */}
|
|
<div className="p-5 space-y-4">
|
|
{/* User Profile Summary */}
|
|
<div className="rounded-xl border border-slate-800/80 bg-slate-900/60 p-3.5 space-y-2 text-xs">
|
|
<div className="grid grid-cols-2 gap-2.5">
|
|
<div>
|
|
<span className="text-[10px] uppercase font-semibold text-slate-500 block">User</span>
|
|
<span className="font-semibold text-white truncate block">{displayName}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-[10px] uppercase font-semibold text-slate-500 block">Email</span>
|
|
<span className="text-slate-300 truncate block">{displayEmail || '—'}</span>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-2.5 border-t border-slate-800/60 pt-2">
|
|
<div>
|
|
<span className="text-[10px] uppercase font-semibold text-slate-500 block">Tenant</span>
|
|
<span className="text-slate-300 truncate block">{tenant}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-[10px] uppercase font-semibold text-slate-500 block">Role</span>
|
|
<span className="text-blue-400 font-medium truncate block">{role}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Feedback notice if sync failed */}
|
|
{errorMessage && (
|
|
<div className="rounded-xl border border-amber-500/25 bg-amber-500/10 p-3 flex items-start gap-2.5 text-xs text-amber-200">
|
|
<AlertTriangle className="w-4 h-4 text-amber-400 shrink-0 mt-0.5" />
|
|
<div className="min-w-0">
|
|
<span className="font-semibold text-amber-300 block">Notice:</span>
|
|
<p className="text-[11px] text-amber-200/90 leading-relaxed mt-0.5">{errorMessage}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<p className="text-[11px] text-slate-400 text-center">
|
|
Once your administrator enables your account, click <strong className="text-white">Sync Account</strong> to enter the console.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Footer Actions */}
|
|
<div className="p-4 border-t border-slate-800 bg-[#0a0f1d] flex flex-col sm:flex-row items-center justify-between gap-2.5">
|
|
<div className="flex items-center gap-2 w-full sm:w-auto">
|
|
<button
|
|
onClick={handleNavigateLanding}
|
|
type="button"
|
|
className="flex-1 sm:flex-none inline-flex items-center justify-center gap-1.5 px-3 py-2 text-xs font-medium text-slate-400 hover:text-white bg-slate-900 hover:bg-slate-800 border border-slate-800 rounded-xl transition cursor-pointer"
|
|
>
|
|
<ArrowLeft className="w-3.5 h-3.5" />
|
|
<span>Landing Page</span>
|
|
</button>
|
|
|
|
<button
|
|
onClick={handleSignOut}
|
|
type="button"
|
|
className="flex-1 sm:flex-none inline-flex items-center justify-center gap-1.5 px-3 py-2 text-xs font-medium text-slate-400 hover:text-rose-400 bg-slate-900 hover:bg-rose-500/10 border border-slate-800 hover:border-rose-500/20 rounded-xl transition cursor-pointer"
|
|
>
|
|
<LogOut className="w-3.5 h-3.5" />
|
|
<span>Sign Out</span>
|
|
</button>
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleSyncClick}
|
|
disabled={isSyncing}
|
|
type="button"
|
|
id="activation-sync-btn"
|
|
className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-4 py-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-500 active:bg-blue-700 disabled:opacity-50 rounded-xl shadow-md transition cursor-pointer"
|
|
>
|
|
<RefreshCw className={`w-3.5 h-3.5 ${isSyncing ? 'animate-spin' : ''}`} />
|
|
<span>{isSyncing ? 'Checking...' : 'Sync Account'}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
return typeof document !== 'undefined'
|
|
? createPortal(modalContent, document.body)
|
|
: modalContent;
|
|
};
|