changed breach report to allow username entry

src/app/tools/breach-report.component.html

@@ -2,15 +2,27 @@
     <h1>{{'dataBreachReport' | i18n}}</h1>
 </div>
 <p>{{'breachDesc' | i18n}}</p>
-<i class="fa fa-spinner fa-spin text-muted" *ngIf="loading"></i>
-<ng-container *ngIf="!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 appBlurClick type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+        <i class="fa fa-spinner fa-spin"></i>
+        <span>{{'checkBreaches' | i18n}}</span>
+    </button>
+</form>
+<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">
-            {{'breachEmailNotFound' | i18n : email}}
+            {{'breachUsernameNotFound' | i18n : checkedUsername}}
         </app-callout>
         <app-callout type="danger" title="{{'breachFound' | i18n}}" *ngIf="breachedAccounts.length">
-            {{'breachEmailFound' | i18n : email : breachedAccounts.length}}
+            {{'breachUsernameFound' | i18n : checkedUsername : breachedAccounts.length}}
         </app-callout>
         <ul class="list-group list-group-breach" *ngIf="breachedAccounts.length">
             <li *ngFor="let a of breachedAccounts" class="list-group-item d-flex align-items-center">
@@ -42,4 +54,4 @@
             </li>
         </ul>
     </ng-container>
-</ng-container>
+</div>

src/app/tools/breach-report.component.ts

@@ -12,21 +12,27 @@ import { BreachAccountResponse } from 'jslib/models/response/breachAccountRespon
     templateUrl: 'breach-report.component.html',
 })
 export class BreachReportComponent implements OnInit {
-    loading = true;
     error = false;
-    email: string;
+    username: string;
+    checkedUsername: string;
     breachedAccounts: BreachAccountResponse[] = [];
+    formPromise: Promise<BreachAccountResponse[]>;
 
     constructor(private auditService: AuditService, private userService: UserService) { }
 
     async ngOnInit() {
-        this.loading = true;
+        this.username = await this.userService.getEmail();
+    }
+
+    async submit() {
+        this.error = false;
+        this.username = this.username.toLowerCase();
         try {
-            this.email = await this.userService.getEmail();
-            this.breachedAccounts = await this.auditService.breachedAccounts(this.email);
+            this.formPromise = this.auditService.breachedAccounts(this.username);
+            this.breachedAccounts = await this.formPromise;
         } catch {
             this.error = true;
         }
-        this.loading = false;
+        this.checkedUsername = this.username;
     }
 }

src/locales/en/messages.json

@@ -1148,10 +1148,16 @@
   "breachDesc": {
     "message": "A \"breach\" is an incident where a site's data has been illegally accessed by hackers and then released publicly. Review the types of data that were compromised (email addresses, passwords, credit cards etc.) and take appropriate action, such as changing passwords."
   },
-  "breachEmailNotFound": {
-    "message": "Your email ($EMAIL$) was not found in any known data breaches.",
+  "breachCheckUsernameEmail": {
+    "message": "Check any usernames or email addresses that you use."
+  },
+  "checkBreaches": {
+    "message": "Check Breaches"
+  },
+  "breachUsernameNotFound": {
+    "message": "$USERNAME$ was not found in any known data breaches.",
     "placeholders": {
-      "email": {
+      "username": {
         "content": "$1",
         "example": "user@example.com"
       }
@@ -1161,10 +1167,10 @@
     "message": "Good News",
     "description": "ex. Good News, No Breached Accounts Found!"
   },
-  "breachEmailFound": {
-    "message": "Your email ($EMAIL$) was found in $COUNT$ different data breaches online.",
+  "breachUsernameFound": {
+    "message": "$USERNAME$ was found in $COUNT$ different data breaches online.",
     "placeholders": {
-      "email": {
+      "username": {
         "content": "$1",
         "example": "user@example.com"
       },