From f6b58d812dd42be283c12b6ac60ffa824caa2f31 Mon Sep 17 00:00:00 2001
From: Andreas Coroiu <andreas.coroiu@gmail.com>
Date: Fri, 16 Dec 2022 09:26:57 +0100
Subject: [PATCH] [EC-598] feat: center popup

---
 .../src/popup/services/popup-utils.service.ts        | 12 +++++++++---
 .../fido2/browser-fido2-user-interface.service.ts    |  6 +++++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/apps/browser/src/popup/services/popup-utils.service.ts b/apps/browser/src/popup/services/popup-utils.service.ts
index d46a337cbef..85caff0f3d3 100644
--- a/apps/browser/src/popup/services/popup-utils.service.ts
+++ b/apps/browser/src/popup/services/popup-utils.service.ts
@@ -42,7 +42,7 @@ export class PopupUtilsService {
     }
   }
 
-  popOut(win: Window, href: string = null): void {
+  popOut(win: Window, href: string = null, options: { center?: boolean } = {}): void {
     if (href === null) {
       href = win.location.href;
     }
@@ -60,11 +60,17 @@ export class PopupUtilsService {
       }
 
       const bodyRect = document.querySelector("body").getBoundingClientRect();
+      const width = Math.round(bodyRect.width ? bodyRect.width + 60 : 375);
+      const height = Math.round(bodyRect.height || 600);
+      const top = options.center ? Math.round((screen.height - height) / 2) : undefined;
+      const left = options.center ? Math.round((screen.width - width) / 2) : undefined;
       chrome.windows.create({
         url: href,
         type: "popup",
-        width: Math.round(bodyRect.width ? bodyRect.width + 60 : 375),
-        height: Math.round(bodyRect.height || 600),
+        width,
+        height,
+        top,
+        left,
       });
 
       if (win && this.inPopup(win)) {
diff --git a/apps/browser/src/services/fido2/browser-fido2-user-interface.service.ts b/apps/browser/src/services/fido2/browser-fido2-user-interface.service.ts
index 3088063f0f0..057a0e28e7b 100644
--- a/apps/browser/src/services/fido2/browser-fido2-user-interface.service.ts
+++ b/apps/browser/src/services/fido2/browser-fido2-user-interface.service.ts
@@ -44,7 +44,11 @@ export class BrowserFido2UserInterfaceService implements Fido2UserInterfaceServi
     const requestId = Utils.newGuid();
     const data: BrowserFido2Message = { type: "VerifyUserRequest", requestId };
     const queryParams = new URLSearchParams(data).toString();
-    this.popupUtilsService.popOut(null, `popup/index.html?uilocation=popout#/fido2?${queryParams}`);
+    this.popupUtilsService.popOut(
+      null,
+      `popup/index.html?uilocation=popout#/fido2?${queryParams}`,
+      { center: true }
+    );
 
     const response = await lastValueFrom(
       this.messages$.pipe(