website logos fix, other template mods

template updates for website logos, new 'false-door' messaging, updated api creds- still working on getting the analytics right.
smileys2 · Jun 7, 2018 · 09876c4 · 09876c4
1 parent 5b9fe12
commit 09876c4
Show file tree

Hide file tree

Showing 12 changed files with 90 additions and 124 deletions.
diff --git a/.env-dist b/.env-dist
@@ -18,8 +18,8 @@ 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_TOKEN=""
+HIBP_STAGE_API_ROOT="https://api.haveibeenpwned.com"
+HIBP_STAGE_API_TOKEN="X4PDhO/tIC5mlA/GZLja4qLYGfQeCunoaSOCnat0lXmZVF0SNApgZA=="
 HIBP_STUB_API_ROOT="http://localhost:6060/hibp/api/v3"
 
 AWS_ACCESS_KEY_ID=""

diff --git a/hibp.js b/hibp.js
@@ -18,7 +18,6 @@ const HIBP = {
     const sha1 = getSha1(email);
     const sha1Prefix = sha1.slice(0, 6);
     const url = `${AppConstants.HIBP_STAGE_API_ROOT}/breachedaccount/range/${sha1Prefix}?code=${encodeURIComponent(AppConstants.HIBP_STAGE_API_TOKEN)}`;
-    console.log(`************in hipb with email ${email} and now ${sha1Prefix} and now url ++ ${url}`);
     const headers = {
       "User-Agent": HIBP_USER_AGENT,
     };

diff --git a/public/css/app.css b/public/css/app.css
@@ -153,9 +153,9 @@ img.logo {
 }
 
 .banner-content .account .image-wrap {
-  flex-basis: auto;
-  width: 90px;
-  height: 90px;
+
+  max-width: 90px;
+  max-height: 90px;
 }
 
 .banner-content span.medium {
@@ -469,7 +469,7 @@ form span {
 }
 
 #false-door div p {
-  line-height: 1.3;
+  line-height: 1.5;
   font-size: 14px;
 }
 
@@ -499,7 +499,8 @@ form span {
   flex-direction: column;
 }
 
-#compromised-accounts h3 {
+#compromised-accounts h3,
+#what-to-do lh {
   margin-bottom: calc(15px + 1vh + 1vw);
 }
 
@@ -511,7 +512,6 @@ form span {
 
 .column-container-third {
   flex-basis: 30%;
-  align-self: flex-end;
 }
 
 .account {
@@ -527,6 +527,7 @@ form span {
   margin-right: calc(15px + 0.5vh + 0.5vw);
   border-radius: 9%;
   overflow: hidden;
+  max-width:60px;
 }
 
 span.breach-info {
@@ -543,7 +544,8 @@ span.breach-info {
   max-width: 400px;
 }
 
-#what-to-do span.numeral {
+#what-to-do span.numeral,
+#what-to-do lh {
   display: block;
   font-size: 32px;
   line-height: 1.05;
@@ -603,6 +605,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;

diff --git a/public/img/logos/Badoo.svg b/public/img/logos/Badoo.svg
diff --git a/public/js/monitor.js b/public/js/monitor.js
@@ -0,0 +1,67 @@
+/* eslint-env browser */
+
+"use strict";
+
+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,}))$/;
+  return re.test(String(val).toLowerCase());
+}
+
+function enableBtnIfEmailValid(e) {
+  console.log(e);
+  const emailBtn = document.getElementById("submit-email");
+  if (isValidEmail(e.target.value)) {
+    emailBtn.disabled = false;
+  } else {
+    emailBtn.disabled = true;
+  }
+}
+
+function removeLoader(){
+  if(document.getElementsByClassName("input-group-button")[0].classList.contains("loading-data")){
+    document.getElementsByClassName("input-group-button")[0].classList.remove("loading-data");
+  }
+  else {
+    return;
+  }
+}
+
+function displayLoader(){
+  document.getElementsByClassName("input-group-button")[0].classList.add("loading-data");
+}
+
+function showFalseDoor(){
+  const falseDoorBlurb = "<div class='section-container'><h4>Thank you for trying Firefox Monitor</h4><p>Firefox Monitor is a concept we are testing. During this test, we are not storing email addresses. This means that while we will use your email to give you real results about data breaches, we will not keep your email to alert you in case of future breaches.</p><p>We hope to provide this service soon, but in the meantime, you can stay up-to-date on Firefox Monitor and other new features when you sign up for the <a href='https://www.mozilla.org/newsletter/firefox/'>Firefox newsletter.</a></p><button class='button' id='close-false-door'>Close</button></div>";
+  const falseDoor = document.createElement("div");
+  falseDoor.setAttribute("id", "false-door");
+  document.body.appendChild(falseDoor);
+  falseDoor.innerHTML = falseDoorBlurb;
+  const falseDoorButton = document.getElementById("close-false-door");
+  falseDoorButton.onclick = function (){
+    falseDoor.parentElement.removeChild(falseDoor);
+  };
+}
+
+async function hashEmailAndSend(emailFormSubmitEvent) {
+  emailFormSubmitEvent.preventDefault();
+  const emailForm = emailFormSubmitEvent.target;
+  // luke's code for sending to sha1 etc
+  emailForm.submit();
+  displayLoader();
+}
+
+
+
+if(document.querySelector(".email-scan")){
+  window.addEventListener("pageshow", removeLoader);
+  document.querySelector(".email-scan").addEventListener("submit", hashEmailAndSend);
+  document.querySelector(".email-to-hash").addEventListener("input", enableBtnIfEmailValid);
+}
+
+//removes "loading-data" class from button even when user clicks the back button. 
+document.querySelector("#sign-up").addEventListener("click", showFalseDoor);
+
+
+
+
diff --git a/public/js/test.js b/public/js/test.js
diff --git a/scripts/load-breaches.js b/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) {

diff --git a/views/layouts/default.hbs b/views/layouts/default.hbs
@@ -5,10 +5,9 @@
     <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/test.js" defer></script>
+    <script type="text/javascript" src="/js/monitor.js" defer></script>
   </head>
   <body>
     <header class ="top-bar">

diff --git a/views/partials/banner_breach.hbs b/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>

diff --git a/views/partials/compromised_accounts.hbs b/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>

diff --git a/views/partials/scan_form.hbs b/views/partials/scan_form.hbs
@@ -10,3 +10,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>
+
diff --git a/views/partials/what_to_do.hbs b/views/partials/what_to_do.hbs
@@ -1,4 +1,5 @@
 <ol id="what-to-do">
+  <lh>What to Do</lh>
   <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.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,3 +10,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>