Implemented session and account lockout management

Enabled account sync control and session expiration management Applied some fixes to the govername page and project page
2026-09-18 10:19:24 +02:00
parent 41bf9b63bf
commit ec777fabf8
24 changed files with 3888 additions and 500 deletions
@@ -0,0 +1,269 @@
+import React, { useState, useEffect } from 'react';
+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);
+
+  // Activation process dismisses all other modals so that it is displayed without overlapping.
+  // By extension, any active session expiration modal is dismissed and its processes cancelled.
+  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: any) {
+      if (err?.response?.status === 401) {
+        await onLogout();
+        navigate('/', { replace: true });
+        return;
+      }
+      setErrorMessage(
+        err?.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('/');
+  };
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="activation-modal-title"
+      className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-[#060a12]/90 backdrop-blur-md animate-in fade-in duration-200 select-none"
+    >
+      {/* Non-dismissable Card Container: No X button, no escape dismiss, no backdrop click */}
+      <div
+        className="relative w-full max-w-xl bg-[#0d1322] border border-amber-500/30 rounded-2xl shadow-2xl shadow-black/80 overflow-hidden flex flex-col text-slate-100"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Amber accent top bar */}
+        <div className="h-1.5 w-full bg-gradient-to-r from-amber-500 via-amber-400 to-yellow-500" />
+
+        {/* Modal Header */}
+        <div className="p-6 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.5">
+              <div className="relative p-2.5 rounded-xl bg-amber-500/10 border border-amber-500/20 text-amber-400">
+                <ShieldAlert className="w-6 h-6" />
+                <span className="absolute -top-1 -right-1 flex h-2.5 w-2.5">
+                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
+                  <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-amber-500"></span>
+                </span>
+              </div>
+              <div>
+                <span className="inline-flex items-center gap-1.5 text-[11px] font-semibold tracking-wider uppercase text-amber-400 bg-amber-500/10 border border-amber-500/20 px-2 py-0.5 rounded-full mb-1">
+                  Access Restricted • Awaiting Enablement
+                </span>
+                <h2 id="activation-modal-title" className="text-lg sm:text-xl font-bold text-white tracking-tight">
+                  Account Pending Administrator Activation
+                </h2>
+              </div>
+            </div>
+
+            <BrandLogo size={36} showGlow={false} animateOnHover={false} />
+          </div>
+        </div>
+
+        {/* Modal Body */}
+        <div className="p-6 space-y-5 overflow-y-auto max-h-[70vh]">
+          {/* Status notification block */}
+          <div className="bg-slate-900/80 border border-slate-800 rounded-xl p-4 space-y-2.5">
+            <div className="flex items-center gap-2 text-emerald-400 text-xs font-semibold">
+              <CheckCircle2 className="w-4 h-4 shrink-0" />
+              <span>Identity Verified & Signed In Successfully</span>
+            </div>
+            <p className="text-xs text-slate-300 leading-relaxed">
+              You are a registered user and have successfully authenticated via Enterprise Single Sign-On.
+              However, your account has not yet been enabled in the system directory by a system administrator.
+            </p>
+            <p className="text-xs text-slate-400 leading-relaxed border-t border-slate-800/80 pt-2 font-medium">
+              If your administrator informs you that your account has been activated, please click the{' '}
+              <strong className="text-white">Sync Account</strong> button below to refresh your status and unlock the system.
+            </p>
+          </div>
+
+          {/* User Profile Card */}
+          <div className="rounded-xl border border-slate-800 bg-[#090e1a]/60 p-4 space-y-3">
+            <div className="text-[11px] font-semibold text-slate-400 uppercase tracking-wider flex items-center justify-between">
+              <span>Authenticated User Profile</span>
+              <span className="text-amber-400/90 text-[10px] font-mono bg-amber-500/10 px-2 py-0.5 rounded border border-amber-500/20">
+                Lockout Active
+              </span>
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs">
+              <div className="flex items-center gap-2.5 bg-slate-900/60 p-2.5 rounded-lg border border-slate-800/60">
+                <UserCheck className="w-4 h-4 text-blue-400 shrink-0" />
+                <div className="min-w-0">
+                  <span className="text-[10px] text-slate-500 block">Name</span>
+                  <span className="font-semibold text-white truncate block">{displayName}</span>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-2.5 bg-slate-900/60 p-2.5 rounded-lg border border-slate-800/60">
+                <Mail className="w-4 h-4 text-blue-400 shrink-0" />
+                <div className="min-w-0">
+                  <span className="text-[10px] text-slate-500 block">Email</span>
+                  <span className="font-semibold text-slate-200 truncate block">{displayEmail || 'Not specified'}</span>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-2.5 bg-slate-900/60 p-2.5 rounded-lg border border-slate-800/60">
+                <Building2 className="w-4 h-4 text-indigo-400 shrink-0" />
+                <div className="min-w-0">
+                  <span className="text-[10px] text-slate-500 block">Tenant / Role</span>
+                  <span className="font-semibold text-slate-200 truncate block">
+                    {tenant} ({role})
+                  </span>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-2.5 bg-slate-900/60 p-2.5 rounded-lg border border-slate-800/60">
+                <Fingerprint className="w-4 h-4 text-slate-400 shrink-0" />
+                <div className="min-w-0">
+                  <span className="text-[10px] text-slate-500 block">Subject ID</span>
+                  <span className="font-mono text-[11px] text-slate-400 truncate block">{sub || 'SSO-Principal'}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Sync Attempt Feedback / Error Notice */}
+          {errorMessage && (
+            <div className="rounded-xl border border-rose-500/30 bg-rose-500/10 p-3.5 flex items-start gap-3 animate-in fade-in duration-150">
+              <AlertTriangle className="w-4 h-4 text-rose-400 shrink-0 mt-0.5" />
+              <div className="space-y-1">
+                <p className="text-xs font-semibold text-rose-300">Account Not Activated Yet</p>
+                <p className="text-xs text-rose-200/90 leading-relaxed">{errorMessage}</p>
+                {syncAttemptCount > 0 && (
+                  <p className="text-[11px] text-rose-400/80 pt-1">
+                    Attempt #{syncAttemptCount} checked at {new Date().toLocaleTimeString()}
+                  </p>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Modal Actions */}
+        <div className="p-5 border-t border-slate-800/80 bg-[#0a0f1d] flex flex-col sm:flex-row items-center justify-between gap-3">
+          <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.5 py-2 text-xs font-medium text-slate-400 hover:text-slate-200 bg-slate-900 hover:bg-slate-800 border border-slate-800 rounded-xl transition cursor-pointer"
+              title="View public landing page. Entering the console again will display this modal until enabled."
+            >
+              <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.5 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/30 rounded-xl transition cursor-pointer"
+              title="Sign out of current SSO session"
+            >
+              <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-5 py-2.5 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-500 active:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none rounded-xl shadow-lg shadow-blue-600/30 transition cursor-pointer"
+          >
+            <RefreshCw className={`w-4 h-4 ${isSyncing ? 'animate-spin' : ''}`} />
+            <span>{isSyncing ? 'Verifying Activation...' : 'Sync Account'}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,186 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { ShieldAlert, Clock, ArrowRight, X, AlertTriangle, LogOut } from 'lucide-react';
+import { clearSessionAndRedirectToLanding, dismissSubordinateModals } from '../../services/sessionExpiration';
+
+interface SessionExpiredModalProps {
+  isOpen: boolean;
+  onDismiss?: () => void;
+  reason?: string | null;
+  /** Total countdown time in seconds (defaults to 8 seconds) */
+  countdownSeconds?: number;
+}
+
+export const SessionExpiredModal: React.FC<SessionExpiredModalProps> = ({
+  isOpen,
+  onDismiss,
+  reason,
+  countdownSeconds = 8,
+}) => {
+  const [timeLeftMs, setTimeLeftMs] = useState(countdownSeconds * 1000);
+  const [isPaused, setIsPaused] = useState(false);
+  const totalDurationMs = countdownSeconds * 1000;
+  const isClearingRef = useRef(false);
+
+  // When session expiration modal is displayed, dismiss all subordinate modals
+  useEffect(() => {
+    if (isOpen) {
+      dismissSubordinateModals();
+    }
+  }, [isOpen]);
+
+  // Listen for cancellation event (e.g., when activation lockout takes priority)
+  useEffect(() => {
+    const handleCancelled = () => {
+      setTimeLeftMs(countdownSeconds * 1000);
+      setIsPaused(false);
+      isClearingRef.current = false;
+    };
+    window.addEventListener('pfm:session-expired-cancelled', handleCancelled);
+    return () => {
+      window.removeEventListener('pfm:session-expired-cancelled', handleCancelled);
+    };
+  }, [countdownSeconds]);
+
+  // Reset or start countdown when modal opens
+  useEffect(() => {
+    if (!isOpen) {
+      setTimeLeftMs(countdownSeconds * 1000);
+      setIsPaused(false);
+      isClearingRef.current = false;
+      return;
+    }
+
+    const intervalMs = 50;
+    const interval = setInterval(() => {
+      setTimeLeftMs((prev) => {
+        if (isPaused) return prev;
+        const next = prev - intervalMs;
+        if (next <= 0) {
+          clearInterval(interval);
+          handleAction();
+          return 0;
+        }
+        return next;
+      });
+    }, intervalMs);
+
+    return () => clearInterval(interval);
+  }, [isOpen, isPaused, countdownSeconds]);
+
+  const handleAction = () => {
+    if (isClearingRef.current) return;
+    isClearingRef.current = true;
+
+    if (onDismiss) {
+      onDismiss();
+    } else {
+      clearSessionAndRedirectToLanding();
+    }
+  };
+
+  if (!isOpen) return null;
+
+  const secondsRemaining = Math.max(0, Math.ceil(timeLeftMs / 1000));
+  const progressPercent = Math.max(0, Math.min(100, (timeLeftMs / totalDurationMs) * 100));
+
+  return (
+    <div
+      id="session-expired-modal-backdrop"
+      className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/85 backdrop-blur-md p-4 animate-in fade-in duration-200"
+      onMouseEnter={() => setIsPaused(true)}
+      onMouseLeave={() => setIsPaused(false)}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="session-expired-title"
+    >
+      <div
+        id="session-expired-modal-content"
+        className="relative w-full max-w-md bg-[#0c121e] border border-amber-500/40 rounded-2xl shadow-2xl shadow-black/90 p-6 overflow-hidden text-slate-200 space-y-5"
+      >
+        {/* Subtle decorative top accent bar */}
+        <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-amber-500 via-orange-500 to-rose-500" />
+
+        {/* Top bar with close button */}
+        <div className="flex items-start justify-between pt-1">
+          <div className="flex items-center gap-3">
+            <div className="w-12 h-12 rounded-2xl bg-amber-500/10 border border-amber-500/30 flex items-center justify-center text-amber-400 shrink-0 shadow-lg shadow-amber-500/10">
+              <ShieldAlert className="w-6 h-6" />
+            </div>
+            <div>
+              <div className="flex items-center gap-2">
+                <h3 id="session-expired-title" className="text-base font-bold text-white tracking-tight">
+                  Session Expired
+                </h3>
+                <span className="text-[10px] font-mono font-semibold px-2 py-0.5 rounded bg-rose-950/60 text-rose-300 border border-rose-800/60">
+                  HTTP 401
+                </span>
+              </div>
+              <p className="text-xs text-slate-400 mt-0.5">Authorization token invalidated</p>
+            </div>
+          </div>
+
+          <button
+            id="session-expired-close-btn"
+            type="button"
+            onClick={handleAction}
+            aria-label="Dismiss and return to landing page"
+            className="p-1.5 text-slate-400 hover:text-white rounded-lg hover:bg-slate-800/80 transition-colors"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+
+        {/* Informative Explanation (non-technical and clear) */}
+        <div className="space-y-2.5 text-xs text-slate-300 leading-relaxed bg-slate-900/60 p-4 rounded-xl border border-slate-800/80">
+          <p>
+            Your active working session has ended or your security credentials have expired. To protect your data and prevent unauthorized changes, your session has been closed.
+          </p>
+          {reason && (
+            <div className="flex items-start gap-2 pt-1 text-[11px] text-amber-300/90 font-mono">
+              <AlertTriangle className="w-3.5 h-3.5 shrink-0 mt-0.5 text-amber-400" />
+              <span className="break-words">{reason}</span>
+            </div>
+          )}
+        </div>
+
+        {/* Progress Bar Countdown */}
+        <div className="space-y-2">
+          <div className="flex items-center justify-between text-xs">
+            <span className="text-slate-400 flex items-center gap-1.5">
+              <Clock className="w-3.5 h-3.5 text-amber-400" />
+              Returning to landing page in{' '}
+              <strong className="text-white font-mono">{secondsRemaining}s</strong>
+            </span>
+            {isPaused && (
+              <span className="text-[10px] text-amber-400/80 font-medium px-1.5 py-0.2 rounded bg-amber-950/40 border border-amber-900/60">
+                Paused on hover
+              </span>
+            )}
+          </div>
+
+          {/* Progress bar line */}
+          <div className="w-full h-2 bg-slate-800/90 rounded-full overflow-hidden border border-slate-700/60 p-0.5">
+            <div
+              className="h-full rounded-full bg-gradient-to-r from-amber-500 via-orange-500 to-rose-500 transition-all duration-75 ease-linear"
+              style={{ width: `${progressPercent}%` }}
+            />
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="pt-2 flex flex-col sm:flex-row items-center gap-2.5">
+          <button
+            id="session-expired-return-btn"
+            type="button"
+            onClick={handleAction}
+            className="w-full py-2.5 px-4 text-xs font-semibold text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 rounded-xl shadow-lg shadow-blue-500/20 transition-all flex items-center justify-center gap-2"
+          >
+            <LogOut className="w-4 h-4" />
+            <span>Return to Landing Page Now</span>
+            <ArrowRight className="w-3.5 h-3.5 ml-0.5" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};