Updated to ES6 and added the new modal for setSorting

src/scripts/settings.js

@@ -102,15 +102,19 @@ settings.createConfig = function() {
 
 	}
 
-	msg	+= "<p>Enter your database connection details below:";
-	msg += "<input data-name='dbHost' class='text' type='text' placeholder='Database Host (optional)' value=''>";
-	msg += "<input data-name='dbUser' class='text' type='text' placeholder='Database Username' value=''>";
-	msg += "<input data-name='dbPassword' class='text' type='password' placeholder='Database Password' value=''>";
-	msg += "</p>";
-	msg += "<p>Lychee will create its own database. If required, you can enter the name of an existing database instead:";
-	msg += "<input data-name='dbName' class='text' type='text' placeholder='Database Name (optional)' value=''>";
-	msg += "<input data-name='dbTablePrefix' class='text' type='text' placeholder='Table prefix (optional)' value=''>";
-	msg += "</p>";
+	msg =	`
+			<p>
+				Enter your database connection details below:
+				<input data-name='dbHost' class='text' type='text' placeholder='Database Host (optional)' value=''>
+				<input data-name='dbUser' class='text' type='text' placeholder='Database Username' value=''>
+				<input data-name='dbPassword' class='text' type='password' placeholder='Database Password' value=''>
+			</p>
+			<p>
+				Lychee will create its own database. If required, you can enter the name of an existing database instead:
+				<input data-name='dbName' class='text' type='text' placeholder='Database Name (optional)' value=''>
+				<input data-name='dbTablePrefix' class='text' type='text' placeholder='Table prefix (optional)' value=''>
+			</p>
+			`
 
 	basicModal.show({
 		body: msg,
@@ -126,59 +130,65 @@ settings.createConfig = function() {
 
 settings.createLogin = function() {
 
-	var username,
-		password,
-		params,
-		buttons;
-
-	buttons = [
-		['Create Login', function() {
-
-			username = $('.message input.text#username').val();
-			password = $('.message input.text#password').val();
-
-			if (username.length<1||password.length<1) {
-
-				setTimeout(function() {
-
-					buttons = [
-						['Retry', function() { setTimeout(settings.createLogin, 400) }],
-						['', function() {}]
-					];
-					modal.show('Wrong Input', 'The username or password you entered is not long enough. Please try again with another username and password!', buttons, null, false);
-					return false;
+	var action,
+		msg = '';
 
-				}, 400);
+	action = function(data) {
 
-			} else {
+		var params,
+			username = data.username,
+			password = data.password;
 
-				params = 'setLogin&username=' + escape(username) + '&password=' + md5(password);
-				lychee.api(params, function(data) {
+		if (username.length<1) {
+			basicModal.error('username');
+			return false;
+		}
 
-					if (data!==true) {
+		if (password.length<1) {
+			basicModal.error('password');
+			return false;
+		}
 
-						setTimeout(function() {
+		basicModal.close();
 
-							buttons = [
-								['Retry', function() { setTimeout(settings.createLogin, 400) }],
-								['', function() {}]
-							];
-							modal.show('Creation Failed', 'Unable to save login. Please try again with another username and password!', buttons, null, false);
-							return false;
+		params = 'setLogin&username=' + escape(username) + '&password=' + md5(password);
+		lychee.api(params, function(data) {
 
-						}, 400);
+			if (data!==true) {
 
+				basicModal.show({
+					body: '<p>Unable to save login. Please try again with another username and password!</p>',
+					buttons: {
+						action: {
+							title: 'Retry',
+							fn: settings.createLogin
+						}
 					}
-
 				});
 
 			}
 
-		}],
-		['', function() {}]
-	];
+		});
+
+	}
 
-	modal.show('Create Login', "Enter a username and password for your installation: <input id='username' class='text less' type='text' placeholder='New Username' value=''><input id='password' class='text' type='password' placeholder='New Password' value=''>", buttons, -122, false);
+	msg =	`
+			<p>
+				Enter a username and password for your installation:
+				<input data-name='username' class='text' type='text' placeholder='New Username' value=''>
+				<input data-name='password' class='text' type='password' placeholder='New Password' value=''>
+			</p>
+			`
+
+	basicModal.show({
+		body: msg,
+		buttons: {
+			action: {
+				title: 'Create Login',
+				fn: action
+			}
+		}
+	});
 
 }
 
@@ -220,13 +230,17 @@ settings.setLogin = function() {
 
 	}
 
-	msg += "<p>Enter your current password:";
-	msg += "<input data-name='oldPassword' class='text' type='password' placeholder='Current Password' value=''>";
-	msg += "</p>"
-	msg += "<p>Your username and password will be changed to the following:";
-	msg += "<input data-name='username' class='text' type='text' placeholder='New Username' value=''>";
-	msg += "<input data-name='password' class='text' type='password' placeholder='New Password' value=''>";
-	msg += "</p>";
+	msg =	`
+			<p>
+				Enter your current password:
+				<input data-name='oldPassword' class='text' type='password' placeholder='Current Password' value=''>
+			</p>
+			<p>
+				Your username and password will be changed to the following:
+				<input data-name='username' class='text' type='text' placeholder='New Username' value=''>
+				<input data-name='password' class='text' type='password' placeholder='New Password' value=''>
+			</p>
+			`
 
 	basicModal.show({
 		body: msg,
@@ -246,57 +260,73 @@ settings.setLogin = function() {
 
 settings.setSorting = function() {
 
-	var buttons,
-		sorting,
-		params;
-
-	buttons = [
-		['Change Sorting', function() {
-
-			sorting[0] = $('select#settings_type').val();
-			sorting[1] = $('select#settings_order').val();
-
-			albums.refresh();
-
-			params = 'setSorting&type=' + sorting[0] + '&order=' + sorting[1];
-			lychee.api(params, function(data) {
-
-				if (data===true) {
-					lychee.sorting = 'ORDER BY ' + sorting[0] + ' ' + sorting[1];
-					lychee.load();
-				} else lychee.error(null, params, data);
-
-			});
-
-		}],
-		['Cancel', function() {}]
-	];
-
-	modal.show('Change Sorting',
-		"Sort photos by \
-			<select id='settings_type'> \
-				<option value='id'>Upload Time</option> \
-				<option value='takestamp'>Take Date</option> \
-				<option value='title'>Title</option> \
-				<option value='description'>Description</option> \
-				<option value='public'>Public</option> \
-				<option value='star'>Star</option> \
-				<option value='type'>Photo Format</option> \
-			</select> \
-			in an \
-			<select id='settings_order'> \
-				<option value='ASC'>Ascending</option> \
-				<option value='DESC'>Descending</option> \
-			</select> \
-			order.\
-		", buttons);
+	var sorting = [],
+		action,
+		msg = '';
+
+	action = function() {
+
+		var params;
+
+		sorting[0] = $('.basicModal select#settings_type').val();
+		sorting[1] = $('.basicModal select#settings_order').val();
+
+		basicModal.close();
+		albums.refresh();
+
+		params = 'setSorting&type=' + sorting[0] + '&order=' + sorting[1];
+		lychee.api(params, function(data) {
+
+			if (data===true) {
+				lychee.sorting = 'ORDER BY ' + sorting[0] + ' ' + sorting[1];
+				lychee.load();
+			} else lychee.error(null, params, data);
+
+		});
+
+	}
+
+	msg =	`
+			<p>
+				Sort photos by
+				<select id='settings_type'>
+					<option value='id'>Upload Time</option>
+					<option value='takestamp'>Take Date</option>
+					<option value='title'>Title</option>
+					<option value='description'>Description</option>
+					<option value='public'>Public</option>
+					<option value='star'>Star</option>
+					<option value='type'>Photo Format</option>
+				</select>
+				in an
+				<select id='settings_order'>
+					<option value='ASC'>Ascending</option>
+					<option value='DESC'>Descending</option>
+				</select>
+				order.
+			</p>
+			`
+
+	basicModal.show({
+		body: msg,
+		buttons: {
+			action: {
+				title: 'Change Sorting',
+				fn: action
+			},
+			cancel: {
+				title: 'Cancel',
+				fn: basicModal.close
+			}
+		}
+	});
 
 	if (lychee.sorting!=='') {
 
 		sorting = lychee.sorting.replace('ORDER BY ', '').split(' ');
 
-		$('select#settings_type').val(sorting[0]);
-		$('select#settings_order').val(sorting[1]);
+		$('.basicModal select#settings_type').val(sorting[0]);
+		$('.basicModal select#settings_order').val(sorting[1]);
 
 	}
 
@@ -331,10 +361,12 @@ settings.setDropboxKey = function(callback) {
 
 	}
 
-	msg += "<p>";
-	msg += "In order to import photos from your Dropbox, you need a valid drop-ins app key from <a href='https://www.dropbox.com/developers/apps/create'>their website</a>. Generate yourself a personal key and enter it below:";
-	msg += "<input class='text' data-name='key' type='text' placeholder='Dropbox API Key' value='" + lychee.dropboxKey + "'>";
-	msg += "</p>";
+	msg =	`
+			<p>
+				In order to import photos from your Dropbox, you need a valid drop-ins app key from <a href='https://www.dropbox.com/developers/apps/create'>their website</a>. Generate yourself a personal key and enter it below:
+				<input class='text' data-name='key' type='text' placeholder='Dropbox API Key' value='${ lychee.dropboxKey }'>
+			</p>
+			`
 
 	basicModal.show({
 		body: msg,