Commit fc4202e6 authored by Nikhil Rane's avatar Nikhil Rane
Browse files

Improved Login and Sign Up UIs.

parent 6f5b7f1b
......@@ -100,53 +100,32 @@ function createHash(string){
return crypto.createHash('sha256').update(string).digest('hex');
}
// This creates a new user and calls the callback with
// two arguments: err, if there was an error, and the created user
// if a new user was created.
//
// Possible errors: the passwords are not the same, and a user
// with that username already exists.
/* This creates a new user and calls the callback with
* two arguments: err, if there was an error, and the created user
* if a new user was created.
*/
function createUser(fullName, emailAdd, username, password, password_confirmation, callback){
var coll = mongo.collection('users');
if (password !== password_confirmation) {
var err = 'The passwords do not match';
callback(err);
} else {
var query = {username:username};
var salt = createSalt();
var hashedPassword = createHash(password + salt);
var userObject = {
fullName: fullName,
email: emailAdd,
username: username,
salt: salt,
hashedPassword: hashedPassword
};
var salt = createSalt();
var hashedPassword = createHash(password + salt);
var userObject = {
fullName: fullName,
email: emailAdd,
username: username,
salt: salt,
hashedPassword: hashedPassword
};
coll.insert(userObject, function(err,user){
callback(err,user);
});
// make sure this username does not exist already
coll.findOne(query, function(err, user){
if (user) {
err = 'The username you entered already exists!';
callback(err);
} else {
// create the new user
coll.insert(userObject, function(err,user){
callback(err,user);
});
}
});
}
}
app.post('/signup', function(req, res){
//check if this is actually a login call.
if(req.body.submit === "Login") {
res.redirect('/login');
}
var fullName = req.body.fullName;
var emailAdd = req.body.emailID;
var username = req.body.username;
......@@ -156,17 +135,36 @@ app.post('/signup', function(req, res){
createUser(fullName, emailAdd, username, password, confirm_password, function(err, user){
if (err) {
res.render('signup', {error: err});
res.end(JSON.stringify( { result: false, error: err }));
} else {
// This way subsequent requests will know the user is logged in.
req.session.username = user.username;
res.redirect('/');
res.end(JSON.stringify( { result: true }));
}
});
});
/*
* Checks if given username already exists; if yes, returns <code> true </code> otherwise <code> false </code>.
*/
app.post('/validateUserName', function(req, res) {
var username = req.body.username;
var coll = mongo.collection('users');
coll.findOne({username: username}, function(err, user){
if (user) {
res.end(JSON.stringify( { result: true }));
} else {
res.end(JSON.stringify( { result: false }));
}
});
});
// This finds a user matching the username and password that were given
function authenticateUser(username, password, callback){
//TODO: Put database names in config file
......@@ -192,13 +190,6 @@ function authenticateUser(username, password, callback){
app.post('/login', function(req, res){
//check if this is actually a signup call.
if(req.body.submit === "Sign Up!") {
res.redirect('/signup');
}
// These two variables come from the form on
// the views/login.hbs page
var username = req.body.username;
var password = req.body.password;
......@@ -206,10 +197,10 @@ app.post('/login', function(req, res){
if (user) {
// This way subsequent requests will know the user is logged in.
req.session.username = user.username;
res.end(JSON.stringify( { result: true }));
res.redirect('/home');
} else {
res.render('login', {badCredentials: true});
res.end(JSON.stringify( { result: false }));
}
});
});
......
......@@ -93,7 +93,7 @@ LOGIN FORM
*******************/
.login-form {
width: 300px;
width: 400px;
margin: 0 auto;
position: relative;
z-index:5;
......
......@@ -2,38 +2,81 @@
<html>
<head>
<!--META-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login Form</title>
<!--STYLESHEETS-->
<link href="./public/css/login_page_style.css" rel="stylesheet" type="text/css" />
<!--SCRIPTS-->
<script src="./public/js/jquery-1.11.1.js"></script>
<!--Slider-in icons-->
<script type="text/javascript">
$(document).ready(function() {
$(".username").focus(function() {
$(".user-icon").css("left","-48px");
});
$(".username").blur(function() {
$(".user-icon").css("left","0px");
});
$(".password").focus(function() {
$(".pass-icon").css("left","-48px");
});
$(".password").blur(function() {
$(".pass-icon").css("left","0px");
<!--META-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login Form</title>
<!-- Bootstrap core CSS -->
<link href="./public/css/bootstrap.css" rel="stylesheet">
<link href="./public/css/application.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./public/css/starter-template.css" rel="stylesheet">
<!--STYLESHEETS-->
<link href="./public/css/login_page_style.css" rel="stylesheet" type="text/css" />
<!--SCRIPTS-->
<script src="./public/js/jquery-1.11.1.js"></script>
<script src="./public/js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".username").focus(function() {
$(".user-icon").css("left","-48px");
});
$(".username").blur(function() {
$(".user-icon").css("left","0px");
});
$(".password").focus(function() {
$(".pass-icon").css("left","-48px");
});
$(".password").blur(function() {
$(".pass-icon").css("left","0px");
});
$("#errorAlert").hide();
$("#successAlert").hide();
if(sessionStorage.getItem("messageForLogin") !== null && sessionStorage.getItem("messageForLogin") !== undefined) {
$("#successAlert").html("User <b>" + sessionStorage.getItem("messageForLogin") + "</b> created successfully! Please login... ");
$("#successAlert").show("fast");
}
});
});
function storeUser() {
sessionStorage.setItem('username', $("input[name='username']").val());
sessionStorage.removeItem('fullName');
}
</script>
function verifyUser() {
$.ajax({
url: '/login',
data: $("#loginForm").serialize(),
type: 'POST',
success: function (data) {
console.log("Got: " + JSON.parse(data).result);
if(JSON.parse(data).result === false) {
$("#errorAlert").text("Incorrect username or password. Please enter again.");
$("#errorAlert").show("slow");
} else {
sessionStorage.setItem('username', $("input[name='username']").val());
sessionStorage.removeItem('fullName');
sessionStorage.removeItem('messageForLogin');
window.location = "/home";
}
},
error: function (err) {
console.log("Failure in verifying credentials" + JSON.stringify(err));
$("#errorAlert").text("Error while verifying user. Please enter again.");
},
});
}
function goToSignUp() {
window.location = "/signup";
}
</script>
</head>
<body>
......@@ -47,7 +90,7 @@ function storeUser() {
<!--END SLIDE-IN ICONS-->
<!--LOGIN FORM-->
<form name="login-form" class="login-form" action="/login" method="post">
<form id="loginForm" name="login-form" class="login-form" action="/login" method="post">
<!--HEADER-->
<div class="header">
......@@ -58,15 +101,29 @@ function storeUser() {
<!--CONTENT-->
<div class="content">
<!--USERNAME--><input name="username" type="text" class="input username" value="Username" onfocus="this.value=''" /><!--END USERNAME-->
<!--PASSWORD--><input name="password" type="password" class="input password" value="Password" onfocus="this.value=''" /><!--END PASSWORD-->
<div id="successAlert" class="alert alert-success" role="alert"></div>
<div id="errorAlert" class="alert alert-danger" role="alert"></div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
<input class="form-control" name="username" type="text" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
<input class="form-control" name="password" type="password" placeholder="Password">
</div>
</div>
</div>
<!--END CONTENT-->
<!--FOOTER-->
<div class="footer">
<!--LOGIN BUTTON--><input type="submit" name="submit" value="Login" class="button" onclick="storeUser()" /><!--END LOGIN BUTTON-->
<!--REGISTER BUTTON--><input type="submit" name="submit" value="Sign Up!" class="register" /><!--END REGISTER BUTTON-->
<input style="float:left;" type="button" value="Sign Up!" class="register" onclick="goToSignUp()" />
<input type="button" value="Login" class="button" onclick="verifyUser()" />
</div>
<!--END FOOTER-->
......
......@@ -26,7 +26,91 @@
<!--Slider-in icons-->
<script type="text/javascript">
$(function() {
$("#errorAlert").hide();
});
function goToLogin() {
window.location = "/login";
}
function validate() {
console.log("form val: " + $("#signUpForm").serialize());
var errorAlert = $("#errorAlert");
var password = $("input[name='password']");
var confirm_password = $("input[name='confirm_password']");
var username = $("input[name='username']");
//reset all errors
errorAlert.text("");
errorAlert.hide();
username.parent(".input-group").removeClass("has-error");
password.parent(".input-group").removeClass("has-error");
confirm_password.parent(".input-group").removeClass("has-error");
//first, check the username
$.ajax({
url: '/validateUserName',
data: { "username" : username.val() },
type: 'POST',
success: function (data) {
if(JSON.parse(data).result === true) {
errorAlert.text("The username you entered already exists!");
errorAlert.show("fast");
username.parent(".input-group").addClass("has-error");
} else {
//username is okay, let's validate passwords
if(password.val() !== confirm_password.val()) {
//display passwords do not match error
password.parent(".input-group").addClass("has-error");
confirm_password.parent(".input-group").addClass("has-error");
errorAlert.text("The passwords do not match.");
errorAlert.show("fast");
return;
}
//we are here, that means we can create a new user
$.ajax({
url: '/signup',
data: $("#signUpForm").serialize(),
type: 'POST',
success: function (data) {
// console.log("Got list: " + JSON.stringify(data));
if(JSON.parse(data).result === true) {
//this means the user is created successfully, let's go to login page
sessionStorage.setItem('messageForLogin', username.val());
window.location = "/login";
} else {
//this should not happen but to be fail safe
errorAlert.text(JSON.parse(data).error);
errorAlert.show("fast");
}
},
error: function (err) {
console.log("Failure in creating user: " + JSON.stringify(err));
errorAlert.text(err);
errorAlert.show("fast");
},
});
}
},
error: function (err) {
console.log("Failure in validating username: " + JSON.stringify(err));
},
});
}
</script>
</head>
......@@ -36,7 +120,7 @@
<div id="wrapper" style="top:40%">
<!--SIGNUP FORM-->
<form name="signup-form" class="login-form" action="/signup" method="post">
<form id="signUpForm" name="signup-form" class="login-form" action="/signup" method="post">
<!--HEADER-->
<div class="header">
......@@ -47,7 +131,8 @@
<!--CONTENT-->
<div class="content">
<div id="errorAlert" class="alert alert-danger" role="alert"></div>
<div class="form-group">
<div class="input-group">
......@@ -88,14 +173,16 @@
<!--FOOTER-->
<div class="footer">
<!--LOGIN BUTTON--><input style="float:left;" type="submit" name="submit" value="Login" class="register" /><!--END LOGIN BUTTON-->
<!--SIGNUP BUTTON--><input type="submit" name="submit" value="Signup" class="button" /><!--END SIGNUP BUTTON-->
</div>
<input style="float:left;" type="button" value="Back to Login..." class="register" onclick="goToLogin()" />
<input type="button" value="Signup" class="button" onclick="validate()" />
</div>
<!--END FOOTER-->
</form>
<!--END SIGNUP FORM-->
</div>
<!--END WRAPPER-->
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment