Merge ed2518b778 into b4c8bdf468

apps/web/src/app/auth/settings/account/account.component.html

@@ -15,14 +15,13 @@
     <button type="button" bitButton buttonType="danger" (click)="purgeVault()">
       {{ "purgeVault" | i18n }}
     </button>
-    <button type="button" bitButton buttonType="danger" (click)="deleteAccount()">
+    <button type="button" bitButton buttonType="danger" [bitAction]="deleteAccount">
       {{ "deleteAccount" | i18n }}
     </button>
   </app-danger-zone>
 
   <ng-template #deauthorizeSessionsTemplate></ng-template>
   <ng-template #purgeVaultTemplate></ng-template>
-  <ng-template #deleteAccountTemplate></ng-template>
   <ng-template #viewUserApiKeyTemplate></ng-template>
   <ng-template #rotateUserApiKeyTemplate></ng-template>
 </bit-container>

apps/web/src/app/auth/settings/account/account.component.ts

@@ -1,12 +1,14 @@
 import { Component, ViewChild, ViewContainerRef } from "@angular/core";
+import { lastValueFrom } from "rxjs";
 
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
+import { DialogService } from "@bitwarden/components";
 
 import { PurgeVaultComponent } from "../../../vault/settings/purge-vault.component";
 
 import { DeauthorizeSessionsComponent } from "./deauthorize-sessions.component";
-import { DeleteAccountComponent } from "./delete-account.component";
+import { DeleteAccountDialogComponent } from "./delete-account-dialog.component";
 
 @Component({
   selector: "app-account",
@@ -17,13 +19,12 @@ export class AccountComponent {
   deauthModalRef: ViewContainerRef;
   @ViewChild("purgeVaultTemplate", { read: ViewContainerRef, static: true })
   purgeModalRef: ViewContainerRef;
-  @ViewChild("deleteAccountTemplate", { read: ViewContainerRef, static: true })
-  deleteModalRef: ViewContainerRef;
 
   showChangeEmail = true;
 
   constructor(
     private modalService: ModalService,
+    private dialogService: DialogService,
     private userVerificationService: UserVerificationService,
   ) {}
 
@@ -39,7 +40,8 @@ export class AccountComponent {
     await this.modalService.openViewRef(PurgeVaultComponent, this.purgeModalRef);
   }
 
-  async deleteAccount() {
-    await this.modalService.openViewRef(DeleteAccountComponent, this.deleteModalRef);
-  }
+  deleteAccount = async () => {
+    const dialogRef = DeleteAccountDialogComponent.open(this.dialogService);
+    await lastValueFrom(dialogRef.closed);
+  };
 }

apps/web/src/app/auth/settings/account/delete-account-dialog.component.html

@@ -0,0 +1,20 @@
+<form [formGroup]="deleteForm" [bitSubmit]="submit">
+  <bit-dialog dialogSize="default" [title]="'deleteAccount' | i18n">
+    <ng-container bitDialogContent>
+      <p bitTypography="body1">{{ "deleteAccountDesc" | i18n }}</p>
+      <app-callout type="warning">{{ "deleteAccountWarning" | i18n }}</app-callout>
+      <app-user-verification-form-input
+        formControlName="verification"
+        name="verification"
+      ></app-user-verification-form-input>
+    </ng-container>
+    <ng-container bitDialogFooter>
+      <button bitButton bitFormButton type="submit" buttonType="danger">
+        {{ "deleteAccount" | i18n }}
+      </button>
+      <button bitButton bitFormButton type="button" buttonType="secondary" bitDialogClose>
+        {{ "close" | i18n }}
+      </button>
+    </ng-container>
+  </bit-dialog>
+</form>

apps/web/src/app/auth/settings/account/delete-account-dialog.component.ts

@@ -1,19 +1,17 @@
+import { DialogRef } from "@angular/cdk/dialog";
 import { Component } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 
 import { AccountApiService } from "@bitwarden/common/auth/abstractions/account-api.service";
 import { Verification } from "@bitwarden/common/auth/types/verification";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { DialogService } from "@bitwarden/components";
 
 @Component({
-  selector: "app-delete-account",
-  templateUrl: "delete-account.component.html",
+  templateUrl: "delete-account-dialog.component.html",
 })
-export class DeleteAccountComponent {
-  formPromise: Promise<void>;
-
+export class DeleteAccountDialogComponent {
   deleteForm = this.formBuilder.group({
     verification: undefined as Verification | undefined,
   });
@@ -23,21 +21,21 @@ export class DeleteAccountComponent {
     private platformUtilsService: PlatformUtilsService,
     private formBuilder: FormBuilder,
     private accountApiService: AccountApiService,
-    private logService: LogService,
+    private dialogRef: DialogRef,
   ) {}
 
-  async submit() {
-    try {
-      const verification = this.deleteForm.get("verification").value;
-      this.formPromise = this.accountApiService.deleteAccount(verification);
-      await this.formPromise;
-      this.platformUtilsService.showToast(
-        "success",
-        this.i18nService.t("accountDeleted"),
-        this.i18nService.t("accountDeletedDesc"),
-      );
-    } catch (e) {
-      this.logService.error(e);
-    }
+  submit = async () => {
+    const verification = this.deleteForm.get("verification").value;
+    await this.accountApiService.deleteAccount(verification);
+    this.dialogRef.close();
+    this.platformUtilsService.showToast(
+      "success",
+      this.i18nService.t("accountDeleted"),
+      this.i18nService.t("accountDeletedDesc"),
+    );
+  };
+
+  static open(dialogService: DialogService) {
+    return dialogService.open(DeleteAccountDialogComponent);
   }
 }

apps/web/src/app/auth/settings/account/delete-account.component.html

@@ -1,39 +0,0 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="deleteAccountTitle">
-  <div class="modal-dialog modal-dialog-scrollable" role="document">
-    <form
-      class="modal-content"
-      #form
-      (ngSubmit)="submit()"
-      [appApiAction]="formPromise"
-      ngNativeValidate
-      [formGroup]="deleteForm"
-    >
-      <div class="modal-header">
-        <h1 class="modal-title" id="deleteAccountTitle">{{ "deleteAccount" | 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">
-        <p>{{ "deleteAccountDesc" | i18n }}</p>
-        <app-callout type="warning">{{ "deleteAccountWarning" | i18n }}</app-callout>
-        <app-user-verification ngDefaultControl formControlName="verification" name="verification">
-        </app-user-verification>
-      </div>
-      <div class="modal-footer">
-        <button type="submit" class="btn btn-danger btn-submit" [disabled]="form.loading">
-          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-          <span>{{ "deleteAccount" | i18n }}</span>
-        </button>
-        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
-          {{ "close" | i18n }}
-        </button>
-      </div>
-    </form>
-  </div>
-</div>

apps/web/src/app/shared/loose-components.module.ts

@@ -32,7 +32,7 @@ import { ChangeAvatarComponent } from "../auth/settings/account/change-avatar.co
 import { ChangeEmailComponent } from "../auth/settings/account/change-email.component";
 import { DangerZoneComponent } from "../auth/settings/account/danger-zone.component";
 import { DeauthorizeSessionsComponent } from "../auth/settings/account/deauthorize-sessions.component";
-import { DeleteAccountComponent } from "../auth/settings/account/delete-account.component";
+import { DeleteAccountDialogComponent } from "../auth/settings/account/delete-account-dialog.component";
 import { ProfileComponent } from "../auth/settings/account/profile.component";
 import { EmergencyAccessAttachmentsComponent } from "../auth/settings/emergency-access/attachments/emergency-access-attachments.component";
 import { EmergencyAccessConfirmComponent } from "../auth/settings/emergency-access/confirm/emergency-access-confirm.component";
@@ -130,7 +130,7 @@ import { SharedModule } from "./shared.module";
     ChangeEmailComponent,
     CollectionsComponent,
     DeauthorizeSessionsComponent,
-    DeleteAccountComponent,
+    DeleteAccountDialogComponent,
     DomainRulesComponent,
     EmergencyAccessAddEditComponent,
     EmergencyAccessAttachmentsComponent,
@@ -205,7 +205,7 @@ import { SharedModule } from "./shared.module";
     ChangeEmailComponent,
     CollectionsComponent,
     DeauthorizeSessionsComponent,
-    DeleteAccountComponent,
+    DeleteAccountDialogComponent,
     DomainRulesComponent,
     DynamicAvatarComponent,
     EmergencyAccessAddEditComponent,