PM 2048 Update Two Factor Options dialog (#8565)

* PM-2048 Migrate Two factor options component

* PM-2048 Update Two Factor Options Dialog

* PM-2048 Fixed lint issue

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

@@ -1,68 +1,45 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="twoStepOptionsTitle">
-  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h1 class="modal-title" id="twoStepOptionsTitle">{{ "twoStepOptions" | i18n }}</h1>
-        <button
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          appA11yTitle="{{ 'close' | i18n }}"
-        >
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <div class="list-group list-group-flush-2fa">
-          <div *ngFor="let p of providers" class="list-group-item list-group-item-action">
-            <div class="two-factor-content">
-              <div class="logo-col">
-                <img [class]="'mfaType' + p.type" [alt]="p.name + ' logo'" />
-              </div>
-              <div class="text-col">
-                <h3>{{ p.name }}</h3>
-                {{ p.description }}
-              </div>
-              <div class="btn-col">
-                <button
-                  [attr.aria-describedby]="p.name"
-                  type="button"
-                  class="btn btn-outline-secondary btn-sm"
-                  (click)="choose(p)"
-                >
-                  {{ "select" | i18n }}
-                </button>
-              </div>
-            </div>
-          </div>
-          <div class="list-group-item list-group-item-action" (click)="recover()">
-            <div class="two-factor-content">
-              <div class="logo-col">
-                <img class="recovery-code-img" alt="rc logo" />
-              </div>
-              <div class="text-col">
-                <h3>{{ "recoveryCodeTitle" | i18n }}</h3>
-                {{ "recoveryCodeDesc" | i18n }}
-              </div>
-              <div class="btn-col">
-                <button
-                  [attr.aria-describedby]="'recoveryCodeTitle' | i18n"
-                  type="button"
-                  class="btn btn-outline-secondary btn-sm"
-                  (click)="recover()"
-                >
-                  {{ "select" | i18n }}
-                </button>
-              </div>
-            </div>
-          </div>
+<bit-dialog dialogSize="large">
+  <span bitDialogTitle>
+    {{ "twoStepOptions" | i18n }}
+  </span>
+  <ng-container bitDialogContent>
+    <div *ngFor="let p of providers" class="tw-m-2">
+      <div class="tw-flex tw-items-center tw-justify-center tw-gap-4">
+        <div class="tw-flex tw-items-center tw-justify-center tw-min-w-[100px]">
+          <img [class]="'mfaType' + p.type" [alt]="p.name + ' logo'" />
+        </div>
+        <div class="tw-flex-1">
+          <h3 bitTypography="h3">{{ p.name }}</h3>
+          <p bitTypography="body1">{{ p.description }}</p>
+        </div>
+        <div class="tw-min-w-20">
+          <button bitButton type="button" buttonType="secondary" (click)="choose(p)">
+            {{ "select" | i18n }}
+          </button>
         </div>
       </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
-          {{ "close" | i18n }}
-        </button>
+      <hr />
+    </div>
+    <div class="tw-m-2" (click)="recover()">
+      <div class="tw-flex tw-items-center tw-justify-center tw-gap-4">
+        <div class="tw-flex tw-items-center tw-justify-center tw-min-w-[100px]">
+          <img class="recovery-code-img" alt="rc logo" />
+        </div>
+        <div class="tw-flex-1">
+          <h3 bitTypography="h3">{{ "recoveryCodeTitle" | i18n }}</h3>
+          <p bitTypography="body1">{{ "recoveryCodeDesc" | i18n }}</p>
+        </div>
+        <div class="tw-min-w-20">
+          <button bitButton type="button" buttonType="secondary" (click)="recover()">
+            {{ "select" | i18n }}
+          </button>
+        </div>
       </div>
     </div>
-  </div>
-</div>
+  </ng-container>
+  <ng-container bitDialogFooter>
+    <button bitButton type="button" buttonType="secondary" bitDialogClose>
+      {{ "close" | i18n }}
+    </button>
+  </ng-container>
+</bit-dialog>

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

@@ -1,11 +1,24 @@
+import { DialogRef } from "@angular/cdk/dialog";
 import { Component } from "@angular/core";
 import { Router } from "@angular/router";
 
 import { TwoFactorOptionsComponent as BaseTwoFactorOptionsComponent } from "@bitwarden/angular/auth/components/two-factor-options.component";
 import { TwoFactorService } from "@bitwarden/common/auth/abstractions/two-factor.service";
+import { TwoFactorProviderType } from "@bitwarden/common/auth/enums/two-factor-provider-type";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { DialogService } from "@bitwarden/components";
+
+export enum TwoFactorOptionsDialogResult {
+  Provider = "Provider selected",
+  Recover = "Recover selected",
+}
+
+export type TwoFactorOptionsDialogResultType = {
+  result: TwoFactorOptionsDialogResult;
+  type: TwoFactorProviderType;
+};
 
 @Component({
   selector: "app-two-factor-options",
@@ -18,7 +31,22 @@ export class TwoFactorOptionsComponent extends BaseTwoFactorOptionsComponent {
     i18nService: I18nService,
     platformUtilsService: PlatformUtilsService,
     environmentService: EnvironmentService,
+    private dialogRef: DialogRef,
   ) {
     super(twoFactorService, router, i18nService, platformUtilsService, window, environmentService);
   }
+
+  async choose(p: any) {
+    await super.choose(p);
+    this.dialogRef.close({ result: TwoFactorOptionsDialogResult.Provider, type: p.type });
+  }
+
+  async recover() {
+    await super.recover();
+    this.dialogRef.close({ result: TwoFactorOptionsDialogResult.Recover });
+  }
+
+  static open(dialogService: DialogService) {
+    return dialogService.open<TwoFactorOptionsDialogResultType>(TwoFactorOptionsComponent);
+  }
 }

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

@@ -171,4 +171,3 @@
     </div>
   </div>
 </form>
-<ng-template #twoFactorOptions></ng-template>

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

@@ -1,9 +1,9 @@
 import { Component, Inject, OnDestroy, ViewChild, ViewContainerRef } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
+import { lastValueFrom } from "rxjs";
 
 import { TwoFactorComponent as BaseTwoFactorComponent } from "@bitwarden/angular/auth/components/two-factor.component";
 import { WINDOW } from "@bitwarden/angular/services/injection-tokens";
-import { ModalService } from "@bitwarden/angular/services/modal.service";
 import {
   LoginStrategyServiceAbstraction,
   LoginEmailServiceAbstraction,
@@ -14,7 +14,6 @@ import { AccountService } from "@bitwarden/common/auth/abstractions/account.serv
 import { InternalMasterPasswordServiceAbstraction } from "@bitwarden/common/auth/abstractions/master-password.service.abstraction";
 import { SsoLoginServiceAbstraction } from "@bitwarden/common/auth/abstractions/sso-login.service.abstraction";
 import { TwoFactorService } from "@bitwarden/common/auth/abstractions/two-factor.service";
-import { TwoFactorProviderType } from "@bitwarden/common/auth/enums/two-factor-provider-type";
 import { AuthResult } from "@bitwarden/common/auth/models/domain/auth-result";
 import { AppIdService } from "@bitwarden/common/platform/abstractions/app-id.service";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
@@ -23,8 +22,13 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
+import { DialogService } from "@bitwarden/components";
 
-import { TwoFactorOptionsComponent } from "./two-factor-options.component";
+import {
+  TwoFactorOptionsDialogResult,
+  TwoFactorOptionsComponent,
+  TwoFactorOptionsDialogResultType,
+} from "./two-factor-options.component";
 
 @Component({
   selector: "app-two-factor",
@@ -43,7 +47,7 @@ export class TwoFactorComponent extends BaseTwoFactorComponent implements OnDest
     platformUtilsService: PlatformUtilsService,
     stateService: StateService,
     environmentService: EnvironmentService,
-    private modalService: ModalService,
+    private dialogService: DialogService,
     route: ActivatedRoute,
     logService: LogService,
     twoFactorService: TwoFactorService,
@@ -80,22 +84,12 @@ export class TwoFactorComponent extends BaseTwoFactorComponent implements OnDest
   }
 
   async anotherMethod() {
-    const [modal] = await this.modalService.openViewRef(
-      TwoFactorOptionsComponent,
-      this.twoFactorOptionsModal,
-      (comp) => {
-        // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
-        comp.onProviderSelected.subscribe(async (provider: TwoFactorProviderType) => {
-          modal.close();
-          this.selectedProviderType = provider;
-          await this.init();
-        });
-        // eslint-disable-next-line rxjs-angular/prefer-takeuntil
-        comp.onRecoverSelected.subscribe(() => {
-          modal.close();
-        });
-      },
-    );
+    const dialogRef = TwoFactorOptionsComponent.open(this.dialogService);
+    const response: TwoFactorOptionsDialogResultType = await lastValueFrom(dialogRef.closed);
+    if (response.result === TwoFactorOptionsDialogResult.Provider) {
+      this.selectedProviderType = response.type;
+      await this.init();
+    }
   }
 
   protected override handleMigrateEncryptionKey(result: AuthResult): boolean {