Review updates

controllers/hibp.js

@@ -48,7 +48,7 @@ async function notify (req, res) {
   const subscribers = await DB.getSubscribersByHashes(hashes);
 
   const utmID = "breach-alert";
-  const buttonHref = EmailUtils.getScanAnotherEmailUrl(utmID);
+  const scanAnotherEmailHref = EmailUtils.getScanAnotherEmailUrl(utmID);
 
 
   log.info("notification", { length: subscribers.length, breachAlertName: breachAlert.Name });
@@ -77,8 +77,7 @@ async function notify (req, res) {
           date: HBSHelpers.prettyDate(supportedLocales, new Date()),
           breachAlert,
           SERVER_URL: req.app.locals.SERVER_URL,
-          buttonValue: LocaleUtils.fluentFormat(supportedLocales, "report-scan-another-email"),
-          buttonHref: buttonHref,
+          scanAnotherEmailHref: scanAnotherEmailHref,
           unsubscribeUrl: EmailUtils.getUnsubscribeUrl(subscriber, utmID),
           whichView: "email_partials/report",
         },

controllers/oauth.js

@@ -85,8 +85,7 @@ async function confirmed(req, res, next, client = FxAOAuthClient) {
       supportedLocales: req.supportedLocales,
       date: HBSHelpers.prettyDate(req.supportedLocales, new Date()),
       unsafeBreachesForEmail: unsafeBreachesForEmail,
-      buttonValue: req.fluentFormat("report-scan-another-email"),
-      buttonHref: EmailUtils.getScanAnotherEmailUrl(utmID),
+      scanAnotherEmailHref: EmailUtils.getScanAnotherEmailUrl(utmID),
       unsubscribeUrl: unsubscribeUrl,
       whichView: "email_partials/report",
     }

controllers/user.js

@@ -27,8 +27,7 @@ async function add(req, res) {
     "default_email",
     { email,
       supportedLocales: req.supportedLocales,
-      buttonValue: req.fluentFormat("verify-my-email"),
-      buttonHref: EmailUtils.getVerificationUrl(unverifiedSubscriber),
+      verificationHref: EmailUtils.getVerificationUrl(unverifiedSubscriber),
       unsubscribeUrl: EmailUtils.getUnsubscribeUrl(unverifiedSubscriber, "account-verification-email"),
       whichView: "email_partials/email_verify",
     });
@@ -43,8 +42,7 @@ async function verify(req, res) {
   if (!req.query.token) {
     throw new FluentError("user-verify-token-error");
   }
-  const token = req.query.token.toString().replace(/\?utm_.*/g, "");
-  const verifiedEmailHash = await DB.verifyEmailHash(token);
+  const verifiedEmailHash = await DB.verifyEmailHash(req.query.token);
 
   let unsafeBreachesForEmail = [];
   unsafeBreachesForEmail = await HIBP.getBreachesForEmail(
@@ -64,7 +62,7 @@ async function verify(req, res) {
       supportedLocales: req.supportedLocales,
       date: HBSHelpers.prettyDate(req.supportedLocales, new Date()),
       unsafeBreachesForEmail: unsafeBreachesForEmail,
-      buttonHref: EmailUtils.getScanAnotherEmailUrl(utmID),
+      scanAnotherEmailHref: EmailUtils.getScanAnotherEmailUrl(utmID),
       unsubscribeUrl: EmailUtils.getUnsubscribeUrl(verifiedEmailHash, utmID),
       whichView: "email_partials/report",
     }
@@ -98,7 +96,7 @@ async function getUnsubscribe(req, res) {
     subhead: req.fluentFormat("unsub-blurb"),
     whichPartial: "subpages/unsubscribe",
     token: req.query.token,
-    hash: req.query.hash.toString().replace(/\?utm_.*/g, ""),
+    hash: req.query.hash,
   });
 }
 

email-utils.js

@@ -1,4 +1,5 @@
 "use strict";
+const { URL } = require("url");
 
 const AppConstants = require("./app-constants");
 
@@ -78,23 +79,38 @@ const EmailUtils = {
     });
   },
 
-  utmParams(campaign, content) {
-    return `?utm_source=fx-monitor-emails&utm_medium=email&utm_campaign=${campaign}&utm_content=${content}`;
+  appendUtmParams(url, campaign, content) {
+    const utmParameters = {
+      utm_source: "fx-monitor-emails",
+      utm_medium: "email",
+      utm_campaign: campaign,
+      utm_content: content,
+    };
+    for (const param in utmParameters) {
+      url.searchParams.append(param, utmParameters[param]);
+    }
+    return url;
   },
 
   getScanAnotherEmailUrl(emailType) {
-    return `${AppConstants.SERVER_URL}${this.utmParams("scan-another-email", emailType)}`;
+    let url = new URL(AppConstants.SERVER_URL);
+    url = this.appendUtmParams(url, "scan-another-email", emailType);
+    return url;
   },
 
   getVerificationUrl(subscriber) {
-    const utmParams = this.utmParams("verified subscribers", "account-verification-email");
-    return `${AppConstants.SERVER_URL}/user/verify?token=${encodeURIComponent(subscriber.verification_token)}${utmParams}`;
+    let url = new URL(`${AppConstants.SERVER_URL}/user/verify`);
+    url.searchParams.append("token", encodeURIComponent(subscriber.verification_token));
+    url = this.appendUtmParams(url, "verified-subscribers", "account-verification-email");
+    return url;
   },
 
   getUnsubscribeUrl(subscriber, emailType) {
-    const unsubUserParams = `?token=${encodeURIComponent(subscriber.verification_token)}&hash=${encodeURIComponent(subscriber.sha1)}`;
-    const utmParams = this.utmParams("unsubscribe", emailType);
-    return `${AppConstants.SERVER_URL}/user/unsubscribe${unsubUserParams}${utmParams}`;
+    let url = new URL(`${AppConstants.SERVER_URL}/user/unsubscribe`);
+    url.searchParams.append("token", encodeURIComponent(subscriber.verification_token));
+    url.searchParams.append("hash", encodeURIComponent(subscriber.sha1));
+    url = this.appendUtmParams(url, "unsubscribe", emailType);
+    return url;
   },
 
   getShareByEmail(req) {

public/js/monitor.js

@@ -435,7 +435,7 @@ window.addEventListener("pageshow", function() {
   ga_sendPing("Pageview", false);
 
   if (window.location.search.includes("utm_") && window.history.replaceState) {
-    window.history.replaceState({}, "", window.location.toString().replace(/\?utm_.*/g, ""));
+    window.history.replaceState({}, "", window.location.toString().replace(/[?&]utm_.*/g, ""));
   }
 
   if (document.forms) {

views/partials/email_partials/email_button.hbs

@@ -5,8 +5,12 @@
         <table>
           <tr>
             <td class="email-button-wrapper" align="center" bgcolor="#0060df" style="width: 100%; max-width: 530px; border-radius: 2px;">
-              <a class="email-button" href="{{ buttonHref }}" rel="noopener" style="text-align: center; text-decoration: none; color: #ffffff; padding-top: 12px; padding-right: 30px; padding-left: 30px; padding-bottom: 12px; border: 1px solid #0060df; display: inline-block; font-size: 13px;">
-               {{ buttonValue }}
+              <a class="email-button" href="{{ scanAnotherEmailHref }}{{ verificationHref }}" rel="noopener" style="text-align: center; text-decoration: none; color: #ffffff; padding-top: 12px; padding-right: 30px; padding-left: 30px; padding-bottom: 12px; border: 1px solid #0060df; display: inline-block; font-size: 13px;">
+                {{#ifCompare whichView "===" "email_partials/email_verify"}}
+                  {{fluentFormat supportedLocales "verify-my-email" }}
+                {{else}}
+                  {{fluentFormat supportedLocales "report-scan-another-email"}}
+                {{/ifCompare}}
               </a>
             </td>
           </tr>