feat: ability to add recovery email (#616)

* Add code logic

* Add migrations

* Remove commented code + minor ui details\

* Show nicer message when email is set

* Remove change on db:studio

* Add extra var to console log email

* Remove unused comment

* Remove console log

* Ability to use enter to submit verification code

* Fix display issue on verify-email

* fix: requested changes

---------

Co-authored-by: BlankParticle <[email protected]>

Author: benjaminshafii

apps/platform/trpc/routers/userRouter/securityRouter.ts

@@ -28,6 +28,8 @@ import { TOTPController, createTOTPKeyURI } from 'oslo/otp';
 import { lucia } from '~platform/utils/auth';
 import { storage } from '~platform/storage';
 import { env } from '~platform/env';
+import crypto from 'crypto';
+import { sendRecoveryEmailConfirmation } from '~platform/utils/mail/transactional';
 
 const authStorage = storage.auth;
 
@@ -968,5 +970,106 @@ export const securityRouter = router({
       await lucia.invalidateUserSessions(accountData.id);
 
       return { success: true };
-    })
+    }),
+
+  setRecoveryEmail: accountProcedure
+    .input(
+      z.object({
+        recoveryEmail: z.string().email()
+      })
+    )
+    .mutation(async ({ ctx, input }) => {
+      const { db, account } = ctx;
+
+      const hashedEmail = await new Argon2id().hash(input.recoveryEmail);
+      // add recovery code to cash
+      await db
+        .update(accounts)
+        .set({
+          recoveryEmailHash: hashedEmail
+        })
+        .where(eq(accounts.id, account.id));
+
+      const accountData = await db.query.accounts.findFirst({
+        where: eq(accounts.id, account.id),
+        columns: {
+          username: true
+        }
+      });
+      if (!accountData) {
+        throw new TRPCError({
+          code: 'NOT_FOUND',
+          message: 'Account data not found'
+        });
+      }
+
+      const verificationCode = nanoIdToken();
+      await authStorage.setItem(
+        `recoveryEmailVerificationCode:${account.id}`,
+        verificationCode
+      );
+
+      const confirmationUrl = `${env.WEBAPP_URL}/recovery/verify-email/?code=${verificationCode}`;
+
+      // Send verification email
+      await sendRecoveryEmailConfirmation({
+        to: input.recoveryEmail,
+        username: accountData.username,
+        recoveryEmail: input.recoveryEmail,
+        confirmationUrl: confirmationUrl,
+        expiryDate: datePlus('15 minutes').toDateString(),
+        verificationCode
+      });
+
+      return { success: true };
+    }),
+
+  verifyRecoveryEmail: accountProcedure
+    .input(
+      z.object({
+        verificationCode: z.string()
+      })
+    )
+    .mutation(async ({ ctx, input }) => {
+      const { db, account } = ctx;
+
+      const storedCode = await authStorage.getItem(
+        `recoveryEmailVerificationCode:${account.id}`
+      );
+      if (storedCode !== input.verificationCode) {
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message: 'Invalid verification code'
+        });
+      }
+      await db
+        .update(accounts)
+        .set({ recoveryEmailVerifiedAt: new Date() })
+        .where(eq(accounts.id, account.id));
+
+      authStorage.removeItem(`recoveryEmailVerificationCode:${account.id}`);
+
+      return { success: true };
+    }),
+
+  getRecoveryEmailStatus: accountProcedure.query(async ({ ctx }) => {
+    const { db, account } = ctx;
+    const result = await db.query.accounts.findFirst({
+      where: eq(accounts.id, account.id),
+      columns: {
+        recoveryEmailHash: true,
+        recoveryEmailVerifiedAt: true
+      }
+    });
+    if (!result) {
+      throw new TRPCError({
+        code: 'NOT_FOUND',
+        message: 'Account data not found'
+      });
+    }
+    return {
+      isSet: Boolean(result.recoveryEmailHash),
+      isVerified: Boolean(result.recoveryEmailVerifiedAt)
+    };
+  })
 });

apps/platform/utils/mail/setRecoveryEmailTemplate.ts

@@ -0,0 +1,92 @@
+export interface RecoveryEmailProps {
+  to: string;
+  username: string;
+  recoveryEmail: string;
+  confirmationUrl: string;
+  expiryDate: string;
+  verificationCode: string;
+}
+
+export const recoveryEmailTemplatePlainText = ({
+  to,
+  username,
+  recoveryEmail,
+  confirmationUrl,
+  expiryDate,
+  verificationCode
+}: RecoveryEmailProps) =>
+  `Hello ${username},
+  
+  You have requested to link ${recoveryEmail} as your recovery email for your Uninbox account.
+  
+  Confirm your recovery email at ${confirmationUrl} 
+  
+  If the button is not working, copy paste this code in your browser:
+  ${verificationCode} 
+  
+  This confirmation link will expire on ${expiryDate}. Make sure to confirm before the expiry date.
+  
+  --------------------------------------------------------------------------------
+  
+  This email was intended for ${to}. If you did not request to link a recovery email,
+  you can ignore this email. If you are concerned about your account's safety,
+  please contact us immediately.`;
+
+export const recoveryEmailTemplate = ({
+  to,
+  username,
+  recoveryEmail,
+  confirmationUrl,
+  expiryDate,
+  verificationCode
+}: RecoveryEmailProps) =>
+  `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+  <html dir="ltr" lang="en">
+    <head>
+      <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
+    </head>
+    <div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">Confirm your recovery email for Uninbox<div> ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏</div>
+    </div>
+    <body style="margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;background-color:rgb(255,255,255);padding-left:0.5rem;padding-right:0.5rem;font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;">
+      <table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:465px;margin-left:auto;margin-right:auto;margin-top:40px;margin-bottom:40px;border-radius:0.25rem;border-width:1px;border-style:solid;border-color:rgb(234,234,234);padding:20px">
+        <tbody>
+          <tr style="width:100%">
+            <td>
+              <table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin-top:32px">
+                <tbody>
+                  <tr>
+                    <td><img alt="Uninbox" height="100" src="https://avatars.githubusercontent.com/u/135225712?s=400&amp;u=72ad315d63b0326e5bb34377c3f59389373edc9a&amp;v=4" style="display:block;outline:none;border:none;text-decoration:none;margin-left:auto;margin-right:auto;margin-top:0px;margin-bottom:0px;border-radius:0.375rem" width="100" /></td>
+                  </tr>
+                </tbody>
+              </table>
+              <p style="font-size:14px;line-height:12px;margin:16px 0;margin-top:2.5rem;color:rgb(0,0,0)">Hello <strong>${username}</strong>,</p>
+              <p style="font-size:14px;line-height:12px;margin:16px 0;color:rgb(0,0,0)">You have requested to link <strong>${recoveryEmail}</strong> as your recovery email for your Uninbox account.</p>
+              <table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin-bottom:32px;margin-top:32px;text-align:center">
+                <tbody>
+                  <tr>
+                    <td><a href="${confirmationUrl}" style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;border-radius:0.25rem;background-color:rgb(0,0,0);padding-left:1.25rem;padding-right:1.25rem;padding-top:0.75rem;padding-bottom:0.75rem;text-align:center;font-size:12px;font-weight:600;color:rgb(255,255,255);text-decoration-line:none;padding:12px 20px 12px 20px" target="_blank"><span><!--[if mso]><i style="letter-spacing: 20px;mso-font-width:-100%;mso-text-raise:18" hidden>&nbsp;</i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:9px">Confirm Recovery Email</span><span><!--[if mso]><i style="letter-spacing: 20px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]--></span></a></td>
+                  </tr>
+                </tbody>
+              </table>
+              <p style="font-size:14px;line-height:24px;margin:16px 0;color:rgb(0,0,0)">If the button is not working, copy paste this code in your browser:</p>
+              <div style="background-color:#f0f0f0;border-radius:4px;padding:10px;margin-bottom:20px;">
+                <code style="word-break:break-all;display:block;font-family:monospace;font-size:12px;color:#333;">${verificationCode}</code>
+              </div>
+              <table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation">
+                <tbody>
+                  <tr>
+                    <td>
+                      <p style="font-size:14px;line-height:20px;margin:16px 0;color:rgb(0,0,0)">This confirmation link will expire on <strong>${expiryDate}</strong>. Make sure to confirm before the expiry date.</p>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+              <hr style="width:100%;border:none;border-top:1px solid #eaeaea;margin-left:0px;margin-right:0px;margin-top:26px;margin-bottom:26px;border-width:1px;border-style:solid;border-color:rgb(234,234,234)" />
+              <p style="font-size:12px;line-height:24px;margin:16px 0;color:rgb(102,102,102)">This email was intended for<!-- --> <span style="color:rgb(0,0,0)">${to}</span>. If you did not request to link a recovery email, you can ignore this email. If you are concerned about your account&#x27;s safety, please contact us immediately.</p>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </body>
+  </html>
+`;

apps/platform/utils/mail/transactional.ts

@@ -3,6 +3,11 @@ import {
   inviteTemplatePlainText,
   type InviteEmailProps
 } from './inviteTemplate';
+import {
+  recoveryEmailTemplate,
+  recoveryEmailTemplatePlainText,
+  type RecoveryEmailProps
+} from './setRecoveryEmailTemplate';
 import { env } from '~platform/env';
 
 type PostalResponse =
@@ -29,52 +34,124 @@ type PostalResponse =
       };
     };
 
-export async function sendInviteEmail({
-  invitingOrgName,
-  to,
-  invitedName,
-  expiryDate,
-  inviteUrl
-}: InviteEmailProps) {
+type EmailData = {
+  to: string[];
+  cc: string[];
+  from: string;
+  sender: string;
+  subject: string;
+  plain_body: string;
+  html_body: string;
+  attachments: unknown[];
+  headers: Record<string, string>;
+};
+
+async function sendEmail(emailData: EmailData): Promise<PostalResponse> {
+  if (env.MAILBRIDGE_LOCAL_MODE) {
+    console.info('Mailbridge local mode enabled, sending email to console');
+    console.info(JSON.stringify(emailData, null, 2));
+    return {
+      status: 'success',
+      time: Date.now(),
+      flags: {},
+      data: {
+        message_id: 'console',
+        messages: {}
+      }
+    };
+  }
+
   const config = env.MAILBRIDGE_TRANSACTIONAL_CREDENTIALS;
-  const sendMailPostalResponse = (await fetch(
+  const sendMailPostalResponse = await fetch(
     `${config.apiUrl}/api/v1/send/message`,
     {
       method: 'POST',
       headers: {
         'X-Server-API-Key': `${config.apiKey}`,
         'Content-Type': 'application/json'
       },
-      body: JSON.stringify({
-        to: [to],
-        cc: [],
-        from: `${config.sendAsName} <${config.sendAsEmail}>`,
-        sender: config.sendAsEmail,
-        subject: `You have been invited to join ${invitingOrgName} on Uninbox`,
-        plain_body: inviteTemplatePlainText({
-          expiryDate,
-          invitedName,
-          inviteUrl,
-          invitingOrgName: invitingOrgName,
-          to
-        }),
-        html_body: inviteTemplate({
-          expiryDate,
-          invitedName,
-          inviteUrl,
-          invitingOrgName: invitingOrgName,
-          to
-        }),
-        attachments: [],
-        headers: {}
-      })
+      body: JSON.stringify(emailData)
     }
   )
     .then((res) => res.json())
     .catch((e) => {
-      console.error('🚨 error sending invite email', e);
-    })) as PostalResponse;
+      console.error('🚨 error sending email', e);
+      return {
+        status: 'parameter-error',
+        time: Date.now(),
+        flags: {},
+        data: { message_id: 'console', messages: {} }
+      };
+    });
 
-  if (!sendMailPostalResponse) return;
   return sendMailPostalResponse;
 }
+
+export async function sendInviteEmail({
+  invitingOrgName,
+  to,
+  invitedName,
+  expiryDate,
+  inviteUrl
+}: InviteEmailProps) {
+  const config = env.MAILBRIDGE_TRANSACTIONAL_CREDENTIALS;
+  return await sendEmail({
+    to: [to],
+    cc: [],
+    from: `${config.sendAsName} <${config.sendAsEmail}>`,
+    sender: config.sendAsEmail,
+    subject: `You have been invited to join ${invitingOrgName} on Uninbox`,
+    plain_body: inviteTemplatePlainText({
+      to,
+      expiryDate,
+      invitedName,
+      inviteUrl,
+      invitingOrgName
+    }),
+    html_body: inviteTemplate({
+      to,
+      expiryDate,
+      invitedName,
+      inviteUrl,
+      invitingOrgName
+    }),
+    attachments: [],
+    headers: {}
+  });
+}
+
+export async function sendRecoveryEmailConfirmation({
+  to,
+  username,
+  recoveryEmail,
+  confirmationUrl,
+  expiryDate,
+  verificationCode
+}: RecoveryEmailProps) {
+  const config = env.MAILBRIDGE_TRANSACTIONAL_CREDENTIALS;
+  return await sendEmail({
+    to: [to],
+    cc: [],
+    from: `${config.sendAsName} <${config.sendAsEmail}>`,
+    sender: config.sendAsEmail,
+    subject: `Confirm your recovery email for Uninbox`,
+    plain_body: recoveryEmailTemplatePlainText({
+      to,
+      username,
+      recoveryEmail,
+      confirmationUrl,
+      expiryDate,
+      verificationCode
+    }),
+    html_body: recoveryEmailTemplate({
+      to,
+      username,
+      recoveryEmail,
+      confirmationUrl,
+      expiryDate,
+      verificationCode
+    }),
+    attachments: [],
+    headers: {}
+  });
+}