[PM-2135] feat: refactor user-verification-prompt

apps/web/src/app/admin-console/organizations/tools/import-export/org-export.component.ts

@@ -3,7 +3,6 @@ import { UntypedFormBuilder } from "@angular/forms";
 import { ActivatedRoute } from "@angular/router";
 
 import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
-import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
 import { FileDownloadService } from "@bitwarden/common/abstractions/fileDownload/fileDownload.service";
@@ -35,7 +34,6 @@ export class OrganizationExportComponent extends ExportComponent {
     userVerificationService: UserVerificationService,
     formBuilder: UntypedFormBuilder,
     fileDownloadService: FileDownloadService,
-    modalService: ModalService,
     dialogService: DialogServiceAbstraction
   ) {
     super(
@@ -49,7 +47,6 @@ export class OrganizationExportComponent extends ExportComponent {
       userVerificationService,
       formBuilder,
       fileDownloadService,
-      modalService,
       dialogService
     );
   }

apps/web/src/app/components/user-verification/user-verification-prompt.component.html

@@ -1,4 +1,27 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="confirmUserTitle">
+<form [formGroup]="formGroup" [bitSubmit]="submit">
+  <bit-dialog>
+    <span bitDialogTitle>{{ modalTitle | i18n }}</span>
+    <ng-container bitDialogContent>
+      <p bitTypography="body1">{{ confirmDescription | i18n }}</p>
+      <app-user-verification formControlName="secret"> </app-user-verification>
+    </ng-container>
+    <ng-container bitDialogFooter>
+      <button type="submit" bitButton bitFormButton buttonType="primary">Save</button>
+      <button
+        type="button"
+        bitButton
+        bitFormButton
+        buttonType="secondary"
+        bitDialogClose
+        [bit-dialog-close]=""
+      >
+        Cancel
+      </button>
+    </ng-container>
+  </bit-dialog>
+</form>
+
+<!-- <div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="confirmUserTitle">
   <div class="modal-dialog modal-dialog-scrollable" role="document">
     <form class="modal-content" #form (ngSubmit)="submit()">
       <h2 class="tw-my-6 tw-px-3.5 tw-font-semibold" id="modalTitle | i18n ">
@@ -23,4 +46,4 @@
       </div>
     </form>
   </div>
-</div>
+</div> -->

apps/web/src/app/components/user-verification/user-verification-prompt.component.ts

@@ -1,8 +1,62 @@
-import { Component } from "@angular/core";
+import { DialogConfig, DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
+import { Component, Inject } from "@angular/core";
+import { FormBuilder } from "@angular/forms";
 
 import { UserVerificationPromptComponent as BaseUserVerificationPrompt } from "@bitwarden/angular/auth/components/user-verification-prompt.component";
+import { ModalConfig } from "@bitwarden/angular/services/modal.service";
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
+import { UserVerificationService } from "@bitwarden/common/abstractions/userVerification/userVerification.service.abstraction";
+
+
+import { DialogServiceAbstraction } from "../../../../../../libs/angular/src/services/dialog";
+
+export interface UserVerificationPromptParams {
+  confirmDescription: string;
+  confirmButtonText: string;
+  modalTitle: string;
+}
 
 @Component({
   templateUrl: "user-verification-prompt.component.html",
 })
-export class UserVerificationPromptComponent extends BaseUserVerificationPrompt {}
+export class UserVerificationPromptComponent extends BaseUserVerificationPrompt {
+  constructor(
+    @Inject(DIALOG_DATA) data: UserVerificationPromptParams,
+    private dialogRef: DialogRef<boolean>,
+    userVerificationService: UserVerificationService,
+    formBuilder: FormBuilder,
+    platformUtilsService: PlatformUtilsService,
+    i18nService: I18nService
+  ) {
+    // TODO: Remove when BaseUserVerificationPrompt has support for CL
+    const modalConfig: ModalConfig = { data };
+    super(
+      null,
+      modalConfig,
+      userVerificationService,
+      formBuilder,
+      platformUtilsService,
+      i18nService
+    );
+  }
+
+  override close(success: boolean) {
+    this.dialogRef.close(success);
+  }
+}
+
+/**
+ * Strongly typed helper to open a UserVerificationPrompt
+ * @param dialogService Instance of the dialog service that will be used to open the dialog
+ * @param config Configuration for the dialog
+ */
+export const openUserVerificationPrompt = (
+  dialogService: DialogServiceAbstraction,
+  config: DialogConfig<UserVerificationPromptParams>
+) => {
+  return dialogService.open<boolean, UserVerificationPromptParams>(
+    UserVerificationPromptComponent,
+    config
+  );
+};

apps/web/src/app/tools/import-export/export.component.ts

@@ -1,8 +1,8 @@
 import { Component } from "@angular/core";
 import { UntypedFormBuilder } from "@angular/forms";
+import { firstValueFrom } from "rxjs";
 
 import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
-import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { ExportComponent as BaseExportComponent } from "@bitwarden/angular/tools/export/components/export.component";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
@@ -15,7 +15,7 @@ import { PolicyService } from "@bitwarden/common/admin-console/abstractions/poli
 import { EncryptedExportType } from "@bitwarden/common/enums";
 import { VaultExportServiceAbstraction } from "@bitwarden/exporter/vault-export";
 
-import { UserVerificationPromptComponent } from "../../components/user-verification";
+import { openUserVerificationPrompt } from "../../components/user-verification";
 
 @Component({
   selector: "app-export",
@@ -37,7 +37,6 @@ export class ExportComponent extends BaseExportComponent {
     userVerificationService: UserVerificationService,
     formBuilder: UntypedFormBuilder,
     fileDownloadService: FileDownloadService,
-    private modalService: ModalService,
     dialogService: DialogServiceAbstraction
   ) {
     super(
@@ -101,8 +100,7 @@ export class ExportComponent extends BaseExportComponent {
       confirmDescription = "encExportKeyWarningDesc";
     }
 
-    const ref = this.modalService.open(UserVerificationPromptComponent, {
-      allowMultipleModals: true,
+    const ref = openUserVerificationPrompt(this.dialogService, {
       data: {
         confirmDescription: confirmDescription,
         confirmButtonText: "exportVault",
@@ -114,7 +112,7 @@ export class ExportComponent extends BaseExportComponent {
       return;
     }
 
-    return ref.onClosedPromise();
+    return firstValueFrom(ref.closed);
   }
 
   get isFileEncryptedExport() {