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();