Update 2017-05-25T22:30:02.911Z

app/reports/views/reportsBreach.html

@@ -0,0 +1,74 @@
+<section class="content-header">
+    <h1>
+        Data Breach Report
+        <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>
+    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.
+</section>

app/views/userLayout.html

@@ -61,8 +61,17 @@
                     <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.is('backend.user.tools') || 
+                $state.is('backend.user.reportsBreach')}">
                 <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.is('backend.user.tools') || 
+                    $state.is('backend.user.reportsBreach')}">
+                    <li ng-class="{active: $state.is('backend.user.reportsBreach')}">
+                        <a ui-sref="backend.user.reportsBreach">
+                            <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') ||

index.html

@@ -10,28 +10,28 @@
     <script src="https://js.stripe.com/v2/"></script>
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
     <meta name="x-stylesheet-test-bs" content="" class="invisible" />
-    <script>!function(a,b,c){var d,e=document,f=e.getElementsByTagName('SCRIPT'),g=f[f.length-1].previousElementSibling,h=e.defaultView&&e.defaultView.getComputedStyle?e.defaultView.getComputedStyle(g):g.currentStyle;if(h&&h[a]!==b)for(d=0;d<c.length;d++)e.write('<link rel="stylesheet" href="'+c[d]+'"/>')}('visibility','hidden',['lib\/bootstrap\/css\/bootstrap.min.css?v=ft473dnp14i']);</script>
+    <script>!function(a,b,c){var d,e=document,f=e.getElementsByTagName('SCRIPT'),g=f[f.length-1].previousElementSibling,h=e.defaultView&&e.defaultView.getComputedStyle?e.defaultView.getComputedStyle(g):g.currentStyle;if(h&&h[a]!==b)for(d=0;d<c.length;d++)e.write('<link rel="stylesheet" href="'+c[d]+'"/>')}('visibility','hidden',['lib\/bootstrap\/css\/bootstrap.min.css?v=pyvdbt65hfr']);</script>
 
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
     <meta name="x-stylesheet-test-fa" content="" class="fa" />
-    <script>!function(a,b,c){var d,e=document,f=e.getElementsByTagName('SCRIPT'),g=f[f.length-1].previousElementSibling,h=e.defaultView&&e.defaultView.getComputedStyle?e.defaultView.getComputedStyle(g):g.currentStyle;if(h&&h[a]!==b)for(d=0;d<c.length;d++)e.write('<link rel="stylesheet" href="'+c[d]+'"/>')}('font-family','FontAwesome',['lib\/font-awesome\/css\/font-awesome.min.css?v=ft473dnp14i']);</script>
+    <script>!function(a,b,c){var d,e=document,f=e.getElementsByTagName('SCRIPT'),g=f[f.length-1].previousElementSibling,h=e.defaultView&&e.defaultView.getComputedStyle?e.defaultView.getComputedStyle(g):g.currentStyle;if(h&&h[a]!==b)for(d=0;d<c.length;d++)e.write('<link rel="stylesheet" href="'+c[d]+'"/>')}('font-family','FontAwesome',['lib\/font-awesome\/css\/font-awesome.min.css?v=pyvdbt65hfr']);</script>
 
-    <link rel="stylesheet" href="css/vault.min.css?v=ft473dnp14i" />
+    <link rel="stylesheet" href="css/vault.min.css?v=pyvdbt65hfr" />
 </head>
 <body ng-controller="mainController as main" class="layout-boxed skin-blue sidebar-mini {{main.bodyClass}}">
     <div ui-view></div>
 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
-    <script>(window.jQuery||document.write('<script src="lib\/jquery\/jquery.min.js?v=ft473dnp14i"><\/script>'));</script>
+    <script>(window.jQuery||document.write('<script src="lib\/jquery\/jquery.min.js?v=pyvdbt65hfr"><\/script>'));</script>
 
     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-    <script>((window.jQuery&&window.jQuery.fn&&window.jQuery.fn.modal)||document.write('<script src="lib\/bootstrap\/js\/bootstrap.min.js?v=ft473dnp14i"><\/script>'));</script>
+    <script>((window.jQuery&&window.jQuery.fn&&window.jQuery.fn.modal)||document.write('<script src="lib\/bootstrap\/js\/bootstrap.min.js?v=pyvdbt65hfr"><\/script>'));</script>
 
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
-    <script>(window.angular||document.write('<script src="lib\/angular\/angular.min.js?v=ft473dnp14i"><\/script>'));</script>
+    <script>(window.angular||document.write('<script src="lib\/angular\/angular.min.js?v=pyvdbt65hfr"><\/script>'));</script>
 
-    <script src="js/lib.min.js?v=ft473dnp14i"></script>
+    <script src="js/lib.min.js?v=pyvdbt65hfr"></script>
-    <script src="js/app.min.js?v=ft473dnp14i"></script>
+    <script src="js/app.min.js?v=pyvdbt65hfr"></script>
 
     <script>
         (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){