Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add email template for sending OTP to the user #582

Merged
merged 4 commits into from
Dec 8, 2024
Merged

feat: Add email template for sending OTP to the user #582

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
915111d
feat: created send otp email template
Allan2000-Git Dec 7, 2024
e510060
Merge branch 'develop' into feat/send-otp-email-template
Allan2000-Git Dec 8, 2024
8f6f927
feat: added send otp email template for sendEmailChangedOtp method
Allan2000-Git Dec 8, 2024
6a42609
Merge branch 'feat/send-otp-email-template' of https://github.com/All…
Allan2000-Git Dec 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions apps/api/src/mail/emails/otp-email-template.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import * as React from 'react'
import { Text, Section } from '@react-email/components'
import { otpStyle, text, workspaceDetails } from './styles/common-styles'
import BaseEmailTemplate from './components/base-email-template'

interface OTPEmailTemplateProps {
otp: string
}

export const OTPEmailTemplate = ({ otp }: OTPEmailTemplateProps) => {
return (
<BaseEmailTemplate
previewText="Your One Time Password (OTP) for Keyshade"
heading="Your One Time Password (OTP)"
>
<Text style={text}>Dear User,</Text>
<Text style={text}>
We’ve sent you this email to verify your Keyshade account. Your One-Time
Password (OTP) is:
</Text>
<Section style={workspaceDetails}>
<Text style={otpStyle}>
<strong>{otp}</strong>
</Text>
</Section>
<Text style={text}>
This OTP will expire in <strong>5 minutes</strong>. Please use it to
complete your action on Keyshade.
</Text>
</BaseEmailTemplate>
)
}

export default OTPEmailTemplate
12 changes: 10 additions & 2 deletions apps/api/src/mail/emails/styles/common-styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,11 @@ export const text: CSSProperties = {

export const workspaceDetails: CSSProperties = {
width: '100%',
backgroundColor: '#fafafa',
borderRadius: '5px',
margin: '20px 0px',
padding: '10px 20px'
padding: '10px 20px',
border: '1px solid #eee',
backgroundColor: '#fafafa'
}

export const workspaceInfo: CSSProperties = {
Expand All @@ -60,6 +61,13 @@ export const ctaButton: CSSProperties = {
borderRadius: '5px'
}

export const otpStyle: CSSProperties = {
...workspaceInfo,
fontSize: '26px',
textAlign: 'center',
letterSpacing: '8px'
}

export const footer: CSSProperties = {
borderTop: '1px solid #eaeaea',
padding: '20px'
Expand Down
55 changes: 17 additions & 38 deletions apps/api/src/mail/services/mail.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { Transporter, createTransport } from 'nodemailer'
import RemovedFromWorkspaceEmail from '../emails/workspace-removal'
import { render } from '@react-email/render'
import WorkspaceInvitationEmail from '../emails/workspace-invitation'
import OTPEmailTemplate from '../emails/otp-email-template'

@Injectable()
export class MailService implements IMailService {
Expand Down Expand Up @@ -50,47 +51,25 @@ export class MailService implements IMailService {
}

async sendOtp(email: string, otp: string): Promise<void> {
const subject = 'Your Login OTP'
const body = `<!DOCTYPE html>
<html>
<head>
<title>OTP Verification</title>
</head>
<body>
<h1>Welcome to keyshade!</h1>
<p>Hello there!</p>
<p>We have sent you this email to verify your account.</p>
<p>Your One Time Password (OTP) is: <strong>${otp}</strong></p>
<p>This OTP will expire in <strong>5 minutes</strong>.</p>
<p>Please enter this OTP in the application to verify your account.</p>
<p>Thank you for choosing us.</p>
<p>Best Regards,</p>
<p>keyshade Team</p>
</body>
</html>
`
const subject = 'Your One Time Password (OTP) for Keyshade'

const body = await render(
OTPEmailTemplate({
otp
})
)

await this.sendEmail(email, subject, body)
}
async sendEmailChangedOtp(email: string, otp: string): Promise<void> {
const subject = 'Your OTP for Email Change'
const body = `<!DOCTYPE html>
<html>
<head>
<title>OTP Verification</title>
</head>
<body>
<h1>Are you trying to change your email?</h1>
<p>Hello there!</p>
<p>We have sent you this email to verify your new email.</p>
<p>Your One Time Password (OTP) is: <strong>${otp}</strong></p>
<p>This OTP will expire in <strong>5 minutes</strong>.</p>
<p>Please enter this OTP in the application to verify your new email.</p>
<p>Thank you.</p>
<p>Best Regards,</p>
<p>keyshade Team</p>
</body>
</html>
`
const subject = 'Your Keyshade Email Change One Time Password (OTP)'

const body = await render(
OTPEmailTemplate({
otp
})
)

await this.sendEmail(email, subject, body)
}
async accountLoginEmail(email: string): Promise<void> {
Expand Down
Loading