User dashboards- WIP

smileys2 · Apr 22, 2019 · 652d968 · 652d968
1 parent a38cf58
commit 652d968
Show file tree

Hide file tree

Showing 27 changed files with 565 additions and 343 deletions.
diff --git a/controllers/user.js b/controllers/user.js
@@ -20,13 +20,31 @@ function _requireSessionUser(req) {
   return req.session.user;
 }
 
-async function resend(req, res) {
+async function removeEmail(req, res) {
+  // console.log(req.body.emailId);
+
+  // Remove secondary email
+  return res.json("Email is removed");
+}
+
+async function resendEmail(req, res) {
+  // console.log(req.body.emailId);
+
   // Resend verification email
   // Delete the unverified email if it appears anywhere else (under the user's id);
   // Reset the verification clock
   return res.json("Resend the email");
 }
 
+async function updateCommunicationOptions(req, res) {
+  // console.log(req.body.communicationOption);
+
+  // 0 = Send breach alerts to the email address found in brew breach.
+  // 1 = Send all breach alerts to user's primary email address.
+
+  return res.json("Comm options updated");
+}
+
 async function add(req, res) {
   // need to decide how to handle resends
 
@@ -61,38 +79,47 @@ async function add(req, res) {
   });
 }
 
-const bundleVerifiedEmails = async(email, emailSha1, ifPrimary, allBreaches) => {
+const bundleVerifiedEmails = async(email, emailSha1, ifPrimary, id, verificationStatus, allBreaches) => {
   const foundBreaches = await HIBP.getBreachesForEmail(emailSha1, allBreaches, true);
 
   const emailEntry = {
     "email": email,
     "breaches": foundBreaches,
     "primary": ifPrimary,
+    "id": id,
+    "verified": verificationStatus,
   };
+
   return emailEntry;
 };
 
-async function getDashboard(req, res) {
-  const allBreaches = req.app.locals.breaches;
-  const user = req.session.user;
+const getAllEmailsAndBreaches = async(user, allBreaches) => {
   const monitoredEmails = await DB.getUserEmails(user.id);
-
   const verifiedEmails = [];
   const unverifiedEmails = [];
-
-  verifiedEmails.push(await bundleVerifiedEmails(user.primary_email, user.primary_sha1, true, allBreaches));
-
+  verifiedEmails.push(await bundleVerifiedEmails(user.primary_email, user.primary_sha1, true, user.id, user.primary_verified, allBreaches));
   for (const email of monitoredEmails) {
     if (email.verified) {
-      const formattedEmail = await bundleVerifiedEmails(email.email, email.sha1, email.verified, allBreaches);
+      const formattedEmail = await bundleVerifiedEmails(email.email, email.sha1, false, email.id, email.verified, allBreaches);
       verifiedEmails.push(formattedEmail);
     } else {
       unverifiedEmails.push(email);
     }
   }
-  res.render("dashboard", {
+  return { verifiedEmails, unverifiedEmails };
+};
+
+
+async function getDashboard(req, res) {
+  const allBreaches = req.app.locals.breaches;
+  const user = req.session.user;
+  const { verifiedEmails, unverifiedEmails } = await getAllEmailsAndBreaches(user, allBreaches);
+
+  res.render("dashboards", {
     title: req.fluentFormat("user-dash"),
-    verifiedEmails, unverifiedEmails,
+    verifiedEmails,
+    unverifiedEmails,
+    whichPartial: "dashboards/breaches-dash",
   });
 }
 
@@ -191,13 +218,16 @@ async function postUnsubscribe(req, res) {
 }
 
 
-function getPreferences(req, res) {
+async function getPreferences(req, res) {
+  const allBreaches = req.app.locals.breaches;
+  const user = req.session.user;
+  const { verifiedEmails, unverifiedEmails } = await getAllEmailsAndBreaches(user, allBreaches);
+
   _requireSessionUser(req);
-  res.render("subpage", {
+  res.render("dashboards", {
     title: req.fluentFormat("email-add-title"),
-    headline: req.fluentFormat("email-add-headline"),
-    subhead: req.fluentFormat("email-add-blurb-v2"),
-    whichPartial: "subpages/preferences",
+    whichPartial: "dashboards/preferences",
+    verifiedEmails, unverifiedEmails,
   });
 }
 
@@ -240,5 +270,7 @@ module.exports = {
   getUnsubSurvey,
   postUnsubSurvey,
   logout,
-  resend,
+  removeEmail,
+  resendEmail,
+  updateCommunicationOptions,
 };
diff --git a/locales/en/app.ftl b/locales/en/app.ftl
@@ -481,3 +481,27 @@ find-out-what-hackers-know= Find out what hackers already know about you. Learn
 search-for-your-email= Search for your email address in public data breaches back to 2007.
 
 back-to-top= Back to Top
+
+comm-opt-0= Email me if one of my email addreseses below appears in a data breach.
+comm-opt-1= Send all breach alerts to { $primaryEmail }.
+
+
+stop-monitoring-this= Stop monitoring this email.
+resend-verification = Resend verification email
+
+add-new-email= Add a new email address
+send-verification= Send Verification Link
+monitor-preferences= Monitor Preferences
+global-communication= Global communication
+email-addresses= Email Addresses
+
+show-breaches-for-this-email= Show all breaches for this email.
+
+link-change-primary= Change primary email address
+
+remove-fxm= Remove {-product-name}
+remove-fxm-blurb= Turn off {-product-name} alerts. Your {-brand-fxa} will remain active, and you may receive 
+  other account-related communications.
+
+
+manage-email-addresses= Manage Email Addresses
diff --git a/public/css/app.css b/public/css/app.css
@@ -13,20 +13,20 @@ html {
 
 html,
 body {
+  --borderColors: var(--blue) #c78d20 #ff7e88 #ac3eff;
   --color: rgba(21, 20, 23, 0.92);
   --padding: 2rem;
-  --maxWidth: 1100px;
+  --maxWidth: 1200px;
   --margin: 1rem;
-  --bigHeadline: 2.3rem;
+  --bigHeadline: 3rem;
   --headline: 2.1rem;
   --skinnyHeadline: 1.9rem;
   --subhead: 1.1rem;
   --smallText: 0.85rem;
   --lineHeight: 180%;
   --radius: 0.25rem;
   --blue: #4f42ff;
-  --borderColors: var(--blue) #c78d20 #ff7e88 #ac3eff;
-  --borderColor: rgba(219, 219, 219, 0.81);
+  --borderColor: #eee;
   --deepBlue: #3100f5;
   --darkBlue: #2e04d7;
 
@@ -46,6 +46,10 @@ body {
   -webkit-overflow-scrolling: touch;
 }
 
+.gradient-background {
+  background: linear-gradient(to right, #9937a7, var(--blue), var(--deepBlue));
+}
+
 .fxm {
   font-weight: 600;
   white-space: nowrap;
@@ -89,9 +93,11 @@ h3 {
   margin-top: 0;
 }
 
-header a,
+.nav-link,
 .footer-link,
-.article-list a {
+.article-link,
+.remove-email,
+.change-primary-email {
   border: 2px solid rgba(255, 255, 255, 0);
 }
 
@@ -126,7 +132,7 @@ header a,
 }
 
 .subhead {
-  padding-right: 10%;
+  padding-right: 5%;
 }
 
 h4.feature {
@@ -143,6 +149,16 @@ a:hover {
   opacity: 0.8;
 }
 
+.button {
+  width: 100%;
+  border: 2px solid transparent;
+  text-align: center;
+  padding: var(--padding);
+  display: block;
+  margin: var(--margin) 0;
+  background-color: #eee;
+}
+
 a:focus,
 button:focus,
 button:hover,
@@ -164,7 +180,7 @@ button {
   background-color: transparent;
   border-width: 2px;
   border-style: solid;
-  border-color: var(--borderColors);
+  border-color: var(--blue);
   color: var(--color);
   padding: 0.75rem 2rem;
   font-size: var(--smallText);
@@ -372,24 +388,13 @@ div.sprite {
 
 .arrow {
   padding-left: calc(var(--padding) / 2);
-  transition: all 0.1s ease-in;
 }
 
 li:hover .bullet {
   border-width: 3px;
   transition: all 0.1s ease-in;
 }
 
-li:hover .arrow {
-  padding-left: 1.25rem;
-  transition: all 0.1s ease-in;
-}
-
-.brdr {
-  border: 1px dashed var(--borderColor);
-  border-radius: var(--radius);
-}
-
 .pad-0 {
   padding: 0;
 }
@@ -449,15 +454,28 @@ li:hover .arrow {
 
   .col-5,
   .col-6,
+  .col-7,
   .col-8 {
     max-width: 100%;
+    padding: 0 var(--padding);
   }
 
   .row {
     flex-direction: column;
   }
 }
 
+@media screen and (max-width: 600px) {
+  .col-5,
+  .col-6,
+  .col-7,
+  .col-8,
+  .col-12 {
+    margin: auto;
+    width: 100%;
+  }
+}
+
 @media screen and (max-width: 500px) {
   body {
     --padding: 1rem;
@@ -467,7 +485,7 @@ li:hover .arrow {
   }
 
   .row-full-width {
-    padding: 1rem 2rem;
+    padding: 1rem 1.75rem;
   }
 
   h2.headline {

diff --git a/public/css/breach-cards.css b/public/css/breach-cards.css
@@ -0,0 +1,14 @@
+/* breach card inside email card */
+.email-card-breach-wrapper {
+  border-radius: var(--radius);
+  overflow: hidden;
+  margin: var(--margin) 0;
+}
+
+.email-card-breach-wrapper .breach-card-title-wrapper {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.breach-title.demi.ec {
+  color: var(--color);
+}
diff --git a/public/css/breach-stats.css b/public/css/breach-stats.css
@@ -4,7 +4,7 @@
   width: 4rem;
   height: 3rem;
   justify-content: center;
-  border-right: 1px dashed var(--borderColor);
+  border-right: 1px solid var(--borderColor);
   margin: 0.15rem;
 }
 
@@ -20,7 +20,7 @@
 
 .breach-stats {
   background-color: rgba(255, 255, 255, 0);
-  border: 1px dashed var(--borderColor);
+  border: 1px solid var(--borderColor);
   border-radius: var(--radius);
   overflow: hidden;
   display: flex;
@@ -36,7 +36,7 @@
 
 .breach-stat-row {
   width: 100%;
-  border-bottom: 1px dashed var(--borderColor);
+  border-bottom: 1px solid var(--borderColor);
 }
 
 .breach-stat-row.flx:first-of-type {