async function login() {
    // tell the user the app is loading
    document.getElementById("loginSubmit").value = "Loading";
    // this.preventDefault();
    // get login details
    let name = document.getElementById("name").value;
    let password = document.getElementById("password").value;
    // request login
    let response = await fetch("/login", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            name: name,
            password: password
        })
    });
    // if failed red button
    // else switch screen
    if (response.status !== 200) {
        document.getElementById("loginSubmit").classList.add("error");
        document.getElementById("loginSubmit").value = "Failed";
        return;
    } else {
        // switch screen
        document.getElementById("login").setAttribute("style", "display: none;");
        document.getElementById("mainPage").setAttribute("style", "");
    }

    // store user data in session storage
    let data = await response.json();
    sessionStorage.setItem("name", data.name);
    sessionStorage.setItem("role", data.role);

    // if role is admin, keep auto styling
    if (sessionStorage.getItem("role") !== "admin") {
        document.getElementById("addButton").setAttribute("style", "display: none;");
        document.getElementById("taskButton").classList.value = "half";
        document.getElementById("historyButton").classList.value = "half";
        document.getElementById("menu").classList.value = "flex two";
    }
}

function switchScreen(button) {
    document.getElementById("tasks").setAttribute("style", "display: none;");
    document.getElementById("history").setAttribute("style", "display: none;");
    document.getElementById("addTask").setAttribute("style", "display: none;");

    if (button === "task") {
        document.getElementById("tasks").setAttribute("style", "");
    } else if (button === "history") {
        document.getElementById("history").setAttribute("style", "");
    } else if (button === "add") {
        document.getElementById("addTask").setAttribute("style", "");
    }
}