Skip to content
Snippets Groups Projects
Commit c0b4630c authored by Lloyd Hilaiel's avatar Lloyd Hilaiel
Browse files

html emails - issue #1890

parent 9ca27e00
No related branches found
No related tags found
No related merge requests found
...@@ -16,7 +16,20 @@ db = require('../lib/db.js'), ...@@ -16,7 +16,20 @@ db = require('../lib/db.js'),
config = require('../lib/configuration.js'), config = require('../lib/configuration.js'),
heartbeat = require('../lib/heartbeat.js'), heartbeat = require('../lib/heartbeat.js'),
logger = require('../lib/logging.js').logger, logger = require('../lib/logging.js').logger,
shutdown = require('../lib/shutdown'); shutdown = require('../lib/shutdown'),
cachify = require('connect-cachify'),
assets = require('../lib/static_resources').all;
// dbwriter needs cachify to properly render emails with cachified URLs,
// but it serves no cachified content, so it's not necc to register it as
// a handler of any sort.
cachify.setup(
assets(config.get('supported_languages')),
{
prefix: config.get('cachify_prefix'),
production: config.get('use_minified_resources'),
root: path.join(__dirname, "..", "resources", "static")
});
var app = undefined; var app = undefined;
......
...@@ -28,35 +28,41 @@ if (smtp_params && smtp_params.host) { ...@@ -28,35 +28,41 @@ if (smtp_params && smtp_params.host) {
} }
} }
const TEMPLATE_PATH = path.join(__dirname, "static", "email_templates"); const TEMPLATE_PATH = path.join(__dirname, "..", "resources", "email_templates");
// the underbar decorator to allow getext to extract strings // the underbar decorator to allow getext to extract strings
function _(str) { return str; } function _(str) { return str; }
// a map of all the different emails we send // a map of all the different emails we send
const templates = { const templates = {
"new": { "new": {
landing: 'verify_email_address', landing: 'verify_email_address',
subject: _("Confirm email address for Persona"), subject: _("Confirm email address for Persona"),
template: fs.readFileSync(path.join(TEMPLATE_PATH, 'new.ejs')), template: fs.readFileSync(path.join(TEMPLATE_PATH, 'new.ejs')),
templateHTML: fs.readFileSync(path.join(TEMPLATE_PATH, 'new.html.ejs'))
}, },
"reset": { "reset": {
landing: 'reset_password', landing: 'reset_password',
subject: _("Reset Persona password"), subject: _("Reset Persona password"),
template: fs.readFileSync(path.join(TEMPLATE_PATH, 'reset.ejs')), template: fs.readFileSync(path.join(TEMPLATE_PATH, 'reset.ejs')),
templateHTML: fs.readFileSync(path.join(TEMPLATE_PATH, 'reset.html.ejs'))
}, },
"confirm": { "confirm": {
landing: 'confirm', landing: 'confirm',
subject: _("Confirm email address for Persona"), subject: _("Confirm email address for Persona"),
template: fs.readFileSync(path.join(TEMPLATE_PATH, 'confirm.ejs')), template: fs.readFileSync(path.join(TEMPLATE_PATH, 'confirm.ejs')),
templateHTML: fs.readFileSync(path.join(TEMPLATE_PATH, 'confirm.html.ejs'))
} }
}; };
// now turn file contents into compiled templates // now turn file contents into compiled templates
Object.keys(templates).forEach(function(type) { Object.keys(templates).forEach(function(type) {
templates[type].template = ejs.compile(templates[type].template.toString()); templates[type].template = ejs.compile(templates[type].template.toString());
if (templates[type].templateHTML) {
templates[type].templateHTML = ejs.compile(templates[type].templateHTML.toString());
}
}); });
var interceptor = undefined; var interceptor = undefined;
...@@ -94,19 +100,27 @@ function doSend(email_type, email, site, secret, langContext) { ...@@ -94,19 +100,27 @@ function doSend(email_type, email, site, secret, langContext) {
// log verification email to console separated by whitespace. // log verification email to console separated by whitespace.
console.log("\nVERIFICATION URL:\n" + public_url + "\n"); console.log("\nVERIFICATION URL:\n" + public_url + "\n");
} else { } else {
emailer.send_mail({ var templateArgs = {
link: public_url,
site: site,
gettext: GETTEXT,
format: format
};
var mailOpts = {
// XXX: Ideally this would be a live email address and a response to these email // XXX: Ideally this would be a live email address and a response to these email
// addresses would go into a ticketing system (lloyd/skinny) // addresses would go into a ticketing system (lloyd/skinny)
sender: "Persona <no-reply@persona.org>", sender: "Persona <no-reply@persona.org>",
to: email, to: email,
subject: GETTEXT(email_params.subject), subject: GETTEXT(email_params.subject),
body: email_params.template({ text: email_params.template(templateArgs)
link: public_url, };
site: site,
gettext: GETTEXT, if (email_params.templateHTML) {
format: format mailOpts.html = email_params.templateHTML(templateArgs);
}) }
}, function(err, success){
emailer.send_mail(mailOpts, function(err, success) {
if (!success) { if (!success) {
logger.error("error sending email to: " + email + " - " + err); logger.error("error sending email to: " + email + " - " + err);
} }
......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#outlook a{
padding:0;
}
body{
background: url("<%= cachify('/common/i/grain.png') %>") #76868f;
background: url("<%= cachify('/pages/i/marketplace-header.png') %>") top repeat-x, url("<%= cachify('/common/i/grain.png') %>") #76868f;
margin:0;
padding:0;
width:100% !important;
-webkit-text-size-adjust:none;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
color: #424f5a;
}
img{
border:0;
height:auto;
line-height:100%;
outline:none;
text-decoration:none;
}
a{
color: #3b9bda;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
p{
margin: 0 0 15px;
line-height: 1.5;
}
h2{
font-size: 18px;
margin: 20px 0 15px;
}
p:last-child{
margin-bottom: 0;
}
table td{
border-collapse:collapse;
}
#content{
border-radius: 3px;
padding: 30px;
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="-webkit-text-size-adjust: none;margin: 0;padding: 0;background-color: #76868f;width: 100% !important;">
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" style="margin: 0;padding: 0;height: 100% !important;width: 100% !important;">
<td align="left" valign="top" style="border-collapse: collapse;">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr class="spacer">
<td height="30px"></td>
</tr>
<tr>
<td align="left" valign="top" style="border-collapse: collapse;">
<img src="<%= cachify('/pages/i/persona-logo-wordmark.png') %>" alt="Mozilla Persona" />
</td>
</tr>
<tr class="spacer">
<td height="30px"></td>
</tr>
</table><!-- #header -->
<table id="content" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color: #fff;">
<tr>
<td align="left" valign="top" class="email-content" style="border-collapse: collapse;">
<p><%= gettext('Thank you for using Persona.') %></p>
<p><a href="<%= link %>" style="color: #3b9bda; font-weight: bold;"><%= format(gettext('Click to confirm this email address and automatically sign in to %s'), [site]) %>.</a></p>
<p><%= gettext('Note: If you are NOT trying to sign into this website, please ignore this email.') %></p>
<p><%= gettext('Thank you,') %><br />
<%= gettext('The Persona team') %></p>
</td>
</tr>
</table><!-- #content -->
</center>
</td>
</tr>
</table><!-- #container table -->
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#outlook a{
padding:0;
}
body{
background: url("<%= cachify('/common/i/grain.png') %>") #76868f;
background: url("<%= cachify('/pages/i/marketplace-header.png') %>") top repeat-x, url("<%= cachify('/common/i/grain.png') %>") #76868f;
margin:0;
padding:0;
width:100% !important;
-webkit-text-size-adjust:none;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
color: #424f5a;
}
img{
border:0;
height:auto;
line-height:100%;
outline:none;
text-decoration:none;
}
a{
color: #3b9bda;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
p{
margin: 0 0 15px;
line-height: 1.5;
}
h2{
font-size: 18px;
margin: 20px 0 15px;
}
p:last-child{
margin-bottom: 0;
}
table td{
border-collapse:collapse;
}
#content{
border-radius: 3px;
padding: 30px;
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="-webkit-text-size-adjust: none;margin: 0;padding: 0;background-color: #76868f;width: 100% !important;">
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" style="margin: 0;padding: 0;height: 100% !important;width: 100% !important;">
<td align="left" valign="top" style="border-collapse: collapse;">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr class="spacer">
<td height="30px"></td>
</tr>
<tr>
<td align="left" valign="top" style="border-collapse: collapse;">
<img src="<%= cachify('/pages/i/persona-logo-wordmark.png') %>" alt="Mozilla Persona" />
</td>
</tr>
<tr class="spacer">
<td height="30px"></td>
</tr>
</table><!-- #header -->
<table id="content" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color: #fff;">
<tr>
<td align="left" valign="top" class="email-content" style="border-collapse: collapse;">
<p><%= gettext('Thank you for using Persona.') %></p>
<p><a href="<%= link %>" style="color: #3b9bda; font-weight: bold;"><%= format(gettext('Click to confirm this email address and automatically sign in to %s'), [site]) %>.</a></p>
<p><%= gettext('Note: If you are NOT trying to sign into this website, please ignore this email.') %></p>
<p><%= gettext('Thank you,') %><br />
<%= gettext('The Persona team') %></p>
</td>
</tr>
</table><!-- #content -->
</center>
</td>
</tr>
</table><!-- #container table -->
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#outlook a{
padding:0;
}
body{
background: url("<%= cachify('/common/i/grain.png') %>") #76868f;
background: url("<%= cachify('/pages/i/marketplace-header.png') %>") top repeat-x, url("<%= cachify('/common/i/grain.png') %>") #76868f;
margin:0;
padding:0;
width:100% !important;
-webkit-text-size-adjust:none;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
color: #424f5a;
}
img{
border:0;
height:auto;
line-height:100%;
outline:none;
text-decoration:none;
}
a{
color: #3b9bda;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
p{
margin: 0 0 15px;
line-height: 1.5;
}
h2{
font-size: 18px;
margin: 20px 0 15px;
}
p:last-child{
margin-bottom: 0;
}
table td{
border-collapse:collapse;
}
#content{
border-radius: 3px;
padding: 30px;
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="-webkit-text-size-adjust: none;margin: 0;padding: 0;background-color: #76868f;width: 100% !important;">
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" style="margin: 0;padding: 0;height: 100% !important;width: 100% !important;">
<td align="left" valign="top" style="border-collapse: collapse;">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr class="spacer">
<td height="30px"></td>
</tr>
<tr>
<td align="left" valign="top" style="border-collapse: collapse;">
<img src="<%= cachify('/pages/i/persona-logo-wordmark.png') %>" alt="Mozilla Persona" />
</td>
</tr>
<tr class="spacer">
<td height="30px"></td>
</tr>
</table><!-- #header -->
<table id="content" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color: #fff;">
<tr>
<td align="left" valign="top" class="email-content" style="border-collapse: collapse;">
<p><%= gettext('Forgot your password for Persona? It happens to the best of us.') %></p>
<p><a href="<%= link %>" style="color: #3b9bda; font-weight: bold;"><%= gettext('Click to reset your password:') %> <%= link %></a></p>
<p><%= gettext('Note: If you did NOT ask to reset your password, please ignore this email.') %></p>
<p><%= gettext('Thank you,') %><br />
<%= gettext('The Persona team') %></p>
</td>
</tr>
</table><!-- #content -->
</center>
</td>
</tr>
</table><!-- #container table -->
</body>
</html>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment