Implement password reset and change features with email notifications
This commit is contained in:
Isuru Bimsara
@@ -1,53 +1,242 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 400px;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
th {
|
||||
background-color: #053534;
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
}
|
||||
td {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
a {
|
||||
color: #1a73e8;
|
||||
}
|
||||
</style>
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0"
|
||||
>
|
||||
|
||||
<title>Reset Your ZUMRI Password</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Dear {{firstName}},</p>
|
||||
|
||||
<p>Greetings from <b>Oceanic Titan</b>!</p>
|
||||
<body
|
||||
style="
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #f4f4f4;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
"
|
||||
>
|
||||
|
||||
<p>You have requested to reset your password for your Oceanic Titan account. Please click the link below to reset your password:</p>
|
||||
<table
|
||||
width="100%"
|
||||
cellpadding="0"
|
||||
cellspacing="0"
|
||||
role="presentation"
|
||||
style="
|
||||
background-color: #f4f4f4;
|
||||
padding: 40px 0;
|
||||
"
|
||||
>
|
||||
<tr>
|
||||
<td align="center">
|
||||
|
||||
<p><a href="{{resetLink}}" target="_blank">Reset Password</a></p>
|
||||
<table
|
||||
width="600"
|
||||
cellpadding="0"
|
||||
cellspacing="0"
|
||||
role="presentation"
|
||||
style="
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
padding: 40px;
|
||||
border-radius: 8px;
|
||||
"
|
||||
>
|
||||
|
||||
<p>If you did not request a password reset, please ignore this email. The above link will expire in <b>{{expiryTime}}</b>.</p>
|
||||
<!-- Greeting -->
|
||||
<tr>
|
||||
<td>
|
||||
<p
|
||||
style="
|
||||
font-size: 18px;
|
||||
color: #333333;
|
||||
margin-bottom: 30px;
|
||||
"
|
||||
>
|
||||
Hi {{firstName}},
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<br>
|
||||
|
||||
<p>Regards,<br>
|
||||
<b>Oceanic Titan Team</b>
|
||||
</p>
|
||||
<!-- Title -->
|
||||
<tr>
|
||||
<td>
|
||||
<h2
|
||||
style="
|
||||
color: #222222;
|
||||
margin-bottom: 25px;
|
||||
"
|
||||
>
|
||||
Reset Your ZUMRI Password
|
||||
</h2>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<!-- Description -->
|
||||
<tr>
|
||||
<td>
|
||||
<p
|
||||
style="
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #555555;
|
||||
"
|
||||
>
|
||||
We received a request to reset the password
|
||||
for your ZUMRI account.
|
||||
Click the button below to create a new password.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<!-- Reset Button -->
|
||||
<tr>
|
||||
<td
|
||||
align="center"
|
||||
style="padding: 30px 0;"
|
||||
>
|
||||
|
||||
<a
|
||||
href="{{resetLink}}"
|
||||
target="_blank"
|
||||
style="
|
||||
display: inline-block;
|
||||
padding: 14px 28px;
|
||||
background-color: #222222;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
border-radius: 6px;
|
||||
"
|
||||
>
|
||||
Reset Password
|
||||
</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<!-- Direct Link -->
|
||||
<tr>
|
||||
<td>
|
||||
<p
|
||||
style="
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #777777;
|
||||
"
|
||||
>
|
||||
If the button doesn't work, copy and paste
|
||||
the following link into your browser:
|
||||
</p>
|
||||
|
||||
<p
|
||||
style="
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
"
|
||||
>
|
||||
<a
|
||||
href="{{resetLink}}"
|
||||
target="_blank"
|
||||
style="color: #0066cc;"
|
||||
>
|
||||
{{resetLink}}
|
||||
</a>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<!-- Expiry Information -->
|
||||
<tr>
|
||||
<td>
|
||||
<p
|
||||
style="
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #777777;
|
||||
margin-top: 30px;
|
||||
"
|
||||
>
|
||||
For security purposes, this password reset
|
||||
link will expire in
|
||||
<strong>{{expiryTime}}</strong>.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<!-- Security Message -->
|
||||
<tr>
|
||||
<td>
|
||||
<p
|
||||
style="
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #777777;
|
||||
"
|
||||
>
|
||||
If you did not request a password reset,
|
||||
you can safely ignore this email.
|
||||
Your password will remain unchanged.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<!-- Footer -->
|
||||
<tr>
|
||||
<td>
|
||||
<p
|
||||
style="
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
margin-top: 30px;
|
||||
"
|
||||
>
|
||||
Best regards,<br>
|
||||
<strong>ZUMRI Team</strong>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<!-- Copyright -->
|
||||
<tr>
|
||||
<td
|
||||
align="center"
|
||||
style="
|
||||
border-top: 1px solid #eeeeee;
|
||||
padding-top: 20px;
|
||||
"
|
||||
>
|
||||
<p
|
||||
style="
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
"
|
||||
>
|
||||
© {{currentYear}} ZUMRI.
|
||||
All rights reserved.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p style="font-size: 12px; color: #555;">{{currentYear}} Oceanic Titan. This is an auto-generated email, please do not reply to this email.</p>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user