Added the four share points, the modal and all images, scripts requir…

…ed to make it work!
smileys2 · Aug 17, 2020 · 0016158 · 0016158
1 parent 843924a
commit 0016158
Show file tree

Hide file tree

Showing 19 changed files with 386 additions and 6 deletions.
diff --git a/controllers/home.js b/controllers/home.js
@@ -16,8 +16,12 @@ function _getFeaturedBreach(allBreaches, breachQueryValue) {
   return HIBP.getBreachByName(allBreaches, lowercaseBreachValue);
 }
 
-async function home(req, res) {
+function _getBreachRequest(query = false, param = false) {
+  if (query) { return query; }
+  if (param) { return param; }
+}
 
+async function home(req, res) {
   const formTokens = {
     pageToken: AppConstants.PAGE_TOKEN_TIMER > 0 ? generatePageToken(req) : "",
     csrfToken: req.csrfToken(),
@@ -40,8 +44,11 @@ async function home(req, res) {
     });
   }
 
-  if (req.query.breach) {
-    featuredBreach = _getFeaturedBreach(req.app.locals.breaches, req.query.breach);
+  if (req.query.breach || req.params.breach) {
+
+    const requestedBreach = _getBreachRequest(req.query.breach, req.params.breach);
+
+    featuredBreach = _getFeaturedBreach(req.app.locals.breaches, requestedBreach);
 
     if (!featuredBreach) {
       return notFound(req, res);

diff --git a/public/css/share.css b/public/css/share.css
@@ -0,0 +1,204 @@
+.share-monitor--dashboard {
+  margin: 0 0 3rem;
+}
+
+.share-monitor--dashboard h3 {
+  margin-bottom: 1rem;
+}
+
+.share-monitor--dashboard ~ .share-monitor--dashboard {
+  display: none;
+}
+
+.share-monitor--dashboard img {
+  display: block;
+  margin: 0 auto 1rem;
+  max-width: 100%;
+}
+
+.share-monitor--dashboard a {
+  font-size: 20px;
+}
+
+.share-monitor--breach {
+  margin: calc(var(--padding) * 2.5) auto 0;
+  border-radius: 0.7rem;
+  background: var(--monitorGradient);
+  padding: 2px;
+}
+
+.share-monitor--breach img {
+  margin-right: 2rem;
+}
+
+.share-monitor--breach .inset {
+  background: rgba(255, 255, 255, 1);
+  border-radius: 0.575rem;
+  padding: calc(var(--padding) * 1.5);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.share-monitor--breach h3 {
+  margin-bottom: 0.5rem;
+}
+
+.share-monitor--breach a {
+  font-size: 16px;
+}
+
+.share-monitor--modal {
+  padding: 0;
+  height: 100vh;
+  width: 100vw;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background: rgba(255, 255, 255, 0.8);
+  display: none;
+  box-sizing: border-box;
+}
+
+.share-monitor--modal-content {
+  background-color: var(--inkDark);
+  max-width: 800px;
+  width: 80vw;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 8px;
+  padding: 2rem;
+  color: var(--borderColor);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-image: url("/img/modal-bg-left.png"), url("/img/modal-bg-right.png");
+  background-repeat: no-repeat, no-repeat;
+  background-position: bottom left, bottom right;
+  /* 6:10 ratio */
+  background-size: 120px auto , 200px auto;
+}
+
+.share-monitor--modal-text {
+  max-width: 550px;
+  width: 100%;
+}
+
+.share-monitor--modal-text .hidden {
+  display: none;
+}
+
+.button-modal-close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  height: 32px;
+  width: 32px;
+  border: none;
+  background-image: url("/img/svg/x-close-white.svg");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center center;
+  border-radius: 50%;
+}
+
+.copy-form {
+  border-radius: 8px;
+  display: flex;
+  max-width: 500px;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.copy-form-btn {
+  background: var(--blue4);
+  color: white;
+  appearance: none;
+  -moz-appearance: none;
+  border: none;
+  padding: 0 1rem;
+  font-size: 1.2rem;
+  height: 40px;
+  line-height: 40px;
+  display: block;
+  width: 80px;
+  text-align: center;
+}
+
+.copy-form-btn span {
+  display: none;
+}
+
+.copy-form-input {
+  background: var(--borderColor);
+  padding: 0 0.5em;
+  appearance: none;
+  -moz-appearance: none;
+  display: block;
+  width: calc(100% - 80px);
+  font-size: 1.2rem;
+  border: none;
+  outline: none;
+  height: 40px;
+  line-height: 40px;
+}
+
+.share-monitor--modal-content .disclaimer {
+  font-size: 0.75rem;
+  max-width: 340px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@media screen and (max-width: 600px) {
+  .share-monitor--dashboard img {
+    margin-top: 2rem;
+  }
+
+  .share-monitor--dashboard h3 {
+    font-size: 20px;
+  }
+
+  .share-monitor--dashboard a {
+    font-size: 18px;
+  }
+
+  .share-monitor--breach .inset {
+    display: block;
+    text-align: center;
+  }
+
+  .share-monitor--breach img {
+    margin: 0 0 1rem;
+  }
+  .share-monitor--modal-content {
+    width: 90vw;
+    background-image: none;
+  }
+  .copy-form {
+    display: block;
+  }
+  .copy-form-input {
+    width: 100%;
+    border-radius: 8px;
+    padding: 6px 12px;
+    height: auto;
+    line-height: auto;
+  }
+  .copy-form-btn {
+    margin-top: 1rem;
+    width: 100%;
+    border-radius: 8px;
+    height: auto;
+    line-height: auto;
+    padding: 0.5em;
+  }
+  .copy-form-btn span {
+    display: inline;
+  }
+}
diff --git a/public/img/modal-bg-left.png b/public/img/modal-bg-left.png
diff --git a/public/img/modal-bg-right.png b/public/img/modal-bg-right.png
diff --git a/public/img/svg/present.svg b/public/img/svg/present.svg
diff --git a/public/img/svg/x-close-white.svg b/public/img/svg/x-close-white.svg
diff --git a/public/js/experiment.js b/public/js/experiment.js
@@ -0,0 +1,85 @@
+"use strict";
+
+function copyURL() {
+	// TODO: Add GA event
+	const shareModalInput = document.getElementById("shareModalInput");
+	shareModalInput.select();
+  shareModalInput.setSelectionRange(0, 99999);
+	document.execCommand("copy");
+}
+
+function keyPress(e) {
+    if(e.key === "Escape") {
+      closeShareModal();
+			document.removeEventListener("keydown", keyPress);
+    }
+}
+
+function closeShareModal() {
+	const shareModal = document.getElementById("shareModal");
+	shareModal.style.display = "none";
+}
+
+function initShareModal(href, breachText) {
+	const shareModal = document.getElementById("shareModal");
+	const shareModalInput = document.getElementById("shareModalInput");
+	const shareModalCopy = document.getElementById("shareModalCopy");
+	const btnCloseShareModal = document.getElementById("closeShareModal");
+	const shareTextBreach = document.getElementById("shareTextBreach");
+	const shareTextGeneral = document.getElementById("shareTextGeneral");
+
+	// Set input to correct URL value;
+	shareModalInput.value = href;
+
+	// Make modal visible
+	shareModal.style.display = "block";
+
+	if (breachText) {
+		shareTextGeneral.classList.add("hidden");
+		shareTextBreach.classList.remove("hidden");
+	} else {
+		shareTextGeneral.classList.remove("hidden");
+		shareTextBreach.classList.add("hidden");
+	}
+
+	// Event Listeners ----
+	shareModalInput.addEventListener("focus", (e)=>{
+		// TODO: Add GA event
+		shareModalInput.select();
+	});
+
+	document.addEventListener("keydown", keyPress);
+	shareModalCopy.addEventListener("click", copyURL);
+	btnCloseShareModal.addEventListener("click", closeShareModal);
+
+	shareModal.addEventListener("click", (e)=>{
+		// If the click is INSIDE the modal, ignore it.
+		if (e.target !== shareModal) { return; }
+		closeShareModal();
+	});
+}
+
+function openShareModal(target, breach = false) {
+	// TODO: Add GA event
+	initShareModal(target.href, breach);
+}
+
+const btnOpenShareModal = document.querySelectorAll(".js-share-modal");
+
+if (btnOpenShareModal) {
+	btnOpenShareModal.forEach( el => {
+		el.addEventListener("click", (e)=> {
+			e.preventDefault();
+			openShareModal(e.target);
+		});
+	});
+}
+
+const btnOpenShareModalBreach = document.querySelector(".js-share-modal-breach");
+
+if (btnOpenShareModalBreach) {
+	btnOpenShareModalBreach.addEventListener("click", (e)=> {
+		e.preventDefault();
+		openShareModal(e.target, true);
+	});
+}
diff --git a/routes/home.js b/routes/home.js
@@ -9,6 +9,10 @@ const router = express.Router();
 const csrfProtection = csrf();
 
 router.get("/", csrfProtection, home);
+router.get("/share/purple", csrfProtection, home);
+router.get("/share/red", csrfProtection, home);
+router.get("/share/blue", csrfProtection, home);
+router.get("/share/:breach", csrfProtection, home);
 router.get("/about", getAboutPage);
 router.get("/breaches", getAllBreaches);
 router.get("/security-tips", getSecurityTips);

diff --git a/template-helpers/footer.js b/template-helpers/footer.js
@@ -38,6 +38,7 @@ function getFooterLinks(args) {
       title: "Share Monitor",
       stringId: "share-monitor",
       href: "/share/purple",
+      experiment: "js-share-modal",
     };
 
     footerLinks.splice(2, 0, shareMonitorFooter);

diff --git a/template-helpers/header.js b/template-helpers/header.js
@@ -3,6 +3,9 @@
 const { getStrings, getFxaUrl } = require("./hbs-helpers");
 const { LocaleUtils } = require("./../locale-utils");
 
+const AppConstants = require("../app-constants");
+const EXPERIMENTS_ENABLED = (AppConstants.EXPERIMENT_ACTIVE === "1");
+
 function getSignedInAs(args) {
   const locales = args.data.root.req.supportedLocales;
   const userEmail = args.data.root.req.session.user.primary_email;
@@ -59,6 +62,18 @@ function fxaMenuLinks(args) {
     },
   ];
 
+  // Growth Experiment: Only add the avatar share link if user is on VB branch
+  if (EXPERIMENTS_ENABLED && args.data.root.req.session.experimentFlags.treatmentBranch) {
+    const shareMonitorFooter = {
+      title: "Share Monitor",
+      stringId: "share-monitor",
+      href: "/share/orange",
+      experiment: "js-share-modal",
+    };
+
+    fxaLinks.unshift(shareMonitorFooter);
+  }
+
   return getStrings(fxaLinks, locales);
 }