PM-4950 Migrate Hint Component (#9303)

* PM-4950 Migrate Hint Component

* PM-4950 Updated Anon layout changes

* PM-4950 Addressed review comments

* PM-4950 - Tweak form control + add comment.

* PM-4950 - Address PR feedback

* PM-4950 - Move canActivate up a level.

* PM-4950 - Consolidate route under AnonLayoutWrapperComponent path from merging in main.

---------

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

apps/web/src/app/auth/hint.component.html

@@ -1,44 +1,23 @@
-<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">{{ "passwordHint" | i18n }}</p>
-      <div class="card d-block">
-        <div class="card-body">
-          <div class="form-group">
-            <label for="email">{{ "emailAddress" | i18n }}</label>
-            <input
-              id="email"
-              class="form-control"
-              type="text"
-              name="Email"
-              [(ngModel)]="email"
-              required
-              appAutofocus
-              inputmode="email"
-              appInputVerbatim="false"
-            />
-            <small class="form-text text-muted">{{ "enterEmailToGetHint" | i18n }}</small>
-          </div>
-          <hr />
-          <div class="d-flex">
-            <button
-              type="submit"
-              class="btn btn-primary btn-block btn-submit"
-              [disabled]="form.loading"
-            >
-              <span [hidden]="form.loading">{{ "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>
+<form [bitSubmit]="submit" [formGroup]="formGroup">
+  <bit-form-field>
+    <bit-label>{{ "emailAddress" | i18n }}</bit-label>
+    <input
+      bitInput
+      appAutofocus
+      inputmode="email"
+      appInputVerbatim="false"
+      type="email"
+      formControlName="email"
+    />
+    <bit-hint>{{ "enterEmailToGetHint" | i18n }}</bit-hint>
+  </bit-form-field>
+  <hr />
+  <div class="tw-flex tw-gap-2">
+    <button type="submit" bitButton bitFormButton buttonType="primary" [block]="true">
+      {{ "submit" | i18n }}
+    </button>
+    <a bitButton buttonType="secondary" routerLink="/login" [block]="true">
+      {{ "cancel" | i18n }}
+    </a>
   </div>
 </form>

apps/web/src/app/auth/hint.component.ts

@@ -1,4 +1,5 @@
 import { Component } from "@angular/core";
+import { FormBuilder, Validators } from "@angular/forms";
 import { Router } from "@angular/router";
 
 import { HintComponent as BaseHintComponent } from "@bitwarden/angular/auth/components/hint.component";
@@ -13,6 +14,14 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
   templateUrl: "hint.component.html",
 })
 export class HintComponent extends BaseHintComponent {
+  formGroup = this.formBuilder.group({
+    email: ["", [Validators.email, Validators.required]],
+  });
+
+  get emailFormControl() {
+    return this.formGroup.controls.email;
+  }
+
   constructor(
     router: Router,
     i18nService: I18nService,
@@ -20,7 +29,24 @@ export class HintComponent extends BaseHintComponent {
     platformUtilsService: PlatformUtilsService,
     logService: LogService,
     loginEmailService: LoginEmailServiceAbstraction,
+    private formBuilder: FormBuilder,
   ) {
     super(router, i18nService, apiService, platformUtilsService, logService, loginEmailService);
   }
+
+  ngOnInit(): void {
+    super.ngOnInit();
+    this.emailFormControl.setValue(this.email);
+  }
+
+  // Wrapper method to call super.submit() since properties (e.g., submit) cannot use super directly
+  // This is because properties are assigned per type and generally don't have access to the prototype
+  async superSubmit() {
+    await super.submit();
+  }
+
+  submit = async () => {
+    this.email = this.emailFormControl.value;
+    await this.superSubmit();
+  };
 }

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

@@ -111,12 +111,6 @@ const routes: Routes = [
         component: SetPasswordComponent,
         data: { titleId: "setMasterPassword" } satisfies DataProperties,
       },
-      {
-        path: "hint",
-        component: HintComponent,
-        canActivate: [UnauthGuard],
-        data: { titleId: "passwordHint" } satisfies DataProperties,
-      },
       {
         path: "lock",
         component: LockComponent,
@@ -338,6 +332,25 @@ const routes: Routes = [
           },
         ],
       },
+      {
+        path: "hint",
+        canActivate: [unauthGuardFn()],
+        children: [
+          {
+            path: "",
+            component: HintComponent,
+            data: {
+              pageTitle: "passwordHint",
+              titleId: "passwordHint",
+            } satisfies DataProperties & AnonLayoutWrapperData,
+          },
+          {
+            path: "",
+            component: EnvironmentSelectorComponent,
+            outlet: "environment-selector",
+          },
+        ],
+      },
       {
         path: "remove-password",
         component: RemovePasswordComponent,