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