add password reset otp

Author: nshirley

libs/accounts/email-renderer/src/templates/passwordForgotOtp/en.ftl

@@ -1,6 +1,6 @@
 # Variables:
 #  $code (String) - The confirmation code for sign-in
-password-forgot-otp-subject-2 = Use { $code } to change your password
+password-forgot-otp-subject-2 = Use { $code } to change your password, yo
 password-forgot-otp-preview = This code expires in 10 minutes
 password-forgot-otp-title = Forgot your password?
 password-forgot-otp-request = We received a request for a password change on your { -product-mozilla-account } from:

packages/fxa-auth-server/lib/routes/password.ts

@@ -1023,37 +1023,54 @@ module.exports = function (
         request.setMetricsFlowCompleteSignal(flowCompleteSignal);
 
         const code = await otpManager.create(account.uid);
-        const ip = request.app.clientAddress;
-        const service = payload.service || request.query.service;
-        const { deviceId, flowId, flowBeginTime } =
-          await request.app.metricsContext;
+        // const ip = request.app.clientAddress;
+        // const service = payload.service || request.query.service;
+        // const { deviceId, flowId, flowBeginTime } =
+        //   await request.app.metricsContext;
         const geoData = request.app.geo;
         const {
           browser: uaBrowser,
-          browserVersion: uaBrowserVersion,
           os: uaOS,
           osVersion: uaOSVersion,
-          deviceType: uaDeviceType,
         } = request.app.ua;
 
-        await mailer.sendPasswordForgotOtpEmail(account.emails, account, {
+        await fxaMailer.sendPasswordForgotOtpEmail({
+          to: fxaMailer.splitEmails(account.emails).to,
           code,
-          service,
-          acceptLanguage: request.app.acceptLanguage,
-          deviceId,
-          flowId,
-          flowBeginTime,
-          ip,
-          location: geoData.location,
-          timeZone: geoData.timeZone,
-          uaBrowser,
-          uaBrowserVersion,
-          uaOS,
-          uaOSVersion,
-          uaDeviceType,
-          uid: account.uid,
+          layoutTemplateValues: {},
+          templateValue: {
+            acceptLanguage: request.app.acceptLanguage,
+            device: {
+              uaBrowser,
+              uaOSVersion,
+              uaOS,
+            },
+            location: {
+              city: geoData.location?.city || '',
+              country: geoData.location?.country || '',
+              stateCode: geoData.location?.state || '',
+            },
+          },
         });
 
+        // await mailer.sendPasswordForgotOtpEmail(account.emails, account, {
+        //   code,
+        //   service,
+        //   acceptLanguage: request.app.acceptLanguage,
+        //   deviceId,
+        //   flowId,
+        //   flowBeginTime,
+        //   ip,
+        //   location: geoData.location,
+        //   timeZone: geoData.timeZone,
+        //   uaBrowser,
+        //   uaBrowserVersion,
+        //   uaOS,
+        //   uaOSVersion,
+        //   uaDeviceType,
+        //   uid: account.uid,
+        // });
+
         glean.resetPassword.otpEmailSent(request);
 
         await request.emitMetricsEvent('password.forgot.send_otp.completed');
@@ -1251,6 +1268,7 @@ module.exports = function (
           resume: payload.resume,
           timeZone: geoData.timeZone,
           acceptLanguage: request.app.acceptLanguage,
+          layoutTemplateValues: {},
           headers: {
             'X-Device-Id': deviceId,
             'X-Flow-Id': flowId,

packages/fxa-auth-server/lib/senders/fxa-mailer.ts

@@ -32,7 +32,20 @@ type RecoveryEmailInput = {
   >;
 };
 
-// TODO: Don't love the name here, but wanted to avoid confusion with the existing mailer. Come up with a new one later.
+type PasswordForgotOtpEmailInput = {
+  to: string;
+  code: string;
+  headers?: Record<string, string>;
+  layoutTemplateValues?: Partial<Omit<renderer.TemplateData, 'privacyUrl'>>;
+  templateValue: Omit<
+    renderer.passwordForgotOtp.TemplateData,
+    'code' | 'supportUrl' | 'supportLinkAttributes' | 'time' | 'date'
+  > & {
+    timeZone?: string;
+    acceptLanguage?: string;
+  };
+};
+
 export class FxaMailer extends FxaEmailRenderer {
   public helpers: renderer.EmailHelpers;
 
@@ -45,6 +58,7 @@ export class FxaMailer extends FxaEmailRenderer {
     super(bindings);
     this.helpers = new renderer.EmailHelpers();
   }
+
   async sendRecoveryEmail(opts: RecoveryEmailInput) {
     const templateName = renderer.recovery.template;
 
@@ -87,7 +101,7 @@ export class FxaMailer extends FxaEmailRenderer {
       {
         sync: false,
         ...opts.layoutTemplateValues,
-        privacyUrl: privacyUrl.toString(),
+        privacyUrl,
       }
     );
 
@@ -105,6 +119,43 @@ export class FxaMailer extends FxaEmailRenderer {
     });
   }
 
+  async sendPasswordForgotOtpEmail(opts: PasswordForgotOtpEmailInput) {
+    // these could probably be grouped together with time and date to a little
+    // helper method that returns all 4 values. they'll likely be used everywhere
+    const { privacyUrl, supportUrl } =
+      this.linkBuilder.buildCommonLinks('passwordForgotOtp');
+    const { timeNow: time, dateNow: date } =
+      this.helpers.constructLocalTimeString(
+        opts.templateValue.timeZone,
+        opts.templateValue.acceptLanguage
+      );
+    const rendered = await this.renderPasswordForgotOtp(
+      {
+        ...opts.templateValue,
+        time,
+        date,
+        code: opts.code,
+        supportUrl,
+      },
+      {
+        sync: false,
+        ...opts.layoutTemplateValues,
+        privacyUrl,
+      }
+    );
+    const headers = {
+      ...opts.headers,
+      'X-Password-Forgot-Otp': opts.code,
+    };
+
+    return this.emailSender.send({
+      to: opts.to,
+      from: this.mailerConfig.sender,
+      headers,
+      ...rendered,
+    });
+  }
+
   splitEmails(emails: Email[]) {
     return emails.reduce(
       (result: { to: string; cc: string[] }, item) => {