installer: password validation

public/src/installer/install.js

@@ -18,21 +18,42 @@ $('document').ready(function() {
 			help.html(help.attr('data-help'));
 		});
 
-		$('[name="username"]').on('blur', validateUsername);
+		$('[name="username"]').on('blur', function() {
+			validate('username', $(this));
+		});
+		$('[name="password"]').on('blur', function() {
+			validate('password', $(this));
+		});
 	}
 
-
-	function validateUsername() {
-		var $this = $(this),
-			username = $this.val(),
-			parent = $this.parents('.input-row'),
+	function validate(type, el) {
+		var field = el.val(),
+			parent = el.parents('.input-row'),
 			help = parent.children('.help-text');
 
-		if (!utils.isUserNameValid(username) || !utils.slugify(username)) {
-			parent.addClass('error');
-			help.html('Invalid Username.');
-		} else {
-			parent.removeClass('error');
+		function validateUsername(field) {
+			if (!utils.isUserNameValid(field) || !utils.slugify(field)) {
+				parent.addClass('error');
+				help.html('Invalid Username.');
+			} else {
+				parent.removeClass('error');
+			}
+		}
+
+		function validatePassword(field) {
+			if (!utils.isPasswordValid(field)) {
+				parent.addClass('error');
+				help.html('Invalid Password.');
+			} else {
+				parent.removeClass('error');
+			}
+		}
+
+		switch (type) {
+			case 'username':
+				return validateUsername(field);
+			case 'password':
+				return validatePassword(field);
 		}
 	}
 });

src/views/install/index.tpl

@@ -49,18 +49,18 @@
 		<br />
 		<form>
 			<div class="row input-row">
-				<div class="col-sm-8 col-xs-12 input-field">
+				<div class="col-sm-7 col-xs-12 input-field">
 					<label for="username">Username</label>
 					<input type="text" class="form-control" name="username" placeholder="Username" />	
 				</div>
-				<div class="col-sm-4 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 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-8 col-xs-12 input-field">
+				<div class="col-sm-7 col-xs-12 input-field">
 					<label for="password">Password</label>
 					<input type="password" class="form-control" name="password" placeholder="Password" />	
 				</div>
-				<div class="col-sm-4 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 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>
 		</form>
 	</div>