Created a new script for the account page and added one framework for…

… cookies

scripts/accountvalidator.js

@@ -0,0 +1,131 @@
+'use strict';
+
+var messageBox;
+var inputUsername;
+var inputPassword;
+var inputPasswordConfirm;
+var inputEmail;
+
+ // A string queue where all error messages are collected to be printed
+var errorMessageQueue = [];
+// An error boolean flag, cleared when ClearErrorMessages is called
+var errorFlag = false;
+
+/* Regular Expression Definitions */
+var usernameRegExp = new RegExp(/^[a-z0-9]+$/i);
+var passwordRegExp = new RegExp(/^(?=.{8,})/i);
+var emailRegExp = new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
+
+/* Error Handling Functions */
+function ClearErrorMessages() {
+    // Reset the error flag and clear the error message queue
+    errorFlag = false;
+    errorMessageQueue = [];
+    messageBox.innerHTML = "";
+}
+function AddErrorMessage(x) {
+    // Set the error flag, print the error message and add it to the queue
+    errorFlag = true;
+    errorMessageQueue.push(x);
+}
+function DisplayErrorMessages() {
+    messageBox.innerHTML = "";
+    if (!errorFlag) {
+        return;
+    }
+    for (let i = 0; i < errorMessageQueue.length; i++) {
+        messageBox.innerHTML += "<p>" + errorMessageQueue[i] + "</p>";
+    }
+}
+function DisplayMessage(x) {
+    messageBox.innerHTML = x;
+}
+
+/* Validation Functions */
+function ValidateAll() {
+    ClearErrorMessages();
+    ValidateUsername();
+    ValidatePassword();
+    ValidateEmail();
+    DisplayErrorMessages();
+    if (!errorFlag) {
+        SaveAccount();
+    }
+}
+
+// Checks if username is not empty and matches the regexp
+function ValidateUsername() {
+    if (inputUsername.value.length === 0) {
+        AddErrorMessage("Username field must not be empty");
+    }
+    if (!usernameRegExp.test(inputUsername.value)) {
+        AddErrorMessage("Username must only be alpha-numerical characters");
+    }
+}
+
+// Checks if password is not empty, is confirmed, and matches the regexp
+function ValidatePassword() {
+    if (inputPassword.value.length === 0) {
+        AddErrorMessage("Password field must not be empty");
+    }
+    if (inputPasswordConfirm.value.length === 0) {
+        AddErrorMessage("Password confirmation field must not be empty");
+    }
+    if (!passwordRegExp.test(inputPassword.value) && !passwordRegExp.test(inputPasswordConfirm.value)) {
+        AddErrorMessage("Password must be longer than 8 characters");
+    }
+    if (inputPassword.value !== inputPasswordConfirm.value) {
+        AddErrorMessage("Password and password confirmation do not match");
+    }
+}
+
+// Checks if email is not empty and matches the regexp
+function ValidateEmail() {
+    if (inputEmail.value.length === 0) {
+        AddErrorMessage("Email field must not be empty");
+    }
+    if (!emailRegExp.test(inputEmail.value)) {
+        AddErrorMessage("Email entered was not a valid address");
+    }
+}
+
+/* Save and Load Functions */
+function SaveAccount() {
+    Cookies.set("username", inputUsername.value);
+    Cookies.set("password", inputPassword.value);
+    Cookies.set("email",    inputEmail.value);
+    DisplayMessage("Account successfully saved");
+}
+function LoadAccount() {
+    if (Cookies.get("username")!= undefined) {
+        inputUsername.value = Cookies.get("username");
+    }
+    if (Cookies.get("password") != undefined) {
+        inputPassword.value = Cookies.get("password");
+        inputPasswordConfirm.value = Cookies.get("password");
+    }
+    if (Cookies.get("email") != undefined) {
+        inputEmail.value = Cookies.get("email");
+    }
+    DisplayMessage("Account successfully loaded");
+}
+function ResetAccount() {
+    Cookies.remove("username");
+    Cookies.remove("password");
+    Cookies.remove("email");
+    inputUsername.value = "";
+    inputPassword.value = "";
+    inputPasswordConfirm.value = "";
+    inputEmail.value = "";
+    DisplayMessage("Account successfully reset");
+}
+
+/* Initialisation */
+$(document).ready(() => {
+    messageBox           = $("#messageBox")[0];
+    inputUsername        = $("#inputUsername")[0];
+    inputPassword        = $("#inputPassword")[0];
+    inputPasswordConfirm = $("#inputPasswordConfirm")[0];
+    inputEmail           = $("#inputEmail")[0];
+    LoadAccount();
+});

scripts/js.cookie.js

@@ -0,0 +1,162 @@
+/*!
+ * JavaScript Cookie v2.2.0
+ * https://github.com/js-cookie/js-cookie
+ *
+ * Copyright 2006, 2015 Klaus Hartl & Fagner Brack
+ * Released under the MIT license
+ */
+;(function (factory) {
+	var registeredInModuleLoader;
+	if (typeof define === 'function' && define.amd) {
+		define(factory);
+		registeredInModuleLoader = true;
+	}
+	if (typeof exports === 'object') {
+		module.exports = factory();
+		registeredInModuleLoader = true;
+	}
+	if (!registeredInModuleLoader) {
+		var OldCookies = window.Cookies;
+		var api = window.Cookies = factory();
+		api.noConflict = function () {
+			window.Cookies = OldCookies;
+			return api;
+		};
+	}
+}(function () {
+	function extend () {
+		var i = 0;
+		var result = {};
+		for (; i < arguments.length; i++) {
+			var attributes = arguments[ i ];
+			for (var key in attributes) {
+				result[key] = attributes[key];
+			}
+		}
+		return result;
+	}
+
+	function init (converter) {
+		function api (key, value, attributes) {
+			if (typeof document === 'undefined') {
+				return;
+			}
+
+			// Write
+
+			if (arguments.length > 1) {
+				attributes = extend({
+					path: '/'
+				}, api.defaults, attributes);
+
+				if (typeof attributes.expires === 'number') {
+					attributes.expires = new Date(new Date() * 1 + attributes.expires * 864e+5);
+				}
+
+				// We're using "expires" because "max-age" is not supported by IE
+				attributes.expires = attributes.expires ? attributes.expires.toUTCString() : '';
+
+				try {
+					var result = JSON.stringify(value);
+					if (/^[\{\[]/.test(result)) {
+						value = result;
+					}
+				} catch (e) {}
+
+				value = converter.write ?
+					converter.write(value, key) :
+					encodeURIComponent(String(value))
+						.replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent);
+
+				key = encodeURIComponent(String(key))
+					.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent)
+					.replace(/[\(\)]/g, escape);
+
+				var stringifiedAttributes = '';
+				for (var attributeName in attributes) {
+					if (!attributes[attributeName]) {
+						continue;
+					}
+					stringifiedAttributes += '; ' + attributeName;
+					if (attributes[attributeName] === true) {
+						continue;
+					}
+
+					// Considers RFC 6265 section 5.2:
+					// ...
+					// 3.  If the remaining unparsed-attributes contains a %x3B (";")
+					//     character:
+					// Consume the characters of the unparsed-attributes up to,
+					// not including, the first %x3B (";") character.
+					// ...
+					stringifiedAttributes += '=' + attributes[attributeName].split(';')[0];
+				}
+
+				return (document.cookie = key + '=' + value + stringifiedAttributes);
+			}
+
+			// Read
+
+			var jar = {};
+			var decode = function (s) {
+				return s.replace(/(%[0-9A-Z]{2})+/g, decodeURIComponent);
+			};
+			// To prevent the for loop in the first place assign an empty array
+			// in case there are no cookies at all.
+			var cookies = document.cookie ? document.cookie.split('; ') : [];
+			var i = 0;
+
+			for (; i < cookies.length; i++) {
+				var parts = cookies[i].split('=');
+				var cookie = parts.slice(1).join('=');
+
+				if (!this.json && cookie.charAt(0) === '"') {
+					cookie = cookie.slice(1, -1);
+				}
+
+				try {
+					var name = decode(parts[0]);
+					cookie = (converter.read || converter)(cookie, name) ||
+						decode(cookie);
+
+					if (this.json) {
+						try {
+							cookie = JSON.parse(cookie);
+						} catch (e) {}
+					}
+
+					jar[name] = cookie;
+
+					if (key === name) {
+						break;
+					}
+				} catch (e) {}
+			}
+
+			return key ? jar[key] : jar;
+		}
+
+		api.set = api;
+		api.get = function (key) {
+			return api.call(api, key);
+		};
+		api.getJSON = function (key) {
+			return api.call({
+				json: true
+			}, key);
+		};
+		api.remove = function (key, attributes) {
+			api(key, '', extend(attributes, {
+				expires: -1
+			}));
+		};
+
+		api.defaults = {};
+
+		api.withConverter = init;
+
+		return api;
+	}
+
+	return init(function () {});
+}));