Desktop Modal Experiment

.github/CODEOWNERS

@@ -102,6 +102,7 @@ apps/browser/src/autofill @bitwarden/team-autofill-dev
 apps/desktop/src/autofill @bitwarden/team-autofill-dev
 libs/common/src/autofill @bitwarden/team-autofill-dev
 apps/desktop/macos/autofill-extension @bitwarden/team-autofill-dev
+apps/desktop/src/app/components/fido2placeholder.component.ts @bitwarden/team-autofill-dev
 # DuckDuckGo integration
 apps/desktop/native-messaging-test-runner @bitwarden/team-autofill-dev
 apps/desktop/src/services/duckduckgo-message-handler.service.ts @bitwarden/team-autofill-dev

apps/desktop/src/app/app-routing.module.ts

@@ -64,6 +64,7 @@
 import { UpdateTempPasswordComponent } from "../auth/update-temp-password.component";
 import { VaultComponent } from "../vault/app/vault/vault.component";
 
+import { Fido2PlaceholderComponent } from "./components/fido2placeholder.component";
 import { SendComponent } from "./tools/send/send.component";
 
 /**
@@ -331,6 +332,10 @@
       children: [{ path: "", component: LoginDecryptionOptionsComponent }],
     },
   ),
+  {
+    path: "passkeys",
+    component: Fido2PlaceholderComponent,
+  },
   {
     path: "",
     component: AnonLayoutWrapperComponent,

apps/desktop/src/app/components/fido2placeholder.component.ts

@@ -0,0 +1,28 @@
+import { Component } from "@angular/core";
+import { Router } from "@angular/router";
+
+import { DesktopSettingsService } from "../../platform/services/desktop-settings.service";
+
+@Component({
+  standalone: true,
+  template: `
+    <div
+      style="background:white; display:flex; justify-content: center; align-items: center; flex-direction: column"
+    >
+      <h1>Select your passkey</h1>
+      <br />
+      <button bitButton type="button" buttonType="secondary" (click)="closeModal()">Close</button>
+    </div>
+  `,
+})
+export class Fido2PlaceholderComponent {
+  constructor(
+    private readonly desktopSettingsService: DesktopSettingsService,
+    private readonly router: Router,
+  ) {}
+
+  async closeModal() {
+    await this.router.navigate(["/"]);
+    await this.desktopSettingsService.setInModalMode(false);
+  }
+}

apps/desktop/src/app/services/init.service.ts

@@ -21,6 +21,7 @@
 import { KeyService as KeyServiceAbstraction } from "@bitwarden/key-management";
 
 import { DesktopAutofillService } from "../../autofill/services/desktop-autofill.service";
+import { DesktopSettingsService } from "../../platform/services/desktop-settings.service";
 import { I18nRendererService } from "../../platform/services/i18n.renderer.service";
 import { SshAgentService } from "../../platform/services/ssh-agent.service";
 import { VersionService } from "../../platform/services/version.service";
@@ -47,6 +48,7 @@
     private versionService: VersionService,
     private sshAgentService: SshAgentService,
     private autofillService: DesktopAutofillService,
+    private desktopSettingsService: DesktopSettingsService,
     @Inject(DOCUMENT) private document: Document,
   ) {}
 
@@ -79,6 +81,7 @@
       const htmlEl = this.win.document.documentElement;
       htmlEl.classList.add("os_" + this.platformUtilsService.getDeviceString());
       this.themingService.applyThemeChangesTo(this.document);
+      await this.desktopSettingsService.resetInModalMode();
 
       this.versionService.init();
 

apps/desktop/src/main/tray.main.ts

@@ -1,13 +1,15 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import * as path from "path";
+import * as url from "url";
 
 import { app, BrowserWindow, Menu, MenuItemConstructorOptions, nativeImage, Tray } from "electron";
 import { firstValueFrom } from "rxjs";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
 import { DesktopSettingsService } from "../platform/services/desktop-settings.service";
+import { cleanUserAgent, isDev } from "../utils";
 
 import { WindowMain } from "./window.main";
 
@@ -46,6 +48,11 @@
         label: this.i18nService.t("showHide"),
         click: () => this.toggleWindow(),
       },
+      {
+        visible: isDev(),
+        label: "Fake Popup",
+        click: () => this.fakePopup(),
+      },
       { type: "separator" },
       {
         label: this.i18nService.t("exit"),
@@ -183,7 +190,7 @@
         this.hideDock();
       }
     } else {
-      this.windowMain.win.show();
+      this.windowMain.show();
       if (this.isDarwin()) {
         this.showDock();
       }
@@ -196,4 +203,38 @@
       this.windowMain.win.close();
     }
   }
+
+  /**
+   * This method is used to test modal behavior during development and could be removed in the future.
+   * @returns
+   */
+  private async fakePopup() {
+    if (this.windowMain.win == null || this.windowMain.win.isDestroyed()) {
+      await this.windowMain.createWindow("modal-app");
+      return;
+    }
+
+    // Restyle existing
+    const existingWin = this.windowMain.win;
+
+    await this.desktopSettingsService.setInModalMode(true);
+    await existingWin.loadURL(
+      url.format({
+        protocol: "file:",
+        //pathname: `${__dirname}/index.html`,
+        pathname: path.join(__dirname, "/index.html"),
+        slashes: true,
+        hash: "/passkeys",
+        query: {
+          redirectUrl: "/passkeys",
+        },
+      }),
+      {
+        userAgent: cleanUserAgent(existingWin.webContents.userAgent),
+      },
+    );
+    existingWin.once("ready-to-show", () => {
+      existingWin.show();
+    });
+  }
 }

apps/desktop/src/main/window.main.ts

@@ -5,14 +5,15 @@
 import * as url from "url";
 
 import { app, BrowserWindow, ipcMain, nativeTheme, screen, session } from "electron";
-import { firstValueFrom } from "rxjs";
+import { concatMap, firstValueFrom, pairwise } from "rxjs";
 
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { AbstractStorageService } from "@bitwarden/common/platform/abstractions/storage.service";
 import { processisolations } from "@bitwarden/desktop-napi";
 import { BiometricStateService } from "@bitwarden/key-management";
 
 import { WindowState } from "../platform/models/domain/window-state";
+import { applyMainWindowStyles, applyPopupModalStyles } from "../platform/popup-modal-styles";
 import { DesktopSettingsService } from "../platform/services/desktop-settings.service";
 import { cleanUserAgent, isDev, isLinux, isMac, isMacAppStore, isWindows } from "../utils";
 
@@ -76,6 +77,24 @@
       }
     });
 
+    this.desktopSettingsService.inModalMode$
+      .pipe(
+        pairwise(),
+        concatMap(async ([lastValue, newValue]) => {
+          if (lastValue && !newValue) {
+            // Reset the window state to the main window state
+            applyMainWindowStyles(this.win, this.windowStates[mainWindowSizeKey]);
+            // Because modal is used in front of another app, UX wise it makes sense to hide the main window when leaving modal mode.
+            this.win.hide();
+          } else if (!lastValue && newValue) {
+            // Apply the popup modal styles
+            applyPopupModalStyles(this.win);
+            this.win.show();
+          }
+        }),
+      )
+      .subscribe();
+
     return new Promise<void>((resolve, reject) => {
       try {
         if (!isMacAppStore()) {
@@ -175,7 +194,15 @@
     });
   }
 
-  async createWindow(): Promise<void> {
+  /// Show the window with main window styles
+  show() {
+    if (this.win != null) {
+      applyMainWindowStyles(this.win, this.windowStates[mainWindowSizeKey]);
+      this.win.show();
+    }
+  }
+
+  async createWindow(template: "full-app" | "modal-app" = "full-app"): Promise<void> {
     this.windowStates[mainWindowSizeKey] = await this.getWindowState(
       this.defaultWidth,
       this.defaultHeight,
@@ -209,6 +236,12 @@
       },
     });
 
+    if (template === "modal-app") {
+      applyPopupModalStyles(this.win);
+    } else {
+      applyMainWindowStyles(this.win, this.windowStates[mainWindowSizeKey]);
+    }
+
     this.win.webContents.on("dom-ready", () => {
       this.win.webContents.zoomFactor = this.windowStates[mainWindowSizeKey].zoomFactor ?? 1.0;
     });
@@ -218,21 +251,41 @@
     }
 
     // Show it later since it might need to be maximized.
-    this.win.show();
-
-    // and load the index.html of the app.
-    // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    this.win.loadURL(
-      url.format({
-        protocol: "file:",
-        pathname: path.join(__dirname, "/index.html"),
-        slashes: true,
-      }),
-      {
-        userAgent: cleanUserAgent(this.win.webContents.userAgent),
-      },
-    );
+    // use once event to avoid flash on unstyled content.
+    this.win.once("ready-to-show", () => {
+      this.win.show();
+    });
+
+    if (template === "full-app") {
+      // and load the index.html of the app.
+      // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
+      void this.win.loadURL(
+        url.format({
+          protocol: "file:",
+          pathname: path.join(__dirname, "/index.html"),
+          slashes: true,
+        }),
+        {
+          userAgent: cleanUserAgent(this.win.webContents.userAgent),
+        },
+      );
+    } else {
+      // we're in modal mode - load the passkeys page
+      await this.win.loadURL(
+        url.format({
+          protocol: "file:",
+          pathname: path.join(__dirname, "/index.html"),
+          slashes: true,
+          hash: "/passkeys",
+          query: {
+            redirectUrl: "/passkeys",
+          },
+        }),
+        {
+          userAgent: cleanUserAgent(this.win.webContents.userAgent),
+        },
+      );
+    }
 
     // Open the DevTools.
     if (isDev()) {
@@ -319,6 +372,12 @@
       return;
     }
 
+    const inModalMode = await firstValueFrom(this.desktopSettingsService.inModalMode$);
+
+    if (inModalMode) {
+      return;
+    }
+
     try {
       const bounds = win.getBounds();
 
@@ -329,9 +388,14 @@
         }
       }
 
-      this.windowStates[configKey].isMaximized = win.isMaximized();
+      // We treat fullscreen as maximized (would be even better to store isFullscreen as its own flag).
+      this.windowStates[configKey].isMaximized = win.isMaximized() || win.isFullScreen();
       this.windowStates[configKey].displayBounds = screen.getDisplayMatching(bounds).bounds;
 
+      // Maybe store these as well?
+      // win.isFocused();
+      // win.isVisible();
+
       if (!win.isMaximized() && !win.isMinimized() && !win.isFullScreen()) {
         this.windowStates[configKey].x = bounds.x;
         this.windowStates[configKey].y = bounds.y;

apps/desktop/src/platform/popup-modal-styles.ts

@@ -0,0 +1,52 @@
+import { BrowserWindow } from "electron";
+
+import { WindowState } from "./models/domain/window-state";
+
+// change as needed, however limited by mainwindow minimum size
+const popupWidth = 680;
+const popupHeight = 500;
+
+export function applyPopupModalStyles(window: BrowserWindow) {
+  window.unmaximize();
+  window.setSize(popupWidth, popupHeight);
+  window.center();
+  window.setWindowButtonVisibility?.(false);
+  window.setMenuBarVisibility?.(false);
+  window.setResizable(false);
+  window.setAlwaysOnTop(true);
+
+  // Adjusting from full screen is a bit more hassle
+  if (window.isFullScreen()) {
+    window.setFullScreen(false);
+    window.once("leave-full-screen", () => {
+      window.setSize(popupWidth, popupHeight);
+      window.center();
+    });
+  }
+}
+
+export function applyMainWindowStyles(window: BrowserWindow, existingWindowState: WindowState) {
+  window.setMinimumSize(680, 500);
+
+  // need to guard against null/undefined values
+
+  if (existingWindowState?.width && existingWindowState?.height) {
+    window.setSize(existingWindowState.width, existingWindowState.height);
+  }
+
+  if (existingWindowState?.x && existingWindowState?.y) {
+    window.setPosition(existingWindowState.x, existingWindowState.y);
+  }
+
+  window.setWindowButtonVisibility?.(true);
+  window.setMenuBarVisibility?.(true);
+  window.setResizable(true);
+  window.setAlwaysOnTop(false);
+
+  // We're currently not recovering the maximized state, mostly due to conflicts with hiding the window.
+  // window.setFullScreen(existingWindowState.isMaximized);
+
+  // if (existingWindowState.isMaximized) {
+  //   window.maximize();
+  // }
+}