Skip to content

Instantly share code, notes, and snippets.

@agrawalo

agrawalo/index.html

Last active March 19, 2019 20:35
Show Gist options
  • Save agrawalo/edb4fea629832d7c3d9601f238b647f9 to your computer and use it in GitHub Desktop.
Save agrawalo/edb4fea629832d7c3d9601f238b647f9 to your computer and use it in GitHub Desktop.
Download ZIP
finalclient
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>
Authentication
</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<h3 class="text-center">Authentication</h3>
<div class="container">
<form>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" placeholder="Username">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<button type="button" class="btn btn-primary center-block" onclick="auth()">Submit</button>
</form>
<div id="token-display">
</div>
</div>
</br>
</br>
<div class="container">
<form>
<div class="form-group">
<label for="token">Token</label>
<input type="text" class="form-control" id="token" placeholder="token" ></input>
</div>
<button type="button" class="btn btn-primary center-block" onclick="getlist()">Get List</button>
</form>
<div id="list">
</div>
</div>
<script type="text/javascript">
auth= function(){
var xhttp = new XMLHttpRequest();
data={name:document.getElementById("username").value,password:document.getElementById("password").value}
xhttp.onreadystatechange = function() {
if (xhttp.readyState==4 && xhttp.status==200) {
var response = JSON.parse(xhttp.responseText);
document.getElementById("token-display").innerHTML = response.token;
}
if(xhttp.readyState==4 && xhttp.status==403){
document.getElementById("token-display").innerHTML=JSON.parse(xhttp.responseText).message;
}
};
xhttp.open("POST", "http://localhost:3000/login", true);
xhttp.setRequestHeader("Content-type", 'application/json; charset=UTF-8');
xhttp.send(JSON.stringify(data));
}
getlist= function(){
var xhttp = new XMLHttpRequest();
data={token:document.getElementById("token").value}
xhttp.onreadystatechange = function() {
if (xhttp.readyState==4 && xhttp.status==200) {
var response = JSON.parse(xhttp.responseText);
var ul=document.createElement("ul");
for(var i=0;i<response.users.length;i++){
var li=document.createElement("li");
li.appendChild(document.createTextNode(response.users[i].name));
ul.appendChild(li);
}
document.getElementById("list").appendChild(ul);
}
if(xhttp.readyState==4 && xhttp.status==403){
document.getElementById("list").innerHTML=JSON.parse(xhttp.responseText).message;
}
};
xhttp.open("POST", "http://localhost:3000/getusers", true);
xhttp.setRequestHeader("Content-type", 'application/json; charset=UTF-8');
xhttp.send(JSON.stringify(data));
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment