migrate weak passwords report component

apps/web/src/app/tools/reports/pages/breach-report.component.html

@@ -2,26 +2,17 @@
 
 <bit-container>
   <p>{{ "breachDesc" | i18n }}</p>
-  <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
-    <div class="row">
-      <div class="form-group col-6">
-        <label for="username">{{ "username" | i18n }}</label>
-        <input
-          id="username"
-          type="text"
-          name="Username"
-          class="form-control"
-          [(ngModel)]="username"
-          required
-        />
-        <small class="form-text text-muted">{{ "breachCheckUsernameEmail" | i18n }}</small>
-      </div>
-    </div>
-    <button type="submit" buttonType="primary" bitButton [loading]="form.loading">
+  <form [bitSubmit]="submit" [formGroup]="formGroup">
+    <bit-form-field class="tw-w-1/2">
+      <bit-label>{{ "username" | i18n }}</bit-label>
+      <input id="username" type="email" formControlName="username" bitInput />
+    </bit-form-field>
+    <small class="form-text text-muted tw-mb-1">{{ "breachCheckUsernameEmail" | i18n }}</small>
+    <button type="submit" buttonType="primary" bitButton [loading]="loading">
       {{ "checkBreaches" | i18n }}
     </button>
   </form>
-  <div class="mt-4" *ngIf="!form.loading && checkedUsername">
+  <div class="mt-4" *ngIf="checkedUsername">
     <p *ngIf="error">{{ "reportError" | i18n }}...</p>
     <ng-container *ngIf="!error">
       <app-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!breachedAccounts.length">

apps/web/src/app/tools/reports/pages/breach-report.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from "@angular/core";
+import { FormBuilder, Validators } from "@angular/forms";
 import { firstValueFrom, map } from "rxjs";
 
 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
@@ -10,32 +11,46 @@ import { BreachAccountResponse } from "@bitwarden/common/models/response/breach-
   templateUrl: "breach-report.component.html",
 })
 export class BreachReportComponent implements OnInit {
+  loading = false;
   error = false;
-  username: string;
   checkedUsername: string;
   breachedAccounts: BreachAccountResponse[] = [];
-  formPromise: Promise<BreachAccountResponse[]>;
+  formGroup = this.formBuilder.group({
+    username: ["", { validators: [Validators.required, Validators.email], updateOn: "change" }],
+  });
 
   constructor(
     private auditService: AuditService,
     private accountService: AccountService,
+    private formBuilder: FormBuilder,
   ) {}
 
   async ngOnInit() {
-    this.username = await firstValueFrom(
-      this.accountService.activeAccount$.pipe(map((a) => a?.email)),
-    );
+    this.formGroup
+      .get("username")
+      .setValue(
+        await firstValueFrom(this.accountService.activeAccount$.pipe(map((a) => a?.email))),
+      );
   }
 
-  async submit() {
+  submit = async () => {
+    this.formGroup.markAsTouched();
+
+    if (this.formGroup.invalid) {
+      return;
+    }
+
     this.error = false;
-    this.username = this.username.toLowerCase();
+    this.loading = true;
+    const username = this.formGroup.value.username;
     try {
-      this.formPromise = this.auditService.breachedAccounts(this.username);
-      this.breachedAccounts = await this.formPromise;
+      this.breachedAccounts = await this.auditService.breachedAccounts(username);
     } catch {
       this.error = true;
+    } finally {
+      this.loading = false;
     }
-    this.checkedUsername = this.username;
-  }
+
+    this.checkedUsername = username;
+  };
 }