Skip to content

Commit

Permalink
add email template (#30)
Browse files Browse the repository at this point in the history 
* add email template example

* add example image

* update email templates, remove from examples
  • Loading branch information
@pnzrr
pnzrr authored Apr 11, 2024
1 parent d6ec632 commit 1b46c87
Show file tree
Hide file tree
Showing 15 changed files with 5,190 additions and 64 deletions.
12 changes: 11 additions & 1 deletion examples/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,16 @@

These are themes implemented as CSS only. While they can be used as the basis of a packaged theme, they are meant to be used with the [Phase Two](https://phasetwo.io/) theme extensions.

Theme examples:

- Consumer
- Enterprise
- Saas

Read the [blog post](https://phasetwo.io/blog/customizing-login-pages) for more information on how to use them with Phase Two enhanced Keycloak.

The CSS files enclosed in this `examples` folder are free of any copyright or license restrictions.
## Email Template

The [email folder](./email) contains a simple email template that can be applied.

The CSS files enclosed in this `examples` folder are free of any copyright or license restrictions.
378 changes: 370 additions & 8 deletions src/main/resources/theme/mustache/email/html/email-test.mustache
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,370 @@
</p>This is a test message.</p>
</p>Realm: {{realmName}}</p>
{{#user}}
</p>Username: {{user.username}}</p>
</p>Email: {{user.email}}</p>
</p>FirstName: {{user.firstName}}</p>
</p>LastName: {{user.lastName}}</p>
{{/user}}
<!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">Test message</h1>
</p>This is a test message.</p>
</p>Realm: {{realmName}}</p>
{{#user}}
</p>Username: {{user.username}}</p>
</p>Email: {{user.email}}</p>
</p>FirstName: {{user.firstName}}</p>
</p>LastName: {{user.lastName}}</p>
{{/user}}

</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>
Loading

0 comments on commit 1b46c87

Please sign in to comment.