diff --git a/login.css b/login.css new file mode 100644 index 0000000..e4565d9 --- /dev/null +++ b/login.css @@ -0,0 +1,16 @@ +#outerdiv{ + padding: 100px; +} + +#innerdiv{ + max-height: 300px; + max-width: 220px; +} + +.smaller-img{ + width: 220px; +} + +#logInBtn{ + background-color: #DBE2EF; +} \ No newline at end of file diff --git a/login.html b/login.html new file mode 100644 index 0000000..81a988a --- /dev/null +++ b/login.html @@ -0,0 +1,30 @@ + + + + LOGIN PAGE + + + +
+

+
+ Username: +

+ +

+ Password: +

+ +

+ +
+

+
+ + + + + + + + \ No newline at end of file diff --git a/login.js b/login.js new file mode 100644 index 0000000..2c0bf1f --- /dev/null +++ b/login.js @@ -0,0 +1,45 @@ +var count=0; //counter for unsuccessful attempt + +function logIn(){ + //taking input values + var username = document.getElementById("usernameId").value; + var password = document.getElementById("passwordId").value; + + + //rejecting empty input values + if(username === "" || password === ""){ + document.getElementById("output").innerHTML = "*username & password mandatory: Please Enter username/password"; + document.getElementById("output").style.color = 'red'; + return false; + } + + + //creating a XMLHttpRequest object + var xmlReq = new XMLHttpRequest(); + + + //checking for change in ready state + xmlReq.onreadystatechange = function(){ + if(xmlReq.readyState == 4 && xmlReq.status == 202){ //request processed & status is OK i.e valid credentials + document.getElementById("output").innerHTML = "Successful logged in"; + document.getElementById("output").style.color = 'green'; + } + else if(xmlReq.readyState == 4 && xmlReq.status == 401){ //request processed & access denied + count++; //incremeting counter + document.getElementById("output").innerHTML = "Unsuccessful Attempt "+String(count)+": Invalid username/password
"; + document.getElementById("output").style.color = 'red'; + document.getElementById("passwordId").value = ""; + if(count == 5){ //if counter has reached max attempts + document.getElementById("output").innerHTML = "*Login disabled for security reasons" + document.getElementById("logInBtn").disabled = true; //counter exceeds max attempts disable button + } + } + }; + + + xmlReq.open("POST", "https://moodshare.herokuapp.com/login", true); //initializing XMLHttpRequest object + xmlReq.setRequestHeader("Access-Control-Allow-Origin", "*"); //setting necessary headers + xmlReq.setRequestHeader("Content-type","application/x-www-form-urlencoded"); + xmlReq.send("username="+username+"&password="+password); //sending data to sever + +} \ No newline at end of file diff --git a/loginimg.jpg b/loginimg.jpg new file mode 100644 index 0000000..1a63a23 Binary files /dev/null and b/loginimg.jpg differ