diff --git a/dec.css b/dec.css new file mode 100644 index 0000000..c2857a1 --- /dev/null +++ b/dec.css @@ -0,0 +1,36 @@ +.center_box{ + width: 300px ; + height:350px ; + border-size: 2px; + border-color: green; + border-width: 2px; + border-radius: 15px; + position: absolute; + background-color: #C5CAE9; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; +} + +.iparea{ + border-color: #9FA8DA; + width: 275px; +} + +.u_box{ + margin-top: 20px; +} + +.p_box{ + margin: 5px; +} + +.response{ + font-family: Comic Sans MS; +} + +.heading{ + font-family: = Comic Sans MS; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..4b0dfb0 --- /dev/null +++ b/index.html @@ -0,0 +1,27 @@ + + + + Login Page + + + + +
+
+ +
+
+
+ +
+ +
+
+ 5 attempts left +
+
+
+ + + + \ No newline at end of file diff --git a/makecall.js b/makecall.js new file mode 100644 index 0000000..3c4a239 --- /dev/null +++ b/makecall.js @@ -0,0 +1,72 @@ +var count = 5; +var waittime = 15; + +function keyHit(){ + if (event.keyCode == 13) document.getElementById("signin").click(); // Check if Enter key (13) is pressed +} + +function myFunction(){ // On Clicking Sign-In Button + + uname = document.getElementById("username").value; // Get username + pass = document.getElementById("password").value; // Get password + + var login_params = "username=" + uname + "&password=" + pass; // Create string to send to API + var signin_button = document.getElementById("signin"); // Get the sign in button in a variable + var response = document.getElementById("status"); // This will be the success/failure notice given to user + var attempt_left = document.getElementById("attempts"); // No of attempts left + + if(uname.toString().trim().length==0 || pass.trim().length == 0){ // Ask user to retry in case of empty strings in username or password + response.innerHTML = "Both values are compulsary"; + return; + } + + var xmlreq = new XMLHttpRequest(); // Create a XMLHttpRequest object + + xmlreq.open("POST", "http://moodshare.herokuapp.com/login", true); // Assign method, url and isAsynchronous property to initialize the object + xmlreq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // Set required headers + xmlreq.setRequestHeader('Access-Control-Allow-Origin', '*'); + + xmlreq.onreadystatechange = function() { // Run this everytime we see a change in the status/state of the request + + if(xmlreq.readyState == 4 && xmlreq.status == 202){ // 4 = Request completed, response ready. 202 = Accpeted + signin_button.innerHTML = "Signed-In"; // Change button text + attempt_left.innerHTML = ""; // Give response to the user regarding the status + response.innerHTML = "
Successfully signed in."; + signin_button.disabled = true; // Disable the button + } + else if(xmlreq.readyState == 4 && xmlreq.status == 401){ // 4 = Reqeuest completed and response ready 401 = Unauthorized access + + if(count-- <= 1){ // Max number of attempts reached + signin_button.disabled = true; // Disable the button + signin_button.innerHTML = "Sign-In"; + response.innerHTML = "Max attempts exceeded" // Notify the user + + waittimeID = window.setInterval(function(){ // Create a timer which modifies itself each second + attempt_left.innerHTML = "Please wait " + waittime-- + " seconds"; // Ask user to wait 15 seconds + if(waittime == -1) + window.clearInterval(waittimeID); // After 15 seconds kill the timer + },1000); + + window.setTimeout(function(){ // Timeout function to restore values after 15 seconds + count = 5; // Restore number of attempts + waittime = 15; // Restore waiting time + response.innerHTML = ""; + attempt_left.innerHTML = count + " Attempts left"; + signin_button.disabled = false; // Enable the button + },16500); + + return; + } + + signin_button.innerHTML = "Sign-In"; // In case of invalid username and password combination (Under max attempts limit) + signin_button.disabled = false; // Enable the button and notify the user + response.innerHTML = "
Incorrect username or password."; + } + + } + + xmlreq.send(login_params); // This will send the data to the API + signin_button.disabled = true; // Disable the button + signin_button.innerHTML = "Signing-In..."; // And change the button text to signingin until a change in state is found + attempt_left.innerHTML = count - 1 + " Attempts left"; // Reduce number of attempts by one +} diff --git a/tuser.jpg b/tuser.jpg new file mode 100644 index 0000000..0ebf7a5 Binary files /dev/null and b/tuser.jpg differ