Add popup opener

Author: langleyd

src/CryptoSetup/EncryptionFlowViewModel.ts

@@ -29,6 +29,25 @@ export type EncryptionFlowResult =
     | { type: "success" }
     | { type: "cancelled" };
 
+/**
+ * Handle to an opened popup window.
+ * Abstraction to keep UI code out of the ViewModel.
+ */
+export interface PopupHandle {
+    /** Check if the popup is closed */
+    readonly closed: boolean;
+    /** Close the popup */
+    close(): void;
+}
+
+/**
+ * Props for EncryptionFlowViewModel
+ */
+/**
+ * Type for the popup opener callback
+ */
+export type PopupOpener = (url: string, name: string) => PopupHandle | null;
+
 /**
  * Props for EncryptionFlowViewModel
  */
@@ -77,6 +96,14 @@ export class EncryptionFlowViewModel
 {
     private encryption: EncryptionInterface;
     private cancelled = false;
+    private popupOpener: PopupOpener | null = null;
+
+    /**
+     * Set the popup opener callback. Should be called by the View.
+     */
+    public setPopupOpener(opener: PopupOpener): void {
+        this.popupOpener = opener;
+    }
 
     public constructor(props: EncryptionFlowViewModelProps) {
         super(props, {
@@ -351,17 +378,8 @@ export class EncryptionFlowViewModel
                 screenType: oidcWarningVm.screenType,
             });
 
-            // Open OIDC popup
-            const width = 600;
-            const height = 900;
-            const left = window.screenX + (window.outerWidth - width) / 2;
-            const top = window.screenY + (window.outerHeight - height) / 2;
-
-            const popup = window.open(
-                approvalUrl,
-                "oidc-reset-approval",
-                `width=${width},height=${height},left=${left},top=${top},scrollbars=yes`,
-            );
+            // Open OIDC popup via callback from View
+            const popup = this.popupOpener?.(approvalUrl, "oidc-reset-approval") ?? null;
 
             if (!popup) {
                 console.error("Failed to open OIDC popup");

src/CryptoSetup/index.ts

@@ -95,6 +95,8 @@ export type {
     EncryptionFlowViewActions,
     EncryptionFlowResult,
     EncryptionFlowViewModelProps,
+    PopupHandle,
+    PopupOpener,
 } from "./EncryptionFlowViewModel";
 
 export { FlowStepViewModel } from "./FlowStepViewModel";

src/Encryption.tsx

@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import { useViewModel } from "@element-hq/web-shared-components";
 import { InlineSpinner, Glass, TooltipProvider } from "@vector-im/compound-web";
@@ -20,6 +20,21 @@ export interface EncryptionProps {
     encryptionFlowViewModel: EncryptionFlowViewModel;
 }
 
+/**
+ * Opens a centered popup window.
+ */
+function openPopup(url: string, name: string): Window | null {
+    const width = 600;
+    const height = 900;
+    const left = window.screenX + (window.outerWidth - width) / 2;
+    const top = window.screenY + (window.outerHeight - height) / 2;
+    return window.open(
+        url,
+        name,
+        `width=${width},height=${height},left=${left},top=${top},scrollbars=yes`,
+    );
+}
+
 /**
  * Encryption page component.
  *
@@ -33,6 +48,12 @@ export const Encryption: React.FC<EncryptionProps> = ({
     const flowStartedRef = useRef(false);
     const { isLoading, isActive, currentScreen, screenType } = useViewModel(encryptionFlowViewModel);
 
+    // Provide the popup opener to the ViewModel (View -> ViewModel callback)
+    const popupOpener = useCallback(openPopup, []);
+    useEffect(() => {
+        encryptionFlowViewModel.setPopupOpener(popupOpener);
+    }, [encryptionFlowViewModel, popupOpener]);
+
     console.log("[Encryption] Render:", { isLoading, isActive, hasCurrentScreen: !!currentScreen, screenType });
 
     useEffect(() => {