ability to edit and save custom email templates

public/less/admin/appearance/customise.less

@@ -1,4 +1,4 @@
-#customCSS, #customHTML {
+#customCSS, #customHTML, #email-editor {
 	width: 100%;
 	height: 450px;
 	display: block;

public/src/admin/settings.js

@@ -92,16 +92,6 @@ define('admin/settings', ['uploader', 'sounds'], function(uploader, sounds) {
 
 		handleUploads();
 
-		$('button[data-action="email.test"]').off('click').on('click', function() {
-			socket.emit('admin.email.test', {template: $('#test-email').val()}, function(err) {
-				if (err) {
-					return app.alertError(err.message);
-				}
-				app.alertSuccess('Test Email Sent');
-			});
-			return false;
-		});
-
 		$('#clear-sitemap-cache').off('click').on('click', function() {
 			socket.emit('admin.settings.clearSitemapCache', function() {
 				app.alertSuccess('Sitemap Cache Cleared!');

public/src/admin/settings/email.js

@@ -0,0 +1,51 @@
+"use strict";
+/* global define, socket, app, ajaxify, ace */
+
+define('admin/settings/email', ['admin/settings'], function(settings) {
+	var module = {},
+		emailEditor;
+
+	module.init = function() {
+		configureEmailTester();
+		configureEmailEditor();
+	};
+
+	function configureEmailTester() {
+		$('button[data-action="email.test"]').off('click').on('click', function() {
+			socket.emit('admin.email.test', {template: $('#test-email').val()}, function(err) {
+				if (err) {
+					return app.alertError(err.message);
+				}
+				app.alertSuccess('Test Email Sent');
+			});
+			return false;
+		});
+	}
+
+	function configureEmailEditor() {
+		$('#email-editor-selector').on('change', updateEmailEditor);
+
+		emailEditor = ace.edit("email-editor");
+		emailEditor.setTheme("ace/theme/twilight");
+		emailEditor.getSession().setMode("ace/mode/html");
+
+		emailEditor.on('change', function(e) {
+		    $('#email-editor-holder').val(emailEditor.getValue());
+		});
+
+		updateEmailEditor();
+	}
+
+	function updateEmailEditor() {
+		ajaxify.data.emails.forEach(function(email) {
+			if (email.path === $('#email-editor-selector').val()) {
+				emailEditor.getSession().setValue(email.text);
+				$('#email-editor-holder')
+					.val(email.text)
+					.attr('data-field', 'email:custom:' + email.path);
+			}
+		});
+	}
+
+	return module;
+});

src/controllers/admin/settings.js

@@ -1,7 +1,8 @@
 'use strict';
 
 var settingsController = {};
-var async = require('async');
+var async = require('async'),
+	meta = require('../../meta');
 
 settingsController.get = function(req, res, next) {
 	var term = req.params.term ? req.params.term : 'general';
@@ -25,16 +26,25 @@ function renderEmail(req, res, next) {
 	var emailsPath = path.join(__dirname, '../../../public/templates/emails');
 	utils.walk(emailsPath, function(err, emails) {
 		async.map(emails, function(email, next) {
-			fs.readFile(email, function(err, str) {
+			var path = email.replace(emailsPath, '').substr(1).replace('.tpl', '');
+
+			function callback(err, str) {
 				next(err, {
-					path: email.replace(emailsPath, '').substr(1).replace('.tpl', ''),
+					path: path,
 					fullpath: email,
 					text: str.toString()
 				});
-			});
+			}
+
+			if (meta.config['email:custom:' + path]) {
+				return callback(null, meta.config['email:custom:' + path]);
+			}
+
+			fs.readFile(email, callback);
 		}, function(err, emails) {
 			res.render('admin/settings/email', {
-				emails: emails.filter(function(email) {
+				emails: emails,
+				sendable: emails.filter(function(email) {
 					return email.path.indexOf('_plaintext') === -1 && email.path.indexOf('partials') === -1;
 				})
 			});

src/views/admin/settings/email.tpl

@@ -26,14 +26,28 @@
 </div>
 
 <div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">Email Testing</div>
+	<div class="col-sm-2 col-xs-12 settings-header">Edit Email Template</div>
 	<div class="col-sm-10 col-xs-12">
 		<label>Select Email Template</label><br />
-		<select id="test-email" class="form-control">
+		<select id="email-editor-selector" class="form-control">
 			<!-- BEGIN emails -->
 			<option value="{emails.path}">{emails.path}</option>
 			<!-- END emails -->
 		</select><br />
+		<div id="email-editor"></div>
+		<input type="hidden" id="email-editor-holder" value="" data-field="" />
+	</div>
+</div>
+
+<div class="row">
+	<div class="col-sm-2 col-xs-12 settings-header">Email Testing</div>
+	<div class="col-sm-10 col-xs-12">
+		<label>Select Email Template</label><br />
+		<select id="test-email" class="form-control">
+			<!-- BEGIN sendable -->
+			<option value="{sendable.path}">{sendable.path}</option>
+			<!-- END sendable -->
+		</select><br />
 		<button class="btn btn-primary" type="button" data-action="email.test">Send Test Email</button>
 		<p class="help-block">
 			The test email will be sent to the currently logged in user's email address.