forked from tsai/budibase
mike12345567
6 years ago
14 changed files with 710 additions and 357 deletions
@ -0,0 +1,60 @@ |
|||||
|
const setup = require("./utilities") |
||||
|
const { EmailTemplatePurpose } = require("../../../constants") |
||||
|
const nodemailer = require("nodemailer") |
||||
|
const fetch = require("node-fetch") |
||||
|
|
||||
|
describe("/api/admin/email", () => { |
||||
|
let request = setup.getRequest() |
||||
|
let config = setup.getConfig() |
||||
|
|
||||
|
beforeAll(async () => { |
||||
|
await config.init() |
||||
|
}) |
||||
|
|
||||
|
afterAll(setup.afterAll) |
||||
|
|
||||
|
async function sendRealEmail(purpose) { |
||||
|
await config.saveEtherealSmtpConfig() |
||||
|
await config.saveSettingsConfig() |
||||
|
const res = await request |
||||
|
.post(`/api/admin/email/send`) |
||||
|
.send({ |
||||
|
email: "test@test.com", |
||||
|
purpose, |
||||
|
}) |
||||
|
.set(config.defaultHeaders()) |
||||
|
.expect("Content-Type", /json/) |
||||
|
.expect(200) |
||||
|
expect(res.body.message).toBeDefined() |
||||
|
const testUrl = nodemailer.getTestMessageUrl(res.body) |
||||
|
expect(testUrl).toBeDefined() |
||||
|
const response = await fetch(testUrl) |
||||
|
const text = await response.text() |
||||
|
let toCheckFor |
||||
|
switch (purpose) { |
||||
|
case EmailTemplatePurpose.WELCOME: |
||||
|
toCheckFor = `Thanks for getting started with Budibase's Budibase platform.` |
||||
|
break |
||||
|
case EmailTemplatePurpose.INVITATION: |
||||
|
toCheckFor = `Use the button below to set up your account and get started:` |
||||
|
break |
||||
|
case EmailTemplatePurpose.PASSWORD_RECOVERY: |
||||
|
toCheckFor = `You recently requested to reset your password for your Budibase account in your Budibase platform` |
||||
|
break |
||||
|
} |
||||
|
expect(text).toContain(toCheckFor) |
||||
|
} |
||||
|
|
||||
|
it("should be able to send a welcome email", async () => { |
||||
|
await sendRealEmail(EmailTemplatePurpose.WELCOME) |
||||
|
|
||||
|
}) |
||||
|
|
||||
|
it("should be able to send a invitation email", async () => { |
||||
|
await sendRealEmail(EmailTemplatePurpose.INVITATION) |
||||
|
}) |
||||
|
|
||||
|
it("should be able to send a password recovery email", async () => { |
||||
|
const res = await sendRealEmail(EmailTemplatePurpose.PASSWORD_RECOVERY) |
||||
|
}) |
||||
|
}) |
||||
@ -1,83 +1,32 @@ |
|||||
<!doctype html> |
<!-- Based on templates: https://github.com/wildbit/postmark-templates/blob/master/templates/plain --> |
||||
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> |
<!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> |
<head> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
<meta name="x-apple-disable-message-reformatting" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
||||
<head> |
<meta name="color-scheme" content="light dark" /> |
||||
<meta charset="utf-8"> |
<meta name="supported-color-schemes" content="light dark" /> |
||||
<meta name="viewport" content="width=device-width"> |
<title></title> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
<style type="text/css" rel="stylesheet" media="all"> |
||||
<meta name="x-apple-disable-message-reformatting"> |
{{ styles }} |
||||
<style> |
</style> |
||||
{{ styles }} |
<!--[if mso]> |
||||
</style> |
<style type="text/css"> |
||||
</head> |
.f-fallback { |
||||
|
font-family: Arial, sans-serif; |
||||
|
} |
||||
|
</style> |
||||
|
<![endif]--> |
||||
|
</head> |
||||
<body> |
<body> |
||||
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: auto;"> |
{{ body }} |
||||
<tbody> |
<table class="email-footer" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation"> |
||||
<tr> |
<tr> |
||||
<td class="bg_white logo" style="padding: 1em 2.5em; text-align: center"> |
<td class="content-cell" align="center"> |
||||
<h1><a href="{{ companyUrl }}">{{ company }}</a></h1> |
<p class="f-fallback sub align-center">© 2021 {{ company }}. All rights reserved.</p> |
||||
</td> |
</td> |
||||
</tr> |
</tr> |
||||
<tr> |
|
||||
<td class="bg_white logo" style="padding: 1em 2.5em; text-align: center"> |
|
||||
{{ body }} |
|
||||
</td> |
|
||||
</tr> |
|
||||
<tr> |
|
||||
<td class="bg_white logo" style="padding: 1em 2.5em; text-align: center"> |
|
||||
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: auto;"> |
|
||||
<tbody><tr> |
|
||||
<td valign="middle" class="bg_black footer email-section"> |
|
||||
<table> |
|
||||
<tbody><tr> |
|
||||
<td valign="top" width="50%" style="padding-top: 20px;"> |
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"> |
|
||||
<tbody><tr> |
|
||||
<td style="text-align: left; padding-right: 10px;"> |
|
||||
<h3 class="heading">{{ company }}</h3> |
|
||||
<p>Company information.</p> |
|
||||
</td> |
|
||||
</tr> |
|
||||
</tbody></table> |
|
||||
</td> |
|
||||
<td valign="top" width="50%" style="padding-top: 20px;"> |
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"> |
|
||||
<tbody><tr> |
|
||||
<td style="text-align: left; padding-left: 10px;"> |
|
||||
<h3 class="heading"><a href="{{ platformUrl }}">Budibase Platform</a></h3> |
|
||||
</td> |
|
||||
</tr> |
|
||||
</tbody></table> |
|
||||
</td> |
|
||||
</tr> |
|
||||
</tbody></table> |
|
||||
</td> |
|
||||
</tr> |
|
||||
<tr> |
|
||||
<td valign="middle" class="bg_black footer email-section"> |
|
||||
<table> |
|
||||
<tbody><tr> |
|
||||
<td valign="top" width="50%"> |
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"> |
|
||||
<tbody><tr> |
|
||||
<td style="text-align: left; padding-right: 10px;"> |
|
||||
<p>© 2021 {{ company }}. All Rights Reserved</p> |
|
||||
</td> |
|
||||
</tr> |
|
||||
</tbody></table> |
|
||||
</td> |
|
||||
</tr> |
|
||||
</tbody></table> |
|
||||
</td> |
|
||||
</tr> |
|
||||
</tbody> |
|
||||
</table> |
|
||||
</td> |
|
||||
</tr> |
|
||||
</tbody> |
|
||||
</table> |
</table> |
||||
</body> |
</body> |
||||
</html> |
</html> |
||||
@ -1,14 +1,67 @@ |
|||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"> |
<!-- Based on template: https://github.com/wildbit/postmark-templates/blob/master/templates/plain/user-invitation/content.html --> |
||||
<tbody> |
<span class="preheader">You've been invited to use {{ company }}'s Budibase platform!</span> |
||||
|
<table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0" role="presentation"> |
||||
<tr> |
<tr> |
||||
<td class="bg_dark email-section" style="text-align:center;"> |
<td align="center"> |
||||
<div class="heading-section heading-section-white"> |
<table class="email-content" width="100%" cellpadding="0" cellspacing="0" role="presentation"> |
||||
<span class="subheading">Budibase Invitation</span> |
<tr> |
||||
<h2>You've been invited to join {{ company }}'s Budibase platform!</h2> |
<td class="email-masthead"> |
||||
<p>Please follow the below link to finish your registration.</p> |
<a href="{{ platformUrl }}" class="f-fallback email-masthead_name"> |
||||
<p><a href="{{ registrationUrl }}" class="btn btn-primary">Finish registration</a></p> |
{{ company }} |
||||
</div> |
</a> |
||||
|
</td> |
||||
|
</tr> |
||||
|
<!-- Email Body --> |
||||
|
<tr> |
||||
|
<td class="email-body" width="570" cellpadding="0" cellspacing="0"> |
||||
|
<table class="email-body_inner" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation"> |
||||
|
<!-- Body content --> |
||||
|
<tr> |
||||
|
<td class="content-cell"> |
||||
|
<div class="f-fallback"> |
||||
|
<h1>Hi, {{ email }}!</h1> |
||||
|
<p> |
||||
|
{{#if request}} |
||||
|
{{ request.inviter }} has invited you to use {{ company }}'s Budibase platform.< |
||||
|
{{else}} |
||||
|
You've been invited to use {{ company }}'s Budibase platform. |
||||
|
{{/if}} |
||||
|
Use the button below to set up your account and get started: |
||||
|
</p> |
||||
|
<!-- Action --> |
||||
|
<table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0" role="presentation"> |
||||
|
<tr> |
||||
|
<td align="center"> |
||||
|
<table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation"> |
||||
|
<tr> |
||||
|
<td align="center"> |
||||
|
<a href="{{ registrationUrl }}" class="f-fallback button" target="_blank">Set up account</a> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
<p>If you have any questions contact your Budibase platform administrator.</p> |
||||
|
<p>Welcome aboard, |
||||
|
<br>The {{ company }} Team</p> |
||||
|
<p><strong>P.S.</strong> Need help getting started? Check out our <a href="{{ docsUrl }}">help documentation</a>.</p> |
||||
|
<!-- Sub copy --> |
||||
|
<table class="body-sub" role="presentation"> |
||||
|
<tr> |
||||
|
<td> |
||||
|
<p class="f-fallback sub">If you’re having trouble with the button above, copy and paste the URL below into your web browser.</p> |
||||
|
<p class="f-fallback sub">{{ registrationUrl }}</p> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
</div> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</table> |
||||
</td> |
</td> |
||||
</tr> |
</tr> |
||||
</tbody> |
|
||||
</table> |
</table> |
||||
@ -1,15 +1,62 @@ |
|||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"> |
<!-- Based on template: https://github.com/wildbit/postmark-templates/blob/master/templates/plain/password-reset/content.html --> |
||||
<tbody> |
<span class="preheader">Use this link to reset your password. The link is only valid for 24 hours.</span> |
||||
|
<table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0" role="presentation"> |
||||
<tr> |
<tr> |
||||
<td class="bg_dark email-section" style="text-align:center;"> |
<td align="center"> |
||||
<div class="heading-section heading-section-white"> |
<table class="email-content" width="100%" cellpadding="0" cellspacing="0" role="presentation"> |
||||
<span class="subheading">Budibase Password reset</span> |
<tr> |
||||
<h2>Please follow the below link to reset your password.</h2> |
<td class="email-masthead"> |
||||
<p><a href="{{ resetUrl }}" class="btn btn-primary">Reset password</a></p> |
<a href="{{ platformUrl }}" class="f-fallback email-masthead_name"> |
||||
<p>This password reset was required for {{ email }} if you did not |
{{ company }} |
||||
request this then please contact your administrator.</p> |
</a> |
||||
</div> |
</td> |
||||
|
</tr> |
||||
|
<!-- Email Body --> |
||||
|
<tr> |
||||
|
<td class="email-body" width="570" cellpadding="0" cellspacing="0"> |
||||
|
<table class="email-body_inner" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation"> |
||||
|
<!-- Body content --> |
||||
|
<tr> |
||||
|
<td class="content-cell"> |
||||
|
<div class="f-fallback"> |
||||
|
<h1>Hi {{ email }},</h1> |
||||
|
<p>You recently requested to reset your password for your {{ company }} account in your Budibase platform. Use the button below to reset it. <strong>This password reset is only valid for the next 24 hours.</strong></p> |
||||
|
<!-- Action --> |
||||
|
<table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0" role="presentation"> |
||||
|
<tr> |
||||
|
<td align="center"> |
||||
|
<table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation"> |
||||
|
<tr> |
||||
|
<td align="center"> |
||||
|
<a href="{{ resetUrl }}" class="f-fallback button button--green" target="_blank">Reset your password</a> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
{{#if request}} |
||||
|
<p>For security, this request was received from a {{ request.os }} device.</p> |
||||
|
{{/if}} |
||||
|
<p>If you did not request a password reset, please ignore this email or contact support if you have questions.</p> |
||||
|
<p>Thanks, |
||||
|
<br>The {{ company }} Team</p> |
||||
|
<!-- Sub copy --> |
||||
|
<table class="body-sub" role="presentation"> |
||||
|
<tr> |
||||
|
<td> |
||||
|
<p class="f-fallback sub">If you’re having trouble with the button above, copy and paste the URL below into your web browser.</p> |
||||
|
<p class="f-fallback sub">{{ resetUrl }}</p> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
</div> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</table> |
||||
</td> |
</td> |
||||
</tr> |
</tr> |
||||
</tbody> |
|
||||
</table> |
</table> |
||||
@ -1,269 +1,408 @@ |
|||||
@font-face { |
/* Based on templates: https://github.com/wildbit/postmark-templates/blob/master/templates/plain */ |
||||
font-family: 'Playfair Display'; |
/* Base ------------------------------ */ |
||||
font-style: italic; |
|
||||
font-weight: 400; |
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap'); |
||||
src: url(/fonts.gstatic.com/s/playfairdisplay/v22/nuFkD-vYSZviVYUb_rj3ij__anPXDTnohkk72xU.woff2) format('woff2'); |
|
||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; |
|
||||
} |
|
||||
html, |
|
||||
body { |
body { |
||||
margin: 0 auto !important; |
width: 100% !important; |
||||
padding: 0 !important; |
height: 100%; |
||||
height: 100% !important; |
margin: 0; |
||||
width: 100% !important; |
-webkit-text-size-adjust: none; |
||||
background: #f1f1f1; |
|
||||
} |
} |
||||
* { |
|
||||
-ms-text-size-adjust: 100%; |
a { |
||||
-webkit-text-size-adjust: 100%; |
color: #3869D4; |
||||
} |
} |
||||
div[style*="margin: 16px 0"] { |
|
||||
margin: 0 !important; |
a img { |
||||
|
border: none; |
||||
} |
} |
||||
table, |
|
||||
td { |
td { |
||||
mso-table-lspace: 0pt !important; |
word-break: break-word; |
||||
mso-table-rspace: 0pt !important; |
|
||||
} |
} |
||||
table { |
|
||||
border-spacing: 0 !important; |
.preheader { |
||||
border-collapse: collapse !important; |
display: none !important; |
||||
table-layout: fixed !important; |
visibility: hidden; |
||||
margin: 0 auto !important; |
mso-hide: all; |
||||
|
font-size: 1px; |
||||
|
line-height: 1px; |
||||
|
max-height: 0; |
||||
|
max-width: 0; |
||||
|
opacity: 0; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
/* Type ------------------------------ */ |
||||
|
|
||||
|
body, |
||||
|
td, |
||||
|
th { |
||||
|
font-family: "Source Sans Pro", Helvetica, Arial, sans-serif; |
||||
} |
} |
||||
img { |
|
||||
-ms-interpolation-mode:bicubic; |
h1 { |
||||
|
margin-top: 0; |
||||
|
color: #333333; |
||||
|
font-size: 22px; |
||||
|
font-weight: bold; |
||||
|
text-align: left; |
||||
} |
} |
||||
a { |
|
||||
text-decoration: none; |
h2 { |
||||
|
margin-top: 0; |
||||
|
color: #333333; |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
text-align: left; |
||||
|
} |
||||
|
|
||||
|
h3 { |
||||
|
margin-top: 0; |
||||
|
color: #333333; |
||||
|
font-size: 14px; |
||||
|
font-weight: bold; |
||||
|
text-align: left; |
||||
} |
} |
||||
*[x-apple-data-detectors], /* iOS */ |
|
||||
.unstyle-auto-detected-links *, |
td, |
||||
.aBn { |
th { |
||||
border-bottom: 0 !important; |
font-size: 16px; |
||||
cursor: default !important; |
} |
||||
color: inherit !important; |
|
||||
text-decoration: none !important; |
p, |
||||
font-size: inherit !important; |
ul, |
||||
font-family: inherit !important; |
ol, |
||||
font-weight: inherit !important; |
blockquote { |
||||
line-height: inherit !important; |
margin: .4em 0 1.1875em; |
||||
|
font-size: 16px; |
||||
|
line-height: 1.625; |
||||
|
} |
||||
|
|
||||
|
p.sub { |
||||
|
font-size: 13px; |
||||
|
} |
||||
|
/* Utilities ------------------------------ */ |
||||
|
|
||||
|
.align-right { |
||||
|
text-align: right; |
||||
|
} |
||||
|
|
||||
|
.align-left { |
||||
|
text-align: left; |
||||
|
} |
||||
|
|
||||
|
.align-center { |
||||
|
text-align: center; |
||||
|
} |
||||
|
/* Buttons ------------------------------ */ |
||||
|
|
||||
|
.button { |
||||
|
background-color: #3869D4; |
||||
|
border-top: 10px solid #3869D4; |
||||
|
border-right: 18px solid #3869D4; |
||||
|
border-bottom: 10px solid #3869D4; |
||||
|
border-left: 18px solid #3869D4; |
||||
|
display: inline-block; |
||||
|
color: #FFF; |
||||
|
text-decoration: none; |
||||
|
border-radius: 3px; |
||||
|
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16); |
||||
|
-webkit-text-size-adjust: none; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.button--green { |
||||
|
background-color: #22BC66; |
||||
|
border-top: 10px solid #22BC66; |
||||
|
border-right: 18px solid #22BC66; |
||||
|
border-bottom: 10px solid #22BC66; |
||||
|
border-left: 18px solid #22BC66; |
||||
|
} |
||||
|
|
||||
|
.button--red { |
||||
|
background-color: #FF6136; |
||||
|
border-top: 10px solid #FF6136; |
||||
|
border-right: 18px solid #FF6136; |
||||
|
border-bottom: 10px solid #FF6136; |
||||
|
border-left: 18px solid #FF6136; |
||||
} |
} |
||||
.a6S { |
|
||||
display: none !important; |
@media only screen and (max-width: 500px) { |
||||
opacity: 0.01 !important; |
.button { |
||||
|
width: 100% !important; |
||||
|
text-align: center !important; |
||||
|
} |
||||
|
} |
||||
|
/* Attribute list ------------------------------ */ |
||||
|
|
||||
|
.attributes { |
||||
|
margin: 0 0 21px; |
||||
|
} |
||||
|
|
||||
|
.attributes_content { |
||||
|
background-color: #F4F4F7; |
||||
|
padding: 16px; |
||||
|
} |
||||
|
|
||||
|
.attributes_item { |
||||
|
padding: 0; |
||||
|
} |
||||
|
/* Related Items ------------------------------ */ |
||||
|
|
||||
|
.related { |
||||
|
width: 100%; |
||||
|
margin: 0; |
||||
|
padding: 25px 0 0 0; |
||||
|
-premailer-width: 100%; |
||||
|
-premailer-cellpadding: 0; |
||||
|
-premailer-cellspacing: 0; |
||||
|
} |
||||
|
|
||||
|
.related_item { |
||||
|
padding: 10px 0; |
||||
|
color: #CBCCCF; |
||||
|
font-size: 15px; |
||||
|
line-height: 18px; |
||||
|
} |
||||
|
|
||||
|
.related_item-title { |
||||
|
display: block; |
||||
|
margin: .5em 0 0; |
||||
|
} |
||||
|
|
||||
|
.related_item-thumb { |
||||
|
display: block; |
||||
|
padding-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
.related_heading { |
||||
|
border-top: 1px solid #CBCCCF; |
||||
|
text-align: center; |
||||
|
padding: 25px 0 10px; |
||||
|
} |
||||
|
/* Discount Code ------------------------------ */ |
||||
|
|
||||
|
.discount { |
||||
|
width: 100%; |
||||
|
margin: 0; |
||||
|
padding: 24px; |
||||
|
-premailer-width: 100%; |
||||
|
-premailer-cellpadding: 0; |
||||
|
-premailer-cellspacing: 0; |
||||
|
background-color: #F4F4F7; |
||||
|
border: 2px dashed #CBCCCF; |
||||
|
} |
||||
|
|
||||
|
.discount_heading { |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.discount_body { |
||||
|
text-align: center; |
||||
|
font-size: 15px; |
||||
|
} |
||||
|
/* Social Icons ------------------------------ */ |
||||
|
|
||||
|
.social { |
||||
|
width: auto; |
||||
|
} |
||||
|
|
||||
|
.social td { |
||||
|
padding: 0; |
||||
|
width: auto; |
||||
} |
} |
||||
.im { |
|
||||
color: inherit !important; |
.social_icon { |
||||
} |
height: 20px; |
||||
img.g-img + div { |
margin: 0 8px 10px 8px; |
||||
display: none !important; |
padding: 0; |
||||
} |
} |
||||
@media only screen and (min-device-width: 320px) and (max-device-width: 374px) { |
/* Data table ------------------------------ */ |
||||
u ~ div .email-container { |
|
||||
min-width: 320px !important; |
.purchase { |
||||
} |
width: 100%; |
||||
} |
margin: 0; |
||||
@media only screen and (min-device-width: 375px) and (max-device-width: 413px) { |
padding: 35px 0; |
||||
u ~ div .email-container { |
-premailer-width: 100%; |
||||
min-width: 375px !important; |
-premailer-cellpadding: 0; |
||||
} |
-premailer-cellspacing: 0; |
||||
} |
} |
||||
@media only screen and (min-device-width: 414px) { |
|
||||
u ~ div .email-container { |
.purchase_content { |
||||
min-width: 414px !important; |
width: 100%; |
||||
} |
margin: 0; |
||||
} |
padding: 25px 0 0 0; |
||||
.primary{ |
-premailer-width: 100%; |
||||
background: #f3a333; |
-premailer-cellpadding: 0; |
||||
} |
-premailer-cellspacing: 0; |
||||
.bg_white{ |
} |
||||
background: #ffffff; |
|
||||
} |
.purchase_item { |
||||
.bg_light{ |
padding: 10px 0; |
||||
background: #fafafa; |
color: #51545E; |
||||
} |
font-size: 15px; |
||||
.bg_black{ |
line-height: 18px; |
||||
background: #000000; |
} |
||||
} |
|
||||
.bg_dark{ |
.purchase_heading { |
||||
background: rgba(0,0,0,.8); |
padding-bottom: 8px; |
||||
} |
border-bottom: 1px solid #EAEAEC; |
||||
.email-section{ |
} |
||||
padding:2.5em; |
|
||||
} |
.purchase_heading p { |
||||
.btn{ |
margin: 0; |
||||
padding: 10px 15px; |
color: #85878E; |
||||
} |
font-size: 12px; |
||||
.btn.btn-primary{ |
} |
||||
border-radius: 30px; |
|
||||
background: #f3a333; |
.purchase_footer { |
||||
color: #ffffff; |
padding-top: 15px; |
||||
} |
border-top: 1px solid #EAEAEC; |
||||
h1,h2,h3,h4,h5,h6{ |
} |
||||
font-family: 'Playfair Display', serif; |
|
||||
color: #000000; |
.purchase_total { |
||||
margin-top: 0; |
margin: 0; |
||||
} |
text-align: right; |
||||
body{ |
font-weight: bold; |
||||
font-family: 'Montserrat', sans-serif; |
color: #333333; |
||||
font-weight: 400; |
} |
||||
font-size: 15px; |
|
||||
line-height: 1.8; |
.purchase_total--label { |
||||
color: rgba(0,0,0,.4); |
padding: 0 15px 0 0; |
||||
} |
} |
||||
a{ |
|
||||
color: #f3a333; |
body { |
||||
} |
background-color: #FFF; |
||||
table{ |
color: #333; |
||||
} |
} |
||||
.logo h1{ |
|
||||
margin: 0; |
p { |
||||
} |
color: #333; |
||||
.logo h1 a{ |
} |
||||
color: #000; |
|
||||
font-size: 20px; |
.email-wrapper { |
||||
font-weight: 700; |
width: 100%; |
||||
text-transform: uppercase; |
margin: 0; |
||||
font-family: 'Montserrat', sans-serif; |
padding: 0; |
||||
} |
-premailer-width: 100%; |
||||
.hero{ |
-premailer-cellpadding: 0; |
||||
position: relative; |
-premailer-cellspacing: 0; |
||||
} |
} |
||||
.hero img{ |
|
||||
|
.email-content { |
||||
} |
width: 100%; |
||||
.hero .text{ |
margin: 0; |
||||
color: rgba(255,255,255,.8); |
padding: 0; |
||||
} |
-premailer-width: 100%; |
||||
.hero .text h2{ |
-premailer-cellpadding: 0; |
||||
color: #ffffff; |
-premailer-cellspacing: 0; |
||||
font-size: 30px; |
} |
||||
margin-bottom: 0; |
/* Masthead ----------------------- */ |
||||
} |
|
||||
.heading-section{ |
.email-masthead { |
||||
} |
padding: 25px 0; |
||||
.heading-section h2{ |
text-align: center; |
||||
color: #000000; |
} |
||||
font-size: 28px; |
|
||||
margin-top: 0; |
.email-masthead_logo { |
||||
line-height: 1.4; |
width: 94px; |
||||
} |
} |
||||
.heading-section .subheading{ |
|
||||
margin-bottom: 20px !important; |
.email-masthead_name { |
||||
display: inline-block; |
font-size: 16px; |
||||
font-size: 13px; |
font-weight: bold; |
||||
text-transform: uppercase; |
color: #A8AAAF; |
||||
letter-spacing: 2px; |
text-decoration: none; |
||||
color: rgba(0,0,0,.4); |
text-shadow: 0 1px 0 white; |
||||
position: relative; |
} |
||||
} |
/* Body ------------------------------ */ |
||||
.heading-section .subheading::after{ |
|
||||
position: absolute; |
.email-body { |
||||
left: 0; |
width: 100%; |
||||
right: 0; |
margin: 0; |
||||
bottom: -10px; |
padding: 0; |
||||
content: ''; |
-premailer-width: 100%; |
||||
width: 100%; |
-premailer-cellpadding: 0; |
||||
height: 2px; |
-premailer-cellspacing: 0; |
||||
background: #f3a333; |
} |
||||
margin: 0 auto; |
|
||||
} |
.email-body_inner { |
||||
.heading-section-white{ |
width: 570px; |
||||
color: rgba(255,255,255,.8); |
margin: 0 auto; |
||||
} |
padding: 0; |
||||
.heading-section-white h2{ |
-premailer-width: 570px; |
||||
font-size: 28px; |
-premailer-cellpadding: 0; |
||||
line-height: 1; |
-premailer-cellspacing: 0; |
||||
padding-bottom: 0; |
} |
||||
} |
|
||||
.heading-section-white h2{ |
.email-footer { |
||||
color: #ffffff; |
width: 570px; |
||||
} |
margin: 0 auto; |
||||
.heading-section-white .subheading{ |
padding: 0; |
||||
margin-bottom: 0; |
-premailer-width: 570px; |
||||
display: inline-block; |
-premailer-cellpadding: 0; |
||||
font-size: 13px; |
-premailer-cellspacing: 0; |
||||
text-transform: uppercase; |
text-align: center; |
||||
letter-spacing: 2px; |
} |
||||
color: rgba(255,255,255,.4); |
|
||||
} |
.email-footer p { |
||||
.icon{ |
color: #A8AAAF; |
||||
text-align: center; |
} |
||||
} |
|
||||
.icon img{ |
.body-action { |
||||
} |
width: 100%; |
||||
.text-services{ |
margin: 30px auto; |
||||
padding: 10px 10px 0; |
padding: 0; |
||||
text-align: center; |
-premailer-width: 100%; |
||||
} |
-premailer-cellpadding: 0; |
||||
.text-services h3{ |
-premailer-cellspacing: 0; |
||||
font-size: 20px; |
text-align: center; |
||||
} |
} |
||||
.text-services .meta{ |
|
||||
text-transform: uppercase; |
.body-sub { |
||||
font-size: 14px; |
margin-top: 25px; |
||||
} |
padding-top: 25px; |
||||
.img{ |
border-top: 1px solid #EAEAEC; |
||||
width: 100%; |
} |
||||
height: auto; |
|
||||
position: relative; |
.content-cell { |
||||
} |
padding: 35px; |
||||
.img .icon{ |
} |
||||
position: absolute; |
/*Media Queries ------------------------------ */ |
||||
top: 50%; |
|
||||
left: 0; |
@media only screen and (max-width: 600px) { |
||||
right: 0; |
.email-body_inner, |
||||
bottom: 0; |
.email-footer { |
||||
margin-top: -25px; |
width: 100% !important; |
||||
} |
} |
||||
.img .icon a{ |
} |
||||
display: block; |
|
||||
width: 60px; |
@media (prefers-color-scheme: dark) { |
||||
position: absolute; |
body { |
||||
top: 0; |
background-color: #333333 !important; |
||||
left: 50%; |
color: #FFF !important; |
||||
margin-left: -25px; |
} |
||||
} |
p, |
||||
.counter-text{ |
ul, |
||||
text-align: center; |
ol, |
||||
} |
blockquote, |
||||
.counter-text .num{ |
h1, |
||||
display: block; |
h2, |
||||
color: #ffffff; |
h3, |
||||
font-size: 34px; |
span, |
||||
font-weight: 700; |
.purchase_item { |
||||
} |
color: #FFF !important; |
||||
.counter-text .name{ |
} |
||||
display: block; |
.attributes_content, |
||||
color: rgba(255,255,255,.9); |
.discount { |
||||
font-size: 13px; |
background-color: #222 !important; |
||||
} |
} |
||||
.footer{ |
.email-masthead_name { |
||||
color: rgba(255,255,255,.5); |
text-shadow: none !important; |
||||
} |
} |
||||
.footer .heading{ |
} |
||||
color: #ffffff; |
|
||||
font-size: 20px; |
:root { |
||||
} |
color-scheme: light dark; |
||||
.footer ul{ |
supported-color-schemes: light dark; |
||||
margin: 0; |
|
||||
padding: 0; |
|
||||
} |
|
||||
.footer ul li{ |
|
||||
list-style: none; |
|
||||
margin-bottom: 10px; |
|
||||
} |
|
||||
.footer ul li a{ |
|
||||
color: rgba(255,255,255,1); |
|
||||
} |
|
||||
@media screen and (max-width: 500px) { |
|
||||
.icon{ |
|
||||
text-align: left; |
|
||||
} |
|
||||
.text-services{ |
|
||||
padding-left: 0; |
|
||||
padding-right: 20px; |
|
||||
text-align: left; |
|
||||
} |
|
||||
} |
} |
||||
@ -0,0 +1,62 @@ |
|||||
|
<!-- Based on template: https://github.com/wildbit/postmark-templates/blob/master/templates/plain/welcome/content.html --> |
||||
|
<span class="preheader">Thanks for trying out [Product Name]. We’ve pulled together some information and resources to help you get started.</span> |
||||
|
<table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0" role="presentation"> |
||||
|
<tr> |
||||
|
<td align="center"> |
||||
|
<table class="email-content" width="100%" cellpadding="0" cellspacing="0" role="presentation"> |
||||
|
<tr> |
||||
|
<td class="email-masthead"> |
||||
|
<a href="https://example.com" class="f-fallback email-masthead_name"> |
||||
|
{{ company }} |
||||
|
</a> |
||||
|
</td> |
||||
|
</tr> |
||||
|
<!-- Email Body --> |
||||
|
<tr> |
||||
|
<td class="email-body" width="570" cellpadding="0" cellspacing="0"> |
||||
|
<table class="email-body_inner" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation"> |
||||
|
<!-- Body content --> |
||||
|
<tr> |
||||
|
<td class="content-cell"> |
||||
|
<div class="f-fallback"> |
||||
|
<h1>Welcome, {{ email }}!</h1> |
||||
|
<p>Thanks for getting started with {{ company }}'s Budibase platform.</p> |
||||
|
<p>For reference, here's your login information:</p> |
||||
|
<table class="attributes" width="100%" cellpadding="0" cellspacing="0" role="presentation"> |
||||
|
<tr> |
||||
|
<td class="attributes_content"> |
||||
|
<table width="100%" cellpadding="0" cellspacing="0" role="presentation"> |
||||
|
<tr> |
||||
|
<td class="attributes_item"> |
||||
|
<span class="f-fallback"> |
||||
|
<strong>Login Page:</strong> <a href="{{ loginUrl }}">{{ loginUrl }}</a> |
||||
|
</span> |
||||
|
</td> |
||||
|
</tr> |
||||
|
{{#if request}} |
||||
|
<tr> |
||||
|
<td class="attributes_item"> |
||||
|
<span class="f-fallback"> |
||||
|
<strong>Username:</strong> {{ request.loginUsername }} |
||||
|
</span> |
||||
|
</td> |
||||
|
</tr> |
||||
|
{{/if}} |
||||
|
</table> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
<p>If you have any questions get in contact with your {{ company }}'s Budibase platform administration team.</p> |
||||
|
<p>Thanks, |
||||
|
<br>The {{ company }} Team</p> |
||||
|
<p><strong>P.S.</strong> Need immediate help getting started? Check out our <a href="{{ docsUrl }}">help documentation</a>.</p> |
||||
|
</div> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</table> |
||||
Loading…
Reference in new issue