diff options
| author | Martial Simon <msimon_fr@hotmail.com> | 2025-09-15 01:08:27 +0200 |
|---|---|---|
| committer | Martial Simon <msimon_fr@hotmail.com> | 2025-09-15 01:08:27 +0200 |
| commit | c9b6b9a5ca082fe7c1b6f58d7713f785a9eb6a5c (patch) | |
| tree | 3e4f42f93c7ae89a364e4d51fff6e5cec4e55fa9 /graphs/js/storageWars | |
add: graphs et rushs
Diffstat (limited to 'graphs/js/storageWars')
| -rw-r--r-- | graphs/js/storageWars/index.html | 23 | ||||
| -rw-r--r-- | graphs/js/storageWars/storageWars.js | 80 |
2 files changed, 103 insertions, 0 deletions
diff --git a/graphs/js/storageWars/index.html b/graphs/js/storageWars/index.html new file mode 100644 index 0000000..49fad63 --- /dev/null +++ b/graphs/js/storageWars/index.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <script defer src="storageWars.js"></script> + <title>Storage Wars</title> +</head> +<body style="max-width: fit-content; margin-left: auto; margin-right: auto;"> + <div> + <input type="text" id="inputJWT"> + <button id="addToken" onclick="addToken()">Add JWT</button> + </div> + <div id="userInfo" style="display: none;"> + <h1>User Info</h1> + <p>Name: <span id="name"></span></p> + <p>Email: <span id="email"></span></p> + <p>Age: <span id="age"></span></p> + </div> + <div id="error"></div> +</body> +</html> diff --git a/graphs/js/storageWars/storageWars.js b/graphs/js/storageWars/storageWars.js new file mode 100644 index 0000000..ed90536 --- /dev/null +++ b/graphs/js/storageWars/storageWars.js @@ -0,0 +1,80 @@ +/* FIXME */ +const userInfo = document.getElementById("userInfo"); +const userName = document.getElementById("name"); +const userEmail = document.getElementById("email"); +const userAge = document.getElementById("age"); +const errorBox = document.getElementById("error"); +const jwtField = document.getElementById("inputJWT"); + +localStorage.clear(); + +function displayError() { + errorBox.innerHTML = "Invalid token"; + if (localStorage.getItem("token")) { + localStorage.removeItem("token"); + } + + userInfo.style.display = "none"; +} + +function decodeToken() { + if (localStorage.getItem("token") != null) { + // parse the token + try { + const token = localStorage.getItem("token"); + const content = token.split(".")[1]; + const b64 = content.replace(/-/g, "+").replace(/_/g, "/"); + const payload = decodeURIComponent(window.atob(b64)); + + return JSON.parse(payload); + } catch { + displayError(); + } + } else { + return null; + } +} + +function addToken() { + /* FIXME */ + localStorage.setItem("token", jwtField.value); + display(); +} + +function display() { + errorBox.innerHTML = ""; + if (localStorage.getItem("token") === "") { + displayError(); + return; + } + + // validity check + const dec = decodeToken(); + + if (dec == null || Date.now() < dec.iat * 1000) { + displayError(); + return; + } + + userInfo.style.display = "inherit"; + if (dec["name"] != undefined) { + userName.innerHTML = dec["name"]; + } else { + userName.innerHTML = "No name"; + } + + if (dec["email"] != undefined) { + userEmail.innerHTML = dec["email"]; + } else { + userEmail.innerHTML = "No email"; + } + + if (dec["age"] != undefined) { + userAge.innerHTML = dec["age"]; + } else { + userAge.innerHTML = "No age"; + } +} + +window.addToken = addToken; +display(); |