Appwrite/appwrite
1
0
Fork 0
mirror of https://github.com/appwrite/appwrite.git synced 2026-05-26 13:51:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

add responsive email templates

Browse Source
This commit is contained in:
Torsten Dittmann
2020-06-12 01:20:32 +02:00
parent ea2130774f
commit 8a4227bcb7
7 changed files with 319 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/config/locales/templates/_base.tpl
+234
View File
@@ -0,0 +1,234 @@
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>{{title}}</title>
<style>
body {
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%;
}
table {
border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
width: 100%;
}
table td {
font-family: sans-serif;
font-size: 14px;
vertical-align: top;
}
.body {
background-color: #f6f6f6;
width: 100%;
}
.container {
display: block;
margin: 0 auto !important;
/* makes it centered */
max-width: 580px;
padding: 10px;
width: 580px;
}
.content {
box-sizing: border-box;
display: block;
margin: 0 auto;
max-width: 580px;
padding: 10px;
}
.main {
background: #ffffff;
border-radius: 3px;
width: 100%;
}
.wrapper {
box-sizing: border-box;
padding: 20px;
}
.content-block {
padding-bottom: 10px;
padding-top: 10px;
}
p {
font-family: sans-serif;
font-size: 14px;
font-weight: normal;
margin: 0;
margin-bottom: 15px;
}
.btn {
box-sizing: border-box;
width: 100%;
}
.btn>tbody>tr>td {
padding-bottom: 15px;
}
.btn table {
width: auto;
}
.btn table td {
background-color: #ffffff;
border-radius: 5px;
text-align: center;
}
.btn a {
background-color: #ffffff;
border: solid 1px #3498db;
border-radius: 5px;
box-sizing: border-box;
color: #3498db;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: bold;
margin: 0;
padding: 12px 25px;
text-decoration: none;
text-transform: capitalize;
}
.btn-primary table td {
background-color: #3498db;
}
.btn-primary a {
background-color: #3498db;
border-color: #3498db;
color: #ffffff;
}
@media only screen and (max-width: 620px) {
table[class=body] h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table[class=body] p {
font-size: 16px !important;
}
table[class=body] .wrapper {
padding: 10px !important;
}
table[class=body] .content {
padding: 0 !important;
}
table[class=body] .container {
padding: 0 !important;
width: 100% !important;
}
table[class=body] .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table[class=body] .btn table {
width: 100% !important;
}
table[class=body] .btn a {
width: 100% !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;
}
}
</style>
</head>
<body class="" style="direction: {{direction}}">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
<tr>
<td>&nbsp;</td>
<td class="container">
<div class="content">
<table role="presentation" class="main">
<tr>
<td class="wrapper">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
{{content}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>
app/config/locales/templates/_cta.tpl
+19
View File
@@ -0,0 +1,19 @@
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
<tbody>
<tr>
<td align="left">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<a href="{{redirect}}" target="_blank">
{{title}}
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
app/config/locales/templates/en.email.auth.confirm.tpl
+15 -24
View File
@@ -1,24 +1,15 @@
<style>
* {
font-family: sans-serif,Arial;
-webkit-font-smoothing: antialiased;
font-weight: lighter;
}
</style>
<div style="direction: {{direction}}">
Hello {{name}},
<br />
<br />
Follow this link to verify your email address.
<br />
<a href="{{redirect}}">{{redirect}}</a>
<br />
<br />
If you didn’t ask to verify this address, you can ignore this message.
<br />
<br />
Thanks,
<br />
{{project}} team
</div>
<p>
Hello {{name}},
</p>
<p>
Follow this link to verify your email address.
</p>
{{cta}}
<p>
If you didn’t ask to verify this address, you can ignore this message.
</p>
<p>
Thanks,
<br />
{{project}} team
</p>
app/config/locales/templates/en.email.auth.invitation.tpl
+14 -27
View File
@@ -1,27 +1,14 @@
<style>
* {
font-family: sans-serif,Arial;
-webkit-font-smoothing: antialiased;
font-weight: lighter;
}
</style>
<div style="direction: {{direction}}">
Hello,
<br />
<br />
This mail was sent to you because <b>{{owner}}</b> wanted to invite you to become a team member at the <b>{{team}}</b> team over at {{project}}.
<br />
<br />
Follow this link to join the <b>{{team}}</b> team:
<br />
<a href="{{redirect}}">{{redirect}}</a>
<br />
<br />
If you are not interested, you can ignore this message.
<br />
<br />
Thanks,
<br />
{{project}} team
</div>
<p>
Hello {{name}},
</p>
<p>
This mail was sent to you because <b>{{owner}}</b> wanted to invite you to become a team member at the <b>{{team}}</b> team over at {{project}}.
</p>
{{cta}}
<p>
If you are not interested, you can ignore this message.</p>
<p>
Thanks,
<br />
{{project}} team
</p>
app/config/locales/templates/en.email.auth.recovery.tpl
+15 -24
View File
@@ -1,24 +1,15 @@
<style>
* {
font-family: sans-serif,Arial;
-webkit-font-smoothing: antialiased;
font-weight: lighter;
}
</style>
<div style="direction: {{direction}}">
Hello {{name}},
<br />
<br />
Follow this link to reset your {{project}} password.
<br />
<a href="{{redirect}}">{{redirect}}</a>
<br />
<br />
If you didn't ask to reset your password, you can ignore this message.
<br />
<br />
Thanks,
<br />
{{project}} team
</div>
<p>
Hello {{name}},
</p>
<p>
Follow this link to reset your {{project}} password.
</p>
{{cta}}
<p>
If you didn’t ask to verify this address, you can ignore this message.
</p>
<p>
Thanks,
<br />
{{project}} team
</p>
app/controllers/api/account.php
+14 -2
View File
@@ -1074,8 +1074,14 @@ $utopia->post('/v1/account/recovery')
$url['query'] = Template::mergeQuery(((isset($url['query'])) ? $url['query'] : ''), ['userId' => $profile->getId(), 'secret' => $secret]);
$url = Template::unParseURL($url);
$body = new Template(__DIR__.'/../../config/locales/templates/'.Locale::getText('account.emails.recovery.body'));
$body = new Template(__DIR__.'/../../config/locales/templates/_base.tpl');
$content = new Template(__DIR__.'/../../config/locales/templates/'.Locale::getText('account.emails.recovery.body'));
$cta = new Template(__DIR__.'/../../config/locales/templates/_cta.tpl');
$body
->setParam('{{content}}', $content->render())
->setParam('{{cta}}', $cta->render())
->setParam('{{title}}', Locale::getText('account.emails.recovery.title'))
->setParam('{{direction}}', Locale::getText('settings.direction'))
->setParam('{{project}}', $project->getAttribute('name', ['[APP-NAME]']))
->setParam('{{name}}', $profile->getAttribute('name'))
@@ -1223,8 +1229,14 @@ $utopia->post('/v1/account/verification')
$url['query'] = Template::mergeQuery(((isset($url['query'])) ? $url['query'] : ''), ['userId' => $user->getId(), 'secret' => $verificationSecret]);
$url = Template::unParseURL($url);
$body = new Template(__DIR__.'/../../config/locales/templates/'.Locale::getText('account.emails.verification.body'));
$body = new Template(__DIR__.'/../../config/locales/templates/_base.tpl');
$content = new Template(__DIR__.'/../../config/locales/templates/'.Locale::getText('account.emails.verification.body'));
$cta = new Template(__DIR__.'/../../config/locales/templates/_cta.tpl');
$body
->setParam('{{content}}', $content->render())
->setParam('{{cta}}', $cta->render())
->setParam('{{title}}', Locale::getText('account.emails.verification.title'))
->setParam('{{direction}}', Locale::getText('settings.direction'))
->setParam('{{project}}', $project->getAttribute('name', ['[APP-NAME]']))
->setParam('{{name}}', $user->getAttribute('name'))
app/controllers/api/teams.php
+8 -1
View File
@@ -316,12 +316,19 @@ $utopia->post('/v1/teams/:teamId/memberships')
$url['query'] = Template::mergeQuery(((isset($url['query'])) ? $url['query'] : ''), ['inviteId' => $membership->getId(), 'teamId' => $team->getId(), 'userId' => $invitee->getId(), 'secret' => $secret, 'teamId' => $teamId]);
$url = Template::unParseURL($url);
$body = new Template(__DIR__.'/../../config/locales/templates/'.Locale::getText('account.emails.invitation.body'));
$body = new Template(__DIR__.'/../../config/locales/templates/_base.tpl');
$content = new Template(__DIR__.'/../../config/locales/templates/'.Locale::getText('account.emails.invitation.body'));
$cta = new Template(__DIR__.'/../../config/locales/templates/_cta.tpl');
$body
->setParam('{{content}}', $content->render())
->setParam('{{cta}}', $cta->render())
->setParam('{{title}}', Locale::getText('account.emails.invitation.title'))
->setParam('{{direction}}', Locale::getText('settings.direction'))
->setParam('{{project}}', $project->getAttribute('name', ['[APP-NAME]']))
->setParam('{{team}}', $team->getAttribute('name', '[TEAM-NAME]'))
->setParam('{{owner}}', $user->getAttribute('name', ''))
->setParam('{{name}}', $name)
->setParam('{{redirect}}', $url)
;