Parse task headers as HTTP headers rather than JSON

package.json

@@ -27,6 +27,7 @@
 		"compression": "~1.6",
 		"express": "~4.14",
 		"express-hbs": "~1.0",
+		"http-headers": "^3.0.1",
 		"moment": "~2.13",
 		"pa11y-webservice": "^2.1.1",
 		"pa11y-webservice-client-node": "^1.2.1",

route/new.js

@@ -16,6 +16,7 @@
 'use strict';
 
 const getStandards = require('../data/standards');
+const httpHeaders = require('http-headers');
 
 module.exports = route;
 
@@ -37,13 +38,11 @@ function route(app) {
 
 	app.express.post('/new', (req, res) => {
 
-		let parsedHeaders = '';
-
-		try {
-			parsedHeaders = JSON.parse(req.body.headers);
-		} catch (e) {
-			console.log(`error parsing headers object: ${req.body.headers}. Ignoring.`);
+		let parsedHeaders;
+		if (req.body.headers) {
+			parsedHeaders = httpHeaders(req.body.headers, true);
 		}
+		console.log(parsedHeaders);
 
 		const newTask = {
 			name: req.body.name,
@@ -54,7 +53,7 @@ function route(app) {
 			wait: req.body.wait || undefined,
 			username: req.body.username || undefined,
 			password: req.body.password || undefined,
-			headers: parsedHeaders || undefined,
+			headers: parsedHeaders,
 			hideElements: req.body.hideElements || undefined
 		};
 

route/task/edit.js

@@ -19,6 +19,7 @@
 
 const presentTask = require('../../view/presenter/task');
 const getStandards = require('../../data/standards');
+const httpHeaders = require('http-headers');
 
 module.exports = route;
 
@@ -56,12 +57,14 @@ function route(app) {
 			if (err) {
 				return next();
 			}
+			const originalHeaders = req.body.headers;
 			req.body.ignore = req.body.ignore || [];
 			req.body.timeout = req.body.timeout || undefined;
 			req.body.wait = req.body.wait || undefined;
 			req.body.username = req.body.username || undefined;
 			req.body.password = req.body.password || undefined;
 			req.body.hideElements = req.body.hideElements || undefined;
+			req.body.headers = httpHeaders(req.body.headers || '', true);
 			app.webservice.task(req.params.id).edit(req.body, err => {
 				if (err) {
 					task.name = req.body.name;
@@ -70,7 +73,7 @@ function route(app) {
 					task.wait = req.body.wait;
 					task.username = req.body.username;
 					task.password = req.body.password;
-					task.headers = req.body.headers;
+					task.headers = originalHeaders;
 					task.hideElements = req.body.hideElements;
 					const standards = getStandards().map(standard => {
 						if (standard.title === task.standard) {

view/new.html

@@ -105,8 +105,9 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 	<div class="form-group clearfix">
 		<div class="row">
 			<div class="col-md-4 col-sm-4 col-xs-6">
-				<label class="control-label" for="new-task-headers">Headers Object (JSON)</label>
-				<input class="form-control" id="new-task-headers" type="text" name="headers" value="{{task.headers}}" placeholder='{"Cookie": "foo=bar"}'/>
+				<label class="control-label" for="new-task-headers">HTTP Headers</label>
+				<textarea class="form-control" id="new-task-headers" name="headers" placeholder="Cookie: foo=bar">{{task.headers}}</textarea>
+				<em>(As key/value pairs, separated by newlines/colons)</em>
 			</div>
 		</div>
 	</div>

view/presenter/task.js

@@ -35,6 +35,13 @@ function presentTask(task) {
 	// Enhance the ignored rules
 	task.ignore = presentIgnoreRules(task.ignore);
 
+	// Change headers to a string format
+	if (task.headers && typeof task.headers === 'object') {
+		task.headers = Object.keys(task.headers).map(header => {
+			return `${header}: ${task.headers[header]}`;
+		}).join('\n');
+	}
+
 	// Present the last result if present
 	if (task.last_result) {
 		task.lastResult = presentResult(task.last_result);

view/task/edit.html

@@ -117,8 +117,9 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 	<div class="form-group clearfix">
 		<div class="row">
 			<div class="col-md-4 col-sm-4 col-xs-6">
-				<label class="control-label" for="new-task-headers">Headers Object (JSON)</label>
-				<input class="form-control" id="new-task-headers" type="text" name="headers" value="{{task.headers}}" placeholder='{"Cookie": "foo=bar"}'/>
+				<label class="control-label" for="new-task-headers">HTTP Headers</label>
+				<textarea class="form-control" id="new-task-headers" name="headers" placeholder="Cookie: foo=bar">{{task.headers}}</textarea>
+				<em>(As key/value pairs, separated by newlines/colons)</em>
 			</div>
 		</div>
 	</div>