PM-4945 Update Two Factor verify dialog (#8580)

* PM-4945 Update Two Factor verify dialog

* PM-4945 Addressed review comments

* PM-4945 Removed legacy User verification component and used new one

apps/web/src/app/admin-console/organizations/settings/two-factor-setup.component.ts

@@ -10,6 +10,7 @@ import { PolicyService } from "@bitwarden/common/admin-console/abstractions/poli
 import { TwoFactorProviderType } from "@bitwarden/common/auth/enums/two-factor-provider-type";
 import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
+import { DialogService } from "@bitwarden/components";
 
 import { TwoFactorDuoComponent } from "../../../auth/settings/two-factor-duo.component";
 import { TwoFactorSetupComponent as BaseTwoFactorSetupComponent } from "../../../auth/settings/two-factor-setup.component";
@@ -22,6 +23,7 @@ import { TwoFactorSetupComponent as BaseTwoFactorSetupComponent } from "../../..
 export class TwoFactorSetupComponent extends BaseTwoFactorSetupComponent {
   tabbedHeader = false;
   constructor(
+    dialogService: DialogService,
     apiService: ApiService,
     modalService: ModalService,
     messagingService: MessagingService,
@@ -31,6 +33,7 @@ export class TwoFactorSetupComponent extends BaseTwoFactorSetupComponent {
     billingAccountProfileStateService: BillingAccountProfileStateService,
   ) {
     super(
+      dialogService,
       apiService,
       modalService,
       messagingService,

apps/web/src/app/auth/settings/two-factor-authenticator.component.html

@@ -15,13 +15,6 @@
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
-      <app-two-factor-verify
-        [organizationId]="organizationId"
-        [type]="type"
-        (onAuthed)="auth($any($event))"
-        *ngIf="!authed"
-      >
-      </app-two-factor-verify>
       <form
         #form
         (ngSubmit)="submit()"

apps/web/src/app/auth/settings/two-factor-duo.component.html

@@ -15,13 +15,6 @@
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
-      <app-two-factor-verify
-        [organizationId]="organizationId"
-        [type]="type"
-        (onAuthed)="auth($any($event))"
-        *ngIf="!authed"
-      >
-      </app-two-factor-verify>
       <form
         #form
         (ngSubmit)="submit()"

apps/web/src/app/auth/settings/two-factor-email.component.html

@@ -15,13 +15,6 @@
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
-      <app-two-factor-verify
-        [organizationId]="organizationId"
-        [type]="type"
-        (onAuthed)="auth($any($event))"
-        *ngIf="!authed"
-      >
-      </app-two-factor-verify>
       <form
         #form
         (ngSubmit)="submit()"

apps/web/src/app/auth/settings/two-factor-recovery.component.html

@@ -15,8 +15,6 @@
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
-      <app-two-factor-verify [type]="type" (onAuthed)="auth($event)" *ngIf="!authed">
-      </app-two-factor-verify>
       <ng-container *ngIf="authed">
         <div class="modal-body text-center">
           <ng-container *ngIf="code">

apps/web/src/app/auth/settings/two-factor-setup.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit, Type, ViewChild, ViewContainerRef } from "@angular/core";
-import { firstValueFrom, Observable, Subject, takeUntil } from "rxjs";
+import { firstValueFrom, lastValueFrom, Observable, Subject, takeUntil } from "rxjs";
 
 import { ModalRef } from "@bitwarden/angular/components/modal/modal.ref";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
@@ -8,15 +8,23 @@ import { PolicyService } from "@bitwarden/common/admin-console/abstractions/poli
 import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { TwoFactorProviderType } from "@bitwarden/common/auth/enums/two-factor-provider-type";
+import { TwoFactorAuthenticatorResponse } from "@bitwarden/common/auth/models/response/two-factor-authenticator.response";
+import { TwoFactorDuoResponse } from "@bitwarden/common/auth/models/response/two-factor-duo.response";
+import { TwoFactorEmailResponse } from "@bitwarden/common/auth/models/response/two-factor-email.response";
+import { TwoFactorWebAuthnResponse } from "@bitwarden/common/auth/models/response/two-factor-web-authn.response";
+import { TwoFactorYubiKeyResponse } from "@bitwarden/common/auth/models/response/two-factor-yubi-key.response";
 import { TwoFactorProviders } from "@bitwarden/common/auth/services/two-factor.service";
+import { AuthResponse } from "@bitwarden/common/auth/types/auth-response";
 import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
 import { ProductType } from "@bitwarden/common/enums";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
+import { DialogService } from "@bitwarden/components";
 
 import { TwoFactorAuthenticatorComponent } from "./two-factor-authenticator.component";
 import { TwoFactorDuoComponent } from "./two-factor-duo.component";
 import { TwoFactorEmailComponent } from "./two-factor-email.component";
 import { TwoFactorRecoveryComponent } from "./two-factor-recovery.component";
+import { TwoFactorVerifyComponent } from "./two-factor-verify.component";
 import { TwoFactorWebAuthnComponent } from "./two-factor-webauthn.component";
 import { TwoFactorYubiKeyComponent } from "./two-factor-yubikey.component";
 
@@ -52,6 +60,7 @@ export class TwoFactorSetupComponent implements OnInit, OnDestroy {
   private twoFactorAuthPolicyAppliesToActiveUser: boolean;
 
   constructor(
+    protected dialogService: DialogService,
     protected apiService: ApiService,
     protected modalService: ModalService,
     protected messagingService: MessagingService,
@@ -114,50 +123,82 @@ export class TwoFactorSetupComponent implements OnInit, OnDestroy {
     this.loading = false;
   }
 
+  async callTwoFactorVerifyDialog(type?: TwoFactorProviderType) {
+    const twoFactorVerifyDialogRef = TwoFactorVerifyComponent.open(this.dialogService, {
+      data: { type: type, organizationId: this.organizationId },
+    });
+    return await lastValueFrom(twoFactorVerifyDialogRef.closed);
+  }
+
   async manage(type: TwoFactorProviderType) {
     switch (type) {
       case TwoFactorProviderType.Authenticator: {
+        const result: AuthResponse<TwoFactorAuthenticatorResponse> =
+          await this.callTwoFactorVerifyDialog(type);
+        if (!result) {
+          return;
+        }
         const authComp = await this.openModal(
           this.authenticatorModalRef,
           TwoFactorAuthenticatorComponent,
         );
-        // eslint-disable-next-line rxjs-angular/prefer-takeuntil
+        await authComp.auth(result);
-        authComp.onUpdated.subscribe((enabled: boolean) => {
+        authComp.onUpdated.pipe(takeUntil(this.destroy$)).subscribe((enabled: boolean) => {
           this.updateStatus(enabled, TwoFactorProviderType.Authenticator);
         });
         break;
       }
       case TwoFactorProviderType.Yubikey: {
+        const result: AuthResponse<TwoFactorYubiKeyResponse> =
+          await this.callTwoFactorVerifyDialog(type);
+        if (!result) {
+          return;
+        }
         const yubiComp = await this.openModal(this.yubikeyModalRef, TwoFactorYubiKeyComponent);
-        // eslint-disable-next-line rxjs-angular/prefer-takeuntil
+        yubiComp.auth(result);
-        yubiComp.onUpdated.subscribe((enabled: boolean) => {
+        yubiComp.onUpdated.pipe(takeUntil(this.destroy$)).subscribe((enabled: boolean) => {
           this.updateStatus(enabled, TwoFactorProviderType.Yubikey);
         });
         break;
       }
       case TwoFactorProviderType.Duo: {
+        const result: AuthResponse<TwoFactorDuoResponse> =
+          await this.callTwoFactorVerifyDialog(type);
+        if (!result) {
+          return;
+        }
         const duoComp = await this.openModal(this.duoModalRef, TwoFactorDuoComponent);
-        // eslint-disable-next-line rxjs-angular/prefer-takeuntil
+        duoComp.auth(result);
-        duoComp.onUpdated.subscribe((enabled: boolean) => {
+        duoComp.onUpdated.pipe(takeUntil(this.destroy$)).subscribe((enabled: boolean) => {
           this.updateStatus(enabled, TwoFactorProviderType.Duo);
         });
         break;
       }
       case TwoFactorProviderType.Email: {
+        const result: AuthResponse<TwoFactorEmailResponse> =
+          await this.callTwoFactorVerifyDialog(type);
+        if (!result) {
+          return;
+        }
         const emailComp = await this.openModal(this.emailModalRef, TwoFactorEmailComponent);
-        // eslint-disable-next-line rxjs-angular/prefer-takeuntil
+        await emailComp.auth(result);
-        emailComp.onUpdated.subscribe((enabled: boolean) => {
+        emailComp.onUpdated.pipe(takeUntil(this.destroy$)).subscribe((enabled: boolean) => {
           this.updateStatus(enabled, TwoFactorProviderType.Email);
         });
         break;
       }
       case TwoFactorProviderType.WebAuthn: {
+        const result: AuthResponse<TwoFactorWebAuthnResponse> =
+          await this.callTwoFactorVerifyDialog(type);
+        if (!result) {
+          return;
+        }
         const webAuthnComp = await this.openModal(
           this.webAuthnModalRef,
           TwoFactorWebAuthnComponent,
         );
-        // eslint-disable-next-line rxjs-angular/prefer-takeuntil
+        webAuthnComp.auth(result);
-        webAuthnComp.onUpdated.subscribe((enabled: boolean) => {
+        webAuthnComp.onUpdated.pipe(takeUntil(this.destroy$)).subscribe((enabled: boolean) => {
           this.updateStatus(enabled, TwoFactorProviderType.WebAuthn);
         });
         break;
@@ -167,10 +208,12 @@ export class TwoFactorSetupComponent implements OnInit, OnDestroy {
     }
   }
 
-  recoveryCode() {
+  async recoveryCode() {
-    // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
+    const result = await this.callTwoFactorVerifyDialog(-1 as TwoFactorProviderType);
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    if (result) {
-    this.openModal(this.recoveryModalRef, TwoFactorRecoveryComponent);
+      const recoverComp = await this.openModal(this.recoveryModalRef, TwoFactorRecoveryComponent);
+      recoverComp.auth(result);
+    }
   }
 
   async premiumRequired() {

apps/web/src/app/auth/settings/two-factor-verify.component.html

@@ -1,15 +1,23 @@
-<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
+<form [formGroup]="formGroup" [bitSubmit]="submit">
-  <div class="modal-body">
+  <bit-dialog dialogSize="default">
-    <app-user-verification [(ngModel)]="secret" ngDefaultControl name="secret">
+    <span bitDialogTitle>
-    </app-user-verification>
+      {{ "twoStepLogin" | i18n }}
-  </div>
+      <small class="tw-text-muted">{{ dialogTitle }}</small>
-  <div class="modal-footer">
+    </span>
-    <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+    <ng-container bitDialogContent>
-      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+      <app-user-verification-form-input
-      <span>{{ "continue" | i18n }}</span>
+        formControlName="secret"
-    </button>
+        ngDefaultControl
-    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
+        name="secret"
-      {{ "close" | i18n }}
+      ></app-user-verification-form-input>
-    </button>
+    </ng-container>
-  </div>
+    <ng-container bitDialogFooter>
+      <button bitButton bitFormButton type="submit" buttonType="primary">
+        {{ "continue" | i18n }}
+      </button>
+      <button bitButton type="button" buttonType="secondary" bitDialogClose>
+        {{ "close" | i18n }}
+      </button>
+    </ng-container>
+  </bit-dialog>
 </form>

apps/web/src/app/auth/settings/two-factor-verify.component.ts

@@ -1,4 +1,6 @@
-import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
+import { Component, EventEmitter, Inject, Output } from "@angular/core";
+import { FormControl, FormGroup } from "@angular/forms";
 
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
@@ -8,46 +10,74 @@ import { SecretVerificationRequest } from "@bitwarden/common/auth/models/request
 import { AuthResponse } from "@bitwarden/common/auth/types/auth-response";
 import { TwoFactorResponse } from "@bitwarden/common/auth/types/two-factor-response";
 import { Verification } from "@bitwarden/common/auth/types/verification";
-import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { DialogService } from "@bitwarden/components";
+
+type TwoFactorVerifyDialogData = {
+  type: TwoFactorProviderType;
+  organizationId: string;
+};
 
 @Component({
   selector: "app-two-factor-verify",
   templateUrl: "two-factor-verify.component.html",
 })
 export class TwoFactorVerifyComponent {
-  @Input() type: TwoFactorProviderType;
+  type: TwoFactorProviderType;
-  @Input() organizationId: string;
+  organizationId: string;
   @Output() onAuthed = new EventEmitter<AuthResponse<TwoFactorResponse>>();
 
-  secret: Verification;
   formPromise: Promise<TwoFactorResponse>;
 
+  protected formGroup = new FormGroup({
+    secret: new FormControl<Verification | null>(null),
+  });
+
   constructor(
+    @Inject(DIALOG_DATA) protected data: TwoFactorVerifyDialogData,
+    private dialogRef: DialogRef,
     private apiService: ApiService,
-    private logService: LogService,
+    private i18nService: I18nService,
     private userVerificationService: UserVerificationService,
-  ) {}
+  ) {
+    this.type = data.type;
+    this.organizationId = data.organizationId;
+  }
 
-  async submit() {
+  submit = async () => {
     let hashedSecret: string;
-
+    this.formPromise = this.userVerificationService
-    try {
+      .buildRequest(this.formGroup.value.secret)
-      this.formPromise = this.userVerificationService.buildRequest(this.secret).then((request) => {
+      .then((request) => {
         hashedSecret =
-          this.secret.type === VerificationType.MasterPassword
+          this.formGroup.value.secret.type === VerificationType.MasterPassword
             ? request.masterPasswordHash
             : request.otp;
         return this.apiCall(request);
       });
 
-      const response = await this.formPromise;
+    const response = await this.formPromise;
-      this.onAuthed.emit({
+    this.dialogRef.close({
-        response: response,
+      response: response,
-        secret: hashedSecret,
+      secret: hashedSecret,
-        verificationType: this.secret.type,
+      verificationType: this.formGroup.value.secret.type,
-      });
+    });
-    } catch (e) {
+  };
-      this.logService.error(e);
+
+  get dialogTitle(): string {
+    switch (this.type) {
+      case -1 as TwoFactorProviderType:
+        return this.i18nService.t("recoveryCodeTitle");
+      case TwoFactorProviderType.Duo:
+        return "Duo";
+      case TwoFactorProviderType.Email:
+        return this.i18nService.t("emailTitle");
+      case TwoFactorProviderType.WebAuthn:
+        return this.i18nService.t("webAuthnTitle");
+      case TwoFactorProviderType.Authenticator:
+        return this.i18nService.t("authenticatorAppTitle");
+      case TwoFactorProviderType.Yubikey:
+        return "Yubikey";
     }
   }
 
@@ -72,4 +102,8 @@ export class TwoFactorVerifyComponent {
         return this.apiService.getTwoFactorYubiKey(request);
     }
   }
+
+  static open(dialogService: DialogService, config: DialogConfig<TwoFactorVerifyDialogData>) {
+    return dialogService.open<AuthResponse<any>>(TwoFactorVerifyComponent, config);
+  }
 }

apps/web/src/app/auth/settings/two-factor-webauthn.component.html

@@ -15,13 +15,6 @@
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
-      <app-two-factor-verify
-        [organizationId]="organizationId"
-        [type]="type"
-        (onAuthed)="auth($any($event))"
-        *ngIf="!authed"
-      >
-      </app-two-factor-verify>
       <form
         #form
         (ngSubmit)="submit()"

apps/web/src/app/auth/settings/two-factor-yubikey.component.html

@@ -15,13 +15,6 @@
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
-      <app-two-factor-verify
-        [organizationId]="organizationId"
-        [type]="type"
-        (onAuthed)="auth($any($event))"
-        *ngIf="!authed"
-      >
-      </app-two-factor-verify>
       <form
         #form
         (ngSubmit)="submit()"

apps/web/src/app/shared/loose-components.module.ts

@@ -1,6 +1,9 @@
 import { NgModule } from "@angular/core";
 
-import { PasswordCalloutComponent } from "@bitwarden/auth/angular";
+import {
+  PasswordCalloutComponent,
+  UserVerificationFormInputComponent,
+} from "@bitwarden/auth/angular";
 import { LayoutComponent, NavigationModule } from "@bitwarden/components";
 
 import { OrganizationLayoutComponent } from "../admin-console/organizations/layouts/organization-layout.component";
@@ -106,6 +109,7 @@ import { SharedModule } from "./shared.module";
     OrganizationBadgeModule,
     PipesModule,
     PasswordCalloutComponent,
+    UserVerificationFormInputComponent,
     DangerZoneComponent,
     LayoutComponent,
     NavigationModule,