Front and Back ends of login and sign up completed

nodejs
Aravind142857 2 years ago
parent b700ef7423
commit 7641f45abf

@ -10,6 +10,7 @@
<h1 id="head" class="ml-4 text-5xl font-narrow">Link Shortener</h1> <h1 id="head" class="ml-4 text-5xl font-narrow">Link Shortener</h1>
<p class="ml-4 font-fingerpaint">Hello There!</p> <p class="ml-4 font-fingerpaint">Hello There!</p>
<nav class="flex items-center justify-between flex-wrap bg-gray-500 p-6 shadow-lg shadow-black/50 sticky top-0"> <!--dark:bg-black--> <nav class="flex items-center justify-between flex-wrap bg-gray-500 p-6 shadow-lg shadow-black/50 sticky top-0"> <!--dark:bg-black-->
<div class="flex items-center flex-shrink-0 text-white mr-6"> <div class="flex items-center flex-shrink-0 text-white mr-6">
<svg id="logo" class="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg> <svg id="logo" class="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg>
@ -51,6 +52,7 @@
</script> </script>
</nav> </nav>
<div id="root"> <div id="root">
<form id="form" action="/__add" method="post" onsubmit="return validate()"> <form id="form" action="/__add" method="post" onsubmit="return validate()">
<div class="flex flex-wrap"> <div class="flex flex-wrap">

@ -69,6 +69,9 @@
<p id="length" class="hidden text-red-800 text-xs"> <p id="length" class="hidden text-red-800 text-xs">
Minimum <b>10 characters</b> Minimum <b>10 characters</b>
</p> </p>
<p id="auth" class="hidden text-red-800 text-xs">
Incorrect Email or password
</p>
</div> </div>
<div> <div>
<button type="submit" class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Log in</button> <button type="submit" class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Log in</button>

@ -12,7 +12,7 @@
</div> </div>
<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm"> <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
<form class="space-y-6" action="/__login" method="POST"> <!--Change to php--> <form class="space-y-6" action="/__signup" method="POST"> <!--Change to php-->
<div> <div>
<label for="email" class="block text-sm font-medium leading-6 text-gray-900">Email address</label> <label for="email" class="block text-sm font-medium leading-6 text-gray-900">Email address</label>
<div class="mt-2"> <div class="mt-2">
@ -69,10 +69,10 @@
</div> </div>
<div> <div>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<label for="check-password" class="block text-sm font-medium leading-6 text-gray-900">Retype Password</label> <label for="verify" class="block text-sm font-medium leading-6 text-gray-900">Retype Password</label>
</div> </div>
<div class="mt-2 relative block"> <div class="mt-2 relative block">
<input id="check-password" name="check-password" type="password" autocomplete="off" required class="block w-11/12 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"> <input id="verify" name="verify" type="password" autocomplete="off" required class="block w-11/12 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
<span id="check-pswd-invisible" class="absolute inset-y-0 right-0 flex items-center px-1 rounded-r-md"> <span id="check-pswd-invisible" class="absolute inset-y-0 right-0 flex items-center px-1 rounded-r-md">
<svg class="w-6 h-6 m-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24" <svg class="w-6 h-6 m-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"
@ -96,6 +96,7 @@
<p id="check-password-error" class="hidden text-red-800 text x-s"> <p id="check-password-error" class="hidden text-red-800 text x-s">
Passwords <b>do not</b> match Passwords <b>do not</b> match
</p> </p>
</div> </div>
<div> <div>
<button type="submit" class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Sign up</button> <button type="submit" class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Sign up</button>

@ -2,9 +2,8 @@ let email = document.getElementById("email");
let password = document.getElementById("password"); let password = document.getElementById("password");
let pswd_visible = document.getElementById("pswd-visible"); let pswd_visible = document.getElementById("pswd-visible");
let pswd_invisible = document.getElementById("pswd-invisible"); let pswd_invisible = document.getElementById("pswd-invisible");
let check_pswd_visible = document.getElementById("check-pswd-visible");
let check_pswd_invisible = document.getElementById("check-pswd-invisible"); console.log(window.location.pathname);
let check_password = document.getElementById("check-password");
pswd_visible.addEventListener('click', () => { pswd_visible.addEventListener('click', () => {
pswd_visible.classList.add("hidden"); pswd_visible.classList.add("hidden");
pswd_invisible.classList.remove("hidden"); pswd_invisible.classList.remove("hidden");
@ -15,16 +14,21 @@ pswd_invisible.addEventListener('click', () => {
pswd_visible.classList.remove("hidden"); pswd_visible.classList.remove("hidden");
password.type = "text"; password.type = "text";
}); });
check_pswd_visible.addEventListener('click', () => { if (window.location.pathname === '/signup.html') {
let check_pswd_visible = document.getElementById("check-pswd-visible");
let check_pswd_invisible = document.getElementById("check-pswd-invisible");
let check_password = document.getElementById("verify");
check_pswd_visible.addEventListener('click', () => {
check_pswd_visible.classList.add("hidden"); check_pswd_visible.classList.add("hidden");
check_pswd_invisible.classList.remove("hidden"); check_pswd_invisible.classList.remove("hidden");
check_password.type = "password"; check_password.type = "password";
}); });
check_pswd_invisible.addEventListener('click', () => { check_pswd_invisible.addEventListener('click', () => {
check_pswd_invisible.classList.add("hidden"); check_pswd_invisible.classList.add("hidden");
check_pswd_visible.classList.remove("hidden"); check_pswd_visible.classList.remove("hidden");
check_password.type = "text"; check_password.type = "text";
}); });
}
let emailRX = new RegExp("^[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(\\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z]+)+$"); let emailRX = new RegExp("^[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(\\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z]+)+$");
let domainError = document.getElementById("domain"); let domainError = document.getElementById("domain");
let domainRX = new RegExp("^[a-zA-Z0-9!@#$%^&*]*$"); let domainRX = new RegExp("^[a-zA-Z0-9!@#$%^&*]*$");
@ -39,9 +43,20 @@ let symbolRX = new RegExp(".*[!@#$%^&*]+");
let symbolError = document.getElementById("symbol"); let symbolError = document.getElementById("symbol");
let MIN_LENGTH = 10; let MIN_LENGTH = 10;
let lenError = document.getElementById("length"); let lenError = document.getElementById("length");
let check_password_error = document.getElementById("check-password-error"); if (window.location.pathname === '/login.html') {
let auth_error = document.getElementById("auth");
let query = window.location.search;
const urlParams = new URLSearchParams(query);
const errorType = urlParams.get('error');
console.log(window.location.pathname);
if (errorType === 'auth') {
auth_error.classList.add('block');
auth_error.classList.remove('hidden');
} else {
auth_error.classList.remove('block');
auth_error.classList.add('hidden');
}
}
email.addEventListener('keyup', function(event) { email.addEventListener('keyup', function(event) {
if (emailRX.test(email.value)) { if (emailRX.test(email.value)) {
console.log("email valid"); console.log("email valid");
@ -64,6 +79,12 @@ email.addEventListener('keyup', function(event) {
} }
}); });
password.addEventListener('keyup', () => { password.addEventListener('keyup', () => {
if (document.location.pathname === '/login.html') {
if (document.getElementById('auth').classList.contains('block')) {
document.getElementById('auth').classList.remove('block');
document.getElementById('auth').classList.add('hidden');
}
} else {
let pswd = password.value; let pswd = password.value;
if (!capsRX.test(pswd)) { if (!capsRX.test(pswd)) {
capsError.classList.remove("hidden"); capsError.classList.remove("hidden");
@ -118,8 +139,12 @@ password.addEventListener('keyup', () => {
password.classList.remove("ring-red-400"); password.classList.remove("ring-red-400");
password.classList.remove("focus:ring-red-400"); password.classList.remove("focus:ring-red-400");
} }
}
}); });
check_password.addEventListener("keyup", () => { if (window.location.pathname === '/signup.html') {
let check_password = document.getElementById("verify");
let check_password_error = document.getElementById("check-password-error");
check_password.addEventListener("keyup", () => {
let check = check_password.value; let check = check_password.value;
if (check !== password.value) { if (check !== password.value) {
check_password_error.classList.remove("hidden"); check_password_error.classList.remove("hidden");
@ -139,4 +164,5 @@ check_password.addEventListener("keyup", () => {
check_password.classList.remove("ring-red-400"); check_password.classList.remove("ring-red-400");
check_password.classList.remove("focus:ring-red-400"); check_password.classList.remove("focus:ring-red-400");
} }
}); });
}

@ -14,6 +14,7 @@ const client = new cassandra.Client({
keyspace: 'glink' keyspace: 'glink'
}); });
let id = 1; /* Ideally should initialize id to be nextFromDB or write to file and read */ let id = 1; /* Ideally should initialize id to be nextFromDB or write to file and read */
let idAccount = 1;
const port = 63342; // Port that the server listens on */ const port = 63342; // Port that the server listens on */
const RADIUS_OF_EARTH_IN_MILES = 3958.7614580848; const RADIUS_OF_EARTH_IN_MILES = 3958.7614580848;
@ -55,11 +56,16 @@ function newString(n) {
return str; return str;
} }
function nextId() { function nextIdData() {
let next = id; let next = id;
id = id + 1; id = id + 1;
return next; return next;
} }
function nextIdAccount() {
let next = idAccount;
idAccount = idAccount + 1;
return next;
}
function filter(path) { function filter(path) {
if (path.match(new RegExp("^/[a-zA-Z]+/*$"))) { if (path.match(new RegExp("^/[a-zA-Z]+/*$"))) {
if (path.charAt(0) === '/') { if (path.charAt(0) === '/') {
@ -127,7 +133,7 @@ app.post('/__add', function(req, res) {
if (input_glink === "") { if (input_glink === "") {
input_glink = getRandomGLink(); input_glink = getRandomGLink();
let currID = nextId(); let currID = nextIdData();
console.log(currID, input_url, input_glink, geoBool, input_radius, input_latitude, input_longitude) console.log(currID, input_url, input_glink, geoBool, input_radius, input_latitude, input_longitude)
client.execute(query, [currID, input_url, input_glink, geoBool, input_radius, input_latitude, input_longitude], {prepare: true}, function(err,result) { client.execute(query, [currID, input_url, input_glink, geoBool, input_radius, input_latitude, input_longitude], {prepare: true}, function(err,result) {
if (err) { if (err) {
@ -153,7 +159,7 @@ app.post('/__add', function(req, res) {
console.log(input_glink); console.log(input_glink);
client.execute(selectQuery, [input_glink],{} ,function(err, result) { client.execute(selectQuery, [input_glink],{} ,function(err, result) {
if (result.rows.length === 0) { if (result.rows.length === 0) {
let currID = nextId(); let currID = nextIdData();
console.log("values are: " + currID, input_url, input_glink, geoBool, input_radius, input_latitude, input_longitude); console.log("values are: " + currID, input_url, input_glink, geoBool, input_radius, input_latitude, input_longitude);
client.execute(query, [currID, input_url, input_glink, geoBool, input_radius, input_latitude, input_longitude], {prepare: true}, function(err,result) { client.execute(query, [currID, input_url, input_glink, geoBool, input_radius, input_latitude, input_longitude], {prepare: true}, function(err,result) {
if (err) { if (err) {
@ -208,11 +214,42 @@ app.post('/__check', function(req, res) {
} }
}) })
}) })
app.post('/__signup', function(req, res, cb) {
console.log("Entered signup");
let email = req.body.email;
let password = req.body.password;
let confirm_password = req.body.verify;
console.log(confirm_password);
console.log(email);
console.log(password);
if (password === confirm_password) {
bcrypt.hash(password, saltRounds).then(hash => {
console.log(hash);
app.post('/__login', function(req, res) { let add_qry = "insert into account (id, email, password) values (?, ?, ?)";
let id = nextIdAccount();
console.log(id, email, hash);
client.execute(add_qry, [id, email, hash], {prepare: true}, function(err, result) {
if (err) {
console.log(err.message);
return cb("");
} else {
console.log("signed up");
return cb("");
}
})
})
} else {
console.log("Passwords don't match");
return cb("");
}
})
app.post('/__login', function(req, res, cb) {
console.log("entered login");
let email = req.body.email; let email = req.body.email;
let password = req.body.password; let password = req.body.password;
/** TODO: Validate to make sure user-password exists */ /** : Validate to make sure user-password exists */
let emailRX = new RegExp("^[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(\\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z]+)+$"); let emailRX = new RegExp("^[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(\\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z]+)+$");
let domainRX = new RegExp("[A-Za-z0-9!@#$%^&*]"); let domainRX = new RegExp("[A-Za-z0-9!@#$%^&*]");
let minRXCharUp = new RegExp("[A-Z]"); let minRXCharUp = new RegExp("[A-Z]");
@ -224,21 +261,30 @@ app.post('/__login', function(req, res) {
client.execute(selQry, [email], {}, function(error, result) { client.execute(selQry, [email], {}, function(error, result) {
if (error) { if (error) {
console.log(error.message); console.log(error.message);
return cb("");
} else { } else {
if (result.rows[0].length === 0) { if (result.rows.length === 0) {
res.redirect("/error.html"); console.log("Wrong email");
res.redirect("/login.html?error=auth");
return cb("");
} else { } else {
let hash = result.rows[0]["password"]; let hash = result.rows[0]["password"];
console.log(password, hash);
bcrypt.compare(password, hash) bcrypt.compare(password, hash)
.then(match => { .then(match => {
if (match) { if (match) {
console.log("Logged in");
res.redirect("/index.html");
return cb("");
} else { } else {
res.redirect("/login.html"); console.log("Wrong password");
res.redirect("/login.html?error=auth");
return cb("");
} }
}) })
.catch(err => { .catch(err => {
console.log(err.message); console.log(err.message);
return cb("");
}) })
} }
} }

Loading…
Cancel
Save