alamin
/
textbee
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

chore(api): improve email templates

legacy-ui
isra el 1 year ago
parent
e2acbc077d
commit
bb2cc320ec
5 changed files with 353 additions and 55 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      api/.env.example
  2. 8
      api/src/auth/auth.service.ts
  3. 137
      api/src/mail/templates/password-reset-request.hbs
  4. 96
      api/src/mail/templates/password-reset-success.hbs
  5. 147
      api/src/mail/templates/welcome-1.hbs

2
api/.env.example
View File

@ -3,6 +3,8 @@ MONGO_URI=
JWT_SECRET=secret JWT_SECRET=secret
JWT_EXPIRATION=60d JWT_EXPIRATION=60d
FRONTEND_URL=
FIREBASE_PROJECT_ID= FIREBASE_PROJECT_ID=
FIREBASE_PRIVATE_KEY_ID= FIREBASE_PRIVATE_KEY_ID=
FIREBASE_PRIVATE_KEY= FIREBASE_PRIVATE_KEY=

8
api/src/auth/auth.service.ts
View File

@ -155,11 +155,13 @@ export class AuthService {
}) })
passwordReset.save() passwordReset.save()
const resetLink = `${process.env.FRONTEND_URL || 'https://textbee.dev'}/reset-password?email=${encodeURIComponent(user.email)}&otp=${otp}`
await this.mailService.sendEmailFromTemplate({ await this.mailService.sendEmailFromTemplate({
to: user.email, to: user.email,
subject: 'Password Reset',
subject: 'textbee.dev - Password Reset',
template: 'password-reset-request', template: 'password-reset-request',
context: { name: user.name, otp },
context: { name: user.name, resetLink, otp },
}) })
return { message: 'Password reset email sent' } return { message: 'Password reset email sent' }
@ -189,7 +191,7 @@ export class AuthService {
this.mailService.sendEmailFromTemplate({ this.mailService.sendEmailFromTemplate({
to: user.email, to: user.email,
subject: 'Password Reset',
subject: 'textbee.dev - Password Reset',
template: 'password-reset-success', template: 'password-reset-success',
context: { name: user.name }, context: { name: user.name },
}) })

137
api/src/mail/templates/password-reset-request.hbs
View File

@ -1,14 +1,129 @@
<h1>Hello {{name}},</h1>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333333;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.container {
background-color: #ffffff;
border-radius: 8px;
padding: 30px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.header {
text-align: center;
margin-bottom: 30px;
}
.reset-button {
display: inline-block;
background-color: #007bff;
color: white;
padding: 12px 24px;
text-decoration: none;
border-radius: 4px;
margin: 20px 0;
}
.reset-button:hover {
background-color: #0056b3;
}
.divider {
border-top: 1px solid #e0e0e0;
margin: 20px 0;
}
.otp-section {
background-color: #f8f9fa;
padding: 15px;
border-radius: 4px;
text-align: center;
margin: 20px 0;
}
.community-section {
text-align: center;
}
</style>
</head>
<body>
<div class='container'>
<div class='header'>
<h1>Password Reset Request</h1>
</div>
<p>Hello {{name}},</p>
<p>We have received a request to reset your password. If you did not make
this request, please ignore this email. Otherwise, you can reset your
password using the button below.</p>
<div style='text-align: center;'>
<a href='{{resetLink}}' class='reset-button'>Reset Password</a>
</div>
<div class='divider'></div>
<p>If the button above doesn't work, you can copy and paste the following
link into your browser:</p>
<p style='word-break: break-all;'>{{resetLink}}</p>
<div class='otp-section'>
<p>Alternatively, you can use this OTP:</p>
<div class='otp-code'>{{otp}}</div>
</div>
<div class='divider'></div>
<div class='footer'>
<p> <p>
We have received a request to reset your password. If you did not make this
request, please ignore this email. Otherwise, you can reset your password
using the OTP below.
Thank you,<br />
<strong>TextBee.dev</strong>
</p> </p>
<hr/>
<strong> {{otp}} </strong>
<hr />
<div>
Thank you,
<br />
<i>TextBee.dev</i>
<p style='font-size: 12px; color: #999;'>
If you didn't request this password reset, you can safely ignore this
email.
</p>
<div class='divider'></div>
<div class='community-section'>
<p style='font-size: 14px; margin-bottom: 15px;'>Join our community!</p>
<a
href='https://discord.gg/d7vyfBpWbQ'
style='display: inline-block; margin: 0 10px; color: #7289DA; text-decoration: none;'
>
<img
src='https://cdn.prod.website-files.com/6257adef93867e50d84d30e2/636e0a6918e57475a843f59f_icon_clyde_black_RGB.svg'
alt='Discord'
style='width: 20px; vertical-align: middle;'
/>
Join Discord
</a>
<a
href='https://github.com/vernu/textbee'
style='display: inline-block; margin: 0 10px; color: #333; text-decoration: none;'
>
<img
src='https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png'
alt='GitHub'
style='width: 20px; vertical-align: middle;'
/>
Star on GitHub
</a>
<a
href='https://patreon.com/vernu'
style='display: inline-block; margin: 0 10px; color: #FF424D; text-decoration: none;'
>
<img
src='https://c5.patreon.com/external/logo/downloads_logomark_color_on_white.png'
alt='Patreon'
style='width: 20px; vertical-align: middle;'
/>
Support on Patreon
</a>
</div>
</div>
</div> </div>
</body>
</html>

96
api/src/mail/templates/password-reset-success.hbs
View File

@ -1,8 +1,92 @@
<h1>Hello {{name}}</h1>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333333;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.container {
background-color: #ffffff;
border-radius: 8px;
padding: 30px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.header {
text-align: center;
margin-bottom: 30px;
}
.divider {
border-top: 1px solid #e0e0e0;
margin: 20px 0;
}
.community-section {
text-align: center;
}
</style>
</head>
<body>
<div class='container'>
<div class='header'>
<h1>Password Reset Successful</h1>
</div>
<p>Hello {{name}},</p>
<p>Your password has been successfully reset. You can now login to your account using your new password.</p>
<div class='divider'></div>
<div class='footer'>
<p> <p>
Your password has been successfully reset. You can now login with your new password.
Thank you,<br />
<strong>TextBee.dev</strong>
</p> </p>
<div>
Thank you,
<br />
<i>TextBee.dev</i>
<p style='font-size: 12px; color: #999;'>
If you didn't reset your password, please contact our support team immediately.
</p>
<div class='divider'></div>
<div class='community-section'>
<p style='font-size: 14px; margin-bottom: 15px;'>Join our community!</p>
<a
href='https://discord.gg/d7vyfBpWbQ'
style='display: inline-block; margin: 0 10px; color: #7289DA; text-decoration: none;'
>
<img
src='https://cdn.prod.website-files.com/6257adef93867e50d84d30e2/636e0a6918e57475a843f59f_icon_clyde_black_RGB.svg'
alt='Discord'
style='width: 20px; vertical-align: middle;'
/>
Join Discord
</a>
<a
href='https://github.com/vernu/textbee'
style='display: inline-block; margin: 0 10px; color: #333; text-decoration: none;'
>
<img
src='https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png'
alt='GitHub'
style='width: 20px; vertical-align: middle;'
/>
Star on GitHub
</a>
<a
href='https://patreon.com/vernu'
style='display: inline-block; margin: 0 10px; color: #FF424D; text-decoration: none;'
>
<img
src='https://c5.patreon.com/external/logo/downloads_logomark_color_on_white.png'
alt='Patreon'
style='width: 20px; vertical-align: middle;'
/>
Support on Patreon
</a>
</div>
</div>
</div>
</body>
</html>

147
api/src/mail/templates/welcome-1.hbs
View File

@ -1,32 +1,127 @@
<h1>Hi {{name}},</h1>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333333;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.container {
background-color: #ffffff;
border-radius: 8px;
padding: 30px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.header {
text-align: center;
margin-bottom: 30px;
}
.divider {
border-top: 1px solid #e0e0e0;
margin: 20px 0;
}
.community-section {
text-align: center;
}
.tips-section {
margin: 20px 0;
}
.tips-section ol {
padding-left: 20px;
}
.signature {
margin-top: 20px;
}
</style>
</head>
<body>
<div class='container'>
<div class='header'>
<h1>Welcome to TextBee!</h1>
</div>
<p>Hi {{name}},</p>
<p>I'm Vernu, the founder of TextBee. I built this platform to help you
with all your messaging needs - whether it's sending OTPs,
notifications, or creating automated messaging workflows for your
business.</p>
<div class='tips-section'>
<h3>Here are a few tips to get you started:</h3>
<ol>
<li><a href='https://github.com/vernu/textbee'>Explore our
Documentation</a>
- Learn how to integrate TextBee with your existing systems</li>
<li><a href='https://dl.textbee.dev'>Download the Mobile App</a></li>
<li><a href='https://textbee.dev/dashboard'>Access your Dashboard</a></li>
<li><a href='https://discord.gg/d7vyfBpWbQ'>Join our Discord Community</a></li>
<li><a href='https://www.patreon.com/vernu'>Support Our Work</a></li>
<li><a href='https://github.com/vernu/textbee'>Star our GitHub
Repository</a></li>
</ol>
</div>
<div class='divider'></div>
<p> <p>
My name is Vernu, and I'm the founder of TextBee.
<br /><br />
I built TextBee to help you with your messaging needs. be it sending OTP, notifications, or automated messaging workflows for your business.
<br/><br/>
Here are few tips to get you started: <br/><br />
<ol start="1">
<li><a href="https://github.com/vernu/textbee">Explore our Documentation: Learn how to integrate TextBee with your existing systems in the github readme</a></li>
<li><a href="https://discord.gg/d7vyfBpWbQ">Join the Community on Discord and get help: Connect with other users and developers, ask questions, and share ideas on our Community Forum.</a></li>
<li><a href="https://www.patreon.com/vernu">Support Our Work: Consider supporting us on Patreon to help us continue improving TextBee.</a></li>
<li><a href="https://github.com/vernu/textbee">Star our repo on Github</a></li>
<br /> <br/>
<hr/>
P.S. Why did you choose TextBee? What feedback do you have? <br/>
Do you have any questions or need assistance? <br/>
Feel free to reach out to our support team at <a href="mailto:contact@textbee.dev">contact@textbee.dev</a>. <br/>
we read and respond to all emails as quickly as possible.
<strong>P.S.</strong>
I'd love to hear from you! Why did you choose TextBee? Do you have any
feedback or questions?<br />
Feel free to reach out to our support team at
<a href='mailto:contact@textbee.dev'>contact@textbee.dev</a>.<br />
We read and respond to all emails as quickly as possible.
</p> </p>
<hr/>
<div>
<div class='signature'>
<p>
Cheers,<br /> Cheers,<br />
Vernu, founder <br />
<br />
<i>TextBee.dev</i>
<strong>Vernu</strong><br />
Founder, TextBee.dev
</p>
</div> </div>
<div class='divider'></div>
<div class='community-section'>
<p style='font-size: 14px; margin-bottom: 15px;'>Join our community!</p>
<a
href='https://discord.gg/d7vyfBpWbQ'
style='display: inline-block; margin: 0 10px; color: #7289DA; text-decoration: none;'
>
<img
src='https://cdn.prod.website-files.com/6257adef93867e50d84d30e2/636e0a6918e57475a843f59f_icon_clyde_black_RGB.svg'
alt='Discord'
style='width: 20px; vertical-align: middle;'
/>
Join Discord
</a>
<a
href='https://github.com/vernu/textbee'
style='display: inline-block; margin: 0 10px; color: #333; text-decoration: none;'
>
<img
src='https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png'
alt='GitHub'
style='width: 20px; vertical-align: middle;'
/>
Star on GitHub
</a>
<a
href='https://patreon.com/vernu'
style='display: inline-block; margin: 0 10px; color: #FF424D; text-decoration: none;'
>
<img
src='https://c5.patreon.com/external/logo/downloads_logomark_color_on_white.png'
alt='Patreon'
style='width: 20px; vertical-align: middle;'
/>
Support on Patreon
</a>
</div>
</div>
</body>
</html>
Write Preview
Loading…
Cancel
Save