manuth/zhaw-moba2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Store access token in localStorage

Browse source
This commit is contained in:
Manuel Thalmann 2024-03-15 11:26:58 +01:00
parent 81bbfab569
commit f9312302e0
2 changed files with 107 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
Tasks/Task 01/movieSearch/index.html
View file

@ -7,12 +7,27 @@
<body> <body>
<div class="container my-5"> <div class="container my-5">
<h1>Movie Search</h1> <h1>Movie Search</h1>
<div id="loginArea">
<form id="login">
<div class="mb-3">
<label for="token" class="form-label">Access Token</label>
<input class="form-control" id="token">
</div>
<button class="btn btn-primary" type="submit">Login</button>
</form>
</div>
<div id="searchArea">
<form id="movieSearch" class="mb-3"> <form id="movieSearch" class="mb-3">
<div class="input-group mb-3"> <div class="input-group mb-3">
<input class="form-control"> <input class="form-control">
<button class="btn btn-primary" type="submit">Search</button> <button class="btn btn-primary" type="submit">Search</button>
</div> </div>
</form> </form>
<div class="mb-3">
<a class="btn btn-primary" href="javascript:localStorage.clear(); location.reload();">
Logout
</a>
</div>
<table id="output" class="table"> <table id="output" class="table">
<thead> <thead>
<tr> <tr>
@ -27,6 +42,7 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="./main.js"></script> <script src="./main.js"></script>

24
Tasks/Task 01/movieSearch/main.js
View file

@ -1,8 +1,28 @@
const maxRating = 10; const maxRating = 10;
let token;
window.addEventListener( window.addEventListener(
"load", "load",
(e) => { (e) => {
let loginArea = document.getElementById("loginArea");
let searchArea = document.getElementById("searchArea");
token = localStorage.getItem("token");
if (token === null) {
searchArea.remove();
loginArea.querySelector("form").addEventListener(
"submit",
async (e) => {
e.preventDefault();
token = loginArea.querySelector("input").value;
localStorage.setItem("token", token);
loginArea.replaceWith(searchArea);
});
}
else {
loginArea.remove();
let config; let config;
/** /**
* @type {HTMLTableElement} * @type {HTMLTableElement}
@ -62,6 +82,7 @@ window.addEventListener(
console.log(config); console.log(config);
console.log(result); console.log(result);
}); });
}
}); });
/** /**
@ -83,7 +104,8 @@ async function queryTMDb(endpoint, params) {
`${url}`, `${url}`,
{ {
headers: { headers: {
Accept: "application/json" Accept: "application/json",
Authorization: `Bearer ${token}`
} }
})).json(); })).json();
} }