Finally got validation working how it should! Seems to be working per…

…fectly. About to start working on views...

controllers/routes.js

@@ -19,7 +19,9 @@ app.get('/login', function(req, res) {
 	if (req.session.user) {
 		res.redirect('/');
 	} else {
-		res.render('login', { 'user': {} }); 
+		var user = {};
+		user.errors = [];
+		res.render('login', { 'user': user }); 
 	}
 });
 
@@ -33,13 +35,16 @@ app.get('/logout', function(req, res) {
 
 // New User
 app.get('/signup', function(req, res) {
-	res.render('signup', { 'user': {} });
+	var user = {};
+	user.errors = [];
+	res.render('signup', { 'user': user });
 });
 
 
 // Edit Profile
 app.get('/user', validate.checkSession, function(req, res) {
 	req.session.user.registered = true;
+	req.session.user.errors = [];
 	res.render('user', { 'user': req.session.user });
 });
 
@@ -54,7 +59,10 @@ app.post('/login', function(req, res) {
 		if ((err) || (!user)) {
 			console.log(err);
 			req.session.error = 'Authentication failed. Check username and password.';
-			res.redirect('back');
+
+			var user = {};
+			user.errors = ['Incorrect username or password!'];
+			res.render('login', { 'user': user });
 		} else if (user) {
 			req.session.regenerate(function() {
 				req.session.cookie.maxAge = 1000 * 60 * 60; // 1 hour

lib/validate.js

@@ -31,47 +31,83 @@
 		var regex_normal = /\b\w{1,15}\b/; 
 		var regex_password = /[a-zA-Z0-9!@$%^&*-+,._]{6,35}/;
 		var regex_email = /\b[\w.-]+@{1}\w+\.[a-zA-Z]{2,4}\b/;
+		var errorMessages = [];
 
-		// These field lengths (boundaries) are semi-arbitrariy atm.
-		var validationList = {
-			'firstName': function() {
-				return regex_normal.test(form.firstName);
-			}(),
-			'lastName': function() {
-				return regex_normal.test(form.lastName);
-			}(),
-			'username': function() {
-				return regex_normal.test(form.username);
-			}(),
-			'password': function() {
-				return regex_password.test(form.password);
-			}(),
-			'passMatch': function() {
-				return (form.password === form.password2);
-			}(),
-			'email': function() {
-				return regex_email.test(form.email);
-			}(),
+		if (!regex_normal.test(form.firstName))
+			errorMessages.push('First Name is invalid in length.');
+		if (!regex_normal.test(form.lastName))
+			errorMessages.push('Last Name is invalid in length.');
+		if (!regex_normal.test(form.username))
+			errorMessages.push('Username is invalid in length.');
+		if (!regex_password.test(form.password)) {
+			errorMessages.push('Password must be at least 6 characters long');
+			errorMessages.push('	Valid special characters: !@#$%^&*-+,._');
 		}
+		if (!(form.password === form.password2))
+			errorMessages.push('Passwords were not the same, please try again.');
+		if (!regex_email.test(form.email))
+			errorMessages.push('Not a valid email address.');
+		// These field lengths (boundaries) are semi-arbitrariy atm.
+		//var validationList = {
+			//'firstName': function() {
+				//return regex_normal.test(form.firstName);
+			//}(),
+			//'lastName': function() {
+				//return regex_normal.test(form.lastName);
+			//}(),
+			//'username': function() {
+				//return regex_normal.test(form.username);
+			//}(),
+			//'password': function() {
+				//return regex_password.test(form.password);
+			//}(),
+			//'passMatch': function() {
+				//return (form.password === form.password2);
+			//}(),
+			//'email': function() {
+				//return regex_email.test(form.email);
+			//}(),
+		//}
 		if (origin === 'user') {
-			validationList['passOld'] = function() {
-				return regex_password.test(form.newPass);
-			}()
+			//validationList['passOld'] = function() {
+				//return regex_password.test(form.newPass);
+			//}()
+			if (!regex_password.test(form.passOld))
+				errorMessages.push('Existing password incorrect. Try again.');
 		}
 
-		var valid = true;
-		for (var i in validationList) {
-			if (!validationList[i]) {
-				valid = false;
-				break;
-			}
-		}
-		console.log(validationList);
-		console.log('Valid input: ' + valid);
-		if (valid)
+		var valid = (errorMessages.length > 0) ? false : true;
+		//for (var i in validationList) {
+			//if (!validationList[i]) {
+				//valid = false;
+				//break;
+			//}
+		//}
+		//console.log(errorMessages);
+		//console.log('Valid input: ' + valid);
+		if (valid) {
 			next();
+		}
 		else {
-			// TODO: add later
+			if (origin === 'user') {
+				if (req.session.user) {
+					req.session.user.errors = errorMessages;
+					res.render('user', { 'user': req.session.user });
+				} else {
+					// This is the case when the first signup POST to /user fails.
+					// We're at /user, but there is no session. Need to use 'render'
+					// to pass locals to the page, so redirect is out of the question.
+					var user = {};
+					user.errors = errorMessages;
+					res.render('signup', { 'user': user });
+				}
+			} else {
+				// Came from /signup (first try). POST validation to /user failed.
+				// Now we're at /user. Refer to 'else' clause above.
+				var user = {};
+				user.errors = errorMessages;
+				res.render('signup', { 'user': user });
+			}
 		}
 	}
 

public/css/style.styl

@@ -1,52 +1,92 @@
-round(arguments)
-	-webkit-border-radius arguments
-	-moz-border-radius arguments
-	border-radius arguments
-
-shadow()
-	-webkit-box-shadow 0 1px 2px rgba(0,0,0,.2)
-	-moz-box-shadow 0 1px 2px rgba(0,0,0,.2)
-	box-shadow 0 1px 2px rgba(0,0,0,.2)
-
-button()
-	display inline-block
-	padding .5em 2em .55em
-	outline none
+body
+	padding 50px 0px
+	font 14px Arial, sans-serif
+	color #444
+
+a
+	color #00B7FF
+
+label
+	display block
+	float left
+	font-weight bold
+	margin-right 10px
+	text-align right
+	width 150px
+	line-height 25px
+
+form
+	width 480px
+	padding 20px
+	background #f0f0f0
+	overflow auto
+	border 1px solid #cccccc
+	-moz-border-radius 7px
+	-webkit-border-radius 7px
+	border-radius 7px
+	-moz-box-shadow 2px 2px 2px #cccccc
+	-webkit-box-shadow 2px 2px 2px #cccccc
+	box-shadow 2px 2px 2px #cccccc
+
+form p
+	&:hover
+		label
+			color #0459b7
+
+.field
+	margin-top 0
+	margin-bottom 7px
+	padding 0
+
+.input
+	font 15px Arial, Verdana
+	padding 5px
+	border 1px solid #b9bdc1
+	width 300px
+	color #797979
+	&:focus 
+		border 1px solid #093cc75
+		-moz-box-shadow 0 0 3px #0459b7
+		-webkit-box-shadow 0 0 3px #0459b7
+		outline none
+
+.button
+	background #ddd
+	background -moz-linear-gradient(90deg, #0459b7, #08adff)
+	background -webkit-gradient(linear, left top, left bottom, from(#08adff), to(#0459b7))
+	border 1px solid #093c75
+	-moz-border-radius 3px
+	-webkit-border-radius 3px
+	border-radius 3px
+	-moz-box-shadow 0 1px 0 #fff
+	-webkit-box-shadow 0 1px 0 #fff
+	box-shadow 0 1px 0 #fff
+	color #fff
+	font-weight bold
+	font-size 12px
 	cursor pointer
+	float right
+	margin-top 10px
+	margin-right 10px
+	line-height 1
+	padding 5px 10px
 	text-align center
 	text-decoration none
-	border solid 1px #ccc
-	text-shadow 0 1px 1px rgba(0,0,0,.3)
-	&:hover
-		text-decoration none
-	&:active
-		position relative
-		top 1px
-
-gradient(top, bottom)
-	background-color bottom
-	background -webkit-gradient(linear, left top, left bottom, from(top), to(bottom))
-	background -moz-linear-gradient(top, top, bottom)
-	@css { filter progid:DXImageTransform.Microsoft.gradient(startColorsr={top}, endColorstr={bottom}) }
-
-color_obj(arguments)
-	border solid 1px darken(arguments, 3%)
-	color mix(#fff, arguments, 90%)
-	gradient lighten(arguments, 13%), arguments
+	text-shadow 0 1px 1px #333
+	text-transform uppercase
 	&:hover
-		gradient(lighten(arguments, 10%), darken(arguments, 5%))
-	&:active
-		gradient(arguments, lighten(arguments, 10%))
-
-.button
-	round(0.5em)
-	shadow()
-	button()
-	color_obj(#00B7FF)
+		background #848FB2
+		cursor pointer
 
-body
-	padding 50px
-	font 14px "Lucida Grande", Helvetica, Arial, sans-serif
-
-a
-	color #00B7FF
+#error
+	background rgba(166, 65, 42, 0.2)
+	border 2px solid #a6412a
+	-moz-border-radius 3px
+	-webkit-border-radius 3px
+	border-radius 3px
+	//display none
+	display block
+	padding 5px 5px
+	margin-top 0px
+	//&:target
+	//display block

views/includes/userForm.jade

@@ -1,25 +1,29 @@
 form(method='post', action='/user')
-	p
+	- if (user.errors.length)
+		p#error
+			- each item in user.errors
+				| #{item}
+				br
+	p.field
 		label First Name:
-			input(type='text', name='firstName', value= user.firstName)
-	p
+		input.input(type='text', name='firstName', value= user.firstName)
+	p.field
 		label Last Name:
-			input(type='text', name='lastName', value= user.lastName)
-	p
+		input.input(type='text', name='lastName', value= user.lastName)
+	p.field
 		label Username:
-			input(type='text', name='username', value= user.username)
+		input.input(type='text', name='username', value= user.username)
 	-if (user.registered)
-		p
+		p.field
 			label Existing Password: 
-				input(type='password', name='passOld')
-	p
-		label Create Password:
-			input(type='password', name='password')
-	p
+			input.input(type='password', name='passOld')
+	p.field
+		label Password:
+		input.input(type='password', name='password')
+	p.field
 		label Repeat Password:
-			input(type='password', name='password2')
-	p
+		input.input(type='password', name='password2')
+	p.field
 		label Email:
-			input(type='text', name='email', value= user.email)
-	p
-		input(type='submit', value='submit')
+		input.input(type='text', name='email', value= user.email)
+	input.button.field(type='submit', value='submit')

views/layout.jade

@@ -3,9 +3,10 @@ html(lang="en")
 	head
 		title= "node-explorer"
 		link(rel='stylesheet', href='/css/style.css')
-		link(rel='text/javascript', href='/js/backbone.js')
-		link(rel='text/javascript', href='/js/underscore.js')
+		//link(rel='text/javascript', href='/js/backbone.js')
+		//link(rel='text/javascript', href='/js/underscore.js')
 		body
-			include includes/head
-			!= body
+			div(align='center')
+				include includes/head
+				!= body