Merge bc018381cb into b4c8bdf468

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

@@ -1,34 +1,18 @@
-<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
-  <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">
-            <strong>{{ email }}</strong>
-          </p>
-          <p>{{ "deleteRecoverConfirmDesc" | i18n }}</p>
-          <hr />
-          <div class="d-flex">
-            <button
-              type="submit"
-              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">
-              {{ "cancel" | i18n }}
-            </a>
-          </div>
-        </div>
-      </div>
+<form [bitSubmit]="submit" [formGroup]="formGroup">
+  <div class="tw-w-[400px]">
+    <app-callout type="warning">{{ "deleteAccountWarning" | i18n }}</app-callout>
+    <p bitTypography="body1" class="tw-text-center">
+      <strong>{{ email }}</strong>
+    </p>
+    <p bitTypography="body1">{{ "deleteRecoverConfirmDesc" | i18n }}</p>
+    <hr />
+    <div class="tw-flex tw-gap-2">
+      <button type="submit" bitButton bitFormButton buttonType="danger" [block]="true">
+        {{ "deleteAccount" | i18n }}
+      </button>
+      <a bitButton buttonType="secondary" routerLink="/login" [block]="true">
+        {{ "cancel" | i18n }}
+      </a>
     </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.
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        this.router.navigate(["/"]);
+        await this.router.navigate(["/"]);
       }
     });
   }
 
-  async submit() {
-    try {
-      const request = new VerifyDeleteRecoverRequest(this.userId, this.token);
-      this.formPromise = 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.
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      this.router.navigate(["/"]);
-    } catch (e) {
-      this.logService.error(e);
-    }
-  }
+  submit = async () => {
+    const request = new VerifyDeleteRecoverRequest(this.userId, this.token);
+    await this.apiService.postAccountRecoverDeleteToken(request);
+    this.platformUtilsService.showToast(
+      "success",
+      this.i18nService.t("accountDeleted"),
+      this.i18nService.t("accountDeletedDesc"),
+    );
+    await this.router.navigate(["/"]);
+  };
 }

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

@@ -17,6 +17,7 @@ import { VerifyRecoverDeleteProviderComponent } from "./admin-console/providers/
 import { CreateOrganizationComponent } from "./admin-console/settings/create-organization.component";
 import { SponsoredFamiliesComponent } from "./admin-console/settings/sponsored-families.component";
 import { AcceptOrganizationComponent } from "./auth/accept-organization.component";
+import { AnonLayoutWrapperComponent } from "./auth/anon-layout-wrapper.component";
 import { deepLinkGuard } from "./auth/guards/deep-link.guard";
 import { HintComponent } from "./auth/hint.component";
 import { LockComponent } from "./auth/lock.component";
@@ -151,12 +152,6 @@ const routes: Routes = [
         canActivate: [UnauthGuard],
         data: { titleId: "deleteAccount" },
       },
-      {
-        path: "verify-recover-delete",
-        component: VerifyRecoverDeleteComponent,
-        canActivate: [UnauthGuard],
-        data: { titleId: "deleteAccount" },
-      },
       {
         path: "verify-recover-delete-provider",
         component: VerifyRecoverDeleteProviderComponent,
@@ -295,6 +290,20 @@ const routes: Routes = [
     loadChildren: () =>
       import("./admin-console/organizations/organization.module").then((m) => m.OrganizationModule),
   },
+  {
+    path: "",
+    component: AnonLayoutWrapperComponent,
+    children: [
+      {
+        path: "verify-recover-delete",
+        component: VerifyRecoverDeleteComponent,
+        canActivate: [UnauthGuard],
+        data: {
+          pageTitle: "deleteAccount",
+        },
+      },
+    ],
+  },
 ];
 
 @NgModule({