mirror of
https://github.com/directus/directus.git
synced 2026-01-14 15:17:59 -05:00
Email updates (#9921)
* add from name for emails * updatd email template style * reset password email copy * updated logo to newest version * update invite email copy
This commit is contained in:
Ben Haynes
committed by
rijkvanzanten
rijkvanzanten
parent
6463feb248
commit
af2a6dd7f7
@@ -48,13 +48,13 @@ export class MailService {
|
||||
const { template, ...emailOptions } = options;
|
||||
let { html } = options;
|
||||
|
||||
const from = options.from || (env.EMAIL_FROM as string);
|
||||
const defaultTemplateData = await this.getDefaultTemplateData();
|
||||
|
||||
const from = `${defaultTemplateData.projectName} <${options.from || (env.EMAIL_FROM as string)}>`;
|
||||
|
||||
if (template) {
|
||||
let templateData = template.data;
|
||||
|
||||
const defaultTemplateData = await this.getDefaultTemplateData();
|
||||
|
||||
templateData = {
|
||||
...defaultTemplateData,
|
||||
...templateData,
|
||||
|
||||
@@ -1,95 +1,152 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
|
||||
<title>{{ projectName }} Email Service</title>
|
||||
<title>{{ projectName }} Email Service</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
background-color: #eceff1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-text-size-adjust: none;
|
||||
-ms-text-size-adjust: none;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #546e7a;
|
||||
font-family: 'Roboto', Helvetica, Helvetica, Arial, sans-serif;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
height: 52px;
|
||||
width: auto;
|
||||
min-width: 154px;
|
||||
padding: 0 20px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 52px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
text-decoration: none !important;
|
||||
color: white !important;
|
||||
background-color: {{ projectColor }};
|
||||
}
|
||||
<style type="text/css" id="hs-inline-css">
|
||||
/*<![CDATA[*/
|
||||
|
||||
a:hover {
|
||||
filter: brightness(105%);
|
||||
}
|
||||
/* CLIENT-SPECIFIC STYLES */
|
||||
body, table, td, a {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
|
||||
img { -ms-interpolation-mode: bicubic; }
|
||||
|
||||
/* RESET STYLES */
|
||||
img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
|
||||
table { border-collapse: collapse !important; }
|
||||
body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
|
||||
|
||||
/* iOS BLUE LINKS */
|
||||
a[x-apple-data-detectors] {
|
||||
color: inherit !important;
|
||||
text-decoration: none !important;
|
||||
font-size: inherit !important;
|
||||
font-family: inherit !important;
|
||||
font-weight: inherit !important;
|
||||
line-height: inherit !important;
|
||||
}
|
||||
body a {
|
||||
color: #00C897;
|
||||
text-decoration: none;
|
||||
}
|
||||
hr {
|
||||
width:66%;
|
||||
margin:40px auto;
|
||||
border:1px solid #d3dae4;
|
||||
}
|
||||
|
||||
/* MOBILE STYLES */
|
||||
@media screen and (max-width: 600px) {
|
||||
.img-max {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.max-width {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
#content {
|
||||
padding-left: 5% !important;
|
||||
padding-right: 5% !important;
|
||||
padding-top: 30px !important;
|
||||
padding-bottom: 30px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* DARK MODE */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#background {
|
||||
background-color: #172940 !important;
|
||||
}
|
||||
#content {
|
||||
background-color: #071930 !important;
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
.link {
|
||||
color: #00c897 !important;
|
||||
}
|
||||
.button {
|
||||
background-color:#0BA582 !important;
|
||||
}
|
||||
hr {
|
||||
border:1px solid #172940 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ANDROID CENTER FIX */
|
||||
div[style*="margin: 16px 0;"] {
|
||||
margin: 0 !important;
|
||||
}
|
||||
/*]]>*/
|
||||
</style>
|
||||
|
||||
<meta name="generator" content="Directus">
|
||||
<meta property="og:url" content="http://directus-20534155.hs-sites.com/7dea362b-3fac-3e00-956a-4952a3d4f474">
|
||||
<meta name="x-apple-disable-message-reformatting">
|
||||
<meta name="robots" content="noindex,follow">
|
||||
|
||||
p {
|
||||
margin: 20px 0 20px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; height:100% !important; width:100% !important; margin:0 !important; padding:0; !important background-color:#f6f6f6" bgcolor="#f6f6f6">
|
||||
|
||||
<body>
|
||||
<table border="0" cellpadding="0" cellspacing="0" width="100%">
|
||||
<tr>
|
||||
<td style="padding: 0;">
|
||||
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600"
|
||||
style="border: 0 solid #263238; border-collapse: collapse;">
|
||||
<!-- HIDDEN PREHEADER TEXT -->
|
||||
<div class="preview-text" style="display:none;font-size:1px;color:#172940;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;"> </div>
|
||||
|
||||
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:collapse !important">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td id="background" align="center" valign="top" width="100%" bgcolor="#172940" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; background-size:cover; padding:50px 15px 0 15px; background-color:#172940">
|
||||
<!--[if (gte mso 9)|(IE)]>
|
||||
<table role="presentation" align="center" border="0" cellspacing="0" cellpadding="0" width="600">
|
||||
<tr>
|
||||
<td align="center" bgcolor="{{ projectColor }}"
|
||||
style="padding: 30px 0 30px 0; border-radius: 4px 4px 0 0;">
|
||||
<img src="{{ projectLogo }}" alt="{{ projectName }}" width="130"
|
||||
style="display: block;" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td bgcolor="#ffffff" style="padding: 30px; border-radius: 0 0 4px 4px;">
|
||||
<table border="0" cellpadding="0" cellspacing="0" width="100%">
|
||||
<tr>
|
||||
<td
|
||||
style="color: #546e7a; font-family: Helvetica, Arial, sans-serif; padding: 0; line-height: 1.5; font-size: 16px;">
|
||||
<td align="center" valign="top" width="600">
|
||||
<![endif]-->
|
||||
<table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:collapse !important; max-width:600px">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td align="left" valign="top" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; padding:0 0 30px 0">
|
||||
<table><tbody><tr><td align="center" valign="middle" style="background-color:{{ projectColor }};width:48px;height:48px;border-radius:4px;padding:6px;">
|
||||
<img id="logo" src="{{ projectLogo }}" alt="{{ projectName }} Logo" width="40" height="auto" border="0" style="-ms-interpolation-mode:bicubic; border:0; height:auto; line-height:100%; outline:none; text-decoration:none; display:block; width:40px;object-fit:contain;">
|
||||
</td></tr></tbody></table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="content" align="left" valign="top" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; padding:40px 50px 50px 50px; font-family:Open Sans, Helvetica, Arial, sans-serif; border-radius:4px; box-shadow:0 4px 0 #15253A; background-color:#FFFFFE; color:#172940; font-size:15px; line-height:26px; margin:0" bgcolor="#FFFFFE">
|
||||
<div id="hs_cos_wrapper_email_template_main_email_body" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="module">
|
||||
|
||||
{% block content %}{{ html }}{% endblock %}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td bgcolor="#eceff1" style="padding: 20px 30px 0 32px;">
|
||||
<table border="0" cellpadding="0" cellspacing="0" width="100%">
|
||||
<tr>
|
||||
<td style="color:#b0bec5; font-family:Helvetica, Arial, sans-serif; font-size:12px;"
|
||||
width="75%">
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center" valign="middle" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; padding:25px 0; font-family:Open Sans, Helvetica, Arial, sans-serif; color:#FFFFFE">
|
||||
<p style="margin-bottom: 1em; color: #A2B5CD;font-size: 12px; line-height: 16px;">
|
||||
Sent by the team at {{ projectName }} — <a style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; text-decoration:none; color:#A2B5CD" class="unsubscribe" data-unsubscribe="true" href="{{ url }}" data-hs-link-id="0" target="_blank">Manage Emails</a><br>
|
||||
{% block footer %}{% endblock %}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!--[if (gte mso 9)|(IE)]>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<![endif]-->
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
@@ -7,17 +7,18 @@
|
||||
|
||||
<p style="text-align: center; padding: 20px 0;">
|
||||
<a href="{{ url }}">
|
||||
Click to reset your password
|
||||
<b>Reset Your Password</b>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<b>Important: This link will expire in 24 hours.</b>
|
||||
<br>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Thank you,<br>
|
||||
{{ projectName }}
|
||||
The {{ projectName }} Team
|
||||
</p>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
@@ -2,18 +2,18 @@
|
||||
{% block content %}
|
||||
|
||||
<p>
|
||||
Hello. You have been invited to join {{ projectName }}. Please click the button below to accept this invitation and join the project:
|
||||
You have been invited to join <i>{{ projectName }}</i>. Please click the button below to accept this invitation and join the project:
|
||||
</p>
|
||||
|
||||
<p style="text-align: center; padding: 20px 0;">
|
||||
<a href="{{ url }}">
|
||||
Join {{ projectName }}
|
||||
<b>Join {{ projectName }}</b>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Thank You,<br>
|
||||
{{ projectName }}
|
||||
Thank you,<br>
|
||||
The {{ projectName }} Team
|
||||
</p>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="39">
|
||||
<path fill="#FFFFFF" fill-rule="evenodd" d="M51.166 24.51a4.636 4.636 0 0 1-.763-.246 1.751 1.751 0 0 1-.54-.368c.147-1.304 0-2.435.122-3.713.492-4.967 3.615-3.393 6.418-4.204 1.745-.492 3.491-1.5 3.934-3.566a36.074 36.074 0 0 0-6.393-5.876C46.347 1.128 36.414-1.036 27.39.464a13.635 13.635 0 0 0 5.968 5.532s-2.445 0-4.541-1.565c-.615.245-1.845.73-2.435 1.024 4.794 4.598 12.293 5.114 17.678.984-.025.049-.492.762-1.057 3.737-1.254 6.343-4.869 5.852-9.343 4.254-9.294-3.369-14.408-.246-19.055-6.639a4.29 4.29 0 0 0-2.189 3.737c0 1.598.886 2.95 2.164 3.688.698-.926 1.011-1.189 2.228-1.189-1.883 1.068-2.105 2-2.916 4.582-.984 3.123-.566 6.32-5.164 7.155-2.434.123-2.385 1.77-3.27 4.23C4.352 33.188 2.877 34.467 0 37.491c1.18 1.426 2.41 1.598 3.663 1.082 2.582-1.082 4.574-4.426 6.442-6.59 2.09-2.409 7.106-1.376 10.892-3.737 2.607-1.598 3.885-3.761 2.164-7.425a7.254 7.254 0 0 1 1.869 4.426c4.376-.566 10.228 4.77 15.563 5.655a9.53 9.53 0 0 1-1.303-2.188c-.615-1.476-.811-2.828-.688-4.008.491 2.926 3.442 6.688 8.187 7.032 1.205.098 2.533-.05 3.91-.467 1.647-.492 3.171-1.131 4.99-.787 1.353.246 2.607.934 3.394 2.09 1.18 1.72 3.761 2.09 4.917-.025-2.606-6.81-9.786-7.253-12.834-8.04z"/>
|
||||
<svg width="64" height="39" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="#FFFFFF" fill-rule="evenodd" clip-rule="evenodd" d="M51.18 24.61c-.3-.07-.55-.15-.77-.25-.16-.07-.3-.16-.42-.26a.31.31 0 0 1-.1-.27c.11-1.24-.02-2.33.1-3.56.5-5 3.64-3.41 6.46-4.23 1.62-.45 3.24-1.35 3.83-3.1.1-.3.01-.61-.19-.84a36.2 36.2 0 0 0-6.12-5.54A36.73 36.73 0 0 0 27.94.36a.46.46 0 0 0-.33.7 13.7 13.7 0 0 0 4.31 4.24c.31.19.19.6-.17.52a8.2 8.2 0 0 1-2.92-1.26.35.35 0 0 0-.33-.04l-1.64.67a.45.45 0 0 0-.12.75A13.7 13.7 0 0 0 42.8 7.3c.3-.19.8.2.7.55a27 27 0 0 0-.54 2.37c-1.26 6.37-4.9 5.87-9.4 4.27-9-3.26-14.12-.48-18.66-5.98-.31-.38-.87-.51-1.24-.19a4.25 4.25 0 0 0 .43 6.8c.14.1.33.05.44-.08.28-.35.5-.59.8-.74.3-.16.46.29.2.52-.97.85-1.25 1.87-1.88 3.87-.99 3.13-.57 6.34-5.2 7.18-2.45.12-2.4 1.78-3.29 4.25-1.03 2.98-2.39 4.3-4.9 6.9-.34.36-.36.93.01 1.25 1 .85 2.04.9 3.09.46 2.6-1.08 4.6-4.44 6.48-6.61 2.1-2.42 7.15-1.39 10.97-3.76 2.05-1.25 3.29-2.86 2.9-5.27-.07-.38.37-.62.53-.26.31.68.51 1.4.6 2.16.02.2.2.34.39.33 4.12-.23 9.46 4.3 14.44 5.53.3.08.52-.27.35-.53a9.17 9.17 0 0 1-1.3-3.02c-.1-.39.47-.5.66-.14a9.2 9.2 0 0 0 7.4 4.71c1.2.1 2.54-.05 3.93-.47 1.66-.5 3.19-1.14 5.02-.79 1.36.25 2.63.94 3.42 2.1 1.1 1.62 3.45 2.04 4.7.35a.81.81 0 0 0 .08-.8c-2.76-6.43-9.75-6.88-12.75-7.65Z" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.3 KiB |
Reference in New Issue
Block a user