issue #224

public/src/forum/register.js

@@ -1,157 +1,147 @@
 (function() {
-	var username = document.getElementById('username'),
+	var username = $('#username'),
-		password = document.getElementById('password'),
+		password = $('#password'),
-		password_confirm = document.getElementById('password-confirm'),
+		password_confirm = $('#password-confirm'),
-		register = document.getElementById('register'),
+		register = $('#register'),
-		emailEl = document.getElementById('email'),
+		emailEl = $('#email'),
-		username_notify = document.getElementById('username-notify'),
+		username_notify = $('#username-notify'),
-		email_notify = document.getElementById('email-notify'),
+		email_notify = $('#email-notify'),
-		password_notify = document.getElementById('password-notify'),
+		password_notify = $('#password-notify'),
-		password_confirm_notify = document.getElementById('password-confirm-notify'),		
+		password_confirm_notify = $('#password-confirm-notify'),		
-		usernamevalid = false;
+		validationError = false;
-		emailexists = false,
+
-		emailvalid = false,
+	function showError(element, msg) {
-		userexists = false,
+		element.html(msg);
-		passwordsmatch = false,
+		element.attr('class', 'alert alert-error');
-		passwordvalid = false;
+		element.show();
-
+		validationError = true;
-	$(username).on('keyup change', function() {
+	}
-		usernamevalid = utils.isUserNameValid(username.value);
+	
-
+	function showSuccess(element, msg) {
-		
+		element.html(msg);
-		if(username.value.length < 3) {
+		element.attr('class', 'alert alert-success');
-			username_notify.innerHTML = 'Username too short';
+		element.show();
-			username_notify.className = 'label label-important';
+	}
-		} else if(username.value.length > 13) {
+
-			username_notify.innerHTML = 'Username too long';
+	function validateEmail() {
-			username_notify.className = 'label label-important';
+		if(!emailEl.val()) {
-		} else if(!usernamevalid) {
+			validationError = true;
-			username_notify.innerHTML = 'Invalid username';
+			email_notify.hide();
-			username_notify.className = 'label label-important';
+			return;
-		} else {
-			socket.emit('user.exists', {username: username.value});
 		}
+
+		if(!utils.isEmailValid(emailEl.val())) {
+			showError(email_notify, 'Invalid email address.');
+		}
+		else
+			socket.emit('user.email.exists', { email: emailEl.val() });
+	}
+
+	emailEl.on('blur', function() {
+		validateEmail();
 	});
 
-	$(emailEl).on('keyup change', function() {
+	function validateUsername() {
-		emailvalid = utils.isEmailValid(email.value);
+		if(!username.val()) {
+			validationError = true;
+			username_notify.hide();
+			return;
+		}	
 
-		if(!emailvalid) {
+		if(username.val().length < config.minimumUsernameLength) {
-			email_notify.innerHTML = 'Invalid email address';
+			showError(username_notify, 'Username too short!');
-			email_notify.className = 'label label-important';
+		} else if(username.val().length > config.maximumUsernameLength) {
+			showError(username_notify, 'Username too long!');
+		} else if(!utils.isUserNameValid(username.val())) {
+			showError(username_notify, 'Invalid username!');
+		} else {
+			socket.emit('user.exists', {username: username.val()});
 		}
-		else
+	}
-			socket.emit('user.email.exists', { email: emailEl.value });
+
+	username.on('blur', function() {
+		validateUsername();
 	});
 	
-	$(password).on('keyup', function() {
+	function validatePassword() {
-		passwordvalid = utils.isPasswordValid(password.value);
+		if(!password.val()){
-		if (password.value.length < 6) {
+			validationError = true;
-			password_notify.innerHTML = 'Password too short';
+			password_notify.hide();
-			password_notify.className = 'label label-important';
+			return;
-		} else if(!passwordvalid) {
-			password_notify.innerHTML = 'Invalid password';
-			password_notify.className = 'label label-important';
-		}	else {
-			password_notify.innerHTML = 'OK!';
-			password_notify.className = 'label label-success';
 		}
 		
-		if(password.value !== password_confirm.value) {
+		if (password.val().length < config.minimumPasswordLength) {
-			password_confirm_notify.innerHTML = 'Passwords must match!';
+			showError(password_notify, 'Password too short!');
-			password_confirm_notify.className = 'label label-important';
+		} else if(password.val().length > config.maximumPasswordLength) {
-			passwordsmatch = false;
+			showError(password_notify, 'Password too long!');
+		} else if(!utils.isPasswordValid(password.val())) {
+			showError(password_notify, 'Invalid password!');
+		} else {
+			showSuccess(password_notify, 'OK!');
+		}
+		
+		if(password.val() !== password_confirm.val() && password_confirm.val() !== '') {
+			showError(password_confirm_notify, 'Passwords must match!');
 		}
+	}
+	
+	$(password).on('blur', function() {
+		validatePassword();
 	});
 	
-	$(password_confirm).on('keyup', function() {
+	function validatePasswordConfirm() {
-		if(password.value !== password_confirm.value) {
+		if(!password.val() || password_notify.hasClass('alert-error')) {
-			password_confirm_notify.innerHTML = 'Passwords must match!';
+			password_confirm_notify.hide();
-			password_confirm_notify.className = 'label label-important';
+			return;
-			passwordsmatch = false;
 		}
-		else {
+			
-			password_confirm_notify.innerHTML = 'OK!';
+		if(password.val() !== password_confirm.val()) {
-			password_confirm_notify.className = 'label label-success';
+			showError(password_confirm_notify, 'Passwords must match!');
-			passwordsmatch = true;
+		} else {
+			showSuccess(password_confirm_notify, 'OK!');
 		}
+	}
+	
+	$(password_confirm).on('blur', function() {
+		validatePasswordConfirm();
 	});
 
 	ajaxify.register_events(['user.exists', 'user.email.exists']);
 
 	socket.on('user.exists', function(data) {
-		userexists = data.exists;
 		if (data.exists === true) {
-			username_notify.innerHTML = 'Username exists';
+			showError(username_notify, 'Username already taken!');
-			username_notify.className = 'label label-important';
 		} else {
-			username_notify.innerHTML = 'OK!';
+			showSuccess(username_notify, 'OK!');
-			username_notify.className = 'label label-success';
 		}
 	});
 	
 	socket.on('user.email.exists', function(data) {
-		emailexists = data.exists;
-
 		if (data.exists === true) {
-			email_notify.innerHTML = 'Email Address exists';
+			showError(email_notify, 'Email address already taken!');
-			email_notify.className = 'label label-important';
+		} else {
-		}
+			showSuccess(email_notify, 'OK!');
-		else {
-			email_notify.innerHTML = 'OK!';
-			email_notify.className = 'label label-success';
 		}
 	});
 
 	// Alternate Logins
-	var altLoginEl = document.querySelector('.alt-logins');
+	$('.alt-logins li').on('click', function(e) {
-	altLoginEl.addEventListener('click', function(e) {
+		document.location.href = $(this).attr('data-url');
-		var target;
-		switch(e.target.nodeName) {
-			case 'LI': target = e.target; break;
-			case 'I': target = e.target.parentNode; break;
-		}
-		if (target) {
-			document.location.href = target.getAttribute('data-url');
-		}
 	});
 
 	function validateForm() {
-		var validated = true;
+		validationError = false;
-		
-		if (username.value.length < 2 || !usernamevalid) {
-			username_notify.innerHTML = 'Invalid username';
-			username_notify.className = 'label label-important';
-			validated = false;
-		}
-
-		if (password.value.length < 5) {
-			password_notify.innerHTML = 'Password too short';
-			validated = false;
-		} 
-		
-		if(password.value !== password_confirm.value) {
-			password_confirm_notify.innerHTML = 'Passwords must match!';
-		}
 		
-		if (!emailvalid) {
+		validateEmail();
-			email_notify.innerHTML = 'Invalid email address';
+		validateUsername();
-			validated = false;
+		validatePassword();
-		} 
+		validatePasswordConfirm();
-		
-		if(emailexists) {
-			email_notify.innerHTML = 'Email Address exists';
-			validated = false;
-		}
 
-		if(userexists || !passwordsmatch || !passwordvalid)
+		return validationError;
-			validated = false;
-
-		return validated;
 	}
 	
-	register.addEventListener('click', function(e) {
+	register.on('click', function(e) {
-		if (!validateForm()) e.preventDefault();
+		if (validateForm()) e.preventDefault();
-	}, false);
+	});
 	
 }());

public/src/utils.js

@@ -91,11 +91,11 @@
 		},
 
 		isUserNameValid: function(name) {
-			return (name && name !== "" && (/^[a-zA-Z0-9 _-]{3,14}$/.test(name)));
+			return (name && name !== "" && (/^[a-zA-Z0-9 _-]+$/.test(name)));
 		},
 	
 		isPasswordValid: function(password) {
-			return password && password.indexOf(' ') === -1 && password.length > 5;
+			return password && password.indexOf(' ') === -1;
 		},
 
 		// Blatently stolen from: http://phpjs.org/functions/strip_tags/

public/templates/admin/settings.tpl

@@ -50,6 +50,14 @@
 	</div>
 </form>
 
+<form>
+	<h3>User Settings</h3>
+	<div class="alert alert-notify">
+		<strong>Minimum Username Length</strong><br /> <input type="text" class="" value="2" data-field="minimumUsernameLength"><br />
+		<strong>Maximum Username Length</strong><br /> <input type="text" class="" value="16" data-field="maximumUsernameLength"><br />
+	</div>
+</form>
+
 <form>
 	<h3>Post Settings</h3>
 	<div class="alert alert-notify">

public/templates/register.tpl

@@ -1,13 +1,31 @@
 <h1>Register</h1>
 <div class="row-fluid">
 	<div class="well {register_window:spansize}">
-		<form method="post" action="{relative_path}/register">
+		<form method="post" action="#">
-			<label for="email">Email Address</label><input type="email" name="email" placeholder="Enter Email Address" id="email" /> <span id="email-notify" class="label label-important"></span><br />
+			<fieldset>
-			<label for="username">Username</label><input type="text" name="username" placeholder="Enter Username" id="username" /> <span id="username-notify" class="label label-success"></span> <br />
+				<label for="email"><strong>Email Address</strong></label>
-			<label for="password">Password</label><input type="password" name="password" placeholder="Enter Password" id="password" /> <span id="password-notify" class="label label-important"></span> <br />
+				<input type="email" name="email" placeholder="Enter Email Address" id="email" autofocus/>
-			<label for="password-confirm">Confirm Password</label><input type="password" name="password-confirm" placeholder="Confirm Password" id="password-confirm" /> <span id="password-confirm-notify" class="label label-important"></span> <br />
+				<span id="email-notify" class="alert alert-error hide"></span>
-			<input type="hidden" name="_csrf" value="{token}" />
+				<span class="help-block">Your email won't be shown to the public unless you want.</span>
-			<button class="btn btn-primary" id="register" type="submit">Register Now</button>
+				
+				<label for="username"><strong>Username</strong></label>
+				<input type="text" name="username" placeholder="Enter Username" id="username" />
+				<span id="username-notify" class="alert alert-error hide"></span>
+				<span class="help-block">A unique username. {minimumUsernameLength}-{maximumUsernameLength} characters. Others can mention you with @username.</span>
+				
+				<label for="password"><strong>Password</strong></label>
+				<input type="password" name="password" placeholder="Enter Password" id="password" />
+				<span id="password-notify" class="alert alert-error hide"></span>
+				<span class="help-block">{minimumPasswordLength}-{maximumPasswordLength} characters.</span>
+				
+				<label for="password-confirm"><strong>Confirm Password</strong></label>
+				<input type="password" name="password-confirm" placeholder="Confirm Password" id="password-confirm" />
+				<span id="password-confirm-notify" class="alert alert-error hide"></span>
+				
+				<input type="hidden" name="_csrf" value="{token}" />
+				<br/>
+				<button class="btn btn-primary" id="register" type="submit">Register Now</button>
+			</fieldset>
 		</form>
 	</div>
 	<div class="well span6 {alternate_logins:display}">

src/install.js

@@ -88,6 +88,10 @@ var	async = require('async'),
 				meta.configs.set('postDelay', 10000);
 				meta.configs.set('minimumPostLength', 8);
 				meta.configs.set('minimumTitleLength', 3);
+				meta.configs.set('minimumUsernameLength', 2);
+				meta.configs.set('maximumUsernameLength', 16);
+				meta.configs.set('minimumPasswordLength', 6);
+				meta.configs.set('maximumPasswordLength', 16);
 				meta.configs.set('imgurClientID', '');
 
 				install.save(server_conf, client_conf, callback);

src/routes/api.js

@@ -22,6 +22,10 @@ var user = require('./../user.js'),
 			config['minimumTitleLength'] = meta.config['minimumTitleLength'];
 			config['minimumPostLength'] = meta.config['minimumPostLength'];
 			config['imgurClientIDSet'] = !!meta.config['imgurClientID'];
+			config['minimumUsernameLength'] = meta.config['minimumUsernameLength'];
+			config['maximumUsernameLength'] = meta.config['maximumUsernameLength'];
+			config['minimumPasswordLength'] = meta.config['minimumPasswordLength'];
+			config['maximumPasswordLength'] = meta.config['maximumPasswordLength'];
 
 			res.json(200, config);
 		});
@@ -97,7 +101,10 @@ var user = require('./../user.js'),
 			}
 
 			data.token = res.locals.csrf_token;
-
+			data.minimumUsernameLength = meta.config['minimumUsernameLength'];
+			data.maximumUsernameLength = meta.config['maximumUsernameLength'];
+			data.minimumPasswordLength = meta.config['minimumPasswordLength'];
+			data.maximumPasswordLength = meta.config['maximumPasswordLength'];
 			res.json(data);
 		});
 

src/websockets.js

@@ -217,9 +217,11 @@ var SocketIO = require('socket.io').listen(global.server, { log:false }),
 		});
 
 		socket.on('user.exists', function(data) {
-			user.exists(utils.slugify(data.username), function(exists){
+			if(data.username) {
-				socket.emit('user.exists', {exists: exists});
+				user.exists(utils.slugify(data.username), function(exists){
-			});
+					socket.emit('user.exists', {exists: exists});
+				});
+			}
 		});
 
 		socket.on('user.count', function(data) {