Created treatment logic, CSS styles and form elements. Added logic to…

… controller to randomly assign users to one of the three experiment branches (Control, Opt-in, Opt-out)

controllers/home.js

@@ -13,6 +13,15 @@ async function home(req, res) {
     csrfToken: req.csrfToken(),
   };
 
+  const coinFlipNumber = Math.random() * 100;
+  const experimentBranch = getExperimentBranch(req, coinFlipNumber);
+
+  const isUserInExperiment = isExperiment(experimentBranch);
+  let experimentBranchA = false;
+  if (experimentBranch === "branchA" && isUserInExperiment) {
+    experimentBranchA = true;
+  }
+
   let featuredBreach = null;
   let scanFeaturedBreach = false;
 
@@ -41,6 +50,8 @@ async function home(req, res) {
       scanFeaturedBreach,
       pageToken: formTokens.pageToken,
       csrfToken: formTokens.csrfToken,
+      experimentBranch,
+      experimentBranchA,
     });
   }
 
@@ -50,9 +61,51 @@ async function home(req, res) {
     scanFeaturedBreach,
     pageToken: formTokens.pageToken,
     csrfToken: formTokens.csrfToken,
+    experimentBranch,
+    isUserInExperiment,
+    experimentBranchA,
   });
 }
 
+function isExperiment(experimentBranch) {
+  if (experimentBranch) { return true; }
+  return false;
+}
+
+function getExperimentBranch(req, sorterNum) {
+
+  if (!req.headers["accept-language"].includes("en") ){
+    return false;
+  }
+
+  // If URL param has experimentBranch entry, use that branch;
+  if (req.query.experimentBranch) {
+    if (req.query.experimentBranch !== "branchA" && req.query.experimentBranch !== "branchB" ) {
+      return false;
+    } else {
+      return req.query.experimentBranch;
+    }
+  }
+
+  // If user was already assigned a branch, stay in that branch;
+  if (req.session.experimentBranch) { return req.session.experimentBranch; }
+
+  // Split into four categories
+
+
+  if (sorterNum <= 33.333) {
+    req.session.experimentBranch = "branchA";
+    return "branchA";
+  }
+
+  if (sorterNum <= 66.666) {
+    req.session.experimentBranch = "branchB";
+    return "branchB";
+  }
+
+  return false;
+}
+
 function getAllBreaches(req, res) {
   return res.render("top-level-page", {
     title: "Firefox Monitor",

locales/en/app.ftl

@@ -698,3 +698,5 @@ ecosystem-promo-headline = Protect your life online with privacy-first products
 ecosystem-promo-body = 
   All { -brand-name } products honor our Personal Data Promise: Take less. Keep it safe. No secrets.
 promo-ecosystem-cta = See All Products
+
+stay-safe-get-alerts = Stay safe: get automated alerts when an account is breached.

public/css/experiment.css

@@ -0,0 +1,85 @@
+.temp-exp {
+  position: fixed;
+  background: purple;
+  color: white;
+  width: auto;
+  top: 0;
+  right: 0;
+  text-align: center;
+  z-index: 9999;
+  padding: 0.5em 1em;
+  opacity: 0.5;
+}
+
+.input-group.create-fxa-wrapper {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  max-width: 248px;
+  margin: 4px auto 16px;
+}
+
+.create-fxa-wrapper p {
+  text-align: left;
+  color: var(--grey3);
+  margin: 0;
+  padding: 0 0 0 12px;
+  font-size: 14px;
+  line-height: 18px;
+}
+
+.create-fxa-checkbox-wrapper {
+  position: relative;
+}
+
+.create-fxa-checkbox-input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+.create-fxa-checkbox-checkmark:hover {
+  background: #cfcfd8;
+}
+
+
+.create-fxa-checkbox-checkmark {
+  position: relative;
+  height: 24px;
+  width: 24px;
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 4px;
+  cursor: pointer;
+  display: block;
+}
+
+.create-fxa-checkbox-checkmark::after {
+  content: "";
+  width: 100%;
+  height: 100%;
+  display: none;
+  left: 0;
+  top: 0;
+  border-radius: 4px;
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+  background-image: url("/img/svg/purple-check.svg");
+}
+
+.create-fxa-checkbox-input:checked ~ .create-fxa-checkbox-checkmark::after {
+  display: block;
+}
+
+@media screen and (max-width: 800px) {
+
+}
+
+@media screen and (max-width: 600px) {
+
+}
+
+@media screen and (max-width: 500px) {
+
+}

public/js/monitor.js

@@ -369,4 +369,24 @@ function addBentoObserver(){
 
   const dropDownMenu = document.querySelector(".mobile-nav.show-mobile");
   dropDownMenu.addEventListener("click", () => toggleDropDownMenu(dropDownMenu));
+
+  if (document.body.dataset.experiment) {
+    const submitBtn = document.querySelector("#scan-user-email input[type='submit']");
+    const createFxaCheckbox = document.getElementById("createFxaCheckbox");
+
+    submitBtn.addEventListener("click", (e)=> {
+      if (createFxaCheckbox.checked) {
+        e.preventDefault();
+        if (typeof(ga) !== "undefined") {
+          // Send "Click" ping for #see-additional-recs click
+          // ga("send", "event", "Breach Details: See Additional Recommendations" , "Click", "See Additional Recommendations");
+          // Send "View" pings for any CTAs that become visible on #see-additional-recs click
+          // sendRecommendationPings(".overflow-rec-cta");
+        }
+        doOauth(e.target);
+      }
+    });
+  }
+
+
 })();

views/layouts/default.hbs

@@ -21,7 +21,7 @@
     <link rel="icon" href="/img/favicons/favicon-128.png" sizes="128x128" />
     <link rel="icon" href="/img/favicons/favicon-256.png" sizes="256x256" />
   </head>
-  <body {{> analytics/default_dataset }} data-bento-app-id="fx-monitor">
+  <body {{> analytics/default_dataset }} {{#if isUserInExperiment }} data-experiment="{{experimentBranch}}" {{/if}} data-bento-app-id="fx-monitor">
     {{> header/header }}
       {{{ body }}}
     {{> footer }}

views/partials/forms/scan-email-form.hbs

@@ -7,6 +7,15 @@
     <input id="scan-email" class="input-group-field email-to-hash" type="email" name="email" placeholder="{{ getString "scan-placeholder" }}" aria-label="{{ getString "scan-placeholder" }}" autocomplete="off" />
     <span id="invalid-email-message" class="error-message">{{ getString "scan-error" }}</span>
   </div>
+  {{#if isUserInExperiment}}
+  <div class="input-group create-fxa-wrapper">
+      <label for="createFxaCheckbox" class="create-fxa-checkbox-wrapper">
+        <input {{#unless experimentBranchA }} checked {{/unless}} class="create-fxa-checkbox-input" id="createFxaCheckbox" type="checkbox" />
+        <span class="create-fxa-checkbox-checkmark"></span>
+      </label>
+      <p>{{ getString "stay-safe-get-alerts" }}</p>
+  </div>
+  {{/if}}
   <input type="hidden" name="emailHash" />
   {{#if scanFeaturedBreach}}
     <input id="featured" type="hidden" name="featuredBreach" value="{{ featuredBreach.Name }}"/>

views/partials/imports.hbs

@@ -6,6 +6,7 @@
   <link rel="stylesheet" href="/css/breach-detail.css">
   <link rel="stylesheet" href="/css/breach-stats.css">
   <link rel="stylesheet" href="/css/dashboard.css">
+  <link rel="stylesheet" href="/css/experiment.css">
   <link rel="stylesheet" href="/css/email-card.css">
   <link rel="stylesheet" href="/css/feature-tip-group.css">
   <link rel="stylesheet" href="/css/footer.css">