Merge pull request #18217 from mozilla/FXA-10921

feat(emails): Add new emails for sign-in with recovery methods

Author: vpomerleau

packages/fxa-auth-server/lib/metrics/amplitude.js

@@ -68,6 +68,8 @@ const EMAIL_TYPES = {
   postAddRecoveryPhone: '2fa',
   postRemoveRecoveryPhone: '2fa',
   postChangeRecoveryPhone: '2fa',
+  postSigninRecoveryPhone: 'login',
+  postSigninRecoveryCode: 'login',
   recovery: 'reset_password',
   unblockCode: 'unblock',
   verify: 'registration',

packages/fxa-auth-server/lib/senders/email.js

@@ -87,6 +87,8 @@ module.exports = function (log, config, bounces) {
     postAddRecoveryPhone: 'recovery-phone-added',
     postChangeRecoveryPhone: 'recovery-phone-changed',
     postRemoveRecoveryPhone: 'recovery-phone-removed',
+    postSigninRecoveryPhone: 'signin-recovery-phone',
+    postSigninRecoveryCode: 'signin-recovery-code',
     recovery: 'forgot-password',
     unblockCode: 'new-unblock',
     verify: 'welcome',
@@ -140,6 +142,8 @@ module.exports = function (log, config, bounces) {
     postChangeAccountRecovery: 'manage-account',
     postRemoveAccountRecovery: 'manage-account',
     postAddRecoveryPhone: 'manage-account',
+    postSigninRecoveryPhone: 'manage-account',
+    postSigninRecoveryCode: 'manage-account',
     recovery: 'reset-password',
     unblockCode: 'unblock-code',
     verify: 'activate',
@@ -1584,19 +1588,14 @@ module.exports = function (log, config, bounces) {
 
   Mailer.prototype.postAddRecoveryPhoneEmail = function (message) {
     const templateName = 'postAddRecoveryPhone';
-    const links = this._generateLinks(
-      this.initiatePasswordResetUrl,
-      message,
-      {},
-      templateName
-    );
+    const links = this._generateSettingLinks(message, templateName);
     const [time, date] = this._constructLocalTimeString(
       message.timeZone,
       message.acceptLanguage
     );
 
     const headers = {
-      'X-Link': links.resetLink,
+      'X-Link': links.link,
     };
 
     return this.send({
@@ -1676,7 +1675,7 @@ module.exports = function (log, config, bounces) {
     );
 
     const headers = {
-      'X-Link': links.resetLink,
+      'X-Link': links.link,
     };
 
     return this.send({
@@ -1696,6 +1695,66 @@ module.exports = function (log, config, bounces) {
     });
   };
 
+  Mailer.prototype.postSigninRecoveryPhoneEmail = function (message) {
+    const templateName = 'postSigninRecoveryPhone';
+    const links = this._generateSettingLinks(message, templateName);
+    const [time, date] = this._constructLocalTimeString(
+      message.timeZone,
+      message.acceptLanguage
+    );
+
+    const headers = {
+      'X-Link': links.link,
+    };
+
+    return this.send({
+      ...message,
+      headers,
+      template: templateName,
+      templateValues: {
+        date,
+        device: this._formatUserAgentInfo(message),
+        privacyUrl: links.privacyUrl,
+        link: links.link,
+        resetLink: links.resetLink,
+        resetLinkAttributes: links.resetLinkAttributes,
+        supportLinkAttributes: links.supportLinkAttributes,
+        supportUrl: links.supportUrl,
+        time,
+      },
+    });
+  };
+
+  Mailer.prototype.postSigninRecoveryCodeEmail = function (message) {
+    const templateName = 'postSigninRecoveryCode';
+    const links = this._generateSettingLinks(message, templateName);
+    const [time, date] = this._constructLocalTimeString(
+      message.timeZone,
+      message.acceptLanguage
+    );
+
+    const headers = {
+      'X-Link': links.link,
+    };
+
+    return this.send({
+      ...message,
+      headers,
+      template: templateName,
+      templateValues: {
+        date,
+        device: this._formatUserAgentInfo(message),
+        privacyUrl: links.privacyUrl,
+        link: links.link,
+        resetLink: links.resetLink,
+        resetLinkAttributes: links.resetLinkAttributes,
+        supportLinkAttributes: links.supportLinkAttributes,
+        supportUrl: links.supportUrl,
+        time,
+      },
+    });
+  };
+
   Mailer.prototype.postAddAccountRecoveryEmail = function (message) {
     log.trace('mailer.postAddAccountRecoveryEmail', {
       email: message.email,

packages/fxa-auth-server/lib/senders/emails/partials/automatedEmailResetPassword/en.ftl

@@ -2,4 +2,4 @@ automated-email-reset = This is an automated email; if you did not authorize thi
   For more information, please visit <a data-l10n-name="supportLink">{ -brand-mozilla } Support</a>.
 # Variables:
 #  $resetLink (String) - Link to https://accounts.firefox.com/reset_password
-automated-email-reset-plaintext = If you did not change it, please reset your password now at { $resetLink }
+automated-email-reset-plaintext-v2 = If you did not authorize this action, please reset your password now at { $resetLink }

packages/fxa-auth-server/lib/senders/emails/partials/automatedEmailResetPassword/index.txt

@@ -1 +1 @@
-automated-email-reset-plaintext = "If you did not change it, please reset your password now at <%- resetLink %>"
+automated-email-reset-plaintext-v2 = "If you did not authorize this action, please reset your password now at <%- resetLink %>"

packages/fxa-auth-server/lib/senders/emails/templates/_versions.json

@@ -49,6 +49,8 @@
   "postAddRecoveryPhone": 1,
   "postChangeRecoveryPhone": 1,
   "postRemoveRecoveryPhone": 1,
+  "postSigninRecoveryPhone": 1,
+  "postSigninRecoveryCode": 1,
   "cadReminderFirst": 3,
   "cadReminderSecond": 3,
   "subscriptionAccountReminderFirst": 3,

packages/fxa-auth-server/lib/senders/emails/templates/postAddRecoveryPhone/en.ftl

@@ -1,4 +1,5 @@
 postAddRecoveryPhone-subject = Recovery phone added
+postAddRecoveryPhone-preview = Account protected by two-step authentication
 postAddRecoveryPhone-title = You created a recovery phone number
 # Variables:
 #  $maskedLastFourPhoneNumber (String) - A bullet point mask with the last four digits of the user's phone number, e.g. ••••••1234

packages/fxa-auth-server/lib/senders/emails/templates/postAddRecoveryPhone/includes.json

@@ -6,5 +6,9 @@
   "action": {
     "id": "postAddRecoveryPhone-action",
     "message": "Manage account"
+  },
+  "preview": {
+    "id": "postAddRecoveryPhone-preview",
+    "message": "Account protected by two-step authentication"
   }
 }

packages/fxa-auth-server/lib/senders/emails/templates/postAddRecoveryPhone/index.stories.ts

@@ -25,4 +25,4 @@ const createStory = storyWithProps(
   }
 );
 
-export const PostChangePrimary = createStory();
+export const PostAddRecoveryPhone = createStory();

packages/fxa-auth-server/lib/senders/emails/templates/postAddRecoveryPhone/index.txt

@@ -5,7 +5,7 @@ postAddRecoveryPhone-description = "You added <%- maskedLastFourPhoneNumber %> a
 postAddRecoveryPhone-how-protect-plaintext = "How this protects your account:"
 <%- twoFactorSupportLink %>
 
-postAddRecoveryPhone-from-device = "You enabled it from:"
+postAddRecoveryPhone-enabled-device = "You enabled it from:"
 <%- include('/partials/userInfo/index.txt') %>
 
 <%- include('/partials/manageAccount/index.txt') %>

packages/fxa-auth-server/lib/senders/emails/templates/postChangeRecoveryPhone/en.ftl

@@ -1,4 +1,5 @@
 postChangeRecoveryPhone-subject = Recovery phone updated
+postChangeRecoveryPhone-preview = Account protected by two-step authentication
 postChangeRecoveryPhone-title = You changed your recovery phone
 postChangeRecoveryPhone-description = You now have a new recovery phone. Your previous phone number was deleted.
 postChangeRecoveryPhone-requested-device = You requested it from: