data breach report

This commit is contained in:
Kyle Spearrin 2018-06-28 11:58:33 -04:00
parent 0ec9045849
commit ce96a32af3
7 changed files with 148 additions and 3 deletions

2
jslib

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

View File

@ -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] },
],
},
],

View File

@ -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,

View File

@ -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>

View File

@ -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;
}
}

View File

@ -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>

View File

@ -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"
}
}