Skip to content

Commit f32a8d2

Browse files
Rahad-UllahRahad-Ullah
committed
refact: email template design and dynamic server name on it
1 parent 0b9d4c0 commit f32a8d2

File tree

1 file changed

+41
-22
lines changed

1 file changed

+41
-22
lines changed

‎src/shared/emailTemplate.ts‎

Lines changed: 41 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,31 @@
1+
import config from '../config';
12
import { ICreateAccount, IResetPassword } from '../types/emailTamplate';
23

34
const createAccount = (values: ICreateAccount) => {
45
const data = {
56
to: values.email,
67
subject: 'Verify your account',
7-
html: `<body style="font-family: Arial, sans-serif; background-color: #f9f9f9; margin: 50px; padding: 20px; color: #555;">
8-
<div style="width: 100%; max-width: 600px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1);">
9-
<img src="https://i.postimg.cc/6pgNvKhD/logo.png" alt="Logo" style="display: block; margin: 0 auto 20px; width:150px" />
10-
<h2 style="color: #277E16; font-size: 24px; margin-bottom: 20px;">Hey! ${values.name}, Your Toothlens Account Credentials</h2>
11-
<div style="text-align: center;">
12-
<p style="color: #555; font-size: 16px; line-height: 1.5; margin-bottom: 20px;">Your single use code is:</p>
13-
<div style="background-color: #277E16; width: 80px; padding: 10px; text-align: center; border-radius: 8px; color: #fff; font-size: 25px; letter-spacing: 2px; margin: 20px auto;">${values.otp}</div>
14-
<p style="color: #555; font-size: 16px; line-height: 1.5; margin-bottom: 20px;">This code is valid for 3 minutes.</p>
15-
</div>
16-
</div>
17-
</body>`,
8+
html: `
9+
<body
10+
style="font-family: 'Trebuchet MS', sans-serif; background-color: #f9f9f9; margin: 50px; padding: 20px; color: #555;">
11+
<div
12+
style="width: 100%; max-width: 600px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1);">
13+
<img src="https://i.postimg.cc/kMKg91ps/Screenshot-2025-11-03-170353.png" alt="Logo" style="display: block; margin: 0 auto 20px; width:150px" />
14+
<h2 style="color: #277E16; font-size: 24px; margin-bottom: 20px;">
15+
Hey! ${values.name}${values.name && ','}
16+
Your ${config.server_name} Account Credentials
17+
</h2>
18+
<div style="text-align: center;">
19+
<p style="color: #555; font-size: 16px; line-height: 1.5; margin-bottom: 20px;">Your single use code is:</p>
20+
<span
21+
style="background-color: #277E16; padding: 10px; text-align: center; border-radius: 8px; color: #fff; font-size: 25px; letter-spacing: 2px; margin: 20px auto;">
22+
${values.otp}
23+
</span>
24+
<p style="color: #555; font-size: 16px; line-height: 1.5; margin-bottom: 20px;">This code is valid for 3 minutes.</p>
25+
</div>
26+
</div>
27+
</body>
28+
`,
1829
};
1930
return data;
2031
};
@@ -23,17 +34,25 @@ const resetPassword = (values: IResetPassword) => {
2334
const data = {
2435
to: values.email,
2536
subject: 'Reset your password',
26-
html: `<body style="font-family: Arial, sans-serif; background-color: #f9f9f9; margin: 50px; padding: 20px; color: #555;">
27-
<div style="width: 100%; max-width: 600px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1);">
28-
<img src="https://i.postimg.cc/6pgNvKhD/logo.png" alt="Logo" style="display: block; margin: 0 auto 20px; width:150px" />
29-
<div style="text-align: center;">
30-
<p style="color: #555; font-size: 16px; line-height: 1.5; margin-bottom: 20px;">Your single use code is:</p>
31-
<div style="background-color: #277E16; width: 80px; padding: 10px; text-align: center; border-radius: 8px; color: #fff; font-size: 25px; letter-spacing: 2px; margin: 20px auto;">${values.otp}</div>
32-
<p style="color: #555; font-size: 16px; line-height: 1.5; margin-bottom: 20px;">This code is valid for 3 minutes.</p>
33-
<p style="color: #b9b4b4; font-size: 16px; line-height: 1.5; margin-bottom: 20px;text-align:left">If you didn't request this code, you can safely ignore this email. Someone else might have typed your email address by mistake.</p>
34-
</div>
35-
</div>
36-
</body>`,
37+
html: `
38+
<body style="font-family: 'Trebuchet MS', sans-serif; background-color: #f9f9f9; margin: 50px; padding: 20px; color: #555;">
39+
<div
40+
style="width: 100%; max-width: 600px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1);">
41+
<img src="https://i.postimg.cc/kMKg91ps/Screenshot-2025-11-03-170353.png" alt="Logo" style="display: block; margin: 0 auto 20px; width:150px" />
42+
<div style="text-align: center;">
43+
<p style="color: #555; font-size: 16px; line-height: 1.5; margin-bottom: 20px;">Your single use code is:</p>
44+
<span
45+
style="background-color: #277E16; padding: 10px; text-align: center; border-radius: 8px; color: #fff; font-size: 25px; letter-spacing: 2px; margin: 20px auto;">
46+
${values.otp}
47+
</span>
48+
<p style="color: #555; font-size: 16px; line-height: 1.5; margin-bottom: 20px;">This code is valid for 3 minutes.</p>
49+
<p style="color: #b9b4b4; font-size: 16px; line-height: 1.5; margin-bottom: 20px;text-align:center">
50+
If you didn't request this code, you can safely ignore this email. Someone else might have typed your email address by mistake.
51+
</p>
52+
</div>
53+
</div>
54+
</body>
55+
`,
3756
};
3857
return data;
3958
};

0 commit comments

Comments
 (0)