Merge pull request #165 from Tria-plc/freight/feature/user_management

Freight/feature/user management

apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/UserManagementHostPage.tsx

@@ -0,0 +1,113 @@
+import { useEffect, useRef, useState } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { getCookie } from '@/auth/cookies';
+
+function readToken(): string | null {
+  return getCookie('auth-token') ?? null;
+}
+
+function readRefreshToken(): string | null {
+  return getCookie('refresh-token') ?? null;
+}
+
+export default function UserManagementHostPage() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  const mountBase = (
+    (import.meta.env.VITE_USER_MANAGEMENT_BASE as string | undefined) ?? '/_um'
+  ).replace(/\/$/, '');
+
+  const moduleOrigin = window.location.origin;
+
+  const [iframeSrc] = useState(() => {
+    const sub = location.pathname.replace(/^\/(?:dashboard\/)?um(?=\/|$)/, '');
+    return mountBase + (sub || '/') + location.search;
+  });
+
+  // ✅ Send token when iframe loads
+  const handleIframeLoad = () => {
+    const token = readToken();
+    const refreshToken = readRefreshToken();
+    const target = iframeRef.current?.contentWindow;
+
+    if (!token) {
+      console.warn('⚠️ No authentication token found');
+      return;
+    }
+
+    if (!target) {
+      console.warn('⚠️ No iframe reference');
+      return;
+    }
+
+    target.postMessage(
+      {
+        type: 'UM_AUTH_TOKEN',
+        token,
+        refreshToken,
+      },
+      moduleOrigin
+    );
+
+    console.log('✅ Token sent to iframe module');
+  };
+
+  // ✅ Listen for messages from iframe
+  useEffect(() => {
+    const onMessage = (event: MessageEvent) => {
+      // Security: Only accept from same origin
+      if (event.origin !== moduleOrigin) {
+        console.warn('🚫 Blocked message from different origin:', event.origin);
+        return;
+      }
+
+      const data = event.data as { type?: string; path?: string } | undefined;
+      if (!data) return;
+
+      // Handle auth request (if module asks for token again)
+      if (data.type === 'UM_REQUEST_AUTH') {
+        const token = readToken();
+        const refreshToken = readRefreshToken();
+        const target = iframeRef.current?.contentWindow;
+
+        if (token && target) {
+          target.postMessage(
+            {
+              type: 'UM_AUTH_TOKEN',
+              token,
+              refreshToken,
+            },
+            moduleOrigin
+          );
+          console.log('✅ Token resent to iframe (on request)');
+        }
+        return;
+      }
+
+      // Handle route synchronization
+      if (data.type === 'UM_ROUTE_CHANGED' && typeof data.path === 'string') {
+        const target = '/dashboard/um' + data.path;
+        if (window.location.pathname + window.location.search !== target) {
+          navigate(target, { replace: true });
+        }
+      }
+    };
+
+    window.addEventListener('message', onMessage);
+    return () => window.removeEventListener('message', onMessage);
+  }, [moduleOrigin, navigate]);
+
+  return (
+    <div style={{ position: 'fixed', inset: 0 }}>
+      <iframe
+        ref={iframeRef}
+        title="User Management"
+        src={iframeSrc}
+        onLoad={handleIframeLoad}
+        style={{ width: '100%', height: '100%', border: 0, display: 'block' }}
+      />
+    </div>
+  );
+}