Skip to content

Commit

Permalink
Magic Link Continuation (#31)
Browse files Browse the repository at this point in the history 
* add email template example

* add example image

* update email templates, remove from examples

* update template
  • Loading branch information
@pnzrr
pnzrr authored Apr 12, 2024
1 parent cbce329 commit 1f78757
Showing 1 changed file with 364 additions and 5 deletions.
369 changes: 364 additions & 5 deletions src/main/resources/theme/mustache/email/html/magic-link-continuation-email.mustache
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,366 @@
<html>
<body>
<p>Someone requested a login link to {{realmName}}</p><p><a href="{{magicLink}}">Click to log in</a>.</p><p>If you did not request this link, please ignore this email.</p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style>
@media only screen and (max-width: 620px) {
table.body h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table.body p,
table.body ul,
table.body ol,
table.body td,
table.body span,
table.body a {
font-size: 16px !important;
}
table.body .wrapper,
table.body .article {
padding: 10px !important;
}
table.body .content {
padding: 0 !important;
}
table.body .container {
padding: 0 !important;
width: 100% !important;
}
table.body .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table.body .btn table {
width: 100% !important;
}
table.body .btn a {
width: 100% !important;
}
table.body .img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
@media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.btn-primary table td:hover {
background-color: #34495e !important;
}
.btn-primary a:hover {
background-color: #34495e !important;
border-color: #34495e !important;
}
}
.title {
color: #1570c2;
font-size: 24px;
margin-bottom: 20px;
}
a.button {
background-color: #1570c2;
color: white;
padding: 10px 20px;
text-decoration: none;
display: inline-block;
}
</style>
</head>
<body
style="
background-color: #f6f6f6;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 14px;
line-height: 1.4;
margin: 0;
padding: 0;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
"
>
<span
class="preheader"
style="
color: transparent;
display: none;
height: 0;
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
mso-hide: all;
visibility: hidden;
width: 0;
"
><!-- some preheader here --></span
>
<table
role="presentation"
border="0"
cellpadding="0"
cellspacing="0"
class="body"
style="
border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
background-color: #f6f6f6;
width: 100%;
"
width="100%"
bgcolor="#f6f6f6"
>
<tr>
<td
style="font-family: sans-serif; font-size: 14px; vertical-align: top"
valign="top"
>
&nbsp;
</td>
<td
class="container"
style="
font-family: sans-serif;
font-size: 14px;
vertical-align: top;
display: block;
max-width: 580px;
padding: 10px;
width: 580px;
margin: 0 auto;
"
width="580"
valign="top"
>
<div
class="content"
style="
box-sizing: border-box;
display: block;
margin: 0 auto;
max-width: 580px;
padding: 10px;
"
>
<img
src="https://phasetwo.io/img/logo-phasetwo.png"
alt="Phase Two"
width="150"
height="37"
border="0"
style="
-ms-interpolation-mode: bicubic;
max-width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
padding: 20px;
border: 0;
outline: none;
text-decoration: none;
"
/>

<!-- START CENTERED WHITE CONTAINER -->
<table
role="presentation"
class="main"
style="
border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
background: #ffffff;
border-radius: 3px;
width: 100%;
"
width="100%"
>
<!-- START MAIN CONTENT AREA -->
<tr>
<td
class="wrapper"
style="
font-family: sans-serif;
font-size: 14px;
vertical-align: top;
box-sizing: border-box;
padding: 20px;
"
valign="top"
>
<table
role="presentation"
border="0"
cellpadding="0"
cellspacing="0"
style="
border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
width: 100%;
"
width="100%"
>
<tr>
<td
style="
font-family: sans-serif;
font-size: 14px;
vertical-align: top;
"
valign="top"
>
<h1 class="title">Log in to Phase Two</h1>
<p>Someone requested a login link to {{ realmName }}</p>
<p><a href="{{ magicLink }}">Click to log in</a>.</p>
<p>
If you did not request this link, please ignore this
email.
</p>
</td>
</tr>
</table>
</td>
</tr>

<!-- END MAIN CONTENT AREA -->
</table>
<!-- END CENTERED WHITE CONTAINER -->

<!-- START FOOTER -->
<div
class="footer"
style="
clear: both;
margin-top: 10px;
text-align: center;
width: 100%;
"
>
<table
role="presentation"
border="0"
cellpadding="0"
cellspacing="0"
style="
border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
width: 100%;
"
width="100%"
>
<tr>
<td
class="content-block"
style="
font-family: sans-serif;
vertical-align: top;
padding-bottom: 10px;
padding-top: 10px;
color: #999999;
font-size: 12px;
text-align: center;
"
valign="top"
align="center"
>
<span
class="apple-link"
style="
color: #999999;
font-size: 12px;
text-align: center;
"
>Phase Two Inc., 140 Lakeside Ave., Ste A49, Seattle, WA,
98122</span
>
</td>
</tr>
<tr>
<td
class="content-block powered-by"
style="
font-family: sans-serif;
vertical-align: top;
padding-bottom: 10px;
padding-top: 10px;
color: #999999;
font-size: 12px;
text-align: center;
"
valign="top"
align="center"
>
Powered by
<a
href="https://phasetwo.io"
style="
color: #999999;
font-size: 12px;
text-align: center;
text-decoration: none;
"
>Phase Two</a
>.
</td>
</tr>
</table>
</div>
<!-- END FOOTER -->
</div>
</td>
<td
style="font-family: sans-serif; font-size: 14px; vertical-align: top"
valign="top"
>
&nbsp;
</td>
</tr>
</table>
</body>
</html>

0 comments on commit 1f78757

Please sign in to comment.