[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/auth/delete-account.component.html

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