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

40 utility implement account confirmation password reset emails with templates #42

Merged
merged 1 commit into from
May 6, 2024
Merged

40 utility implement account confirmation password reset emails with templates #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
79 changes: 78 additions & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,12 @@
},
"homepage": "https://github.com/atlp-rwanda/dynamites-ecomm-be#readme",
"dependencies": {
"axios": "^1.6.8",
"check-code-coverage": "^1.10.5",
"cors": "^2.8.5",
"dotenv": "^16.4.5",
"express": "^4.19.2",
"handlebars": "^4.7.8",
"jest": "^29.7.0",
"morgan": "^1.10.0",
"nodemon": "^3.1.0",
Expand Down
62 changes: 62 additions & 0 deletions src/emails/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import axios from 'axios';
import handlebars from 'handlebars';
import fs from 'fs';


type EmailType = 'confirm' | 'reset';
type Data = {
name: string;
link: string;
};
/**
* Sends an email of the specified type to the recipient using the provided data.
*
* @param emailType - The type of email to send. Must be either "confirm" or "reset".
* @param recipient - The email address of the recipient.
* @param data - The data to be used for generating the email content. A name and link are required.
* @returns A Promise that resolves to the response from the email service.
* @throws An error if there is an issue sending the email.
*/
async function sendEmail(emailType: EmailType, recipient: string, data: Data) {
const templatePath = `/workspaces/dynamites-ecomm-be/src/emails/templates/${emailType}.html`;
try {
// Read the Handlebars template file
const templateFile = fs.readFileSync(templatePath, 'utf-8');

// Compile the template
const template = handlebars.compile(templateFile);

// Generate the HTML content using the template and data
const html = template(data);

// Send the Email

const domain = process.env.MAILERSEND_DOMAIN
const key = process.env.MAILERSEND_TOKEN
const body = {
'from': {
'email': `info@${domain}`,
},
'to': [
{
'email': recipient
}
],
'subject': 'Verification Email',
'html': html
}
const mailersend = 'https://api.mailersend.com/v1/email'
const response = await axios.post(mailersend, body, {
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${key}`
}
});
return response
} catch (error) {
// console.error('Error sending email:', error);
throw new Error('Error sending email');
}
}

export default sendEmail;
105 changes: 105 additions & 0 deletions src/emails/templates/confirm.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Open Sans', sans-serif;
background-color: #f7fafc;
}

.container {
min-height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
box-sizing: border-box;
background-color: #f7fafc;
}

.card {
max-width: 400px;
width: 100%;
background-color: #ffffff;
padding: 24px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.title {
margin-top: 24px;
margin-bottom: 16px;
font-size: 24px;
font-weight: bold;
color: #1a202c;
text-align: center;
}

.message {
margin-bottom: 16px;
font-size: 14px;
color: #4a5568;
text-align: center;
}

.button {
display: block;
width: 100%;
padding: 12px;
border: none;
border-radius: 4px;
font-size: 14px;
font-weight: bold;
color: #f7fafc;
background-color: #4c51bf;
text-align: center;
text-decoration: none;
cursor: pointer;
}

.button:hover {
background-color: #434190;
}

.link {
color: #4c51bf;
text-decoration: none;
}

.link:hover {
color: #434190;
}
</style>
</head>
<body>

<div class="container">
<div class="card">
<div class="title">
Welcome to Dynamites Ecommerce
</div>
<p class="message">
Hello there {{name}},
</p>
<p class="message">
Thank you for signing up. Please confirm your email address to activate your account.
</p>
<div>
<a href="{{link}}" class="button">
Confirm Email Address
</a>
</div>
<div class="mt-6">
<p class="message">
If you are having trouble clicking the "Confirm Email Address" button, copy and paste the URL below into your web browser: <a href="{{link}}" class="link">{{link}}</a>
</p>
</div>
</div>
</div>

</body>
</html>
Loading
Loading