From fcbe99870a548096bcbe75e0089250661c53312b Mon Sep 17 00:00:00 2001
From: Baris Soner Usakli <barisusakli@gmail.com>
Date: Tue, 25 Jun 2013 12:34:27 -0400
Subject: [PATCH] added password confirm to registration and prettified the
 notifications on regiser page, need to add validation for
 email/username/password on server side User.create too

---
 public/src/forum/register.js  | 70 ++++++++++++++++++++++++++---------
 public/templates/register.tpl |  1 +
 2 files changed, 54 insertions(+), 17 deletions(-)

diff --git a/public/src/forum/register.js b/public/src/forum/register.js
index 2245b96ef8..755a55fba2 100644
--- a/public/src/forum/register.js
+++ b/public/src/forum/register.js
@@ -1,13 +1,17 @@
 (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,
-		userexists = false;
+		emailvalid = false,
+		userexists = false,
+		passwordsmatch = false;
 
 	$(username).on('keyup change', function() {
 		if (username.value.length > 2) socket.emit('user.exists', {username: username.value});
@@ -17,38 +21,69 @@
 		}
 	});
 
-	emailEl.addEventListener('change', function() {
+	$(emailEl).on('keyup change', function() {
 		socket.emit('user.email.exists', { email: emailEl.value });
-	}, false);
+	});
+	
 	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 = '';
+			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) {
+		if (data.exists === true) {
 			username_notify.innerHTML = 'Username exists';
 			username_notify.className = 'label label-important';
 		} else {
-			username_notify.innerHTML = 'Not taken';
+			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';
-		} else {
-			email_notify.innerHTML = '';
+			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) {
@@ -74,17 +109,13 @@
 		if (password.value.length < 5) {
 			password_notify.innerHTML = 'Password too short';
 			validated = false;
-		} else {
-			password_notify.innerHTML = '';
-		}
+		} 
 
-		if (email.value.indexOf('@') === -1) {
+		if (!emailvalid) {
 			email_notify.innerHTML = 'Invalid email address';
 			validated = false;
-		} else {
-			email_notify.innerHTML = '';
-		}
-
+		} 
+		
 		if(emailexists) {
 			email_notify.innerHTML = 'Email Address exists';
 			validated = false;
@@ -92,10 +123,15 @@
 
 		if(userexists)
 			validated = false;
+			
+		if(!passwordsmatch)
+			validated = false;
 
 		return validated;
 	}
+	
 	register.addEventListener('click', function(e) {
 		if (!validateForm()) e.preventDefault();
 	}, false);
-}());
\ No newline at end of file
+	
+}());
diff --git a/public/templates/register.tpl b/public/templates/register.tpl
index a27ba78cd5..5a2cea9fc5 100644
--- a/public/templates/register.tpl
+++ b/public/templates/register.tpl
@@ -5,6 +5,7 @@
 			<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 />
 			<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="password">Password</label><input type="password" name="password" placeholder="Enter Password" id="password" /> <span id="password-notify" class="label label-important"></span> <br />
+			<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 />
 			<input type="hidden" name="_csrf" value="{token}" />
 			<button class="btn btn-primary" id="register" type="submit">Register Now</button>
 		</form>