mirror of
https://github.com/lukevella/rallly.git
synced 2025-08-03 08:28:35 +02:00
Update login and registration (#437)
This commit is contained in:
Luke Vella
GitHub
parent
4e67254022
commit
29eb477792
56 changed files with 1788 additions and 695 deletions
314
templates/email-verification.ts
Normal file
314
templates/email-verification.ts
Normal file
|
|
@ -0,0 +1,314 @@
|
|||
const template = `<!DOCTYPE html>
|
||||
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="x-apple-disable-message-reformatting" />
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta
|
||||
name="format-detection"
|
||||
content="telephone=no, date=no, address=no, email=no"
|
||||
/>
|
||||
<!--[if mso]>
|
||||
<noscript>
|
||||
<xml>
|
||||
<o:OfficeDocumentSettings
|
||||
xmlns:o="urn:schemas-microsoft-com:office:office"
|
||||
>
|
||||
<o:PixelsPerInch>96</o:PixelsPerInch>
|
||||
</o:OfficeDocumentSettings>
|
||||
</xml>
|
||||
</noscript>
|
||||
<style>
|
||||
td,
|
||||
th,
|
||||
div,
|
||||
p,
|
||||
a,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: "Segoe UI", sans-serif;
|
||||
mso-line-height-rule: exactly;
|
||||
}
|
||||
</style>
|
||||
<![endif]-->
|
||||
<title>Please verify your email address</title>
|
||||
<style>
|
||||
.hover-underline:hover {
|
||||
text-decoration-line: underline !important;
|
||||
}
|
||||
.hover-no-underline:hover {
|
||||
text-decoration-line: none !important;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.sm-w-full {
|
||||
width: 100% !important;
|
||||
}
|
||||
.sm-py-8 {
|
||||
padding-top: 32px !important;
|
||||
padding-bottom: 32px !important;
|
||||
}
|
||||
.sm-px-6 {
|
||||
padding-left: 24px !important;
|
||||
padding-right: 24px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body
|
||||
style="
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
word-break: break-word;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background-color: #fff;
|
||||
"
|
||||
>
|
||||
<div style="display: none">
|
||||
Use the 6-digit code provided to complete the verification process.͏
|
||||
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
||||
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
||||
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
||||
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
||||
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
||||
͏ ͏ ͏ ͏ ͏ ‌  ͏ ͏ ͏
|
||||
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
||||
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
||||
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
||||
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
||||
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
||||
͏ ͏ ͏ ͏ ‌  ͏ ͏ ͏ ͏
|
||||
͏
|
||||
</div>
|
||||
<div
|
||||
role="article"
|
||||
aria-roledescription="email"
|
||||
aria-label="Please verify your email address"
|
||||
lang="en"
|
||||
>
|
||||
<table
|
||||
style="
|
||||
width: 100%;
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
|
||||
sans-serif;
|
||||
"
|
||||
cellpadding="0"
|
||||
cellspacing="0"
|
||||
role="presentation"
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
align="center"
|
||||
class="sm-py-8"
|
||||
style="padding-top: 64px; padding-bottom: 64px"
|
||||
>
|
||||
<table
|
||||
class="sm-w-full"
|
||||
style="width: 480px"
|
||||
cellpadding="0"
|
||||
cellspacing="0"
|
||||
role="presentation"
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
style="
|
||||
padding-left: 32px;
|
||||
padding-right: 32px;
|
||||
color: #334155;
|
||||
"
|
||||
>
|
||||
<a href="<%= it.homePageUrl %>">
|
||||
<img
|
||||
src="<%= it.homePageUrl %>/logo.png"
|
||||
width="150"
|
||||
alt="Rallly"
|
||||
style="
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
line-height: 100%;
|
||||
border: 0;
|
||||
"
|
||||
/>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
align="center"
|
||||
class="sm-px-6"
|
||||
style="
|
||||
padding: 32px;
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #475569;
|
||||
"
|
||||
>
|
||||
<table
|
||||
style="width: 100%"
|
||||
cellpadding="0"
|
||||
cellspacing="0"
|
||||
role="presentation"
|
||||
>
|
||||
<tr>
|
||||
<td>
|
||||
<p
|
||||
style="
|
||||
margin: 0;
|
||||
margin-bottom: 32px;
|
||||
line-height: 24px;
|
||||
"
|
||||
>
|
||||
Hey <strong id="name"><%= it.name %></strong>,
|
||||
</p>
|
||||
<div
|
||||
style="
|
||||
margin-bottom: 32px;
|
||||
border-radius: 8px;
|
||||
background-color: #f9fafb;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
text-align: center;
|
||||
"
|
||||
>
|
||||
<p
|
||||
style="
|
||||
margin: 0;
|
||||
margin-bottom: 16px;
|
||||
line-height: 24px;
|
||||
"
|
||||
>
|
||||
Your 6-digit code is:
|
||||
</p>
|
||||
<p
|
||||
style="
|
||||
margin: 0;
|
||||
margin-bottom: 16px;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
letter-spacing: 8px;
|
||||
color: #1e293b;
|
||||
"
|
||||
id="code"
|
||||
>
|
||||
<%= it.code %>
|
||||
</p>
|
||||
<p
|
||||
style="
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
"
|
||||
>
|
||||
This code is valid for 10 minutues.
|
||||
</p>
|
||||
</div>
|
||||
<p style="margin: 0; line-height: 24px">
|
||||
Use this code to complete the verification process.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<table
|
||||
style="width: 100%"
|
||||
cellpadding="0"
|
||||
cellspacing="0"
|
||||
role="presentation"
|
||||
>
|
||||
<tr>
|
||||
<td style="padding-top: 32px; padding-bottom: 32px">
|
||||
<div
|
||||
style="
|
||||
height: 1px;
|
||||
background-color: #e5e7eb;
|
||||
line-height: 1px;
|
||||
"
|
||||
>
|
||||
‌
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p style="margin: 0; text-align: center">
|
||||
Not sure why you received this email? Please
|
||||
<a
|
||||
href="mailto:<%= it.supportEmail %>"
|
||||
class="hover-no-underline"
|
||||
style="
|
||||
color: #6366f1;
|
||||
text-decoration-line: underline;
|
||||
"
|
||||
>let us know</a
|
||||
>.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="sm-px-6"
|
||||
style="
|
||||
padding-left: 32px;
|
||||
padding-right: 32px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #4b5563;
|
||||
"
|
||||
>
|
||||
<p style="cursor: default">
|
||||
<a
|
||||
href="<%= it.homePageUrl %>"
|
||||
class="hover-underline"
|
||||
style="color: #6366f1; text-decoration-line: none"
|
||||
>Home</a
|
||||
>
|
||||
•
|
||||
<a
|
||||
href="https://twitter.com/ralllyco"
|
||||
class="hover-underline"
|
||||
style="color: #6366f1; text-decoration-line: none"
|
||||
>Twitter</a
|
||||
>
|
||||
•
|
||||
<a
|
||||
href="https://github.com/lukevella/rallly"
|
||||
class="hover-underline"
|
||||
style="color: #6366f1; text-decoration-line: none"
|
||||
>Github</a
|
||||
>
|
||||
•
|
||||
<a
|
||||
href="https://www.paypal.com/donate/?hosted_button_id=7QXP2CUBLY88E"
|
||||
class="hover-underline"
|
||||
style="color: #6366f1; text-decoration-line: none"
|
||||
>Donate</a
|
||||
>
|
||||
•
|
||||
<a
|
||||
href="mailto:<%= it.supportEmail %>"
|
||||
class="hover-underline"
|
||||
style="color: #6366f1; text-decoration-line: none"
|
||||
>Contact</a
|
||||
>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>`;
|
||||
|
||||
export default template;
|
||||
|
|
@ -1,148 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="x-apple-disable-message-reformatting">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
|
||||
<!--[if mso]>
|
||||
<noscript>
|
||||
<xml>
|
||||
<o:OfficeDocumentSettings
|
||||
xmlns:o="urn:schemas-microsoft-com:office:office"
|
||||
>
|
||||
<o:PixelsPerInch>96</o:PixelsPerInch>
|
||||
</o:OfficeDocumentSettings>
|
||||
</xml>
|
||||
</noscript>
|
||||
<style>
|
||||
td,
|
||||
th,
|
||||
div,
|
||||
p,
|
||||
a,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: "Segoe UI", sans-serif;
|
||||
mso-line-height-rule: exactly;
|
||||
}
|
||||
</style>
|
||||
<![endif]-->
|
||||
<title>Login with your email</title>
|
||||
<style>
|
||||
.hover-bg-indigo-400:hover {
|
||||
background-color: #818cf8 !important;
|
||||
}
|
||||
.hover-underline:hover {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
.hover-no-underline:hover {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.sm-w-full {
|
||||
width: 100% !important;
|
||||
}
|
||||
.sm-py-32 {
|
||||
padding-top: 32px !important;
|
||||
padding-bottom: 32px !important;
|
||||
}
|
||||
.sm-px-24 {
|
||||
padding-left: 24px !important;
|
||||
padding-right: 24px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body style="margin: 0; width: 100%; padding: 0; word-break: break-word; -webkit-font-smoothing: antialiased; background-color: #f3f4f6;">
|
||||
<div style="display: none;">
|
||||
Please click the link below to verify your email address.͏ ͏ ͏ ͏ ͏ ͏ ͏
|
||||
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
||||
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
||||
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
||||
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
||||
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ‌
|
||||
 ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
||||
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
||||
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
||||
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
||||
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
||||
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ‌
|
||||
 ͏ ͏ ͏ ͏ ͏
|
||||
</div>
|
||||
<div role="article" aria-roledescription="email" aria-label="Login with your email" lang="en">
|
||||
<table style="width: 100%; font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;" cellpadding="0" cellspacing="0" role="presentation">
|
||||
<tr>
|
||||
<td align="center" style="background-color: #f3f4f6;">
|
||||
<table class="sm-w-full" style="width: 600px;" cellpadding="0" cellspacing="0" role="presentation">
|
||||
<tr>
|
||||
<td class="sm-py-32 sm-px-24" style="padding-left: 48px; padding-right: 48px; padding-top: 36px; padding-bottom: 36px; text-align: center;">
|
||||
<a href="<%= it.homePageUrl %>">
|
||||
<img src="<%= it.homePageUrl %>/logo.png" width="150" alt="Rallly" style="max-width: 100%; vertical-align: middle; line-height: 100%; border: 0;">
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center" class="sm-px-24">
|
||||
<table style="width: 100%;" cellpadding="0" cellspacing="0" role="presentation">
|
||||
<tr>
|
||||
<td class="sm-px-24" style="border-radius: 4px; background-color: #ffffff; padding: 36px; text-align: left; font-size: 16px; line-height: 24px; color: #1f2937;">
|
||||
<p style="margin-bottom: 8px;">Hey there,</p>
|
||||
<p style="margin-bottom: 8px;">
|
||||
To login with your email please click the button below:
|
||||
</p>
|
||||
<p style="margin-bottom: 24px;"></p>
|
||||
<div style="line-height: 100%;">
|
||||
<a href="<%= it.loginUrl %>" class="hover-bg-indigo-400" style="display: inline-block; border-radius: 4px; background-color: #6366f1; padding-top: 16px; padding-bottom: 16px; padding-left: 24px; padding-right: 24px; text-align: center; font-size: 16px; font-weight: 600; color: #ffffff; text-decoration: none;"> <!--[if mso]><i style="letter-spacing: 27px; mso-font-width: -100%; mso-text-raise: 26pt;"> </i><![endif]-->
|
||||
<span style="mso-text-raise: 16px">Log me in →
|
||||
</span> <!--[if mso]><i style="letter-spacing: 27px; mso-font-width: -100%;"> </i><![endif]-->
|
||||
</a>
|
||||
</div>
|
||||
<table style="width: 100%;" cellpadding="0" cellspacing="0" role="presentation">
|
||||
<tr>
|
||||
<td style="padding-top: 32px; padding-bottom: 32px;">
|
||||
<div style="height: 1px; background-color: #e5e7eb; line-height: 1px;">
|
||||
‌
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>
|
||||
Not sure why you received this email? Please
|
||||
<a href="mailto:<%= it.supportEmail %>" class="hover-no-underline" style="color: #6366f1; text-decoration: underline;">let us know</a>.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="height: 48px;"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding-left: 24px; padding-right: 24px; text-align: center; font-size: 12px; color: #4b5563;">
|
||||
<p style="margin-bottom: 4px; text-transform: uppercase;">RALLLY</p>
|
||||
<p style="font-style: italic;">Collaborative Scheduling</p>
|
||||
<p style="cursor: default;">
|
||||
<a href="<%= it.homePageUrl %>" class="hover-underline" style="color: #6366f1; text-decoration: none;">Website</a>
|
||||
•
|
||||
<a href="https://twitter.com/ralllyco" class="hover-underline" style="color: #6366f1; text-decoration: none;">Twitter</a>
|
||||
•
|
||||
<a href="https://github.com/lukevella/rallly" class="hover-underline" style="color: #6366f1; text-decoration: none;">Github</a>
|
||||
•
|
||||
<a href="mailto:<%= it.supportEmail %>" class="hover-underline" style="color: #6366f1; text-decoration: none;">Contact</a>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -99,7 +99,7 @@ const template = `<!DOCTYPE html>
|
|||
</p>
|
||||
<p style="margin-bottom: 24px;"></p>
|
||||
<div style="line-height: 100%;">
|
||||
<a href="<%= it.pollUrl %>" class="hover-bg-indigo-400" style="display: inline-block; border-radius: 4px; background-color: #6366f1; padding-top: 16px; padding-bottom: 16px; padding-left: 24px; padding-right: 24px; text-align: center; font-size: 16px; font-weight: 600; color: #ffffff; text-decoration: none;"> <!--[if mso]><i style="letter-spacing: 27px; mso-font-width: -100%; mso-text-raise: 26pt;"> </i><![endif]-->
|
||||
<a id="pollUrl href="<%= it.pollUrl %>" class="hover-bg-indigo-400" style="display: inline-block; border-radius: 4px; background-color: #6366f1; padding-top: 16px; padding-bottom: 16px; padding-left: 24px; padding-right: 24px; text-align: center; font-size: 16px; font-weight: 600; color: #ffffff; text-decoration: none;"> <!--[if mso]><i style="letter-spacing: 27px; mso-font-width: -100%; mso-text-raise: 26pt;"> </i><![endif]-->
|
||||
<span style="mso-text-raise: 16px">Go to poll →
|
||||
</span> <!--[if mso]><i style="letter-spacing: 27px; mso-font-width: -100%;"> </i><![endif]-->
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ const template = `<!DOCTYPE html>
|
|||
</p>
|
||||
<p style="margin-bottom: 24px;"></p>
|
||||
<div style="margin-bottom: 24px; line-height: 100%;">
|
||||
<a href="<%= it.verifyEmailUrl %>" class="hover-bg-indigo-400" style="display: inline-block; border-radius: 4px; background-color: #6366f1; padding-top: 16px; padding-bottom: 16px; padding-left: 24px; padding-right: 24px; text-align: center; font-size: 16px; font-weight: 600; color: #ffffff; text-decoration: none;"> <!--[if mso]><i style="letter-spacing: 27px; mso-font-width: -100%; mso-text-raise: 26pt;"> </i><![endif]-->
|
||||
<a id="verifyEmailUrl" href="<%= it.verifyEmailUrl %>" class="hover-bg-indigo-400" style="display: inline-block; border-radius: 4px; background-color: #6366f1; padding-top: 16px; padding-bottom: 16px; padding-left: 24px; padding-right: 24px; text-align: center; font-size: 16px; font-weight: 600; color: #ffffff; text-decoration: none;"> <!--[if mso]><i style="letter-spacing: 27px; mso-font-width: -100%; mso-text-raise: 26pt;"> </i><![endif]-->
|
||||
<span style="mso-text-raise: 16px">Verify your email →
|
||||
</span> <!--[if mso]><i style="letter-spacing: 27px; mso-font-width: -100%;"> </i><![endif]-->
|
||||
</a>
|
||||
|
|
@ -110,7 +110,7 @@ const template = `<!DOCTYPE html>
|
|||
future 😉
|
||||
</p>
|
||||
<p style="font-weight: 500;">
|
||||
<a href="<%= it.pollUrl %>" style="display: inline-block; background-color: #eef2ff; padding: 8px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 20px; color: #6366f1; text-decoration: none;">
|
||||
<a id="pollUrl href="<%= it.pollUrl %>" style="display: inline-block; background-color: #eef2ff; padding: 8px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 20px; color: #6366f1; text-decoration: none;">
|
||||
<%= it.pollUrl %>
|
||||
</a>
|
||||
</p>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue