projectlumos · Harshal543 · Apr 25, 2016
diff --git a/login.css 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;
+}
diff --git a/login.html b/login.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>LOGIN PAGE</title>
+	<meta charset="UTF-8">
+</head>
+<body>
+	<div id=outerdiv class="fluid-container">
+		<p><img class="smaller-img" src="./loginimg.jpg"></p>
+		<div id=innerdiv class="well">
+			<b>Username:</b>
+			<p>
+				<input id="usernameId" type="text"></input>
+			</p>
+			<b>Password:</b>
+			<p>
+				<input id="passwordId" type="password" onkeypress="if (event.keyCode == 13) document.getElementById('logInBtn').click()"></input>
+			</p>
+			<button id="logInBtn" onclick="logIn()" class="btn btn-default"><b>Log in</b></button>
+		</div>
+		<p id="output"></p>
+	</div>
+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+	<link rel="stylesheet" type="text/css" href="./login.css">
+	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
+	<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
+	<script type="text/javascript" src="./login.js"></script>
+	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
+</body>
+</html>
diff --git a/login.js 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 = "<b>*username & password mandatory:</b> 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 = "<b>Successful logged in</b>";	
+			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 = "<b>Unsuccessful Attempt "+String(count)+":</b> Invalid username/password<br>";
+			document.getElementById("output").style.color = 'red';
+			document.getElementById("passwordId").value = "";
+			if(count == 5){																								//if counter has reached max attempts
+				document.getElementById("output").innerHTML = "<b>*Login disabled for security reasons</b>"			
+				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
+
+}
diff --git a/loginimg.jpg b/loginimg.jpg