From ebed60a0afb76ab40f793d0bb2c65ddee383277f Mon Sep 17 00:00:00 2001 From: Austin Turner Date: Sun, 17 Nov 2024 11:42:57 -0700 Subject: [PATCH] Add link in email for 2FA In addition to entering code, users can click the link to open jetstream and auto-enter the code work towards #1076 --- libs/email/src/lib/components/EmailFooter.tsx | 11 ++++++----- .../auth/TwoStepVerificationEmail.tsx | 15 +++++++++++++-- .../src/lib/email-templates/auth/VerifyEmail.tsx | 2 +- libs/email/src/lib/email.tsx | 2 +- libs/email/src/lib/shared-styles.ts | 2 +- 5 files changed, 22 insertions(+), 10 deletions(-) diff --git a/libs/email/src/lib/components/EmailFooter.tsx b/libs/email/src/lib/components/EmailFooter.tsx index 86db0e53..6160be22 100644 --- a/libs/email/src/lib/components/EmailFooter.tsx +++ b/libs/email/src/lib/components/EmailFooter.tsx @@ -1,4 +1,4 @@ -import { Section, Text } from '@react-email/components'; +import { Link, Section, Text } from '@react-email/components'; import * as React from 'react'; export const EmailFooter = () => { @@ -34,24 +34,25 @@ export const EmailFooter = () => { fontSize: 12, lineHeight: '18px', fontWeight: 600, - color: 'rgb(107,114,128)', + color: '#6b7280', textTransform: 'uppercase', }} > Whitefish, MT USA - support@getjetstream.app - + diff --git a/libs/email/src/lib/email-templates/auth/TwoStepVerificationEmail.tsx b/libs/email/src/lib/email-templates/auth/TwoStepVerificationEmail.tsx index c6043d08..f38a3b24 100644 --- a/libs/email/src/lib/email-templates/auth/TwoStepVerificationEmail.tsx +++ b/libs/email/src/lib/email-templates/auth/TwoStepVerificationEmail.tsx @@ -1,15 +1,20 @@ -import { Body, Container, Head, Heading, Html, Preview, Section, Text } from '@react-email/components'; +import { Body, Container, Head, Heading, Html, Link, Preview, Section, Text } from '@react-email/components'; import * as React from 'react'; import { EmailFooter } from '../../components/EmailFooter'; import { EmailLogo } from '../../components/EmailLogo'; import { EMAIL_STYLES } from '../../shared-styles'; interface TwoStepVerificationEmailProps { + baseUrl: string; validationCode: string; expMinutes: number; } -export const TwoStepVerificationEmail = ({ validationCode, expMinutes }: TwoStepVerificationEmailProps) => ( +export const TwoStepVerificationEmail = ({ + baseUrl = 'https://getjetstream.app', + validationCode, + expMinutes, +}: TwoStepVerificationEmailProps) => ( Verify your identity with Jetstream - {validationCode} @@ -26,6 +31,12 @@ export const TwoStepVerificationEmail = ({ validationCode, expMinutes }: TwoStep {validationCode} +
+ + Or click this link + +
+ Didn't request this? If you didn't make this request, you can safely ignore this email. diff --git a/libs/email/src/lib/email-templates/auth/VerifyEmail.tsx b/libs/email/src/lib/email-templates/auth/VerifyEmail.tsx index 658da1df..c478005f 100644 --- a/libs/email/src/lib/email-templates/auth/VerifyEmail.tsx +++ b/libs/email/src/lib/email-templates/auth/VerifyEmail.tsx @@ -5,7 +5,7 @@ import { EmailLogo } from '../../components/EmailLogo'; import { EMAIL_STYLES } from '../../shared-styles'; interface VerifyEmailProps { - baseUrl?: string; + baseUrl: string; validationCode: string; expHours: number; } diff --git a/libs/email/src/lib/email.tsx b/libs/email/src/lib/email.tsx index 90ac64ed..78924809 100644 --- a/libs/email/src/lib/email.tsx +++ b/libs/email/src/lib/email.tsx @@ -114,7 +114,7 @@ export async function sendEmailVerification(emailAddress: string, code: string, } export async function sendVerificationCode(emailAddress: string, code: string, expMinutes: number) { - const component = ; + const component = ; const [html, text] = await renderComponent(component); await sendEmail({ diff --git a/libs/email/src/lib/shared-styles.ts b/libs/email/src/lib/shared-styles.ts index 6f40a328..cc873f57 100644 --- a/libs/email/src/lib/shared-styles.ts +++ b/libs/email/src/lib/shared-styles.ts @@ -88,7 +88,7 @@ const paragraph: React.CSSProperties = { }; const link: React.CSSProperties = { - color: '#444', + color: '#009aff', textDecoration: 'underline', };