PM-2153 Update User Confirm Dialog (#8694)

* PM-2153 Update User Confirm Dialog

* PM-2153 Called confirm user method before dialog close

apps/web/src/app/admin-console/common/base.people.component.ts

@@ -1,5 +1,13 @@
 import { Directive, OnDestroy, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
-import { BehaviorSubject, Subject, firstValueFrom, from, switchMap, takeUntil } from "rxjs";
+import {
+  BehaviorSubject,
+  Subject,
+  firstValueFrom,
+  from,
+  lastValueFrom,
+  switchMap,
+  takeUntil,
+} from "rxjs";
 
 import { SearchPipe } from "@bitwarden/angular/pipes/search.pipe";
 import { UserNamePipe } from "@bitwarden/angular/pipes/user-name.pipe";
@@ -385,25 +393,16 @@ export abstract class BasePeopleComponent<
         this.organizationManagementPreferencesService.autoConfirmFingerPrints.state$,
       );
       if (autoConfirm == null || !autoConfirm) {
-        const [modal] = await this.modalService.openViewRef(
+        const dialogRef = UserConfirmComponent.open(this.dialogService, {
-          UserConfirmComponent,
+          data: {
-          this.confirmModalRef,
+            name: this.userNamePipe.transform(user),
-          (comp) => {
+            userId: user != null ? user.userId : null,
-            comp.name = this.userNamePipe.transform(user);
+            publicKey: publicKey,
-            comp.userId = user != null ? user.userId : null;
+            confirmUser: () => confirmUser(publicKey),
-            comp.publicKey = publicKey;
-            // eslint-disable-next-line rxjs/no-async-subscribe
-            comp.onConfirmedUser.subscribe(async () => {
-              try {
-                comp.formPromise = confirmUser(publicKey);
-                await comp.formPromise;
-                modal.close();
-              } catch (e) {
-                this.logService.error(e);
-              }
-            });
           },
-        );
+        });
+        await lastValueFrom(dialogRef.closed);
+
         return;
       }
 

apps/web/src/app/admin-console/organizations/manage/user-confirm.component.html

@@ -1,52 +1,36 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="confirmUserTitle">
+<form [formGroup]="formGroup" [bitSubmit]="submit">
-  <div class="modal-dialog modal-dialog-scrollable" role="document">
+  <bit-dialog dialogSize="default">
-    <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
+    <span bitDialogTitle>
-      <div class="modal-header">
+      {{ "confirmUser" | i18n }}
-        <h1 class="modal-title" id="confirmUserTitle">
+      <span class="tw-text-muted" bitTypography="body1">{{ name }}</span>
-          {{ "confirmUser" | i18n }}
+    </span>
-          <small class="text-muted" *ngIf="name">{{ name }}</small>
+    <ng-container bitDialogContent>
-        </h1>
+      <p bitTypography="body1">
-        <button
+        {{ "fingerprintEnsureIntegrityVerify" | i18n }}
-          type="button"
+        <a
-          class="close"
+          bitLink
-          data-dismiss="modal"
+          href="https://bitwarden.com/help/fingerprint-phrase/"
-          appA11yTitle="{{ 'close' | i18n }}"
+          target="_blank"
+          rel="noreferrer"
         >
-          <span aria-hidden="true">&times;</span>
+          {{ "learnMore" | i18n }}</a
-        </button>
+        >
-      </div>
+      </p>
-      <div class="modal-body">
+      <p bitTypography="body1">
-        <p>
+        <code>{{ fingerprint }}</code>
-          {{ "fingerprintEnsureIntegrityVerify" | i18n }}
+      </p>
-          <a href="https://bitwarden.com/help/fingerprint-phrase/" target="_blank" rel="noreferrer">
+      <bit-form-control>
-            {{ "learnMore" | i18n }}</a
+        <input type="checkbox" bitCheckbox formControlName="dontAskAgain" />
-          >
+        <bit-label>{{ "dontAskFingerprintAgain" | i18n }}</bit-label>
-        </p>
+      </bit-form-control>
-        <p>
+    </ng-container>
-          <code>{{ fingerprint }}</code>
+    <ng-container bitDialogFooter>
-        </p>
+      <button bitButton bitFormButton type="submit" buttonType="primary">
-        <div class="form-check">
+        {{ "confirm" | i18n }}
-          <input
+      </button>
-            class="form-check-input"
+      <button bitButton bitFormButton type="button" buttonType="secondary" bitDialogClose>
-            type="checkbox"
+        {{ "cancel" | i18n }}
-            id="dontAskAgain"
+      </button>
-            name="DontAskAgain"
+    </ng-container>
-            [(ngModel)]="dontAskAgain"
+  </bit-dialog>
-          />
+</form>
-          <label class="form-check-label" for="dontAskAgain">
-            {{ "dontAskFingerprintAgain" | i18n }}
-          </label>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-          <span>{{ "confirm" | i18n }}</span>
-        </button>
-        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
-          {{ "cancel" | i18n }}
-        </button>
-      </div>
-    </form>
-  </div>
-</div>

apps/web/src/app/admin-console/organizations/manage/user-confirm.component.ts

@@ -1,29 +1,47 @@
-import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
+import { Component, Inject, OnInit } from "@angular/core";
+import { FormControl, FormGroup } from "@angular/forms";
 
 import { OrganizationManagementPreferencesService } from "@bitwarden/common/admin-console/abstractions/organization-management-preferences/organization-management-preferences.service";
 import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
+import { DialogService } from "@bitwarden/components";
+
+export type UserConfirmDialogData = {
+  name: string;
+  userId: string;
+  publicKey: Uint8Array;
+  confirmUser: (publicKey: Uint8Array) => Promise<void>;
+};
 
 @Component({
   selector: "app-user-confirm",
   templateUrl: "user-confirm.component.html",
 })
 export class UserConfirmComponent implements OnInit {
-  @Input() name: string;
+  name: string;
-  @Input() userId: string;
+  userId: string;
-  @Input() publicKey: Uint8Array;
+  publicKey: Uint8Array;
-  @Output() onConfirmedUser = new EventEmitter();
 
-  dontAskAgain = false;
   loading = true;
   fingerprint: string;
   formPromise: Promise<any>;
 
+  formGroup = new FormGroup({
+    dontAskAgain: new FormControl(false),
+  });
+
   constructor(
+    @Inject(DIALOG_DATA) protected data: UserConfirmDialogData,
+    private dialogRef: DialogRef,
     private cryptoService: CryptoService,
     private logService: LogService,
     private organizationManagementPreferencesService: OrganizationManagementPreferencesService,
-  ) {}
+  ) {
+    this.name = data.name;
+    this.userId = data.userId;
+    this.publicKey = data.publicKey;
+  }
 
   async ngOnInit() {
     try {
@@ -39,15 +57,21 @@ export class UserConfirmComponent implements OnInit {
     this.loading = false;
   }
 
-  async submit() {
+  submit = async () => {
     if (this.loading) {
       return;
     }
 
-    if (this.dontAskAgain) {
+    if (this.formGroup.value.dontAskAgain) {
       await this.organizationManagementPreferencesService.autoConfirmFingerPrints.set(true);
     }
 
-    this.onConfirmedUser.emit();
+    await this.data.confirmUser(this.publicKey);
+
+    this.dialogRef.close();
+  };
+
+  static open(dialogService: DialogService, config: DialogConfig<UserConfirmDialogData>) {
+    return dialogService.open(UserConfirmComponent, config);
   }
 }