data breach report. resolves #53

gulpfile.js

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

package.json

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

src/app/config.js

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

src/app/services/apiService.js

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

src/app/tools/toolsModule.js

@@ -1,2 +1,2 @@
 angular
-    .module('bit.tools', ['ui.bootstrap', 'toastr']);
+    .module('bit.tools', ['ui.bootstrap', 'toastr', 'ngSanitize']);

src/app/tools/toolsReportBreachController.js

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

src/app/tools/views/toolsReportBreach.html

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

src/app/views/userLayout.html

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

src/index.html

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

src/less/vault.less

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