data breach report

jslib

@@ -1 +1 @@
-Subproject commit 569ad25208d63928c604fdcda8ed1899c183495a
+Subproject commit a097ef9beabe7da67c4c338e85a15bf3ad02a7f1

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>

src/locales/en/messages.json

@@ -1132,5 +1132,61 @@
   "printCode": {
     "message": "Print Code",
     "description": "Print 2FA recovery code"
+  },
+  "reports": {
+    "message": "Reports"
+  },
+  "dataBreachReport": {
+    "message": "Data Breach Report"
+  },
+  "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.",
+    "placeholders": {
+      "email": {
+        "content": "$1",
+        "example": "user@example.com"
+      }
+    }
+  },
+  "goodNews": {
+    "message": "Good News",
+    "description": "ex. Good News, No Breached Accounts Found!"
+  },
+  "breachEmailFound": {
+    "message": "Your email ($EMAIL$) was found in $COUNT$ different data breaches online.",
+    "placeholders": {
+      "email": {
+        "content": "$1",
+        "example": "user@example.com"
+      },
+      "count": {
+        "content": "$2",
+        "example": "7"
+      }
+    }
+  },
+  "breachFound": {
+    "message": "Breached Accounts Found"
+  },
+  "compromisedData": {
+    "message": "Compromised data"
+  },
+  "website": {
+    "message": "Website"
+  },
+  "affectedUsers": {
+    "message": "Affected Users"
+  },
+  "breachOccurred": {
+    "message": "Breach Occurred"
+  },
+  "breachReported": {
+    "message": "Breach Reported"
+  },
+  "reportError": {
+    "message": "An error occurred trying to load the report. Try again"
   }
 }