harmacist/healthchecks
1
0
Fork 0
forked from GithubBackups/healthchecks
Code Issues Pull Requests Projects Releases Wiki Activity

email template from Litmus. CSS already inlined, so dropping premailer dependency.

Browse Source
This commit is contained in:
Pēteris Caune 2017-01-15 13:10:08 +02:00
parent b8aabd711c
commit 8d956b3365
12 changed files with 312 additions and 358 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
hc/accounts/models.py
View File

@ -35,7 +35,8 @@ class Profile(models.Model):
path = reverse("hc-check-token", args=[self.user.username, token])
ctx = {
"login_link": settings.SITE_ROOT + path,
"button_text": "Log In",
"button_url": settings.SITE_ROOT + path,
"inviting_profile": inviting_profile
}
emails.login(self.user.email, ctx)
@ -46,7 +47,10 @@ class Profile(models.Model):
self.save()
path = reverse("hc-set-password", args=[token])
ctx = {"set_password_link": settings.SITE_ROOT + path}
ctx = {
"button_text": "Set Password",
"button_url": settings.SITE_ROOT + path
}
emails.set_password(self.user.email, ctx)
def set_api_key(self):

6
hc/front/templatetags/hc_extras.py
View File

@ -1,5 +1,6 @@
from django import template
from django.conf import settings
from django.utils.safestring import mark_safe
from hc.lib.date import format_duration
@ -21,6 +22,11 @@ def site_name():
return settings.SITE_NAME
@register.simple_tag
def escaped_site_name():
return mark_safe(settings.SITE_NAME.replace(".", "<span>.</span>"))
@register.simple_tag
def site_root():
return settings.SITE_ROOT

4
hc/lib/emails.py
View File

@ -1,9 +1,9 @@
from django.conf import settings
from djmail.template_mail import InlineCSSTemplateMail
from djmail.template_mail import TemplateMail
def send(name, to, ctx):
o = InlineCSSTemplateMail(name)
o = TemplateMail(name)
ctx["SITE_ROOT"] = settings.SITE_ROOT
o.send(to, ctx)

1
requirements.txt
View File

@ -4,7 +4,6 @@ django-ses-backend==0.1.1
Django==1.10.1
django_compressor==2.1
djmail==0.11.0
premailer==2.9.6
psycopg2==2.6.1
pytz==2016.7
requests==2.9.1

24
templates/emails/alert-body-html.html
View File

@ -2,24 +2,26 @@
{% load hc_extras %}
{% block content %}
<h1>Hello,</h1>
<p>
This is a notification sent by <a href="{% site_root %}">{% site_name %}</a>.
<br />
The check <strong>{{ check.name_then_code }}</strong>
has gone <strong>{{ check.status|upper }}</strong>.
</p>
Hello,<br />
<p>Here is a summary of all your checks:</p>
This is a notification sent by <a href="{% site_root %}">{% site_name %}</a>.
<br />
The check <strong>{{ check.name_then_code }}</strong>
has gone <strong>{{ check.status|upper }}</strong>.
<br /><br />
Here is a summary of all your checks:
<br />
{% include "emails/summary-html.html" %}
{% if show_upgrade_note %}
<p><strong>P.S.</strong>
<strong>P.S.</strong>
Find this service useful? Support it by upgrading to
a <a href="https://healthchecks.io/pricing/">premium account</a>!
</p>
<br /><br />
{% endif %}
<p>Thanks,<br>The Healthchecks<span>.</span>io Team</p>
Thanks,<br>
The {% escaped_site_name %} Team
{% endblock %}

406
templates/emails/base.html
View File

@ -1,222 +1,208 @@
{% load hc_extras %}
<!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">
<!DOCTYPE html>{% load humanize hc_extras %}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>{% block title %}{% endblock %}</title>
<style type="text/css" rel="stylesheet" media="all">
/* Base ------------------------------ */
*:not(br):not(tr):not(html) {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
width: 100% !important;
height: 100%;
margin: 0;
line-height: 1.4;
background-color: #F2F4F6;
color: #74787E;
-webkit-text-size-adjust: none;
}
a {
color: #3869D4;
<title>{% block title %}{% endblock %}</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
/* CLIENT-SPECIFIC STYLES */
body, table, td, a{-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
table, td{mso-table-lspace: 0pt; mso-table-rspace: 0pt;} /* Remove spacing between tables in Outlook 2007 and up */
img{-ms-interpolation-mode: bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
/* 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;
}
a.neutral {
color: #74787E;
/* MOBILE STYLES */
@media screen and (max-width: 525px) {
/* ALLOWS FOR FLUID TABLES */
.wrapper {
width: 100% !important;
max-width: 100% !important;
}
/* ADJUSTS LAYOUT OF LOGO IMAGE */
.logo img {
margin: 0 auto !important;
}
/* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
.mobile-hide {
display: none !important;
}
.img-max {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
}
/* FULL-WIDTH TABLES */
.responsive-table {
width: 100% !important;
}
/* UTILITY CLASSES FOR ADJUSTING PADDING ON MOBILE */
.padding {
padding: 10px 5% 15px 5% !important;
}
.padding-meta {
padding: 30px 5% 0px 5% !important;
text-align: center;
}
.no-padding {
padding: 0 !important;
}
.section-padding {
padding: 50px 15px 50px 15px !important;
}
/* ADJUST BUTTONS ON MOBILE */
.mobile-button-container {
margin: 0 auto;
width: 100% !important;
}
.mobile-button {
padding: 15px !important;
border: 0 !important;
font-size: 16px !important;
display: block !important;
}
}
/* Layout ------------------------------ */
.email-wrapper {
width: 100%;
margin: 0;
padding: 0;
background-color: #F2F4F6;
}
.email-content {
width: 100%;
margin: 0;
padding: 0;
}
/* Masthead ----------------------- */
.email-masthead {
padding: 25px 0;
text-align: center;
}
.email-masthead_logo {
max-width: 400px;
border: 0;
}
.email-masthead_name {
font-size: 16px;
font-weight: bold;
color: #bbbfc3;
text-decoration: none;
text-shadow: 0 1px 0 white;
}
/* Body ------------------------------ */
.email-body {
width: 100%;
margin: 0;
padding: 0;
border-top: 1px solid #EDEFF2;
border-bottom: 1px solid #EDEFF2;
background-color: #FFF;
}
.email-body_inner {
width: 570px;
margin: 0 auto;
padding: 0;
}
.email-footer {
width: 570px;
margin: 0 auto;
padding: 0;
text-align: center;
}
.email-footer p {
color: #74787E;
}
.email-footer a {
color: #74787E;
}
.body-action {
width: 100%;
margin: 30px auto;
padding: 0;
text-align: center;
}
.body-sub {
margin-top: 25px;
padding-top: 25px;
border-top: 1px solid #EDEFF2;
}
.content-cell {
padding: 35px;
}
.align-right {
text-align: right;
}
/* Type ------------------------------ */
h1 {
margin-top: 0;
color: #2F3133;
font-size: 19px;
font-weight: bold;
text-align: left;
}
h2 {
margin-top: 0;
color: #2F3133;
font-size: 16px;
font-weight: bold;
text-align: left;
}
h3 {
margin-top: 0;
color: #2F3133;
font-size: 14px;
font-weight: bold;
text-align: left;
}
p {
margin-top: 0;
color: #74787E;
font-size: 16px;
line-height: 1.5em;
text-align: left;
}
p.sub {
font-size: 12px;
}
p.center {
text-align: center;
}
/* Buttons ------------------------------ */
.button {
display: inline-block;
width: 200px;
background-color: #3869D4;
border-radius: 3px;
color: #ffffff;
font-size: 15px;
line-height: 45px;
text-align: center;
text-decoration: none;
-webkit-text-size-adjust: none;
mso-hide: all;
}
.button--green {
background-color: #22BC66;
}
.button--red {
background-color: #dc4d2f;
}
.button--blue {
background-color: #3869D4;
}
/*Media Queries ------------------------------ */
@media only screen and (max-width: 600px) {
.email-body_inner,
.email-footer {
width: 100% !important;
}
}
@media only screen and (max-width: 500px) {
.button {
width: 100% !important;
}
}
</style>
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] { margin: 0 !important; }
</style>
</head>
<body>
<table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0">
<body style="margin: 0 !important; padding: 0 !important;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<table class="email-content" width="100%" cellpadding="0" cellspacing="0">
<!-- Logo -->
<tr>
<td class="email-masthead">
<img src="{% site_root %}/static/img/logo-full.png" alt="" />
</td>
</tr>
<!-- Email Body -->
<tr>
<td class="email-body" width="100%">
<table class="email-body_inner" align="center" width="570" cellpadding="0" cellspacing="0">
<!-- Body content -->
<td bgcolor="#F2F4F6" align="center">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="500">
<tr>
<td align="center" valign="top" width="500">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 500px;" class="wrapper">
<tr>
<td class="content-cell">
{% block content %}{% endblock %}
</td>
<td align="center" valign="top" style="padding: 15px 0;" class="logo">
<a href="https://healthchecks.io" target="_blank">
<img alt="Logo" src="{% site_root %}/static/img/logo-full@2x.png" width="200" height="50" style="display: block; font-family: Helvetica, Arial, sans-serif; color: #ffffff; font-size: 16px;" border="0">
</a>
</td>
</tr>
</table>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
<tr>
<td>
<table class="email-footer" align="center" width="570" cellpadding="0" cellspacing="0">
<tr>
<td class="content-cell">
<p class="sub center">&copy; 2017 healthchecks<span>.</span>io. All rights reserved.
{% block unsub %}{% endblock %}
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<tr>
<td bgcolor="#ffffff" align="center" style="padding: 50px 15px 70px 15px;" class="section-padding">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="500">
<tr>
<td align="center" valign="top" width="500">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 500px;" class="responsive-table">
<tr>
<td>
<!-- HERO IMAGE -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding: 0; font-size: 16px; line-height: 25px; font-family: Helvetica, Arial, sans-serif; color: #666666;" class="padding">
{% block content %}{% endblock %}
</td>
</tr>
</table>
</td>
</tr>
{% if button_text %}
<tr>
<td align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="padding-top: 25px; padding-bottom: 15px;" class="padding">
<table border="0" cellspacing="0" cellpadding="0" class="mobile-button-container">
<tr>
<td align="center" style="border-radius: 3px;" bgcolor="#22BC66"><a href="{{ button_url }}" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; color: #ffffff; text-decoration: none; border-radius: 3px; padding: 15px 25px; border: 1px solid #22BC66; display: inline-block;" class="mobile-button">{{ button_text }}</a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
{% endif %}
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding: 0; font-size: 16px; line-height: 25px; font-family: Helvetica, Arial, sans-serif; color: #666666;" class="padding">
{% block content_more %}{% endblock %}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="center" style="padding: 20px 0px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="500">
<tr>
<td align="center" valign="top" width="500">
<![endif]-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="max-width: 500px;" class="responsive-table">
<tr>
<td align="center" style="font-size: 12px; line-height: 18px; font-family: Helvetica, Arial, sans-serif; color:#666666;">
© 2017 {% escaped_site_name %}. All rights reserved.
{% block unsub %}{% endblock %}
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
</html>

62
templates/emails/login-body-html.html
View File

@ -2,50 +2,32 @@
{% load hc_extras %}
{% block content %}
<h1>Hello,</h1>
Hello,
<br />
{% if inviting_profile %}
<p><strong>{{ inviting_profile }}</strong> invites you to their
<a href="{% site_root %}">{% site_name %}</a> account.</p>
<strong>{{ inviting_profile }}</strong> invites you to their
<a href="{% site_root %}">{% escaped_site_name %}</a> account.
<br /><br />
<p>You will be able to manage their
You will be able to manage their
existing monitoring checks and set up new ones. If you already have your
own account on healthchecks<span>.</span>io, you will be able to switch
between the two
accounts.</p>
own account on {% site_name %}, you will be able to switch
between the two accounts.
<br /><br />
{% endif %}
<p>To log into <a href="{% site_root %}">{% site_name %}</a>, please press the button below:</p>
<!-- Action -->
<table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<div>
<!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ login_link }}" style="height:45px;v-text-anchor:middle;width:200px;" arcsize="7%" stroke="f" fill="t">
<v:fill type="tile" color="#22BC66" />
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:15px;">Confirm your account</center>
</v:roundrect><![endif]-->
<a href="{{ login_link }}" class="button button--green">Log In</a>
</div>
</td>
</tr>
</table>
<p>Thanks,<br>The Healthchecks<span>.</span>io</a> Team</p>
<p>
<strong>P.S.</strong> Need help getting started? Check out our
<a href="{% site_root %}/docs/">help documentation</a>.
Or, just reply to this email with any questions or issues you have.
</p>
<!-- Sub copy -->
<table class="body-sub">
<tr>
<td>
<p class="sub">If you’re having trouble clicking the log in button, copy and paste the URL below into your web browser.
</p>
<p class="sub"><a href="{{ login_link }}">{{ login_link }}</a></p>
</td>
</tr>
</table>
To log into <a href="{% site_root %}">{% escaped_site_name %}</a>,
please press the button below:
{% endblock %}
{% block content_more %}
Thanks,<br>
The {% escaped_site_name %} Team
<br /><br />
<strong>P.S.</strong> Need help getting started? Check out our
<a href="{% site_root %}/docs/">help documentation</a>.
Or, just reply to this email with any questions or issues you have.
{% endblock %}

2
templates/emails/login-body-text.html
View File

@ -8,7 +8,7 @@ ones. If you already have your own account on {% site_name %}, you will
be able to switch between the two accounts.{% endif %}
To log into {% site_name %}, please open the link below:
{{ login_link }}
{{ button_url }}
Thanks,
The {% site_name %} Team

20
templates/emails/report-body-html.html
View File

@ -2,22 +2,26 @@
{% load humanize hc_extras %}
{% block content %}
Hello,<br />
This is a monthly report sent by <a href="{% site_root %}">{% site_name %}</a>.
<h1>Hello,</h1>
<p>This is a monthly report sent by <a href="{% site_root %}">{% site_name %}</a>.</p>
<br />
{% include "emails/summary-html.html" %}
<p><strong>Just one more thing to check:</strong>
<strong>Just one more thing to check:</strong>
Do you have more cron jobs,
not yet on this list, that would benefit from monitoring?
Get the ball rolling by adding one more!</p>
Get the ball rolling by adding one more!
<br /><br />
<p>Cheers,<br>The Healthchecks<span>.</span>io Team</p>
Cheers,<br>
The {% escaped_site_name %} Team
{% endblock %}
{% block unsub %}
<br />
<a href="{{ unsub_link }}">Unsubscribe from future monthly reports</a>
<br>
<a href="{{ unsub_link }}" target="_blank" style="color: #666666; text-decoration: underline;">
Unsubscribe from Monthly Reports
</a>
{% endblock %}

18
templates/emails/set-password-body-html.html
View File

@ -1,11 +1,13 @@
{% extends "emails/base.html" %}
{% load hc_extras %}
<p>Hello,</p>
<p>Here's a link to set a password for your account on {% site_name %}:</p>
<p><a href="{{ set_password_link }}">{{ set_password_link }}</a></p>
{% block content %}
Hello,<br />
To set up a password for your account on {% site_name %}, please press the
button below:</p>
{% endblock %}
<p>
--<br />
Regards,<br />
{% site_name %}
</p>
{% block content_more %}
Regards,<br />
The {% escaped_site_name %} Team
{% endblock %}

2
templates/emails/set-password-body-text.html
View File

@ -3,7 +3,7 @@ Hello,
Here's a link to set a password for your account on {% site_name %}:
{{ set_password_link }}
{{ button_url }}
--

117
templates/emails/summary-html.html
View File

@ -1,73 +1,31 @@
{% load humanize hc_extras %}
<style>
.checks {
margin: 30px 0;
width: 100%;
font-size: 16px;
}
.checks th {
text-align: left;
padding: 8px;
font-size: 12px;
color: #9BA2AB;
}
.checks td {
border-top: 1px solid #EDEFF2;
padding: 16px 8px;
}
.badge {
font-size: 10px;
color: white;
padding: 4px;
font-family: sans;
}
.new { background: #AAA; }
.up { background: #5cb85c; }
.grace { background: #f0ad4e; }
.down { background: #d9534f; }
.unnamed {
color: #74787E;
font-style: italic;
}
.tag {
font-size: 12px;
background-color: #eee;
padding: 2px 4px;
color: #555;
}
</style>
<table class="checks" cellpadding="0" cellspacing="0">
<br />
<table style="margin: 0; width: 100%; font-size: 16px;" cellpadding="0" cellspacing="0">
<tr>
<th></th>
<th>Name</th>
<th>Last Ping</th>
<td style="padding: 8px; margin: 0; font-size: 12px; color: #9BA2AB; font-family: Helvetica, Arial, sans-serif;"></td>
<td style="padding: 8px; margin: 0; font-size: 12px; color: #9BA2AB; font-family: Helvetica, Arial, sans-serif;">Name</td>
<td class="mobile-hide" style="padding: 8px; margin: 0; font-size: 12px; color: #9BA2AB; font-family: Helvetica, Arial, sans-serif;">Last Ping</td>
</tr>
{% for check in checks %}
<tr>
<td>
{% if check.get_status == "new" %}
<span class="badge new">NEW</span>
{% elif check.get_status == "paused" %}
<span class="badge new">PAUSED</span>
{% elif check.in_grace_period %}
<span class="badge grace">LATE</span>
{% elif check.get_status == "up" %}
<span class="badge up">UP</span>
{% elif check.get_status == "down" %}
<span class="badge down">DOWN</span>
{% endif %}
<td style="border-top: 1px solid #EDEFF2; padding: 16px 8px;">
<table cellpadding="0" cellspacing="0">
<tr>
{% if check.get_status == "new" %}
<td style="background: #AAA; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 10px; line-height: 10px; color: white; padding: 6px; margin: 0; border-radius: 3px;">NEW</td>
{% elif check.get_status == "paused" %}
<td style="background: #AAA; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 10px; line-height: 10px; color: white; padding: 6px; border-radius: 3px;">PAUSED</td>
{% elif check.in_grace_period %}
<td style="background: #f0ad4e; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 10px; line-height: 10px; color: white; padding: 6px; border-radius: 3px;">LATE</td>
{% elif check.get_status == "up" %}
<td style="background: #5cb85c; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 10px; line-height: 10px; color: white; padding: 6px; border-radius: 3px;">UP</td>
{% elif check.get_status == "down" %}
<td style="background: #d9534f; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 10px; line-height: 10px; color: white; padding: 6px; border-radius: 3px;">DOWN</td>
{% endif %}
</tr>
</table>
</td>
<td>
<td style="border-top: 1px solid #EDEFF2; padding: 16px 8px; font-family: Helvetica, Arial, sans-serif;">
{% if check.name %}
{% if check.name|length > 20 %}
<small>{{ check.name }}</small>
@ -75,26 +33,37 @@
{{ check.name }}
{% endif %}
{% else %}
<span class="unnamed">unnamed</span>
<span style="color: #74787E; font-style: italic;">unnamed</span>
{% endif %}
{% if check.tags %}
<br />
{% for tag in check.tags_list %}
<span class="tag">{{ tag }}</span>
{% endfor %}
<table cellpadding="0" cellspacing="0">
<tr>
{% for tag in check.tags_list %}
<td style="padding-right: 4px">
<table cellpadding="0" cellspacing="0">
<tr>
<td style="background: #eee; font-family: Helvetica, Arial, sans-serif; font-size: 10px; line-height: 10px; color: #555; padding: 4px; margin: 0; border-radius: 2px;">
{{ tag }}
</td>
</tr>
</table>
</td>
{% endfor %}
</tr>
</table>
{% endif %}
</td>
<td>
<td class="mobile-hide" style="border-top: 1px solid #EDEFF2; padding: 16px 8px; font-family: Helvetica, Arial, sans-serif;">
{% if check.last_ping %}
{{ check.last_ping|naturaltime }}
<br />
<a class="view-log" href="{{ check.log_url }}">Show Log…</a>
{% else %}
Never
{% endif %}
</td>
<td>
<a class="view-log" href="{{ check.log_url }}">Log</a>
</td>
</tr>
{% endfor %}
</table>
</table>
<br />