From a008cf971dc350924ea23a7f7e0920480e4d4dd9 Mon Sep 17 00:00:00 2001
From: psychobunny <psycho.bunny@hotmail.com>
Date: Sat, 24 Aug 2013 00:38:40 +0800
Subject: [PATCH] register and login -> BS3

---
 public/src/forum/register.js  | 46 ++++++++++--------
 public/templates/login.tpl    | 81 +++++++++++++++++++++---------
 public/templates/register.tpl | 92 ++++++++++++++++++++++++++++-------
 src/routes/api.js             |  8 +--
 4 files changed, 161 insertions(+), 66 deletions(-)

diff --git a/public/src/forum/register.js b/public/src/forum/register.js
index 7818025be0..b8525255ca 100644
--- a/public/src/forum/register.js
+++ b/public/src/forum/register.js
@@ -21,13 +21,13 @@
 		
 		if(username.value.length < 3) {
 			username_notify.innerHTML = 'Username too short';
-			username_notify.className = 'label label-important';
+			username_notify.parentNode.className = 'input-group-addon btn-warning label-warning';
 		} else if(username.value.length > 13) {
 			username_notify.innerHTML = 'Username too long';
-			username_notify.className = 'label label-important';
+			username_notify.parentNode.className = 'input-group-addon btn-warning label-warning';
 		} else if(!usernamevalid) {
 			username_notify.innerHTML = 'Invalid username';
-			username_notify.className = 'label label-important';
+			username_notify.parentNode.className = 'input-group-addon btn-warning label-warning';
 		} else {
 			socket.emit('user.exists', {username: username.value});
 		}
@@ -38,7 +38,7 @@
 
 		if(!emailvalid) {
 			email_notify.innerHTML = 'Invalid email address';
-			email_notify.className = 'label label-important';
+			email_notify.parentNode.className = 'input-group-addon btn-warning label-warning';
 		}
 		else
 			socket.emit('user.email.exists', { email: emailEl.value });
@@ -48,31 +48,35 @@
 		passwordvalid = utils.isPasswordValid(password.value);
 		if (password.value.length < 6) {
 			password_notify.innerHTML = 'Password too short';
-			password_notify.className = 'label label-important';
-		} else if(!passwordvalid) {
+			password_notify.parentNode.className = 'input-group-addon btn-warning label-warning';
+		} else if(!passwordvalid) {	
 			password_notify.innerHTML = 'Invalid password';
-			password_notify.className = 'label label-important';
+			password_notify.parentNode.className = 'input-group-addon btn-warning label-warning';
 		}	else {
-			password_notify.innerHTML = 'OK!';
-			password_notify.className = 'label label-success';
+			password_notify.innerHTML = '<i class="icon icon-ok"></i>';
+			password_notify.parentNode.className = 'input-group-addon btn-success label-success';
 		}
 		
-		if(password.value !== password_confirm.value) {
+		if(password.value !== password_confirm.value && password_confirm.value.length > 0) {
 			password_confirm_notify.innerHTML = 'Passwords must match!';
-			password_confirm_notify.className = 'label label-important';
+			password_confirm_notify.parentNode.className = 'input-group-addon btn-warning label-warning';
 			passwordsmatch = false;
+		} else if (password.value === password_confirm.value && password_confirm.value.length > 0) {
+			password_confirm_notify.innerHTML = '<i class="icon icon-ok"></i>';
+			password_confirm_notify.parentNode.className = 'input-group-addon btn-success label-success';
+			passwordsmatch = true;
 		}
 	});
 	
 	$(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';
+			password_confirm_notify.parentNode.className = 'input-group-addon btn-warning label-warning';
 			passwordsmatch = false;
 		}
 		else {
-			password_confirm_notify.innerHTML = 'OK!';
-			password_confirm_notify.className = 'label label-success';
+			password_confirm_notify.innerHTML = '<i class="icon icon-ok"></i>';
+			password_confirm_notify.parentNode.className = 'input-group-addon btn-success label-success';
 			passwordsmatch = true;
 		}
 	});
@@ -83,10 +87,10 @@
 		userexists = data.exists;
 		if (data.exists === true) {
 			username_notify.innerHTML = 'Username exists';
-			username_notify.className = 'label label-important';
+			username_notify.parentNode.className = 'input-group-addon btn-warning label-warning';
 		} else {
-			username_notify.innerHTML = 'OK!';
-			username_notify.className = 'label label-success';
+			username_notify.innerHTML = '<i class="icon icon-ok"></i>';
+			username_notify.parentNode.className = 'input-group-addon btn-success label-success';
 		}
 	});
 	
@@ -95,11 +99,11 @@
 
 		if (data.exists === true) {
 			email_notify.innerHTML = 'Email Address exists';
-			email_notify.className = 'label label-important';
+			email_notify.className = 'label label-warning';
 		}
 		else {
-			email_notify.innerHTML = 'OK!';
-			email_notify.className = 'label label-success';
+			email_notify.innerHTML = '<i class="icon icon-ok"></i>';
+			email_notify.parentNode.className = 'input-group-addon btn-success label-success';
 		}
 	});
 
@@ -121,7 +125,7 @@
 		
 		if (username.value.length < 2 || !usernamevalid) {
 			username_notify.innerHTML = 'Invalid username';
-			username_notify.className = 'label label-important';
+			username_notify.className = 'label label-warning';
 			validated = false;
 		}
 
diff --git a/public/templates/login.tpl b/public/templates/login.tpl
index fcd48f54f7..e8e85b9235 100644
--- a/public/templates/login.tpl
+++ b/public/templates/login.tpl
@@ -1,29 +1,64 @@
-<h1>Login</h1>
-<div class="row-fluid">
-	<div class="well {login_window:spansize}">
-		<h4>Login via Username &amp; Password</h4>
-		<div class="alert alert-error" id="error" style="display:none">
-			<button type="button" class="close" data-dismiss="alert">&times;</button>
-			<strong>Failed Login Attempt</strong> <p></p>
+<ol class="breadcrumb">
+	<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
+		<a href="/" itemprop="url"><span itemprop="title">Home</span></a>
+	</li>
+	<li class="active" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
+		<span itemprop="title">Login</span>
+	</li>
+</ol>
+
+
+<div class="row">
+	<div class="{login_window:spansize}">
+		<div class="well well-lg">
+			<div class="alert alert-error" id="error" style="display:none">
+				<button type="button" class="close" data-dismiss="alert">&times;</button>
+				<strong>Failed Login Attempt</strong> <p></p>
+			</div>
+			
+			<form class="form-horizontal" role="form">
+				<div class="form-group">
+					<label for="username" class="col-lg-2 control-label">Username</label>
+					<div class="col-lg-10">
+						<input class="form-control" type="text" placeholder="Enter Username" name="username" id="username" />
+					</div>
+				</div>
+				<div class="form-group">
+					<label for="password" class="col-lg-2 control-label">Password</label>
+					<div class="col-lg-10">
+						<input class="form-control" type="password" placeholder="Enter Password" name="password" id="password" />
+					</div>
+				</div>
+				<div class="form-group">
+					<div class="col-lg-offset-2 col-lg-10">
+						<div class="checkbox">
+						<label>
+							<input type="checkbox"> Remember me
+						</label>
+						</div>
+					</div>
+				</div>
+				<div class="form-group">
+					<div class="col-lg-offset-2 col-lg-10">
+						<button class="btn btn-primary" id="login" type="submit">Login</button> &nbsp; <a href="/reset">Forgot Password?</a>
+					</div>
+				</div>
+				<input type="hidden" name="_csrf" value="{token}" id="csrf-token" />
+			</form>
+			
+			<div id="login-error-notify" class="alert alert-danger hide">Invalid username/password</div>
 		</div>
-		
-		<form>
-			<label>Username</label><input type="text" placeholder="Enter Username" name="username" id="username" /><br />
-			<label>Password</label><input type="password" placeholder="Enter Password" name="password" id="password" /><br />
-			<input type="hidden" name="_csrf" value="{token}" id="csrf-token" />
-			<button class="btn btn-primary" id="login" type="submit">Login</button> &nbsp; <a href="/reset">Forgot Password?</a>
-		</form>
-		
-		<div id="login-error-notify" class="alert alert-danger hide">Invalid username/password</div>
 	</div>
 	
-	<div class="well span6 {alternate_logins:display}">
-		<h4>Alternative Logins</h4>
-		<ul class="alt-logins">
-			<li data-url="/auth/twitter" class="twitter {twitter:display}"><i class="icon-twitter-sign icon-3x"></i></li>
-			<li data-url="/auth/google" class="google {google:display}"><i class="icon-google-plus-sign icon-3x"></i></li>
-			<li data-url="/auth/facebook" class="facebook {facebook:display}"><i class="icon-facebook-sign icon-3x"></i></li>
-		</ul>
+	<div class="col-md-6 {alternate_logins:display}">
+		<div class="well well-lg">
+			<h4>Alternative Logins</h4>
+			<ul class="alt-logins">
+				<li data-url="/auth/twitter" class="twitter {twitter:display}"><i class="icon-twitter-sign icon-3x"></i></li>
+				<li data-url="/auth/google" class="google {google:display}"><i class="icon-google-plus-sign icon-3x"></i></li>
+				<li data-url="/auth/facebook" class="facebook {facebook:display}"><i class="icon-facebook-sign icon-3x"></i></li>
+			</ul>
+		</div>
 	</div>
 </div>
 
diff --git a/public/templates/register.tpl b/public/templates/register.tpl
index 0656336f43..8881f04c33 100644
--- a/public/templates/register.tpl
+++ b/public/templates/register.tpl
@@ -1,22 +1,78 @@
-<h1>Register</h1>
-<div class="row-fluid">
-	<div class="well {register_window:spansize}">
-		<form method="post" action="{relative_path}/register">
-			<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>
+<ol class="breadcrumb">
+	<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
+		<a href="/" itemprop="url"><span itemprop="title">Home</span></a>
+	</li>
+	<li class="active" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
+		<span itemprop="title">Register</span>
+	</li>
+</ol>
+
+<div class="row">
+	<div class="{register_window:spansize}">
+		<div class="well well-lg">
+			<form class="form-horizontal" role="form" action="{relative_path}/register" method="post">
+				<div class="form-group">
+					<label for="email" class="col-lg-4 control-label">Email Address</label>
+					<div class="col-lg-8">
+						<div class="input-group">
+							<input class="form-control" type="text" placeholder="Enter Email Address" name="email" id="email" /> 
+					        <span class="input-group-addon">
+					        	<span id="email-notify"><i class="icon icon-circle-blank"></i></span>
+					        </span>
+						</div>
+					</div>
+				</div>
+				<div class="form-group">
+					<label for="username" class="col-lg-4 control-label">Username</label>
+					<div class="col-lg-8">
+						<div class="input-group">
+							<input class="form-control" type="text" placeholder="Enter Username" name="username" id="username" />
+					        <span class="input-group-addon">
+					        	<span id="username-notify"><i class="icon icon-circle-blank"></i></span>
+					        </span>
+						</div>
+					</div>
+				</div>
+				<div class="form-group">
+					<label for="password" class="col-lg-4 control-label">Password</label>
+					<div class="col-lg-8">
+						<div class="input-group">
+							<input class="form-control" type="password" placeholder="Enter Password" name="password" id="password" />
+					        <span class="input-group-addon">
+					        	<span id="password-notify"><i class="icon icon-circle-blank"></i></span>
+					        </span>
+						</div>
+					</div>
+				</div>
+				<div class="form-group">
+					<label for="password-confirm" class="col-lg-4 control-label">Confirm Password</label>
+					<div class="col-lg-8">
+						<div class="input-group">
+							<input class="form-control" type="password" placeholder="Confirm Password" name="password-confirm" id="password-confirm" />
+					        <span class="input-group-addon">
+					        	<span id="password-confirm-notify"><i class="icon icon-circle-blank"></i></span>
+					        </span>
+						</div>
+					</div>
+				</div>
+				<div class="form-group">
+					<div class="col-lg-offset-4 col-lg-8">
+						<button class="btn btn-primary" id="register" type="submit">Register Now</button>
+					</div>
+				</div>
+				<input type="hidden" name="_csrf" value="{token}" />
+			</form>
+		</div>
 	</div>
-	<div class="well span6 {alternate_logins:display}">
-		<h4>Alternative Registration</h4>
-		<ul class="alt-logins">
-			<li data-url="/auth/twitter" class="twitter {twitter:display}"><i class="icon-twitter-sign icon-3x"></i></li>
-			<li data-url="/auth/google" class="google {google:display}"><i class="icon-google-plus-sign icon-3x"></i></li>
-			<li data-url="/auth/facebook" class="facebook {facebook:display}"><i class="icon-facebook-sign icon-3x"></i></li>
-		</ul>
+	<div class="col-md-6 {alternate_logins:display}">
+		<div class="well well-lg">
+			<h4>Alternative Registration</h4>
+			<ul class="alt-logins">
+				<li data-url="/auth/twitter" class="twitter {twitter:display}"><i class="icon-twitter-sign icon-3x"></i></li>
+				<li data-url="/auth/google" class="google {google:display}"><i class="icon-google-plus-sign icon-3x"></i></li>
+				<li data-url="/auth/facebook" class="facebook {facebook:display}"><i class="icon-facebook-sign icon-3x"></i></li>
+			</ul>
+		</div>
 	</div>
 </div>
 
diff --git a/src/routes/api.js b/src/routes/api.js
index 697e93e1d2..fb715ff4e2 100644
--- a/src/routes/api.js
+++ b/src/routes/api.js
@@ -63,12 +63,12 @@ var user = require('./../user.js'),
 
 			if (num_strategies == 0) {
 				data = {
-					'login_window:spansize': 'span12',
+					'login_window:spansize': 'col-md-12',
 					'alternate_logins:display': 'none'
 				};
 			} else {
 				data = {
-					'login_window:spansize': 'span6',
+					'login_window:spansize': 'col-md-6',
 					'alternate_logins:display': 'block'
 				}
 				for (var i=0, ii=num_strategies; i<ii; i++) {
@@ -88,12 +88,12 @@ var user = require('./../user.js'),
 
 			if (num_strategies == 0) {
 				data = {
-					'register_window:spansize': 'span12',
+					'register_window:spansize': 'col-md-12',
 					'alternate_logins:display': 'none'
 				};
 			} else {
 				data = {
-					'register_window:spansize': 'span6',
+					'register_window:spansize': 'col-md-6',
 					'alternate_logins:display': 'block'
 				}
 				for (var i=0, ii=num_strategies; i<ii; i++) {