[PM-4048] Update DeleteAccountComponent on Desktop (#6846)

* [PM-4048] Use dialog service instead of modal service. Change UI file to use bit-Dialog. Remove from app module into standalone.

* [PM-4048] Update app.module imports

* [PM-4048] Fix form.

* PM-4048 - Delete Account tweak - remove unncessary delete header per discussion with product

* PM-4048 - Per CL migration guide,

* PM-4048 - (1) Remove button module import from dialog module exports (2) Add CL imports to desktop app module for delete acct dialog comp (3) Update delete acct dialog comp to use bitSubmit

* PM-4048 - Remove deprecated data-dismiss as bitDialogClose replaced it in terms of functionality.

* PM-4048 - Desktop Delete Acct - update loading button logic to latest CL standards (thanks Will!)

* PM-4048 - Must manually show errors to get "User Verification failed" message when user inputs incorrect MP.

* PM-4048 - desktop - delete-account.component.html - per PR feedback, remove non-tailwind classes and address missing bitFormButton

* PM-4048 - DeleteAccountComponent - per PR feedback, import DialogService using proper import alias.

* PM-4048 - delete-account.component.html - per PR feedback, remove no longer needed #form

* PM-4048 - delete-account.component.html - remove missed non-tailwind class

* PM-4048 - DeleteAccountComponent - per PR feedback, remove try catch as it is unnecessary as the bitSubmit handles errors

* add bespoke border to fix color contrast issue

* convert delete-account.component and user-verification.component to standalone; revert app module CL imports

* run prettier

* run prettier again

---------

Co-authored-by: Jared Snider <116684653+JaredSnider-Bitwarden@users.noreply.github.com>
Co-authored-by: Jared Snider <jsnider@bitwarden.com>
Co-authored-by: William Martin <contact@willmartian.com>

apps/desktop/src/app/app.component.ts

@@ -252,7 +252,7 @@ export class AppComponent implements OnInit, OnDestroy {
             break;
           }
           case "deleteAccount":
-            this.modalService.open(DeleteAccountComponent, { replaceTopModal: true });
+            DeleteAccountComponent.open(this.dialogService);
             break;
           case "openPasswordHistory":
             await this.openModal<PasswordGeneratorHistoryComponent>(

apps/desktop/src/app/app.module.ts

@@ -3,11 +3,11 @@ import "zone.js";
 // Register the locales for the application
 import "../platform/app/locales";
 
-import { DialogModule } from "@angular/cdk/dialog";
 import { NgModule } from "@angular/core";
 
 import { ColorPasswordCountPipe } from "@bitwarden/angular/pipes/color-password-count.pipe";
 import { ColorPasswordPipe } from "@bitwarden/angular/pipes/color-password.pipe";
+import { DialogModule } from "@bitwarden/components";
 
 import { AccessibilityCookieComponent } from "../auth/accessibility-cookie.component";
 import { SetPinComponent } from "../auth/components/set-pin.component";
@@ -55,7 +55,15 @@ import { AddEditComponent as SendAddEditComponent } from "./tools/send/add-edit.
 import { SendComponent } from "./tools/send/send.component";
 
 @NgModule({
-  imports: [SharedModule, DialogModule, AppRoutingModule, VaultFilterModule, LoginModule],
+  imports: [
+    SharedModule,
+    AppRoutingModule,
+    VaultFilterModule,
+    LoginModule,
+    DialogModule,
+    DeleteAccountComponent,
+    UserVerificationComponent,
+  ],
   declarations: [
     AccessibilityCookieComponent,
     AccountSwitcherComponent,
@@ -67,7 +75,6 @@ import { SendComponent } from "./tools/send/send.component";
     CollectionsComponent,
     ColorPasswordPipe,
     ColorPasswordCountPipe,
-    DeleteAccountComponent,
     EnvironmentComponent,
     ExportComponent,
     FolderAddEditComponent,
@@ -92,7 +99,6 @@ import { SendComponent } from "./tools/send/send.component";
     TwoFactorComponent,
     TwoFactorOptionsComponent,
     UpdateTempPasswordComponent,
-    UserVerificationComponent,
     VaultComponent,
     VaultTimeoutInputComponent,
     ViewComponent,

apps/desktop/src/app/components/user-verification.component.ts

@@ -1,11 +1,16 @@
 import { animate, style, transition, trigger } from "@angular/animations";
+import { CommonModule } from "@angular/common";
 import { Component } from "@angular/core";
-import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from "@angular/forms";
 
 import { UserVerificationComponent as BaseComponent } from "@bitwarden/angular/auth/components/user-verification.component";
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { FormFieldModule } from "@bitwarden/components";
 
 @Component({
   selector: "app-user-verification",
+  standalone: true,
+  imports: [CommonModule, JslibModule, ReactiveFormsModule, FormFieldModule, FormsModule],
   templateUrl: "user-verification.component.html",
   providers: [
     {

apps/desktop/src/auth/delete-account.component.html

@@ -1,43 +1,30 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="deleteAccountTitle">
+<form [bitSubmit]="submit" [formGroup]="deleteForm">
-  <div class="modal-dialog" role="document">
+  <bit-dialog>
-    <form
+    <div bitDialogTitle>{{ "deleteAccount" | i18n }}</div>
-      class="modal-content"
+    <div bitDialogContent>
-      #form
+      <p>{{ "deleteAccountDesc" | i18n }}</p>
-      [appApiAction]="formPromise"
+      <bit-callout type="warning" title="{{ 'warning' | i18n }}">
-      (ngSubmit)="submit()"
+        {{ "deleteAccountWarning" | i18n }}
-      [formGroup]="deleteForm"
+      </bit-callout>
-    >
+      <!-- Temporary border styles. TODO: Remove when app-user-verification is migrated to the CL. -->
-      <div class="modal-body">
+      <div class="tw-mb-2 tw-rounded tw-border tw-border-solid tw-border-info-500/25">
-        <p class="modal-text">{{ "deleteAccountDesc" | i18n }}</p>
+        <app-user-verification
-        <app-callout type="warning" title="{{ 'warning' | i18n }}">
+          ngDefaultControl
-          {{ "deleteAccountWarning" | i18n }}
+          formControlName="verification"
-        </app-callout>
+          name="verification"
-        <div class="box last">
+        ></app-user-verification>
-          <h1 class="box-header" id="deleteAccountTitle">
-            {{ "deleteAccount" | i18n }}
-          </h1>
-          <div class="box-content">
-            <app-user-verification
-              ngDefaultControl
-              formControlName="verification"
-              name="verification"
-            >
-            </app-user-verification>
-          </div>
-          <div id="confirmIdentityHelp" class="box-footer">
-            <p>{{ "confirmIdentity" | i18n }}</p>
-          </div>
-        </div>
       </div>
-      <div class="modal-footer">
+      <div id="confirmIdentityHelp">
-        <button type="submit" class="danger" [disabled]="form.loading || !secret">
+        <p>{{ "confirmIdentity" | i18n }}</p>
-          <i class="bwi bwi-spinner bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
-          <span [hidden]="form.loading">{{ "deleteAccount" | i18n }}</span>
-        </button>
-        <button type="button" data-dismiss="modal" [disabled]="form.loading">
-          {{ "cancel" | i18n }}
-        </button>
       </div>
-    </form>
+    </div>
-  </div>
+    <div bitDialogFooter>
-</div>
+      <button bitButton bitFormButton type="submit" buttonType="danger" [disabled]="!secret">
+        {{ "deleteAccount" | i18n }}
+      </button>
+      <button bitButton type="button" buttonType="secondary" bitFormButton bitDialogClose>
+        {{ "cancel" | i18n }}
+      </button>
+    </div>
+  </bit-dialog>
+</form>

apps/desktop/src/auth/delete-account.component.ts

@@ -1,19 +1,37 @@
+import { DialogRef } from "@angular/cdk/dialog";
 import { Component } from "@angular/core";
-import { FormBuilder } from "@angular/forms";
+import { FormBuilder, ReactiveFormsModule } from "@angular/forms";
 
+import { JslibModule } from "@bitwarden/angular/jslib.module";
 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 {
+  AsyncActionsModule,
+  ButtonModule,
+  CalloutModule,
+  DialogModule,
+  DialogService,
+} from "@bitwarden/components";
+
+import { UserVerificationComponent } from "../app/components/user-verification.component";
 
 @Component({
   selector: "app-delete-account",
+  standalone: true,
   templateUrl: "delete-account.component.html",
+  imports: [
+    JslibModule,
+    UserVerificationComponent,
+    ButtonModule,
+    CalloutModule,
+    AsyncActionsModule,
+    DialogModule,
+    ReactiveFormsModule,
+  ],
 })
 export class DeleteAccountComponent {
-  formPromise: Promise<void>;
-
   deleteForm = this.formBuilder.group({
     verification: undefined as Verification | undefined,
   });
@@ -23,25 +41,23 @@ export class DeleteAccountComponent {
     private platformUtilsService: PlatformUtilsService,
     private formBuilder: FormBuilder,
     private accountApiService: AccountApiService,
-    private logService: LogService,
   ) {}
 
+  static open(dialogService: DialogService): DialogRef<DeleteAccountComponent> {
+    return dialogService.open(DeleteAccountComponent);
+  }
+
   get secret() {
     return this.deleteForm.get("verification")?.value?.secret;
   }
 
-  async submit() {
+  submit = async () => {
-    try {
+    const verification = this.deleteForm.get("verification").value;
-      const verification = this.deleteForm.get("verification").value;
+    await this.accountApiService.deleteAccount(verification);
-      this.formPromise = this.accountApiService.deleteAccount(verification);
+    this.platformUtilsService.showToast(
-      await this.formPromise;
+      "success",
-      this.platformUtilsService.showToast(
+      this.i18nService.t("accountDeleted"),
-        "success",
+      this.i18nService.t("accountDeletedDesc"),
-        this.i18nService.t("accountDeleted"),
+    );
-        this.i18nService.t("accountDeletedDesc"),
+  };
-      );
-    } catch (e) {
-      this.logService.error(e);
-    }
-  }
 }