data breach report

src/app/app-routing.module.ts

@@ -20,6 +20,7 @@ import { OptionsComponent } from './settings/options.component';
 import { SettingsComponent } from './settings/settings.component';
 import { TwoFactorSetupComponent } from './settings/two-factor-setup.component';
 
+import { BreachReportComponent } from './tools/breach-report.component';
 import { ExportComponent } from './tools/export.component';
 import { ImportComponent } from './tools/import.component';
 import { PasswordGeneratorComponent } from './tools/password-generator.component';
@@ -67,6 +68,7 @@ const routes: Routes = [
                     { path: 'import', component: ImportComponent, canActivate: [AuthGuardService] },
                     { path: 'export', component: ExportComponent, canActivate: [AuthGuardService] },
                     { path: 'generator', component: PasswordGeneratorComponent, canActivate: [AuthGuardService] },
+                    { path: 'breach-report', component: BreachReportComponent, canActivate: [AuthGuardService] },
                 ],
             },
         ],

src/app/app.module.ts

@@ -51,6 +51,7 @@ import { TwoFactorU2fComponent } from './settings/two-factor-u2f.component';
 import { TwoFactorVerifyComponent } from './settings/two-factor-verify.component';
 import { TwoFactorYubiKeyComponent } from './settings/two-factor-yubikey.component';
 
+import { BreachReportComponent } from './tools/breach-report.component';
 import { ExportComponent } from './tools/export.component';
 import { ImportComponent } from './tools/import.component';
 import { PasswordGeneratorHistoryComponent } from './tools/password-generator-history.component';
@@ -109,6 +110,7 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe';
         AvatarComponent,
         BlurClickDirective,
         BoxRowDirective,
+        BreachReportComponent,
         BulkDeleteComponent,
         BulkMoveComponent,
         BulkShareComponent,

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

@@ -0,0 +1,45 @@
+<div class="page-header">
+    <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">
+    <p *ngIf="error">{{'reportError' | i18n}}...</p>
+    <ng-container *ngIf="!error">
+        <app-callout type="success" title="{{'goodNews' | i18n}}" *ngIf="!breachedAccounts.length">
+            {{'breachEmailNotFound' | i18n : email}}
+        </app-callout>
+        <app-callout type="danger" title="{{'breachFound' | i18n}}" *ngIf="breachedAccounts.length">
+            {{'breachEmailFound' | i18n : email : 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">
+                <div class="row">
+                    <div class="col-2 text-center">
+                        <img [src]="'https://haveibeenpwned.com/Content/Images/PwnedLogos/' + a.name + '.' + a.logoType" alt="" class="img-fluid">
+                    </div>
+                    <div class="col-7">
+                        <h3>{{a.title}}</h3>
+                        <p [innerHTML]="a.description"></p>
+                        <p class="mb-1">{{'compromisedData' | i18n}}:</p>
+                        <ul>
+                            <li *ngFor="let d of a.dataClasses">{{d}}</li>
+                        </ul>
+                    </div>
+                    <div class="col-3">
+                        <dl>
+                            <dt>{{'website' | i18n}}</dt>
+                            <dd>{{a.domain}}</dd>
+                            <dt>{{'affectedUsers' | i18n}}</dt>
+                            <dd>{{a.pwnCount | number}}</dd>
+                            <dt>{{'breachOccurred' | i18n}}</dt>
+                            <dd>{{a.breachDate | date: 'mediumDate'}}</dd>
+                            <dt>{{'breachReported' | i18n}}</dt>
+                            <dd>{{a.addedDate | date: 'mediumDate'}}</dd>
+                        </dl>
+                    </div>
+                </div>
+            </li>
+        </ul>
+    </ng-container>
+</ng-container>

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

@@ -0,0 +1,32 @@
+import {
+    Component,
+    OnInit,
+} from '@angular/core';
+
+import { AuditService } from 'jslib/abstractions/audit.service';
+import { UserService } from 'jslib/abstractions/user.service';
+import { BreachAccountResponse } from 'jslib/models/response/breachAccountResponse';
+
+@Component({
+    selector: 'app-breach-report',
+    templateUrl: 'breach-report.component.html',
+})
+export class BreachReportComponent implements OnInit {
+    loading = true;
+    error = false;
+    email: string;
+    breachedAccounts: BreachAccountResponse[] = [];
+
+    constructor(private auditService: AuditService, private userService: UserService) { }
+
+    async ngOnInit() {
+        this.loading = true;
+        try {
+            this.email = await this.userService.getEmail();
+            this.breachedAccounts = await this.auditService.breachedAccounts(this.email);
+        } catch {
+            this.error = true;
+        }
+        this.loading = false;
+    }
+}

src/app/tools/tools.component.html

@@ -1,20 +1,28 @@
 <div class="container page-content">
     <div class="row">
         <div class="col-3">
-            <div class="card">
+            <div class="card mb-4">
                 <div class="card-header">{{'tools' | i18n}}</div>
                 <div class="list-group list-group-flush">
                     <a routerLink="generator" class="list-group-item" routerLinkActive="active">
                         {{'passwordGenerator' | i18n}}
                     </a>
                     <a routerLink="import" class="list-group-item" routerLinkActive="active">
-                        Import
+                        {{'import' | i18n}}
                     </a>
                     <a routerLink="export" class="list-group-item" routerLinkActive="active">
                         {{'exportVault' | i18n}}
                     </a>
                 </div>
             </div>
+            <div class="card">
+                <div class="card-header">{{'reports' | i18n}}</div>
+                <div class="list-group list-group-flush">
+                    <a routerLink="breach-report" class="list-group-item" routerLinkActive="active">
+                        {{'dataBreachReport' | i18n}}
+                    </a>
+                </div>
+            </div>
         </div>
         <div class="col-9">
             <router-outlet></router-outlet>