Revert "migrate weak passwords report component"

This reverts commit 0e453aafc1.

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

@@ -2,17 +2,26 @@
 
 <bit-container>
   <p>{{ "breachDesc" | i18n }}</p>
-  <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">
+  <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">
       {{ "checkBreaches" | i18n }}
     </button>
   </form>
-  <div class="mt-4" *ngIf="checkedUsername">
+  <div class="mt-4" *ngIf="!form.loading && 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,5 +1,4 @@
 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";
@@ -11,46 +10,32 @@ 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[] = [];
-  formGroup = this.formBuilder.group({
-    username: ["", { validators: [Validators.required, Validators.email], updateOn: "change" }],
-  });
+  formPromise: Promise<BreachAccountResponse[]>;
 
   constructor(
     private auditService: AuditService,
     private accountService: AccountService,
-    private formBuilder: FormBuilder,
   ) {}
 
   async ngOnInit() {
-    this.formGroup
-      .get("username")
-      .setValue(
-        await firstValueFrom(this.accountService.activeAccount$.pipe(map((a) => a?.email))),
+    this.username = await firstValueFrom(
+      this.accountService.activeAccount$.pipe(map((a) => a?.email)),
     );
   }
 
-  submit = async () => {
-    this.formGroup.markAsTouched();
-
-    if (this.formGroup.invalid) {
-      return;
-    }
-
+  async submit() {
     this.error = false;
-    this.loading = true;
-    const username = this.formGroup.value.username;
+    this.username = this.username.toLowerCase();
     try {
-      this.breachedAccounts = await this.auditService.breachedAccounts(username);
+      this.formPromise = this.auditService.breachedAccounts(this.username);
+      this.breachedAccounts = await this.formPromise;
     } catch {
       this.error = true;
-    } finally {
-      this.loading = false;
     }
-
-    this.checkedUsername = username;
-  };
+    this.checkedUsername = this.username;
+  }
 }