mirror of
https://github.com/outbackdingo/firezone.git
synced 2026-01-27 18:18:55 +00:00
Update styling for Sign In/Up emails (#2907)
Updated the styling for the outbound emails from the portal. ## Preview of the Sign Up Email <img width="589" alt="sign_up_email" src="https://github.com/firezone/firezone/assets/2646332/4fdc04de-bc49-4d31-b818-ec5eb546d4b8"> ## Preview of the Sign In Email <img width="592" alt="sign_in_email" src="https://github.com/firezone/firezone/assets/2646332/c3a21424-0de2-404a-a8e2-f2ae926ddeaf"> This will close #2132
This commit is contained in:
bmanifold
@@ -1,41 +1,241 @@
|
||||
<h3>Sign in token</h3>
|
||||
|
||||
<p>
|
||||
Dear Firezone user,
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<p>
|
||||
Please copy the token below and paste it into the Firezone application to proceed with
|
||||
signing in to <b>"<%= @account.name %>"</b>:
|
||||
</p>
|
||||
|
||||
<p style="font-weight:bold; margin-top:1rem; margin-bottom:1rem;">
|
||||
<code><%= @secret %></code>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
or click <a href={@sign_in_url} target="_blank">this link</a>
|
||||
if you are on the same device where you are trying to sign in.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<small>
|
||||
This email is valid for 15 minutes.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
If you did not request this action and have received this email in error, you can safely ignore
|
||||
and discard this email. However, if you continue to receive multiple unsolicited emails of this nature,
|
||||
we strongly recommend contacting your system administrator to report the issue.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<b>Request details:</b>
|
||||
<br /> Time: <%= @sign_in_token_created_at %>
|
||||
<br /> IP address: <%= @remote_ip %>
|
||||
<br /> User Agent: <%= @user_agent %>
|
||||
<br /> Account ID: <%= @account.id %>
|
||||
</p>
|
||||
<!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 name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no" />
|
||||
<meta name="color-scheme" content="light dark" />
|
||||
<meta name="supported-color-schemes" content="light dark" />
|
||||
<!--[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>Firezone Sign In Token</title>
|
||||
<style>
|
||||
img {
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
line-height: 1
|
||||
}
|
||||
.hover-important-text-decoration-underline:hover {
|
||||
text-decoration: underline !important
|
||||
}
|
||||
:is([dir="rtl"] .rtl-text-right) {
|
||||
text-align: right !important
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.sm-my-8 {
|
||||
margin-top: 32px !important;
|
||||
margin-bottom: 32px !important
|
||||
}
|
||||
.sm-px-4 {
|
||||
padding-left: 16px !important;
|
||||
padding-right: 16px !important
|
||||
}
|
||||
.sm-px-6 {
|
||||
padding-left: 24px !important;
|
||||
padding-right: 24px !important
|
||||
}
|
||||
.sm-leading-8 {
|
||||
line-height: 32px !important
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body style="margin: 0; width: 100%; background-color: #f6f6f6; padding: 0; -webkit-font-smoothing: antialiased; word-break: break-word">
|
||||
<div role="article" aria-roledescription="email" aria-label="Firezone Sign In Token" lang="en">
|
||||
<div
|
||||
class="sm-px-4"
|
||||
style="background-color: #f6f6f6; font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
>
|
||||
<table align="center" cellpadding="0" cellspacing="0" role="none">
|
||||
<tr>
|
||||
<td style="width: 552px; max-width: 100%">
|
||||
<div
|
||||
class="sm-my-8"
|
||||
style="margin-top: 48px; margin-bottom: 48px; text-align: center"
|
||||
>
|
||||
<a href="https://firezone.dev">
|
||||
<div>
|
||||
<img
|
||||
src="https://www.firezone.dev/images/logo-lockup.png"
|
||||
width="250"
|
||||
alt="Firezone logo"
|
||||
style="max-width: 100%; vertical-align: middle; line-height: 1"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<table style="width: 100%;" cellpadding="0" cellspacing="0" role="none">
|
||||
<tr>
|
||||
<td
|
||||
class="sm-px-6"
|
||||
style="border-radius: 4px; background-color: #ffffff; padding: 48px; font-size: 16px; color: #4f4f4f; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05)"
|
||||
>
|
||||
<h1
|
||||
class="sm-leading-8"
|
||||
style="margin: 0 0 24px; font-size: 24px; font-weight: 600; color: #000000"
|
||||
>
|
||||
Finish Signing In!
|
||||
</h1>
|
||||
<p style="margin: 0; line-height: 24px">
|
||||
Copy and paste the following token into the Sign In form
|
||||
</p>
|
||||
<p style="border-radius: 4px; border: 1px solid #e7e7e7; padding: 8px; text-align: center; font-size: 30px">
|
||||
<code><%= @secret %></code>
|
||||
</p>
|
||||
<p style="margin: 0; line-height: 24px;">
|
||||
Or click the button below
|
||||
</p>
|
||||
<div role="separator" style="line-height: 16px">‍</div>
|
||||
<div>
|
||||
<a
|
||||
href={@sign_in_url}
|
||||
target="_blank"
|
||||
style="display: inline-block; border-radius: 4px; background-color: #5e00d6; padding: 16px 24px; font-size: 16px; font-weight: 600; line-height: 1; color: #f6f6f6; text-decoration: none"
|
||||
>
|
||||
<!--[if mso]>
|
||||
<i style="mso-font-width: -100%; letter-spacing: 32px; mso-text-raise: 30px" hidden> </i>
|
||||
<![endif]-->
|
||||
<span style="mso-text-raise: 16px">
|
||||
Complete Sign In →
|
||||
</span>
|
||||
<!--[if mso]>
|
||||
<i style="mso-font-width: -100%; letter-spacing: 32px;" hidden> </i>
|
||||
<![endif]-->
|
||||
</a>
|
||||
</div>
|
||||
<div role="separator" style="line-height: 16px">‍</div>
|
||||
<p style="margin: 0; font-size: 12px; font-style: italic; line-height: 24px">
|
||||
This email will only be valid for 15 minutes
|
||||
</p>
|
||||
<div
|
||||
role="separator"
|
||||
style="background-color: #d1d1d1; height: 1px; line-height: 1px; margin: 16px 0"
|
||||
>
|
||||
‍
|
||||
</div>
|
||||
<p style="margin: 0; line-height: 24px;">
|
||||
Request Details
|
||||
</p>
|
||||
<table
|
||||
class="rtl-text-right"
|
||||
style="width: 100%; text-align: left; font-size: 14px; color: #6d6d6d"
|
||||
cellpadding="0"
|
||||
cellspacing="0"
|
||||
role="none"
|
||||
>
|
||||
<tr style="border-bottom-width: 1px; background-color: #ffffff">
|
||||
<th
|
||||
scope="row"
|
||||
style="white-space: nowrap; padding-left: 24px; padding-right: 24px; font-weight: 500; color: #3d3d3d"
|
||||
>
|
||||
Account
|
||||
</th>
|
||||
<td style="padding: 4px 24px"><%= @account.name %></td>
|
||||
</tr>
|
||||
<tr style="border-bottom-width: 1px; background-color: #ffffff;">
|
||||
<th
|
||||
scope="row"
|
||||
style="white-space: nowrap; padding-left: 24px; padding-right: 24px; font-weight: 500; color: #3d3d3d;"
|
||||
>
|
||||
Account ID
|
||||
</th>
|
||||
<td style="padding: 4px 24px;"><%= @account.id %></td>
|
||||
</tr>
|
||||
<tr style="border-bottom-width: 1px; background-color: #ffffff;">
|
||||
<th
|
||||
scope="row"
|
||||
style="white-space: nowrap; padding-left: 24px; padding-right: 24px; font-weight: 500; color: #3d3d3d;"
|
||||
>
|
||||
Time
|
||||
</th>
|
||||
<td style="padding: 4px 24px;"><%= @sign_in_token_created_at %></td>
|
||||
</tr>
|
||||
<tr style="border-bottom-width: 1px; background-color: #ffffff;">
|
||||
<th
|
||||
scope="row"
|
||||
style="white-space: nowrap; padding-left: 24px; padding-right: 24px; font-weight: 500; color: #3d3d3d;"
|
||||
>
|
||||
IP Address
|
||||
</th>
|
||||
<td style="padding: 4px 24px;"><%= @remote_ip %></td>
|
||||
</tr>
|
||||
<tr style="border-bottom-width: 1px; background-color: #ffffff;">
|
||||
<th
|
||||
scope="row"
|
||||
style="white-space: nowrap; padding-left: 24px; padding-right: 24px; font-weight: 500; color: #3d3d3d;"
|
||||
>
|
||||
User Agent
|
||||
</th>
|
||||
<td style="padding: 4px 24px;"><%= @user_agent %></td>
|
||||
</tr>
|
||||
</table>
|
||||
<p></p>
|
||||
<div
|
||||
role="separator"
|
||||
style="background-color: #d1d1d1; height: 1px; line-height: 1px; margin: 32px 0;"
|
||||
>
|
||||
‍
|
||||
</div>
|
||||
<p style="margin: 0;">
|
||||
If you didn't request this sign in, you can safely ignore this email. However, if you continue to receive multiple unsolicited emails of this nature,
|
||||
we strongly recommend contacting your system administrator to report the issue.
|
||||
<br />
|
||||
<br /> Thanks, <br />The Firezone Team
|
||||
</p>
|
||||
<div role="separator" style="line-height: 16px">‍</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr role="separator">
|
||||
<td style="line-height: 48px">‍</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding-left: 24px; padding-right: 24px; text-align: center; font-size: 12px; color: #575757">
|
||||
<p style="margin: 0; font-style: italic;">
|
||||
Blazing-fast alternative to legacy VPNs
|
||||
</p>
|
||||
<p style="cursor: default">
|
||||
<a
|
||||
href="https://www.firezone.dev/kb"
|
||||
class="hover-important-text-decoration-underline"
|
||||
style="color: #37007f; text-decoration: none"
|
||||
>
|
||||
Docs
|
||||
</a>
|
||||
•
|
||||
<a
|
||||
href="https://github.com/firezone"
|
||||
class="hover-important-text-decoration-underline"
|
||||
style="color: #37007f; text-decoration: none;"
|
||||
>
|
||||
Github
|
||||
</a>
|
||||
•
|
||||
<a
|
||||
href="https://x.com/firezonehq"
|
||||
class="hover-important-text-decoration-underline"
|
||||
style="color: #37007f; text-decoration: none;"
|
||||
>
|
||||
X
|
||||
</a>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
Dear Firezone user,
|
||||
Finish Signing In!
|
||||
|
||||
Please copy the code and paste it into the Firezone application to proceed with
|
||||
the sign in to "<%= @account.name %>":
|
||||
Copy and paste the following token into the Sign In form
|
||||
|
||||
<%= @secret %>
|
||||
|
||||
or click on the magic sign-in if you are on the same device where you are trying to sign in:
|
||||
or click on the following link if you are on the same device where you are trying to sign in:
|
||||
|
||||
<%= @sign_in_url %>
|
||||
|
||||
@@ -16,7 +15,8 @@ and discard this email. However, if you continue to receive multiple unsolicited
|
||||
we strongly recommend contacting your system administrator to report the issue.
|
||||
|
||||
Request details:
|
||||
Account: <%= @account.name %>
|
||||
Account ID: <%= @account.id %>
|
||||
Time: <%= @sign_in_token_created_at %>
|
||||
IP address: <%= @remote_ip %>
|
||||
User Agent: <%= @user_agent %>
|
||||
Account ID: <%= @account.id %>
|
||||
|
||||
@@ -1,23 +1,217 @@
|
||||
<h3>Thank you for signing up for Firezone!</h3>
|
||||
|
||||
<div>
|
||||
<p>You can sign in to your account <b>"<%= @account.name %>"</b> using following link:</p>
|
||||
|
||||
<small>
|
||||
<%= @sign_in_form_url %>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
If you did not request this action and have received this email in error, you can safely ignore
|
||||
and discard this email. However, if you continue to receive multiple unsolicited emails of this nature,
|
||||
we strongly recommend contacting your system administrator to report the issue.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<b>Request details:</b>
|
||||
<br /> IP address: <%= @remote_ip %>
|
||||
<br /> User Agent: <%= @user_agent %>
|
||||
<br /> Account ID: <%= @account.id %>
|
||||
<br /> Account Slug: <%= @account.slug %>
|
||||
</p>
|
||||
<!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 name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no" />
|
||||
<meta name="color-scheme" content="light dark" />
|
||||
<meta name="supported-color-schemes" content="light dark" />
|
||||
<!--[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>Welcome to Firezone</title>
|
||||
<style>
|
||||
img {
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
line-height: 1
|
||||
}
|
||||
.hover-important-text-decoration-underline:hover {
|
||||
text-decoration: underline !important
|
||||
}
|
||||
:is([dir="rtl"] .rtl-text-right) {
|
||||
text-align: right !important
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.sm-my-8 {
|
||||
margin-top: 32px !important;
|
||||
margin-bottom: 32px !important
|
||||
}
|
||||
.sm-px-4 {
|
||||
padding-left: 16px !important;
|
||||
padding-right: 16px !important
|
||||
}
|
||||
.sm-px-6 {
|
||||
padding-left: 24px !important;
|
||||
padding-right: 24px !important
|
||||
}
|
||||
.sm-leading-8 {
|
||||
line-height: 32px !important
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body style="margin: 0; width: 100%; background-color: #f6f6f6; padding: 0; -webkit-font-smoothing: antialiased; word-break: break-word">
|
||||
<div role="article" aria-roledescription="email" aria-label="Welcome to Firezone" lang="en">
|
||||
<div
|
||||
class="sm-px-4"
|
||||
style="background-color: #f6f6f6; font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
>
|
||||
<table align="center" cellpadding="0" cellspacing="0" role="none">
|
||||
<tr>
|
||||
<td style="width: 552px; max-width: 100%">
|
||||
<div
|
||||
class="sm-my-8"
|
||||
style="margin-top: 48px; margin-bottom: 48px; text-align: center"
|
||||
>
|
||||
<a href="https://firezone.dev">
|
||||
<div>
|
||||
<img
|
||||
src="https://www.firezone.dev/images/logo-lockup.png"
|
||||
width="250"
|
||||
alt="Firezone logo"
|
||||
style="max-width: 100%; vertical-align: middle; line-height: 1"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<table style="width: 100%;" cellpadding="0" cellspacing="0" role="none">
|
||||
<tr>
|
||||
<td
|
||||
class="sm-px-6"
|
||||
style="border-radius: 4px; background-color: #ffffff; padding: 48px; font-size: 16px; color: #4f4f4f; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05)"
|
||||
>
|
||||
<h1
|
||||
class="sm-leading-8"
|
||||
style="margin: 0 0 24px; font-size: 24px; font-weight: 600; color: #000000"
|
||||
>
|
||||
Welcome!
|
||||
</h1>
|
||||
<p style="margin: 0; line-height: 24px">
|
||||
Thank you for signing up for Firezone!
|
||||
</p>
|
||||
<div role="separator" style="line-height: 24px">‍</div>
|
||||
Sign In to your account by clicking the button below:
|
||||
<p></p>
|
||||
<div>
|
||||
<a
|
||||
href={@sign_in_form_url}
|
||||
style="display: inline-block; border-radius: 4px; background-color: #5e00d6; padding: 16px 24px; font-size: 16px; font-weight: 600; line-height: 1; color: #f6f6f6; text-decoration: none"
|
||||
>
|
||||
<!--[if mso]>
|
||||
<i style="mso-font-width: -100%; letter-spacing: 32px; mso-text-raise: 30px" hidden> </i>
|
||||
<![endif]-->
|
||||
<span style="mso-text-raise: 16px">
|
||||
Sign In Now →
|
||||
</span>
|
||||
<!--[if mso]>
|
||||
<i style="mso-font-width: -100%; letter-spacing: 32px;" hidden> </i>
|
||||
<![endif]-->
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
role="separator"
|
||||
style="background-color: #d1d1d1; height: 1px; line-height: 1px; margin: 32px 0"
|
||||
>
|
||||
‍
|
||||
</div>
|
||||
<p style="margin: 0;"></p>
|
||||
<h2
|
||||
class="sm-leading-8"
|
||||
style="margin: 0 0 24px; font-size: 20px; font-weight: 600; color: #000000"
|
||||
>
|
||||
Account Info:
|
||||
</h2>
|
||||
<table
|
||||
class="rtl-text-right"
|
||||
style="width: 100%; text-align: left; font-size: 14px; color: #6d6d6d"
|
||||
cellpadding="0"
|
||||
cellspacing="0"
|
||||
role="none"
|
||||
>
|
||||
<tr style="border-bottom-width: 1px; background-color: #ffffff">
|
||||
<th
|
||||
scope="row"
|
||||
style="white-space: nowrap; padding: 16px 24px; font-weight: 500; color: #3d3d3d"
|
||||
>
|
||||
Account Name
|
||||
</th>
|
||||
<td style="padding: 16px 24px;"><%= @account.name %></td>
|
||||
</tr>
|
||||
<tr style="border-bottom-width: 1px; background-color: #ffffff;">
|
||||
<th
|
||||
scope="row"
|
||||
style="white-space: nowrap; padding: 16px 24px; font-weight: 500; color: #3d3d3d;"
|
||||
>
|
||||
Account Slug
|
||||
</th>
|
||||
<td style="padding: 16px 24px;"><%= @account.slug %></td>
|
||||
</tr>
|
||||
<tr style="border-bottom-width: 1px; background-color: #ffffff;">
|
||||
<th
|
||||
scope="row"
|
||||
style="white-space: nowrap; padding: 16px 24px; font-weight: 500; color: #3d3d3d;"
|
||||
>
|
||||
Sign In URL
|
||||
</th>
|
||||
<td style="padding: 16px 24px;">
|
||||
<a href={@sign_in_form_url}><%= @sign_in_form_url %></a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p></p>
|
||||
<div
|
||||
role="separator"
|
||||
style="background-color: #d1d1d1; height: 1px; line-height: 1px; margin: 32px 0;"
|
||||
>
|
||||
‍
|
||||
</div>
|
||||
<p style="margin: 0;">
|
||||
If you didn't sign up for Firezone, you can safely ignore this email. <br />
|
||||
<br /> Thanks, <br />The Firezone Team
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr role="separator">
|
||||
<td style="line-height: 48px">‍</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding-left: 24px; padding-right: 24px; text-align: center; font-size: 12px; color: #575757">
|
||||
<p style="margin: 0; font-style: italic">
|
||||
Blazing-fast alternative to legacy VPNs
|
||||
</p>
|
||||
<p style="cursor: default">
|
||||
<a
|
||||
href="https://www.firezone.dev/kb"
|
||||
class="hover-important-text-decoration-underline"
|
||||
style="color: #37007f; text-decoration: none"
|
||||
>
|
||||
Docs
|
||||
</a>
|
||||
•
|
||||
<a
|
||||
href="https://github.com/firezone"
|
||||
class="hover-important-text-decoration-underline"
|
||||
style="color: #37007f; text-decoration: none;"
|
||||
>
|
||||
Github
|
||||
</a>
|
||||
•
|
||||
<a
|
||||
href="https://x.com/firezonehq"
|
||||
class="hover-important-text-decoration-underline"
|
||||
style="color: #37007f; text-decoration: none;"
|
||||
>
|
||||
X
|
||||
</a>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -473,7 +473,7 @@ defmodule Web.AuthControllerTest do
|
||||
|
||||
assert_email_sent(fn email ->
|
||||
assert email.subject == "Firezone sign in token"
|
||||
assert email.text_body =~ "Please copy the code and paste it into"
|
||||
assert email.text_body =~ "Copy and paste the following token into the Sign In form"
|
||||
end)
|
||||
|
||||
assert url = redirected_to(conn)
|
||||
|
||||
BIN
website/public/images/logo-lockup.png
Normal file
BIN
website/public/images/logo-lockup.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Reference in New Issue
Block a user