[login] [minor] better layout

public/js/wn/router.js

@@ -85,7 +85,7 @@ wn.set_route = function() {
 
 wn._cur_route = null;
 
-$(window).bind('hashchange', function() {
+$(window).on('hashchange', function() {
 	// save the title
 	wn.route_titles[wn._cur_route] = document.title;
 

website/templates/includes/login.js

@@ -2,7 +2,8 @@ var disable_signup = {{ disable_signup and "true" or "false" }};
 var login = {};
 
 $(document).ready(function(wrapper) {
-	login.show_login();
+	window.location.hash = "#login";
+	login.login();
 	
 	$('#login_btn').click(login.do_login);
 		
@@ -14,6 +15,12 @@ $(document).ready(function(wrapper) {
 	$(document).trigger('login_rendered');
 })
 
+$(window).on("hashchange", function() {
+	var route = window.location.hash.slice(1);
+	if(!route) route = "login";
+	login[route]();
+})
+
 // Login
 login.do_login = function(){
 	var args = {};
@@ -81,20 +88,19 @@ login.set_heading = function(html) {
 	$(".panel-heading").html("<h4>" + html + "</h4>");
 }
 
-login.show_login = function() {
+login.login = function() {
 	login.set_heading('<i class="icon-lock"></i> Login');
 	$("#login_wrapper h3").html("Login");
 	$("#login_id").attr("placeholder", "Login Email Id");
 	$("#password-row").toggle(true);
 	$("#full-name-row, #login_message").toggle(false);
 	$("#login_btn").html("Login").removeClass("btn-success");
-	$("#switch-view").html('<a \
-		onclick="return login.show_forgot_password()">Forgot Password?</a>');
+	$("#forgot-link").html('<a href="#forgot">Forgot Password?</a>');
 	
 	if(!disable_signup) {
-		$("#switch-view").append('<hr><div>\
-			New User? <button class="btn btn-success" style="margin-left: 10px; margin-top: -2px;"\
-				onclick="return login.show_sign_up()">Sign Up</button></div>');
+		$("#switch-view").empty().append('<div>\
+			No Account? <a class="btn btn-success" style="margin-left: 10px; margin-top: -2px;"\
+				href="#sign_up">Sign Up</button></div>');
 	}
 
 	window.is_login = true;
@@ -102,22 +108,24 @@ login.show_login = function() {
 	window.is_forgot = false;
 }
 
-login.show_sign_up = function() {
+login.sign_up = function() {
 	login.set_heading('<i class="icon-thumbs-up"></i> Sign Up');
 	$("#login_id").attr("placeholder", "Your Email Id");
 	$("#password-row, #login_message").toggle(false);
 	$("#full-name-row").toggle(true);
 	$("#login_btn").html("Sign Up").addClass("btn-success");
-	$("#switch-view").html("<a onclick='return login.show_login()' href='#'>Login</a>");
+	$("#forgot-link").html("<a href='#login'>Login</a>");
+	$("#switch-view").empty();
 	window.is_sign_up = true;
 }
 
-login.show_forgot_password = function() {
+login.forgot = function() {
 	login.set_heading('<i class="icon-question-sign"></i> Forgot');
 	$("#login_id").attr("placeholder", "Your Email Id");
 	$("#password-row, #login_message, #full-name-row").toggle(false);
 	$("#login_btn").html("Send Password").removeClass("btn-success");
-	$("#switch-view").html("<a onclick='return login.show_login()' href='#'>Login</a>");
+	$("#forgot-link").html("<a href='#login'>Login</a>");
+	$("#switch-view").empty();
 	window.is_forgot = true;
 	window.is_sign_up = false;
 }

website/templates/pages/login.html

@@ -11,32 +11,37 @@
 {% block content %}
 <div style="max-width: 750px;">
 	<div class="row" style="margin-top: 40px; margin-bottom: 20px">
-		<div class="col-sm-offset-3 col-sm-6">
+		<div class="col-sm-offset-1 col-sm-10">
 			<div class="panel panel-default">
 				<div class="panel-heading">
 					<h4><i class="icon-lock"></i> Login</h4>
 				</div>
-				<div class="panel-body">
-					<p id="login_message" class="alert alert-warning" 
-						style="display: none;"></p>
-					<div class="form-group">
-						<input id="login_id" type="text"
-							class="form-control" placeholder="Login Email Id">
+				<div class="panel-body row" style="padding: 30px">
+					<div class="col-sm-6" style="border-right: 1px solid #f2f2f2">
+						<p id="login_message" class="alert alert-warning" 
+							style="display: none;"></p>
+						<div class="form-group">
+							<input id="login_id" type="text"
+								class="form-control" placeholder="Login Email Id">
+						</div>
+						<div class="form-group" id="full-name-row" style="display: none;">
+							<input id="full_name" type="text"
+								class="form-control" placeholder="Your Full Name">
+						</div>
+						<div class="form-group" id="password-row">
+							<input id="pass" type="password"
+								class="form-control" placeholder="Password">
+						</div>
+						<div class="form-group">
+							<button type="submit" id="login_btn" 
+								class="btn btn-primary">Login</button>
+							<img src="lib/images/ui/button-load.gif" id="login-spinner" style="display: 								none;">
+						</div>
+						<p id="forgot-link"></p>
 					</div>
-					<div class="form-group" id="full-name-row" style="display: none;">
-						<input id="full_name" type="text"
-							class="form-control" placeholder="Your Full Name">
+					<div class="col-sm-6">
+						<p id="switch-view"></p>
 					</div>
-					<div class="form-group" id="password-row">
-						<input id="pass" type="password"
-							class="form-control" placeholder="Password">
-					</div>
-					<div class="form-group">
-						<button type="submit" id="login_btn" 
-							class="btn btn-primary">Login</button>
-						<img src="lib/images/ui/button-load.gif" id="login-spinner" style="display: 							none;">
-					</div>
-					<p style="text-align: center" id="switch-view"></p>
 				</div>
 			</div>
 		</div>