PM-4382 minor cleanup around the passkey popup (#6629)

apps/browser/src/platform/browser/browser-api.ts

@@ -235,6 +235,27 @@ export class BrowserApi {
     }
   }
 
+  static messageListener$() {
+    return new Observable<unknown>((subscriber) => {
+      const handler = (message: unknown) => {
+        subscriber.next(message);
+      };
+
+      BrowserApi.messageListener("message", handler);
+
+      return () => {
+        chrome.runtime.onMessage.removeListener(handler);
+
+        if (BrowserApi.isSafariApi) {
+          const index = BrowserApi.registeredMessageListeners.indexOf(handler);
+          if (index !== -1) {
+            BrowserApi.registeredMessageListeners.splice(index, 1);
+          }
+        }
+      };
+    });
+  }
+
   static storageChangeListener(
     callback: Parameters<typeof chrome.storage.onChanged.addListener>[0]
   ) {
@@ -262,27 +283,6 @@ export class BrowserApi {
     };
   }
 
-  static messageListener$() {
-    return new Observable<unknown>((subscriber) => {
-      const handler = (message: unknown) => {
-        subscriber.next(message);
-      };
-
-      BrowserApi.messageListener("message", handler);
-
-      return () => {
-        chrome.runtime.onMessage.removeListener(handler);
-
-        if (BrowserApi.isSafariApi) {
-          const index = BrowserApi.registeredMessageListeners.indexOf(handler);
-          if (index !== -1) {
-            BrowserApi.registeredMessageListeners.splice(index, 1);
-          }
-        }
-      };
-    });
-  }
-
   static sendMessage(subscriber: string, arg: any = {}) {
     const message = Object.assign({}, { command: subscriber }, arg);
     return chrome.runtime.sendMessage(message);

apps/browser/src/vault/popup/components/fido2/fido2-cipher-row.component.ts

@@ -14,7 +14,7 @@ export class Fido2CipherRowComponent {
   @Input() isSearching: boolean;
   @Input() isSelected: boolean;
 
-  selectCipher(c: CipherView) {
+  protected selectCipher(c: CipherView) {
     this.onSelected.emit(c);
   }
 }

apps/browser/src/vault/popup/components/fido2/fido2-use-browser-link.component.ts

@@ -11,9 +11,9 @@ import {
   templateUrl: "fido2-use-browser-link.component.html",
 })
 export class Fido2UseBrowserLinkComponent {
-  fido2PopoutSessionData$ = fido2PopoutSessionData$();
+  protected fido2PopoutSessionData$ = fido2PopoutSessionData$();
 
-  async abort() {
+  protected async abort() {
     const sessionData = await firstValueFrom(this.fido2PopoutSessionData$);
     BrowserFido2UserInterfaceSession.abortPopout(sessionData.sessionId, true);
     return;

apps/browser/src/vault/popup/components/fido2/fido2.component.html

@@ -7,13 +7,13 @@
             <i class="bwi bwi-shield"></i>
           </div>
         </ng-container>
-        <ng-container *ngIf="data.message.type == 'PickCredentialRequest'">
+        <ng-container *ngIf="data.message.type === 'PickCredentialRequest'">
           <div class="logo">
             <i class="bwi bwi-shield"></i><span><strong>bit</strong>warden</span>
           </div>
         </ng-container>
       </div>
-      <ng-container *ngIf="data.message.type == 'ConfirmNewCredentialRequest'">
+      <ng-container *ngIf="data.message.type === 'ConfirmNewCredentialRequest'">
         <div class="search">
           <input
             type="{{ searchTypeSearch ? 'search' : 'text' }}"
@@ -100,7 +100,7 @@
           </ng-container>
         </div>
       </ng-container>
-      <ng-container *ngIf="data.message.type == 'InformExcludedCredentialRequest'">
+      <ng-container *ngIf="data.message.type === 'InformExcludedCredentialRequest'">
         <div class="auth-flow">
           <p class="subtitle">{{ "passkeyAlreadyExists" | i18n }}</p>
           <div class="box list">
@@ -120,7 +120,7 @@
           </button>
         </div>
       </ng-container>
-      <ng-container *ngIf="data.message.type == 'InformCredentialNotFoundRequest'">
+      <ng-container *ngIf="data.message.type === 'InformCredentialNotFoundRequest'">
         <div class="auth-flow">
           <p class="subtitle">{{ "noPasskeysFoundForThisApplication" | i18n }}</p>
         </div>

apps/browser/src/vault/popup/components/fido2/fido2.component.ts

@@ -217,7 +217,7 @@ export class Fido2Component implements OnInit, OnDestroy {
     });
   }
 
-  async submit() {
+  protected async submit() {
     const data = this.message$.value;
     if (data?.type === "PickCredentialRequest") {
       const userVerified = await this.handleUserVerification(data.userVerification, this.cipher);
@@ -254,7 +254,7 @@ export class Fido2Component implements OnInit, OnDestroy {
     this.loading = true;
   }
 
-  async saveNewLogin() {
+  protected async saveNewLogin() {
     const data = this.message$.value;
     if (data?.type === "ConfirmNewCredentialRequest") {
       let userVerified = false;

apps/browser/src/vault/popup/components/vault/add-edit.component.ts

@@ -168,13 +168,12 @@ export class AddEditComponent extends BaseAddEditComponent {
   async submit(): Promise<boolean> {
     const fido2SessionData = await firstValueFrom(this.fido2PopoutSessionData$);
     // Would be refactored after rework is done on the windows popout service
+
+    const { isFido2Session, sessionId, userVerification } = fido2SessionData;
     if (
       this.inPopout &&
-      fido2SessionData.isFido2Session &&
-      !(await this.handleFido2UserVerification(
-        fido2SessionData.sessionId,
-        fido2SessionData.userVerification
-      ))
+      isFido2Session &&
+      !(await this.handleFido2UserVerification(sessionId, userVerification))
     ) {
       return false;
     }
@@ -184,11 +183,11 @@ export class AddEditComponent extends BaseAddEditComponent {
       return false;
     }
 
-    if (this.inPopout && fido2SessionData.isFido2Session) {
+    if (this.inPopout && isFido2Session) {
       BrowserFido2UserInterfaceSession.confirmNewCredentialResponse(
-        fido2SessionData.sessionId,
+        sessionId,
         this.cipher.id,
-        fido2SessionData.userVerification
+        userVerification
       );
       return true;
     }