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

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

@ -7,25 +7,41 @@
<body> <body>
<div class="container my-5"> <div class="container my-5">
<h1>Movie Search</h1> <h1>Movie Search</h1>
<form id="movieSearch" class="mb-3"> <div id="loginArea">
<div class="input-group mb-3"> <form id="login">
<input class="form-control"> <div class="mb-3">
<button class="btn btn-primary" type="submit">Search</button> <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">
<div class="input-group mb-3">
<input class="form-control">
<button class="btn btn-primary" type="submit">Search</button>
</div>
</form>
<div class="mb-3">
<a class="btn btn-primary" href="javascript:localStorage.clear(); location.reload();">
Logout
</a>
</div> </div>
</form> <table id="output" class="table">
<table id="output" class="table"> <thead>
<thead> <tr>
<tr> <th scope="col">#</th>
<th scope="col">#</th> <th scope="col">Poster</th>
<th scope="col">Poster</th> <th scope="col">Name</th>
<th scope="col">Name</th> <th scope="col">Rating</th>
<th scope="col">Rating</th> <th scope="col">Description</th>
<th scope="col">Description</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> </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>

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

@ -1,67 +1,88 @@
const maxRating = 10; const maxRating = 10;
let token;
window.addEventListener( window.addEventListener(
"load", "load",
(e) => { (e) => {
let config; let loginArea = document.getElementById("loginArea");
/** let searchArea = document.getElementById("searchArea");
* @type {HTMLTableElement} token = localStorage.getItem("token");
*/
let table = document.querySelector("table#output");
let form = document.getElementById("movieSearch");
let textInput = form.querySelector("input");
table.hidden = true;
form.addEventListener( if (token === null) {
"submit", searchArea.remove();
async (e) => {
e.preventDefault();
table.hidden = true;
config ??= await queryTMDb("configuration");
while (table.tBodies.length > 0) { loginArea.querySelector("form").addEventListener(
table.removeChild(table.tBodies[0]); "submit",
} async (e) => {
e.preventDefault();
token = loginArea.querySelector("input").value;
localStorage.setItem("token", token);
loginArea.replaceWith(searchArea);
});
}
else {
loginArea.remove();
let result = await queryTMDb( let config;
"search/movie", /**
{ * @type {HTMLTableElement}
include_adult: true, */
language: "en-US", let table = document.querySelector("table#output");
query: textInput.value let form = document.getElementById("movieSearch");
}); let textInput = form.querySelector("input");
table.hidden = true;
let tBody = table.createTBody(); form.addEventListener(
tBody.classList.add("align-middle"); "submit",
async (e) => {
e.preventDefault();
table.hidden = true;
config ??= await queryTMDb("configuration");
for (let i = 0; i < result.results.length; i++) { while (table.tBodies.length > 0) {
let movie = result.results[i]; table.removeChild(table.tBodies[0]);
let row = tBody.insertRow(); }
let title = document.createElement("a");
let poster = document.createElement("img");
title.href = `${new URL(`${movie.id}`, "https://themoviedb.org/movie/")}`; let result = await queryTMDb(
title.classList.add("link-body-emphasis"); "search/movie",
title.target = "_blank"; {
title.innerText = movie.title; include_adult: true,
language: "en-US",
query: textInput.value
});
poster.src = new URL( let tBody = table.createTBody();
`./${movie.poster_path}`, tBody.classList.add("align-middle");
new URL(
`${config.images.poster_sizes[0]}/`,
config.images.secure_base_url).toString()).toString();
row.insertCell().innerText = `#${i + 1}`; for (let i = 0; i < result.results.length; i++) {
row.insertCell().appendChild(poster); let movie = result.results[i];
row.insertCell().appendChild(title); let row = tBody.insertRow();
row.insertCell().appendChild(createRating(movie.vote_average)); let title = document.createElement("a");
row.insertCell().innerText = movie.overview; let poster = document.createElement("img");
}
table.hidden = false; title.href = `${new URL(`${movie.id}`, "https://themoviedb.org/movie/")}`;
console.log(config); title.classList.add("link-body-emphasis");
console.log(result); title.target = "_blank";
}); title.innerText = movie.title;
poster.src = new URL(
`./${movie.poster_path}`,
new URL(
`${config.images.poster_sizes[0]}/`,
config.images.secure_base_url).toString()).toString();
row.insertCell().innerText = `#${i + 1}`;
row.insertCell().appendChild(poster);
row.insertCell().appendChild(title);
row.insertCell().appendChild(createRating(movie.vote_average));
row.insertCell().innerText = movie.overview;
}
table.hidden = false;
console.log(config);
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();
} }