Conservancy/reimbursinator
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #16 from danieldupriest/LogoutScript

Browse source 
Add logout script to dashboard.html and fix formatting
This commit is contained in:
sliang17 2019-01-17 17:06:05 -08:00 • committed by GitHub
commit ebc886db0d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 70 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
front/static/dashboard.html
View file

@ -1,38 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, width=device-width" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Reimbursinator</title>
<link rel="shortcut icon" href="/favicon.ico" />
</head>
<body>
<div class="container">
<div class="jumbotron"><h1>Reimbursinator Report</h1></div>
<nav class="navbar">
<ul class="nav nav-tabs mr-auto">
<li class="nav-item">
<a class="nav-link active" href="#">New</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Unfinished</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">History</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Others</a>
</li>
</ul>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link" href="#">Logout</a>
</li>
</ul>
</nav>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, width=device-width" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Reimbursinator</title>
<link rel="shortcut icon" href="/favicon.ico" />
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Reimbursinator Report</h1>
</div>
</body>
<nav class="navbar">
<ul class="nav nav-tabs mr-auto">
<li class="nav-item">
<a class="nav-link active" href="#">New</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Unfinished</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">History</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Others</a>
</li>
</ul>
<ul class="nav justify-content-end">
<li class="nav-item">
<a id="logoutLink" class="nav-link" href="#">Logout</a>
</li>
</ul>
</nav>
</div>
<script src="logout.js"></script>
</body>
</html>

33
front/static/logout.js Normal file
View file

@ -0,0 +1,33 @@
function postToLogoutEndpoint(event) {
event.preventDefault();
const token = localStorage.getItem("token");
const url = "https://reqres.in/api/logout" // mock api service
const xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader("Authorization", `Token ${token}`);
xhr.onreadystatechange = function() {
if (this.readyState === 4) {
if (this.status === 200) {
console.log("LOGOUT SUCCESS!");
console.log(`Server response:\n${this.response}`);
localStorage.removeItem("token");
window.location.replace("index.html");
} else {
console.log("LOGOUT FAILURE!");
console.log(`Server status: ${this.status}`);
console.log(`Server response:\n${this.response}`);
}
}
};
xhr.onerror = function() {
alert("Error connecting to authentication server!");
};
xhr.send();
}
const logoutLink = document.querySelector("#logoutLink");
logoutLink.addEventListener("click", postToLogoutEndpoint);