[EC-598] chore: refactor observables a little bit

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

@@ -3,8 +3,8 @@
     <i class="bwi bwi-spinner bwi-lg bwi-spin" [hidden]="!loading" aria-hidden="true"></i>
     <ng-container
       *ngIf="
-        data.type == 'PickCredentialRequest' ||
+        data.message.type == 'PickCredentialRequest' ||
-        data.type == 'ConfirmNewNonDiscoverableCredentialRequest'
+        data.message.type == 'ConfirmNewNonDiscoverableCredentialRequest'
       "
     >
       A site is asking for authentication, please choose one of the following credentials to use:
@@ -18,7 +18,7 @@
         </div>
       </div>
     </ng-container>
-    <ng-container *ngIf="data.type == 'ConfirmNewCredentialRequest'">
+    <ng-container *ngIf="data.message.type == 'ConfirmNewCredentialRequest'">
       A site wants to create the following passkey in your vault
       <div class="box list">
         <div class="box-content">
@@ -27,7 +27,7 @@
       </div>
       <button type="button" class="btn btn-outline-secondary" (click)="confirm()">Create</button>
     </ng-container>
-    <ng-container *ngIf="data.type == 'InformExcludedCredentialRequest'">
+    <ng-container *ngIf="data.message.type == 'InformExcludedCredentialRequest'">
       A passkey already exists in Bitwarden for this account
       <div class="box list">
         <div class="box-content">
@@ -35,7 +35,7 @@
         </div>
       </div>
     </ng-container>
-    <ng-container *ngIf="data.type == 'InformCredentialNotFoundRequest'">
+    <ng-container *ngIf="data.message.type == 'InformCredentialNotFoundRequest'">
       You do not have a matching login for this site.
       <div class="box list">
         <div class="box-content">

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

@@ -4,6 +4,7 @@ import {
   BehaviorSubject,
   combineLatest,
   concatMap,
+  filter,
   map,
   Observable,
   Subject,
@@ -23,6 +24,10 @@ import {
   BrowserFido2UserInterfaceSession,
 } from "../../../services/fido2/browser-fido2-user-interface.service";
 
+interface ViewData {
+  message: BrowserFido2Message;
+}
+
 @Component({
   selector: "app-fido2",
   templateUrl: "fido2.component.html",
@@ -31,11 +36,13 @@ import {
 export class Fido2Component implements OnInit, OnDestroy {
   private destroy$ = new Subject<void>();
 
-  protected data$ = new BehaviorSubject<BrowserFido2Message>(null);
+  protected data$: Observable<ViewData>;
   protected sessionId?: string;
   protected ciphers?: CipherView[] = [];
   protected loading = false;
 
+  private message$ = new BehaviorSubject<BrowserFido2Message>(null);
+
   constructor(
     private activatedRoute: ActivatedRoute,
     private cipherService: CipherService,
@@ -64,44 +71,47 @@ export class Fido2Component implements OnInit, OnDestroy {
           return this.abort(false);
         }
 
-        this.data$.next(message);
+        this.message$.next(message);
       });
 
-    this.data$
+    this.data$ = this.message$.pipe(
-      .pipe(
+      filter((message) => message != undefined),
-        concatMap(async (data) => {
+      concatMap(async (message) => {
-          if (data?.type === "ConfirmNewCredentialRequest") {
+        if (message.type === "ConfirmNewCredentialRequest") {
           const cipher = new CipherView();
-            cipher.name = data.credentialName;
+          cipher.name = message.credentialName;
           cipher.type = CipherType.Fido2Key;
           cipher.fido2Key = new Fido2KeyView();
-            cipher.fido2Key.userName = data.userName;
+          cipher.fido2Key.userName = message.userName;
           this.ciphers = [cipher];
-          } else if (data?.type === "PickCredentialRequest") {
+        } else if (message.type === "PickCredentialRequest") {
           this.ciphers = await Promise.all(
-              data.cipherIds.map(async (cipherId) => {
+            message.cipherIds.map(async (cipherId) => {
               const cipher = await this.cipherService.get(cipherId);
               return cipher.decrypt();
             })
           );
-          } else if (data?.type === "ConfirmNewNonDiscoverableCredentialRequest") {
+        } else if (message.type === "ConfirmNewNonDiscoverableCredentialRequest") {
           this.ciphers = (await this.cipherService.getAllDecrypted()).filter(
             (cipher) => cipher.type === CipherType.Login && !cipher.isDeleted
           );
-          } else if (data?.type === "InformExcludedCredentialRequest") {
+        } else if (message.type === "InformExcludedCredentialRequest") {
           this.ciphers = await Promise.all(
-              data.existingCipherIds.map(async (cipherId) => {
+            message.existingCipherIds.map(async (cipherId) => {
               const cipher = await this.cipherService.get(cipherId);
               return cipher.decrypt();
             })
           );
-          } else if (data?.type === "CloseRequest") {
+        } else if (message.type === "CloseRequest") {
           window.close();
         }
+
+        return {
+          message,
+        };
       }),
       takeUntil(this.destroy$)
-      )
+    );
-      .subscribe();
 
     sessionId$.pipe(takeUntil(this.destroy$)).subscribe((sessionId) => {
       this.send({
@@ -112,7 +122,7 @@ export class Fido2Component implements OnInit, OnDestroy {
   }
 
   async pick(cipher: CipherView) {
-    const data = this.data$.value;
+    const data = this.message$.value;
     if (data?.type === "PickCredentialRequest") {
       let userVerified = false;
       if (data.userVerification) {
@@ -143,7 +153,7 @@ export class Fido2Component implements OnInit, OnDestroy {
   }
 
   async confirm() {
-    const data = this.data$.value;
+    const data = this.message$.value;
     if (data.type !== "ConfirmNewCredentialRequest") {
       return;
     }