From 220dec5711b1a1be9ea99fb61cf089d37d2627e3 Mon Sep 17 00:00:00 2001
From: psychobunny <psycho.bunny@hotmail.com>
Date: Wed, 22 Apr 2015 13:54:51 -0400
Subject: [PATCH] installer: validate before sending form

---
 public/src/installer/install.js | 15 ++++++
 src/views/install/index.tpl     | 85 +++++++++++++++++----------------
 2 files changed, 60 insertions(+), 40 deletions(-)

diff --git a/public/src/installer/install.js b/public/src/installer/install.js
index 1fa56e32d6..80d46bf337 100644
--- a/public/src/installer/install.js
+++ b/public/src/installer/install.js
@@ -22,9 +22,24 @@ $('document').ready(function() {
 			activate($(this).attr('name'), $(this));
 		});
 
+		$('form').submit(validateAll);
+
 		activate('database', $('[name="database"]'));
 	}
 
+	function validateAll(ev) {
+		$('form .admin [name]').each(function() {
+			activate($(this).attr('name'), $(this));
+		});
+
+		if ($('.error').length) {
+			ev.preventDefault();
+			$('html, body').animate({'scrollTop': '0px'}, 400);
+			
+			return false;
+		}
+	}
+
 	function activate(type, el) {
 		var field = el.val(),
 			parent = el.parents('.input-row'),
diff --git a/src/views/install/index.tpl b/src/views/install/index.tpl
index 633fb870cb..5bf430e290 100644
--- a/src/views/install/index.tpl
+++ b/src/views/install/index.tpl
@@ -48,55 +48,60 @@
 			You are just a few steps away from launching your own NodeBB forum!
 		</p>
 		<form action="/" method="post">
-			<p>
-				<h1><small>Create an Administrator account</small></h1>
-				<hr />
-			</p>
-			<div class="row input-row">
-				<div class="col-sm-7 col-xs-12 input-field">
-					<label for="admin:username">Username</label>
-					<input type="text" class="form-control" name="admin:username" placeholder="Username" />
+			<div class="admin">
+				<p>
+					<h1><small>Create an Administrator account</small></h1>
+					<hr />
+				</p>
+				
+				<div class="row input-row">
+					<div class="col-sm-7 col-xs-12 input-field">
+						<label for="admin:username">Username</label>
+						<input type="text" class="form-control" name="admin:username" placeholder="Username" />
+					</div>
+					<div class="col-sm-5 help-text" data-help="Enter an <strong>alphanumeric username</strong>. Spaces between words are allowed. You can always change your username later on your profile page."></div>
 				</div>
-				<div class="col-sm-5 help-text" data-help="Enter an <strong>alphanumeric username</strong>. Spaces between words are allowed. You can always change your username later on your profile page."></div>
-			</div>
-			<div class="row input-row">
-				<div class="col-sm-7 col-xs-12 input-field">
-					<label for="admin:email">Email Address</label>
-					<input type="text" class="form-control" name="admin:email" placeholder="Email Address" />
+				<div class="row input-row">
+					<div class="col-sm-7 col-xs-12 input-field">
+						<label for="admin:email">Email Address</label>
+						<input type="text" class="form-control" name="admin:email" placeholder="Email Address" />
+					</div>
+					<div class="col-sm-5 help-text" data-help="Please enter your email address."></div>
 				</div>
-				<div class="col-sm-5 help-text" data-help="Please enter your email address."></div>
-			</div>
-			<div class="row input-row">
-				<div class="col-sm-7 col-xs-12 input-field">
-					<label for="admin:password">Password</label>
-					<input type="password" class="form-control" name="admin:password" placeholder="Password" />
+				<div class="row input-row">
+					<div class="col-sm-7 col-xs-12 input-field">
+						<label for="admin:password">Password</label>
+						<input type="password" class="form-control" name="admin:password" placeholder="Password" />
+					</div>
+					<div class="col-sm-5 help-text" data-help="Use a combination of numbers, symbols, and different cases. You can change the strictness of password creation in the Admin Control Panel."></div>
 				</div>
-				<div class="col-sm-5 help-text" data-help="Use a combination of numbers, symbols, and different cases. You can change the strictness of password creation in the Admin Control Panel."></div>
-			</div>
-			<div class="row input-row">
-				<div class="col-sm-7 col-xs-12 input-field">
-					<label for="admin:password:confirm">Confirm Password</label>
-					<input type="password" class="form-control" name="admin:password:confirm" placeholder="Confirm Password" />
+				<div class="row input-row">
+					<div class="col-sm-7 col-xs-12 input-field">
+						<label for="admin:password:confirm">Confirm Password</label>
+						<input type="password" class="form-control" name="admin:password:confirm" placeholder="Confirm Password" />
+					</div>
+					<div class="col-sm-5 help-text" data-help="Please confirm your password."></div>
 				</div>
-				<div class="col-sm-5 help-text" data-help="Please confirm your password."></div>
 			</div>
 
-			<p>
-				<h1><small>Configure your database</small></h1>
-				<hr />
-			</p>
+			<div class="database">
+				<p>
+					<h1><small>Configure your database</small></h1>
+					<hr />
+				</p>
 
-			<div class="row input-row">
-				<div class="col-sm-7 col-xs-12 input-field">
-					<label for="database">Database Type</label>
-					<select class="form-control" name="database">
-						<option value="redis">Redis</option>
-						<option value="mongo">MongoDB</option>
-					</select>
+				<div class="row input-row">
+					<div class="col-sm-7 col-xs-12 input-field">
+						<label for="database">Database Type</label>
+						<select class="form-control" name="database">
+							<option value="redis">Redis</option>
+							<option value="mongo">MongoDB</option>
+						</select>
+					</div>
 				</div>
-			</div>
 
-			<div id="database-config"></div>
+				<div id="database-config"></div>
+			</div>
 
 			<button type="submit" class="btn btn-lg btn-success">Install NodeBB</button>
 		</form>