Merge pull request #154 from mozilla/website-logos-

Website logos fix

.env-dist

@@ -18,7 +18,7 @@ OAUTH_TOKEN_URI="https://oauth-stable.dev.lcip.org/v1/token"
 
 HIBP_API_ROOT="https://stage.haveibeenpwned.com/api/v2/"
 HIBP_API_TOKEN=""
-HIBP_STAGE_API_ROOT="https://stage-api.haveibeenpwned.com"
+HIBP_STAGE_API_ROOT="https://api.haveibeenpwned.com"
 HIBP_STAGE_API_TOKEN=""
 HIBP_STUB_API_ROOT="http://localhost:6060/hibp/api/v3"
 

public/css/app.css

@@ -153,9 +153,8 @@ img.logo {
 }
 
 .banner-content .account .image-wrap {
-  flex-basis: auto;
-  width: 90px;
-  height: 90px;
+  max-width: 90px;
+  max-height: 90px;
 }
 
 .banner-content span.medium {
@@ -164,7 +163,6 @@ img.logo {
 
 .banner-content span.breach-info {
   margin-top: calc(5px + 0.25vh + 0.25vw);
-  max-width: 300px;
   width: 100%;
   font-weight: 400;
 }
@@ -470,7 +468,7 @@ form span {
 }
 
 #false-door div p {
-  line-height: 1.3;
+  line-height: 1.5;
   font-size: 14px;
 }
 
@@ -500,7 +498,8 @@ form span {
   flex-direction: column;
 }
 
-#compromised-accounts h3 {
+#compromised-accounts h3,
+#what-to-do li:first-of-type {
   margin-bottom: calc(15px + 1vh + 1vw);
 }
 
@@ -512,7 +511,6 @@ form span {
 
 .column-container-third {
   flex-basis: 30%;
-  align-self: flex-end;
 }
 
 .account {
@@ -528,6 +526,7 @@ form span {
   margin-right: calc(15px + 0.5vh + 0.5vw);
   border-radius: 9%;
   overflow: hidden;
+  max-width: 60px;
 }
 
 span.breach-info {
@@ -544,7 +543,8 @@ span.breach-info {
   max-width: 400px;
 }
 
-#what-to-do span.numeral {
+#what-to-do span.numeral,
+#what-to-do li:first-of-type {
   display: block;
   font-size: 32px;
   line-height: 1.05;
@@ -604,6 +604,11 @@ span.breach-info {
   color: rgba(0, 0, 0, 0);
 }
 
+.button.disabled,
+.button[disabled] {
+  opacity: 0.6 !important;
+}
+
 #what-to-do .scan-another-email {
   font-size: 17px !important;
   font-weight: 600;

public/img/logos/Badoo.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"    viewBox="0 0 1134.2 326.3" style="enable-background:new 0 0 1134.2 326.3;" xml:space="preserve"><style type="text/css">   .st0{fill:#49B719;}   .st1{fill:#006FBC;}   .st2{fill:#FF7700;}   .st3{fill:#00B9F4;}   .st4{fill:#FF3B00;}</style><g><g><path class="st0" d="M625.4,2.9c5.9-3.6,13.5-3.7,19.8-1.1c5.6,2.3,8.9,8.5,8.6,14.4c0,35,0,70,0,105c0,22,0,44,0,66     c-0.9,15.6-3.8,31.3-10.7,45.4c-6.7,14.5-16.8,27.6-29.5,37.4c-15.8,12.6-35.7,19.8-55.8,21.4c-17.9,1.1-35.8-3.5-51.7-11.4     c-23.1-12.1-41.5-33.2-49.7-58c-8.1-24.4-7-51.5,2.5-75.4c4.9-12,12.5-22.7,21.5-31.9c10-10.6,22.3-18.8,35.8-24.2     c16.4-5.9,34.3-8.3,51.6-5.3c19,2.6,36.9,11.5,51.2,24.2c0.1-31.4,0-62.8,0-94.3C619,10.4,621.2,5.4,625.4,2.9z M542,120.5     c-15.3,2.4-29.9,10.1-39.8,22.1c-10.6,11.9-16.4,27.7-16.9,43.6c-0.1,15.3,4.3,30.8,13.8,43c9.6,12.4,23.2,22,38.7,25.3     c16.1,3.8,33.6,1,47.8-7.3c14.1-8.5,25.3-21.9,30.1-37.8c5.8-17.9,4-38.1-5-54.8c-7-12.6-17.9-23.3-31.2-29.1     C567.8,120.3,554.6,118.4,542,120.5z"/></g></g><g><g><path class="st1" d="M8.1,2.6c5.8-2.5,12.6-2.5,18.4-0.2c5,2,8.3,7.3,8.3,12.7c0.1,27.6-0.1,55.2,0.1,82.7     c12.8-13.4,28.3-24.2,45.5-31c34-12.6,73.7-10.7,105.3,7.5c27.7,15.9,49.8,42.1,58.9,72.9c3.6,12,5.6,24.5,6,37     c-0.3,28.3-9,56.9-26.5,79.3c-18.6,24.2-46.1,41.2-76.2,46.5c-24.6,5-50.3,1-73.2-8.7C47.4,289.2,24.9,267,12.2,240     c-7.1-15.6-11-32.7-11.7-49.8c0.1-30.4-0.4-60.7-0.3-91c0.2-28-0.5-56-0.2-84.1C0.2,9.9,3.2,4.7,8.1,2.6z M115,94.6     c-13.1,1.5-25.9,5.8-37.1,12.8c-10.6,6.5-19.3,15.5-26.7,25.4c-23,32-21.5,79.3,3.3,109.8c7,8.6,15.4,16.2,24.8,22     c17.9,10.8,39.8,15,60.5,11.6c17.9-2.8,34.9-11.3,47.7-24.1c14.6-13.9,24.4-32.8,27.3-52.8c2.8-16.8,0.3-34.2-6.1-49.9     c-6.6-15.4-17.7-28.8-31.1-38.8C159.8,97.5,136.9,92,115,94.6z"/></g></g><g><g><path class="st2" d="M742.2,63.7c34.8-23.9,80.7-29.3,120.6-16.4c46.6,15.2,83.4,56.8,93,104.9c2.1,10.2,3.4,20.6,3.5,31.1     c-0.4,20-4.1,40-12.1,58.4c-10.7,24.9-28.5,46.9-51.3,61.7c-17.3,11.5-37.4,18.6-58,21.5c-21.3,3.3-43.2,0.6-63.6-6.1     c-30.8-9.9-57.2-31.6-74-59.1c-13.5-21.6-20.2-47-21.3-72.3c-0.4-22.6,4.2-45.4,13.7-66C703.7,98.1,721.2,78.3,742.2,63.7z      M761.8,92.3c-16.9,11.3-30.8,27.3-39.1,46c-6.6,15.4-9.9,32.2-9.5,49c1.1,18.3,5.8,36.6,15.4,52.4c10.6,17.9,26.5,32.7,45.4,41.5     c15.6,7,32.7,11,49.9,10.3c15.3-1,30.3-5.2,44-12.1c17.2-9,31.9-22.7,41.8-39.4c9.6-15.9,14.5-34.3,15.6-52.8     c0.5-26.1-7.5-52.8-24.4-72.9c-12-14.8-28.2-26.1-46-32.8C824.3,70.8,788.7,74.2,761.8,92.3z"/></g></g><g><g><path class="st3" d="M325.5,108.1c17.9-6,38.2-5,55.3,3.1c15.7,7.4,28,20.8,35.8,36.2c5.7,11.8,8.2,24.9,8,37.9     c0,12.3,0,24.7,0,37c0,8,0,16,0,24.1c0,5.3-2,11-6.8,13.8c-4.7,3-10.6,2.6-16,2.1c-6.8-1.1-10.9-7.7-11.9-14     c-12,8.1-26.6,12.8-41.2,12.4c-18.6,0.1-37.1-7.6-50.3-20.8c-11.8-11.2-19.9-26.3-22.7-42.4c-3.3-16.7-0.9-34.4,6.4-49.8     C291,129.6,306.4,114.4,325.5,108.1z M341.2,136.8c-5.5,1.2-10.8,3.2-15.6,6.2c-9.3,5.6-15.6,15.4-18.4,25.7     c-1.6,6.3-3.2,12.9-1.8,19.3c1.9,13.6,8.8,27.4,21.3,34.1c9.4,4.9,20.5,8.2,31,5.3c12.4-2.5,24-9.9,29.9-21.4     c5-10.1,8-21.8,5.1-32.9c-2.4-12.8-9.7-25.2-21.6-31.3C362,137.3,351.3,134.1,341.2,136.8z"/></g></g><g><g><path class="st4" d="M1013.2,122.7c24.5-19.9,62.2-21,88-3c11.7,8.1,21.1,19.8,26.8,32.9c12.7,29.4,5.5,66.7-18.9,87.9     c-20,19.3-51.5,24.3-77.1,14.3c-14.2-5.4-26.1-15.8-34.7-28.2c-14.7-21.4-17.1-50.3-6.9-74.1     C995.4,140.9,1003.5,130.8,1013.2,122.7z M1052.3,138.8c-10.5,1.9-20.7,6.9-27.4,15.4c-6.4,8.3-9.5,18.7-10.2,29     c0.7,9.9,3.4,19.9,9.3,27.9c6.7,9.6,18,14.9,29.3,16.9c7.7,1.8,15.7-0.5,23-3.1c11.5-4.3,20.7-13.9,24.4-25.7     c2.3-7.3,4.4-15.1,2.5-22.6c-2.2-13.6-9.9-26.9-22.7-33.1C1071.8,139.5,1061.8,136.6,1052.3,138.8z"/></g><path class="st4" d="M747.6,170c4.5-7.7,13.6-11.6,22.2-11.8c7.6,0.4,15.4,3.7,19.8,10.1c3.8,5.4,5.8,12.3,4.8,18.9    c-1.2,8.8-6.4,17.5-14.9,20.9c-8.5,4-18.9,2.2-26.2-3.4c-5.4-4.2-8.2-10.8-9.4-17.4C742.9,181.3,744.7,175.2,747.6,170z"/></g></svg>  
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"    viewBox="0 0 1134.2 326.3" style="enable-background:new 0 0 1134.2 326.3;" xml:space="preserve"><style type="text/css">   .st0_0{fill:#49B719;}   .st1_0{fill:#006FBC;}   .st2_0{fill:#FF7700;}   .st3_0{fill:#00B9F4;}   .st4_0{fill:#FF3B00;}</style><g><g><path class="st0_0" d="M625.4,2.9c5.9-3.6,13.5-3.7,19.8-1.1c5.6,2.3,8.9,8.5,8.6,14.4c0,35,0,70,0,105c0,22,0,44,0,66     c-0.9,15.6-3.8,31.3-10.7,45.4c-6.7,14.5-16.8,27.6-29.5,37.4c-15.8,12.6-35.7,19.8-55.8,21.4c-17.9,1.1-35.8-3.5-51.7-11.4     c-23.1-12.1-41.5-33.2-49.7-58c-8.1-24.4-7-51.5,2.5-75.4c4.9-12,12.5-22.7,21.5-31.9c10-10.6,22.3-18.8,35.8-24.2     c16.4-5.9,34.3-8.3,51.6-5.3c19,2.6,36.9,11.5,51.2,24.2c0.1-31.4,0-62.8,0-94.3C619,10.4,621.2,5.4,625.4,2.9z M542,120.5     c-15.3,2.4-29.9,10.1-39.8,22.1c-10.6,11.9-16.4,27.7-16.9,43.6c-0.1,15.3,4.3,30.8,13.8,43c9.6,12.4,23.2,22,38.7,25.3     c16.1,3.8,33.6,1,47.8-7.3c14.1-8.5,25.3-21.9,30.1-37.8c5.8-17.9,4-38.1-5-54.8c-7-12.6-17.9-23.3-31.2-29.1     C567.8,120.3,554.6,118.4,542,120.5z"/></g></g><g><g><path class="st1_0" d="M8.1,2.6c5.8-2.5,12.6-2.5,18.4-0.2c5,2,8.3,7.3,8.3,12.7c0.1,27.6-0.1,55.2,0.1,82.7     c12.8-13.4,28.3-24.2,45.5-31c34-12.6,73.7-10.7,105.3,7.5c27.7,15.9,49.8,42.1,58.9,72.9c3.6,12,5.6,24.5,6,37     c-0.3,28.3-9,56.9-26.5,79.3c-18.6,24.2-46.1,41.2-76.2,46.5c-24.6,5-50.3,1-73.2-8.7C47.4,289.2,24.9,267,12.2,240     c-7.1-15.6-11-32.7-11.7-49.8c0.1-30.4-0.4-60.7-0.3-91c0.2-28-0.5-56-0.2-84.1C0.2,9.9,3.2,4.7,8.1,2.6z M115,94.6     c-13.1,1.5-25.9,5.8-37.1,12.8c-10.6,6.5-19.3,15.5-26.7,25.4c-23,32-21.5,79.3,3.3,109.8c7,8.6,15.4,16.2,24.8,22     c17.9,10.8,39.8,15,60.5,11.6c17.9-2.8,34.9-11.3,47.7-24.1c14.6-13.9,24.4-32.8,27.3-52.8c2.8-16.8,0.3-34.2-6.1-49.9     c-6.6-15.4-17.7-28.8-31.1-38.8C159.8,97.5,136.9,92,115,94.6z"/></g></g><g><g><path class="st2_0" d="M742.2,63.7c34.8-23.9,80.7-29.3,120.6-16.4c46.6,15.2,83.4,56.8,93,104.9c2.1,10.2,3.4,20.6,3.5,31.1     c-0.4,20-4.1,40-12.1,58.4c-10.7,24.9-28.5,46.9-51.3,61.7c-17.3,11.5-37.4,18.6-58,21.5c-21.3,3.3-43.2,0.6-63.6-6.1     c-30.8-9.9-57.2-31.6-74-59.1c-13.5-21.6-20.2-47-21.3-72.3c-0.4-22.6,4.2-45.4,13.7-66C703.7,98.1,721.2,78.3,742.2,63.7z      M761.8,92.3c-16.9,11.3-30.8,27.3-39.1,46c-6.6,15.4-9.9,32.2-9.5,49c1.1,18.3,5.8,36.6,15.4,52.4c10.6,17.9,26.5,32.7,45.4,41.5     c15.6,7,32.7,11,49.9,10.3c15.3-1,30.3-5.2,44-12.1c17.2-9,31.9-22.7,41.8-39.4c9.6-15.9,14.5-34.3,15.6-52.8     c0.5-26.1-7.5-52.8-24.4-72.9c-12-14.8-28.2-26.1-46-32.8C824.3,70.8,788.7,74.2,761.8,92.3z"/></g></g><g><g><path class="st3_0" d="M325.5,108.1c17.9-6,38.2-5,55.3,3.1c15.7,7.4,28,20.8,35.8,36.2c5.7,11.8,8.2,24.9,8,37.9     c0,12.3,0,24.7,0,37c0,8,0,16,0,24.1c0,5.3-2,11-6.8,13.8c-4.7,3-10.6,2.6-16,2.1c-6.8-1.1-10.9-7.7-11.9-14     c-12,8.1-26.6,12.8-41.2,12.4c-18.6,0.1-37.1-7.6-50.3-20.8c-11.8-11.2-19.9-26.3-22.7-42.4c-3.3-16.7-0.9-34.4,6.4-49.8     C291,129.6,306.4,114.4,325.5,108.1z M341.2,136.8c-5.5,1.2-10.8,3.2-15.6,6.2c-9.3,5.6-15.6,15.4-18.4,25.7     c-1.6,6.3-3.2,12.9-1.8,19.3c1.9,13.6,8.8,27.4,21.3,34.1c9.4,4.9,20.5,8.2,31,5.3c12.4-2.5,24-9.9,29.9-21.4     c5-10.1,8-21.8,5.1-32.9c-2.4-12.8-9.7-25.2-21.6-31.3C362,137.3,351.3,134.1,341.2,136.8z"/></g></g><g><g><path class="st4_0" d="M1013.2,122.7c24.5-19.9,62.2-21,88-3c11.7,8.1,21.1,19.8,26.8,32.9c12.7,29.4,5.5,66.7-18.9,87.9     c-20,19.3-51.5,24.3-77.1,14.3c-14.2-5.4-26.1-15.8-34.7-28.2c-14.7-21.4-17.1-50.3-6.9-74.1     C995.4,140.9,1003.5,130.8,1013.2,122.7z M1052.3,138.8c-10.5,1.9-20.7,6.9-27.4,15.4c-6.4,8.3-9.5,18.7-10.2,29     c0.7,9.9,3.4,19.9,9.3,27.9c6.7,9.6,18,14.9,29.3,16.9c7.7,1.8,15.7-0.5,23-3.1c11.5-4.3,20.7-13.9,24.4-25.7     c2.3-7.3,4.4-15.1,2.5-22.6c-2.2-13.6-9.9-26.9-22.7-33.1C1071.8,139.5,1061.8,136.6,1052.3,138.8z"/></g><path class="st4_0" d="M747.6,170c4.5-7.7,13.6-11.6,22.2-11.8c7.6,0.4,15.4,3.7,19.8,10.1c3.8,5.4,5.8,12.3,4.8,18.9    c-1.2,8.8-6.4,17.5-14.9,20.9c-8.5,4-18.9,2.2-26.2-3.4c-5.4-4.2-8.2-10.8-9.4-17.4C742.9,181.3,744.7,175.2,747.6,170z"/></g></svg>  

public/js/monitor.js

@@ -2,30 +2,6 @@
 
 "use strict";
 
-/*
-function doXHR(aURL, aBodyObj, aAlertText, aDebug=true) {
-  return new Promise((resolve) => {
-    const xhr = new XMLHttpRequest();
-    xhr.onreadystatechange = function() {
-      if (this.readyState === 4) {
-        if (aAlertText) {
-          alert(aAlertText);
-        }
-        if (aDebug) {
-          const responseDumpElt = document.getElementById("responseDump");
-          responseDumpElt.appendChild(document.createTextNode(xhr.response));
-          responseDumpElt.appendChild(document.createElement("hr"));
-          responseDumpElt.appendChild(document.createElement("br"));
-        }
-        resolve(xhr.response);
-      }
-    };
-    xhr.open("POST", aURL, true);
-    xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
-    xhr.send(JSON.stringify(aBodyObj));
-  });
-}
-
 function isValidEmail(val) {
   // https://stackoverflow.com/a/46181
   const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
@@ -33,7 +9,7 @@ function isValidEmail(val) {
 }
 
 function enableBtnIfEmailValid(e) {
-  const emailBtn = document.getElementById("subscribe-email-btn");
+  const emailBtn = document.getElementById("submit-button");
   if (isValidEmail(e.target.value)) {
     emailBtn.disabled = false;
   } else {
@@ -41,8 +17,6 @@ function enableBtnIfEmailValid(e) {
   }
 }
 
-*/
-
 function removeLoader(){
   if(document.getElementsByClassName("input-group-button")[0].classList.contains("loading-data")){
     document.getElementsByClassName("input-group-button")[0].classList.remove("loading-data");
@@ -91,10 +65,11 @@ if(document.querySelector(".email-scan")){
   //removes "loading-data" class from button even when user clicks the back button. 
   window.addEventListener("pageshow", removeLoader);
   document.querySelector(".email-scan").addEventListener("submit", hashEmailAndSend);
+  document.querySelector(".email-to-hash").addEventListener("input", enableBtnIfEmailValid);
 }
 
 $(document).foundation();
 
 document.querySelector("#sign-up").addEventListener("click", showFalseDoor);
 // document.querySelector("#subscribe-fxa-btn").addEventListener("click", doOauth);
-// document.querySelector("#subscribe-email-input").addEventListener("input", enableBtnIfEmailValid);
+

scripts/load-breaches.js

@@ -33,7 +33,7 @@ async function handleBreachesResponse(response) {
 
     for (const breach of breachesJSON) {
       // purify the description going into the DB
-      breach.Description = DOMPurify.sanitize(breach.Description);
+      breach.Description = DOMPurify.sanitize(breach.Description, {ALLOWED_TAGS: []});
       await DBUtils.createBreach(breach.Name, breach);
     }
   } catch (error) {

views/layouts/default.hbs

@@ -5,11 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ title }}</title>
     <link href="https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,600" rel="stylesheet" />
-
     <link rel="stylesheet" href="/css/vendor/foundation.min.css">
     <link rel="stylesheet" href="/css/app.css">
-    <script type="text/javascript" src="/js/vendor/jquery.js" defer></script>
-    <script type="text/javascript" src="/js/vendor/foundation.min.js" defer></script>
     <script type="text/javascript" src="/js/monitor.js" defer></script>
   </head>
   <body>

views/partials/banner_breach.hbs

@@ -2,7 +2,7 @@
 <div class="account">
   <div id="breach-title-wrapper">
     <div class="image-wrap">
-      <img alt="{{ breach.name }}" src="img/{{ breach.name }}.png">
+      <img alt="{{ breach.name }}" src="img/logos/{{ breach.name }}.{{ breach.meta.LogoType }}">
     </div>
     <div id="breach-title-date">
       <h3>{{ breach.name }} Breach</h3>

views/partials/compromised_accounts.hbs

@@ -3,7 +3,7 @@
   {{#each foundBreaches }}
     <div class="account">
       <div class="image-wrap">
-        <img alt="{{ name }}" src="img/logos/{{ name }}.png">
+        <img alt="{{ name }}" src="img/logos/{{ name }}.{{ meta.LogoType }}">
       </div>
       <div class="breach-info-wrap">
         <h4 class="demi">{{ name }}</h4>

views/partials/scan_form.hbs

@@ -11,3 +11,4 @@
       <span>Your email will not be stored. Find out more in our <a href="
       https://www.mozilla.org/privacy/firefox/" alt="Mozilla Firefox privacy policy">Privacy Policy.</a></span>
   </form>
+ 

views/partials/what_to_do.hbs

@@ -1,4 +1,5 @@
 <ol id="what-to-do">
+  <li>What to Do</li>
   <li>
     <span class="numeral">1</span>
     <span class="bold">Change your password</span> on these sites and anywhere else you've used the same password.