data breach report. resolves #53
This commit is contained in:
Kyle Spearrin
parent
0aab548b87
commit
1e3a39defc
|
|
@ -130,6 +130,10 @@ gulp.task('lib', ['clean:lib'], function () {
|
|||
src: paths.npmDir + 'angular-resource/*resource*.js',
|
||||
dest: paths.libDir + 'angular-resource'
|
||||
},
|
||||
{
|
||||
src: paths.npmDir + 'angular-sanitize/*sanitize*.js',
|
||||
dest: paths.libDir + 'angular-sanitize'
|
||||
},
|
||||
{
|
||||
src: [paths.npmDir + 'angular-toastr/dist/**/*.css', paths.npmDir + 'angular-toastr/dist/**/*.js'],
|
||||
dest: paths.libDir + 'angular-toastr'
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
"bootstrap": "3.3.7",
|
||||
"angular": "1.6.3",
|
||||
"angular-resource": "1.6.3",
|
||||
"angular-sanitize": "1.6.3",
|
||||
"angular-ui-bootstrap": "2.5.0",
|
||||
"angular-ui-router": "0.4.2",
|
||||
"angular-jwt": "0.1.9",
|
||||
|
|
|
|||
|
|
@ -112,6 +112,12 @@ angular
|
|||
controller: 'toolsController',
|
||||
data: { pageTitle: 'Tools' }
|
||||
})
|
||||
.state('backend.user.toolsReportBreach', {
|
||||
url: '^/reports/breach',
|
||||
templateUrl: 'app/tools/views/toolsReportBreach.html',
|
||||
controller: 'toolsReportBreachController',
|
||||
data: { pageTitle: 'Data Breach Report' }
|
||||
})
|
||||
.state('backend.user.apps', {
|
||||
url: '^/apps',
|
||||
templateUrl: 'app/views/apps.html',
|
||||
|
|
|
|||
|
|
@ -131,6 +131,10 @@
|
|||
}
|
||||
});
|
||||
|
||||
_service.hibp = $resource('https://haveibeenpwned.com/api/v2/breachedaccount/:email', {}, {
|
||||
get: { method: 'GET', params: { email: '@email' }, isArray: true},
|
||||
});
|
||||
|
||||
function transformUrlEncoded(data) {
|
||||
return $httpParamSerializer(data);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
angular
|
||||
.module('bit.tools', ['ui.bootstrap', 'toastr']);
|
||||
.module('bit.tools', ['ui.bootstrap', 'toastr', 'ngSanitize']);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
angular
|
||||
.module('bit.tools')
|
||||
|
||||
.controller('toolsReportBreachController', function ($scope, apiService, toastr, authService) {
|
||||
$scope.loading = true;
|
||||
$scope.error = false;
|
||||
$scope.breachAccounts = [];
|
||||
$scope.email = null;
|
||||
|
||||
$scope.$on('$viewContentLoaded', function () {
|
||||
authService.getUserProfile().then(function (userProfile) {
|
||||
$scope.email = userProfile.email;
|
||||
return apiService.hibp.get({ email: $scope.email }).$promise;
|
||||
}).then(function (response) {
|
||||
var breachAccounts = [];
|
||||
for (var i = 0; i < response.length; i++) {
|
||||
var breach = {
|
||||
id: response[i].Name,
|
||||
title: response[i].Title,
|
||||
domain: response[i].Domain,
|
||||
date: new Date(response[i].BreachDate),
|
||||
reportedDate: new Date(response[i].AddedDate),
|
||||
modifiedDate: new Date(response[i].ModifiedDate),
|
||||
count: response[i].PwnCount,
|
||||
description: response[i].Description,
|
||||
classes: response[i].DataClasses,
|
||||
image: 'https://haveibeenpwned.com/Content/Images/PwnedLogos/' + response[i].Name + '.' + response[i].LogoType
|
||||
};
|
||||
breachAccounts.push(breach);
|
||||
}
|
||||
$scope.breachAccounts = breachAccounts;
|
||||
$scope.loading = false;
|
||||
}, function (response) {
|
||||
$scope.error = response.status !== 404;
|
||||
$scope.loading = false;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<section class="content-header">
|
||||
<h1>
|
||||
Reports: Data Breach
|
||||
<small>have you been pwned?</small>
|
||||
</h1>
|
||||
</section>
|
||||
<section class="content">
|
||||
<div ng-show="loading && !breachAccounts.length">
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
<div ng-show="!loading && error">
|
||||
<p>An error occurred trying to load the report. Try again...</p>
|
||||
</div>
|
||||
<div class="callout callout-danger" ng-show="!error && !loading && breachAccounts.length">
|
||||
<h4><i class="fa fa-frown-o"></i> Oh No, Data Breaches Found!</h4>
|
||||
<p>
|
||||
Your email ({{email}}) was found in {{breachAccounts.length}}
|
||||
<span ng-if="breachAccounts.length > 1">different</span> data
|
||||
<span ng-pluralize count="breachAccounts.length" when="{'1': 'breach', 'other': 'breaches'}"></span>
|
||||
online.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<a href="https://haveibeenpwned.com" rel="noopener" target="_blank" class="btn btn-default btn-flat">Check another email</a>
|
||||
</div>
|
||||
<div class="callout callout-success" ng-show="!error && !loading && !breachAccounts.length">
|
||||
<h4><i class="fa fa-smile-o"></i> Good News, Nothing Found!</h4>
|
||||
<p>Your email ({{email}}) was not found in any known data breaches.</p>
|
||||
<a href="https://haveibeenpwned.com" rel="noopener" target="_blank" class="btn btn-default btn-flat">Check another email</a>
|
||||
</div>
|
||||
<div class="box box-danger" ng-repeat="breach in breachAccounts track by breach.id">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">{{breach.title}}</h3>
|
||||
</div>
|
||||
<div class="box-body box-breach">
|
||||
<div class="row">
|
||||
<div class="col-sm-2">
|
||||
<img ng-src="{{breach.image}}" alt="{{breach.id}} logo" class="img-responsive" />
|
||||
</div>
|
||||
<div class="col-sm-10">
|
||||
<div class="row">
|
||||
<div class="col-sm-8">
|
||||
<p ng-bind-html="breach.description"></p>
|
||||
<h5><b>Compromised Data</b></h5>
|
||||
<ul>
|
||||
<li ng-repeat="class in breach.classes">{{class}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<dl>
|
||||
<dt><span class="hidden-sm">Website</dt>
|
||||
<dd>{{breach.domain}}</dd>
|
||||
<dt><span class="hidden-sm">Affected </span>Users</dt>
|
||||
<dd>{{breach.count | number: 0}}</dd>
|
||||
<dt><span class="hidden-sm">Breach </span>Occurred</dt>
|
||||
<dd>{{breach.date | date: format: mediumDate}}</dd>
|
||||
<dt><span class="hidden-sm">Breach </span>Reported</dt>
|
||||
<dd>{{breach.reportedDate | date: format: mediumDate}}</dd>
|
||||
<dt><span class="hidden-sm">Information </span>Updated</dt>
|
||||
<dd>{{breach.modifiedDate | date: format: mediumDate}}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
This data is brought to you as a service from
|
||||
<b><a href="https://haveibeenpwned.com/" target="_blank" rel="noopener">Have I been pwned?</a></b>.
|
||||
Please check out their wonderful services and subscribe to receive notifications about future data breaches.
|
||||
</p>
|
||||
</section>
|
||||
|
|
@ -61,8 +61,15 @@
|
|||
<i class="fa fa-share-alt fa-fw"></i> <span>Shared</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="treeview" ng-class="{active: $state.is('backend.user.tools')}">
|
||||
<li class="treeview" ng-class="{active: $state.includes('backend.user.tools')}">
|
||||
<a ui-sref="backend.user.tools"><i class="fa fa-wrench fa-fw"></i> <span>Tools</span></a>
|
||||
<ul class="treeview-menu" ng-class="{'menu-open': $state.includes('backend.user.tools')}">
|
||||
<li ng-class="{active: $state.is('backend.user.toolsReportBreach')}">
|
||||
<a ui-sref="backend.user.toolsReportBreach">
|
||||
<i class="fa fa-circle-o fa-fw"></i> Data Breach Report
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="treeview"
|
||||
ng-class="{active: $state.is('backend.user.settings') || $state.is('backend.user.settingsDomains') ||
|
||||
|
|
|
|||
|
|
@ -62,6 +62,7 @@
|
|||
|
||||
<script src="lib/angular/angular.js"></script>
|
||||
<script src="lib/angular-cookies/angular-cookies.js"></script>
|
||||
<script src="lib/angular-sanitize/angular-sanitize.js"></script>
|
||||
<script src="lib/angular-messages/angular-messages.js"></script>
|
||||
<script src="lib/angular-jwt/angular-jwt.js"></script>
|
||||
<script src="lib/angular-resource/angular-resource.js"></script>
|
||||
|
|
@ -169,6 +170,7 @@
|
|||
<script src="app/tools/toolsController.js"></script>
|
||||
<script src="app/tools/toolsImportController.js"></script>
|
||||
<script src="app/tools/toolsExportController.js"></script>
|
||||
<script src="app/tools/toolsReportBreachController.js"></script>
|
||||
<!-- @endexclude -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -341,6 +341,19 @@ form .btn .loading-icon {
|
|||
}
|
||||
}
|
||||
|
||||
.box-breach {
|
||||
img {
|
||||
max-height: 200px;
|
||||
margin-bottom: 20px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
@media (min-width: @screen-sm) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Toastr */
|
||||
|
||||
#toast-container {
|
||||
|
|
|
|||
Loading…
Reference in New Issue