PM-2058 Update Two Factor Recovery Dialog (#8985)

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

@@ -1,39 +1,23 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="2faRecoveryTitle">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h1 class="modal-title" id="2faRecoveryTitle">
-          {{ "twoStepLogin" | i18n }}
-          <small>{{ "recoveryCodeTitle" | i18n }}</small>
-        </h1>
-        <button
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          appA11yTitle="{{ 'close' | i18n }}"
-        >
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <ng-container *ngIf="authed">
-        <div class="modal-body text-center">
-          <ng-container *ngIf="code">
-            <p>{{ "twoFactorRecoveryYourCode" | i18n }}:</p>
-            <code class="text-lg">{{ code }}</code>
-          </ng-container>
-          <ng-container *ngIf="!code">
-            {{ "twoFactorRecoveryNoCode" | i18n }}
-          </ng-container>
-        </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-primary" (click)="print()" *ngIf="code">
-            {{ "printCode" | i18n }}
-          </button>
-          <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
-            {{ "close" | i18n }}
-          </button>
-        </div>
-      </ng-container>
-    </div>
-  </div>
-</div>
+<bit-dialog dialogSize="default">
+  <span bitDialogTitle>
+    {{ "twoStepLogin" | i18n }}
+    <span bitTypography="body1">{{ "recoveryCodeTitle" | i18n }}</span>
+  </span>
+  <ng-container *ngIf="authed" bitDialogContent>
+    <ng-container *ngIf="code">
+      <p bitTypography="body1" class="tw-text-center">{{ "twoFactorRecoveryYourCode" | i18n }}:</p>
+      <code class="tw-text-lg tw-w-full tw-flex tw-justify-center">{{ code }}</code>
+    </ng-container>
+    <ng-container *ngIf="!code">
+      {{ "twoFactorRecoveryNoCode" | i18n }}
+    </ng-container>
+  </ng-container>
+  <ng-container bitDialogFooter>
+    <button bitButton type="button" buttonType="primary" (click)="print()" *ngIf="code">
+      {{ "printCode" | i18n }}
+    </button>
+    <button bitButton type="button" buttonType="secondary" bitDialogClose>
+      {{ "close" | i18n }}
+    </button>
+  </ng-container>
+</bit-dialog>

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

@@ -1,8 +1,10 @@
-import { Component } from "@angular/core";
+import { DIALOG_DATA, DialogConfig } from "@angular/cdk/dialog";
+import { Component, Inject } from "@angular/core";
 
 import { TwoFactorProviderType } from "@bitwarden/common/auth/enums/two-factor-provider-type";
 import { TwoFactorRecoverResponse } from "@bitwarden/common/auth/models/response/two-factor-recover.response";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { DialogService } from "@bitwarden/components";
 
 @Component({
   selector: "app-two-factor-recovery",
@@ -14,7 +16,12 @@ export class TwoFactorRecoveryComponent {
   authed: boolean;
   twoFactorProviderType = TwoFactorProviderType;
 
-  constructor(private i18nService: I18nService) {}
+  constructor(
+    @Inject(DIALOG_DATA) protected data: any,
+    private i18nService: I18nService,
+  ) {
+    this.auth(data.response);
+  }
 
   auth(authResponse: any) {
     this.authed = true;
@@ -52,4 +59,8 @@ export class TwoFactorRecoveryComponent {
   private processResponse(response: TwoFactorRecoverResponse) {
     this.code = this.formatString(response.code);
   }
+
+  static open(dialogService: DialogService, config: DialogConfig<any>) {
+    return dialogService.open(TwoFactorRecoveryComponent, config);
+  }
 }

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

@@ -81,7 +81,6 @@
 </bit-container>
 
 <ng-template #authenticatorTemplate></ng-template>
-<ng-template #recoveryTemplate></ng-template>
 <ng-template #duoTemplate></ng-template>
 <ng-template #emailTemplate></ng-template>
 <ng-template #yubikeyTemplate></ng-template>

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

@@ -33,8 +33,6 @@ import { TwoFactorYubiKeyComponent } from "./two-factor-yubikey.component";
   templateUrl: "two-factor-setup.component.html",
 })
 export class TwoFactorSetupComponent implements OnInit, OnDestroy {
-  @ViewChild("recoveryTemplate", { read: ViewContainerRef, static: true })
-  recoveryModalRef: ViewContainerRef;
   @ViewChild("authenticatorTemplate", { read: ViewContainerRef, static: true })
   authenticatorModalRef: ViewContainerRef;
   @ViewChild("yubikeyTemplate", { read: ViewContainerRef, static: true })
@@ -211,8 +209,8 @@ export class TwoFactorSetupComponent implements OnInit, OnDestroy {
   async recoveryCode() {
     const result = await this.callTwoFactorVerifyDialog(-1 as TwoFactorProviderType);
     if (result) {
-      const recoverComp = await this.openModal(this.recoveryModalRef, TwoFactorRecoveryComponent);
-      recoverComp.auth(result);
+      const recoverComp = TwoFactorRecoveryComponent.open(this.dialogService, { data: result });
+      await lastValueFrom(recoverComp.closed);
     }
   }