PM-1943 Migrate Recover Delete Component (#9169)

* PM-1943 Migrate Recover Delete Component

* PM-1943 Anon layout changes done

* PM-1943 - await navigate

* PM-1943 - Add new anon layout wrapper env selector.

---------

Co-authored-by: Jared Snider <jsnider@bitwarden.com>

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

@@ -1,44 +1,16 @@
-<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
+<form [formGroup]="recoverDeleteForm" [bitSubmit]="submit">
-  <div class="row justify-content-md-center mt-5">
+  <p bitTypography="body1">{{ "deleteRecoverDesc" | i18n }}</p>
-    <div class="col-5">
+  <bit-form-field>
-      <p class="lead text-center mb-4">{{ "deleteAccount" | i18n }}</p>
+    <bit-label>{{ "emailAddress" | i18n }}</bit-label>
-      <div class="card">
+    <input bitInput appAutofocus appInputVerbatim="false" type="email" formControlName="email" />
-        <div class="card-body">
+  </bit-form-field>
-          <p>{{ "deleteRecoverDesc" | i18n }}</p>
+  <hr />
-          <div class="form-group">
+  <div class="tw-flex tw-gap-2">
-            <label for="email">{{ "emailAddress" | i18n }}</label>
+    <button type="submit" bitButton bitFormButton buttonType="primary" [block]="true">
-            <input
+      {{ "submit" | i18n }}
-              id="email"
+    </button>
-              class="form-control"
+    <a bitButton buttonType="secondary" routerLink="/login" [block]="true">
-              type="text"
+      {{ "cancel" | i18n }}
-              name="Email"
+    </a>
-              [(ngModel)]="email"
-              required
-              appAutofocus
-              inputmode="email"
-              appInputVerbatim="false"
-            />
-          </div>
-          <hr />
-          <div class="d-flex">
-            <button
-              type="submit"
-              class="btn btn-primary btn-block btn-submit"
-              [disabled]="form.loading"
-            >
-              <span>{{ "submit" | 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>
-    </div>
   </div>
 </form>

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

@@ -1,10 +1,10 @@
 import { Component } from "@angular/core";
+import { FormControl, FormGroup, Validators } from "@angular/forms";
 import { Router } from "@angular/router";
 
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { DeleteRecoverRequest } from "@bitwarden/common/models/request/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({
@@ -12,33 +12,27 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
   templateUrl: "recover-delete.component.html",
 })
 export class RecoverDeleteComponent {
-  email: string;
+  protected recoverDeleteForm = new FormGroup({
-  formPromise: Promise<any>;
+    email: new FormControl(null, [Validators.required]),
+  });
 
   constructor(
     private router: Router,
     private apiService: ApiService,
     private platformUtilsService: PlatformUtilsService,
     private i18nService: I18nService,
-    private logService: LogService,
   ) {}
 
-  async submit() {
+  submit = async () => {
-    try {
+    const request = new DeleteRecoverRequest();
-      const request = new DeleteRecoverRequest();
+    request.email = this.recoverDeleteForm.value.email.trim().toLowerCase();
-      request.email = this.email.trim().toLowerCase();
+    await this.apiService.postAccountRecoverDelete(request);
-      this.formPromise = this.apiService.postAccountRecoverDelete(request);
+    this.platformUtilsService.showToast(
-      await this.formPromise;
+      "success",
-      this.platformUtilsService.showToast(
+      null,
-        "success",
+      this.i18nService.t("deleteRecoverEmailSent"),
-        null,
+    );
-        this.i18nService.t("deleteRecoverEmailSent"),
+
-      );
+    await this.router.navigate(["/"]);
-      // 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);
-    }
-  }
 }

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

@@ -134,12 +134,6 @@ const routes: Routes = [
         data: { titleId: "acceptFamilySponsorship", doNotSaveUrl: false } satisfies DataProperties,
       },
       { path: "recover", pathMatch: "full", redirectTo: "recover-2fa" },
-      {
-        path: "recover-delete",
-        component: RecoverDeleteComponent,
-        canActivate: [UnauthGuard],
-        data: { titleId: "deleteAccount" } satisfies DataProperties,
-      },
       {
         path: "verify-recover-delete",
         component: VerifyRecoverDeleteComponent,
@@ -231,6 +225,20 @@ const routes: Routes = [
                 (mod) => mod.AcceptEmergencyComponent,
               ),
           },
+        ],
+      },
+      {
+        path: "recover-delete",
+        canActivate: [unauthGuardFn()],
+        children: [
+          {
+            path: "",
+            component: RecoverDeleteComponent,
+            data: {
+              pageTitle: "deleteAccount",
+              titleId: "deleteAccount",
+            } satisfies DataProperties & AnonLayoutWrapperData,
+          },
           {
             path: "",
             component: EnvironmentSelectorComponent,