[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() {

bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/access/access-tokens.component.ts

@@ -1,11 +1,10 @@
 import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
-import { combineLatestWith, Observable, startWith, switchMap } from "rxjs";
+import { combineLatestWith, firstValueFrom, Observable, startWith, switchMap } from "rxjs";
 
 import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
-import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
-import { UserVerificationPromptComponent } from "@bitwarden/web-vault/app/components/user-verification";
+import { openUserVerificationPrompt } from "@bitwarden/web-vault/app/components/user-verification";
 
 import { AccessTokenView } from "../models/view/access-token.view";
 
@@ -26,7 +25,6 @@ export class AccessTokenComponent implements OnInit {
     private route: ActivatedRoute,
     private accessService: AccessService,
     private dialogService: DialogServiceAbstraction,
-    private modalService: ModalService,
     private platformUtilsService: PlatformUtilsService
   ) {}
 
@@ -64,8 +62,7 @@ export class AccessTokenComponent implements OnInit {
   }
 
   private verifyUser() {
-    const ref = this.modalService.open(UserVerificationPromptComponent, {
-      allowMultipleModals: true,
+    const ref = openUserVerificationPrompt(this.dialogService, {
       data: {
         confirmDescription: "revokeAccessTokenDesc",
         confirmButtonText: "revokeAccessToken",
@@ -77,7 +74,7 @@ export class AccessTokenComponent implements OnInit {
       return;
     }
 
-    return ref.onClosedPromise();
+    return firstValueFrom(ref.closed);
   }
 
   private async getAccessTokens(): Promise<AccessTokenView[]> {

bitwarden_license/bit-web/src/app/secrets-manager/settings/porting/sm-export.component.ts

@@ -1,15 +1,15 @@
 import { Component, OnDestroy, OnInit } from "@angular/core";
 import { FormControl, FormGroup, Validators } from "@angular/forms";
 import { ActivatedRoute } from "@angular/router";
-import { Subject, switchMap, takeUntil } from "rxjs";
+import { firstValueFrom, Subject, switchMap, takeUntil } from "rxjs";
 
-import { ModalService } from "@bitwarden/angular/services/modal.service";
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { FileDownloadService } from "@bitwarden/common/abstractions/fileDownload/fileDownload.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
-import { UserVerificationPromptComponent } from "@bitwarden/web-vault/app/components/user-verification";
+import { openUserVerificationPrompt } from "@bitwarden/web-vault/app/components/user-verification";
 
 import { SecretsManagerPortingApiService } from "../services/sm-porting-api.service";
 import { SecretsManagerPortingService } from "../services/sm-porting.service";
@@ -42,7 +42,7 @@ export class SecretsManagerExportComponent implements OnInit, OnDestroy {
     private smPortingService: SecretsManagerPortingService,
     private fileDownloadService: FileDownloadService,
     private logService: LogService,
-    private modalService: ModalService,
+    private dialogService: DialogServiceAbstraction,
     private secretsManagerApiService: SecretsManagerPortingApiService
   ) {}
 
@@ -98,8 +98,7 @@ export class SecretsManagerExportComponent implements OnInit, OnDestroy {
   }
 
   private verifyUser() {
-    const ref = this.modalService.open(UserVerificationPromptComponent, {
-      allowMultipleModals: true,
+    const ref = openUserVerificationPrompt(this.dialogService, {
       data: {
         confirmDescription: "exportWarningDesc",
         confirmButtonText: "exportVault",
@@ -111,6 +110,6 @@ export class SecretsManagerExportComponent implements OnInit, OnDestroy {
       return;
     }
 
-    return ref.onClosedPromise();
+    return firstValueFrom(ref.closed);
   }
 }

libs/angular/src/auth/components/user-verification-prompt.component.ts

@@ -1,9 +1,10 @@
 import { Directive } from "@angular/core";
-import { FormBuilder, FormControl } from "@angular/forms";
+import { FormBuilder } from "@angular/forms";
 
 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 { Verification } from "@bitwarden/common/types/verification";
 
 import { ModalRef } from "../../components/modal/modal.ref";
 import { ModalConfig } from "../../services/modal.service";
@@ -16,7 +17,10 @@ export class UserVerificationPromptComponent {
   confirmDescription = this.config.data.confirmDescription;
   confirmButtonText = this.config.data.confirmButtonText;
   modalTitle = this.config.data.modalTitle;
-  secret = new FormControl();
+
+  formGroup = this.formBuilder.group({
+    secret: this.formBuilder.control<Verification | null>(null),
+  });
 
   constructor(
     private modalRef: ModalRef,
@@ -27,7 +31,11 @@ export class UserVerificationPromptComponent {
     private i18nService: I18nService
   ) {}
 
-  async submit() {
+  get secret() {
+    return this.formGroup.controls.secret;
+  }
+
+  submit = async () => {
     try {
       //Incorrect secret will throw an invalid password error.
       await this.userVerificationService.verifyUser(this.secret.value);
@@ -40,6 +48,10 @@ export class UserVerificationPromptComponent {
       return;
     }
 
-    this.modalRef.close(true);
+    this.close(true);
+  };
+
+  close(success: boolean) {
+    this.modalRef.close(success);
   }
 }