PM-4960 Migrate Verify Recover Delete Component (#9171)

* PM-4960 Migrate Verify Recover Delete Component

* PM-4960 Minor fix

* PM-4960 Addressed review comments

apps/web/src/app/auth/verify-recover-delete.component.html

@@ -1,34 +1,16 @@
-<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
+<form [bitSubmit]="submit" [formGroup]="formGroup">
-  <div class="row justify-content-md-center mt-5">
-    <div class="col-5">
-      <p class="lead text-center mb-4">{{ "deleteAccount" | i18n }}</p>
-      <div class="card">
-        <div class="card-body">
   <app-callout type="warning">{{ "deleteAccountWarning" | i18n }}</app-callout>
-          <p class="text-center">
+  <p bitTypography="body1" class="tw-text-center">
     <strong>{{ email }}</strong>
   </p>
-          <p>{{ "deleteRecoverConfirmDesc" | i18n }}</p>
+  <p bitTypography="body1">{{ "deleteRecoverConfirmDesc" | i18n }}</p>
   <hr />
-          <div class="d-flex">
+  <div class="tw-flex tw-gap-2">
-            <button
+    <button type="submit" bitButton bitFormButton buttonType="danger" [block]="true">
-              type="submit"
+      {{ "deleteAccount" | i18n }}
-              class="btn btn-danger btn-block btn-submit"
-              [disabled]="form.loading"
-            >
-              <span>{{ "deleteAccount" | i18n }}</span>
-              <i
-                class="bwi bwi-spinner bwi-spin"
-                title="{{ 'loading' | i18n }}"
-                aria-hidden="true"
-              ></i>
     </button>
-            <a routerLink="/login" class="btn btn-outline-secondary btn-block ml-2 mt-0">
+    <a bitButton buttonType="secondary" routerLink="/login" [block]="true">
       {{ "cancel" | i18n }}
     </a>
   </div>
-        </div>
-      </div>
-    </div>
-  </div>
 </form>

apps/web/src/app/auth/verify-recover-delete.component.ts

@@ -1,11 +1,11 @@
 import { Component, OnInit } from "@angular/core";
+import { FormGroup } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
 import { first } from "rxjs/operators";
 
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { VerifyDeleteRecoverRequest } from "@bitwarden/common/models/request/verify-delete-recover.request";
 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";
 
 @Component({
@@ -15,10 +15,10 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 // eslint-disable-next-line rxjs-angular/prefer-takeuntil
 export class VerifyRecoverDeleteComponent implements OnInit {
   email: string;
-  formPromise: Promise<any>;
 
   private userId: string;
   private token: string;
+  protected formGroup = new FormGroup({});
 
   constructor(
     private router: Router,
@@ -26,7 +26,6 @@ export class VerifyRecoverDeleteComponent implements OnInit {
     private platformUtilsService: PlatformUtilsService,
     private i18nService: I18nService,
     private route: ActivatedRoute,
-    private logService: LogService,
   ) {}
 
   ngOnInit() {
@@ -37,28 +36,19 @@ export class VerifyRecoverDeleteComponent implements OnInit {
         this.token = qParams.token;
         this.email = qParams.email;
       } else {
-        // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
+        await this.router.navigate(["/"]);
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        this.router.navigate(["/"]);
       }
     });
   }
 
-  async submit() {
+  submit = async () => {
-    try {
     const request = new VerifyDeleteRecoverRequest(this.userId, this.token);
-      this.formPromise = this.apiService.postAccountRecoverDeleteToken(request);
+    await this.apiService.postAccountRecoverDeleteToken(request);
-      await this.formPromise;
     this.platformUtilsService.showToast(
       "success",
       this.i18nService.t("accountDeleted"),
       this.i18nService.t("accountDeletedDesc"),
     );
-      // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
+    await this.router.navigate(["/"]);
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+  };
-      this.router.navigate(["/"]);
-    } catch (e) {
-      this.logService.error(e);
-    }
-  }
 }

apps/web/src/app/oss-routing.module.ts

@@ -136,12 +136,6 @@ const routes: Routes = [
         data: { titleId: "acceptFamilySponsorship", doNotSaveUrl: false } satisfies DataProperties,
       },
       { path: "recover", pathMatch: "full", redirectTo: "recover-2fa" },
-      {
-        path: "verify-recover-delete",
-        component: VerifyRecoverDeleteComponent,
-        canActivate: [UnauthGuard],
-        data: { titleId: "deleteAccount" } satisfies DataProperties,
-      },
       {
         path: "verify-recover-delete-org",
         component: VerifyRecoverDeleteOrgComponent,
@@ -330,6 +324,20 @@ const routes: Routes = [
           },
         ],
       },
+      {
+        path: "verify-recover-delete",
+        canActivate: [unauthGuardFn()],
+        children: [
+          {
+            path: "",
+            component: VerifyRecoverDeleteComponent,
+            data: {
+              pageTitle: "deleteAccount",
+              titleId: "deleteAccount",
+            } satisfies DataProperties & AnonLayoutWrapperData,
+          },
+        ],
+      },
       {
         path: "remove-password",
         component: RemovePasswordComponent,