nodebb/public/src/forum/register.js

(function() {
	var username = document.getElementById('username'),
		password = document.getElementById('password'),
		password_confirm = document.getElementById('password-confirm'),
		register = document.getElementById('register'),
		emailEl = document.getElementById('email'),
		username_notify = document.getElementById('username-notify'),
		email_notify = document.getElementById('email-notify'),
		password_notify = document.getElementById('password-notify'),
		password_confirm_notify = document.getElementById('password-confirm-notify'),		
		emailexists = false,
		emailvalid = false,
		userexists = false,
		passwordsmatch = false;

	$(username).on('keyup change', function() {
		if (username.value.length > 2) socket.emit('user.exists', {username: username.value});
		else {
			username_notify.innerHTML = 'Username too short';
			username_notify.className = 'label label-important';
		}
	});

	$(emailEl).on('keyup change', function() {
		socket.emit('user.email.exists', { email: emailEl.value });
	});
	
	password.addEventListener('keyup', function() {
		if (password.value.length < 5) {
			password_notify.innerHTML = 'Password too short';
			password_notify.className = 'label label-important';
		} else {
			password_notify.innerHTML = 'OK!';
			password_notify.className = 'label label-success';
		}
	}, false);
	
	$(password_confirm).on('keyup', function() {
		if(password.value !== password_confirm.value) {
			password_confirm_notify.innerHTML = 'Passwords must match!';
			password_confirm_notify.className = 'label label-important';
			passwordsmatch = false;
		}
		else {
			password_confirm_notify.innerHTML = 'OK!';
			password_confirm_notify.className = 'label label-success';
			passwordsmatch = true;
		}
	});

	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';
			username_notify.className = 'label label-important';
		} else {
			username_notify.innerHTML = 'OK!';
			username_notify.className = 'label label-success';
		}
	});
	
	socket.on('user.email.exists', function(data) {
		emailexists = data.exists;
		emailvalid = isEmailValid(email.value);
		console.log('derp');
		if (data.exists === true) {
			email_notify.innerHTML = 'Email Address exists';
			email_notify.className = 'label label-important';
		} else if(!emailvalid) {
			email_notify.innerHTML = 'Invalid email address';
			email_notify.className = 'label label-important';
		}
		else {
			email_notify.innerHTML = 'OK!';
			email_notify.className = 'label label-success';
		}
	});

	// from http://stackoverflow.com/questions/46155/validate-email-address-in-javascript
	function isEmailValid(email) {
	    var re = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
    	return re.test(email); 
	}

	// Alternate Logins
	var altLoginEl = document.querySelector('.alt-logins');
	altLoginEl.addEventListener('click', function(e) {
		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');
		}
	});

	// Form Validation
	function validateForm() {
		var validated = true;
		if (username.value.length < 2) {
			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 (!emailvalid) {
			email_notify.innerHTML = 'Invalid email address';
			validated = false;
		} 
		
		if(emailexists) {
			email_notify.innerHTML = 'Email Address exists';
			validated = false;
		}

		if(userexists)
			validated = false;
			
		if(!passwordsmatch)
			validated = false;

		return validated;
	}
	
	register.addEventListener('click', function(e) {
		if (!validateForm()) e.preventDefault();
	}, false);
	
}());