(() => {
    // Define variables
    let usernameInputElement;
    let passwordInputElement;
    let submitButton;
    let passwordOverlayElement;
    let pwOverlayCancelButton;
    let userlistButtons;
    let userlistContainerElement;
    // Add event listeners after DOM Content loaded
    document.addEventListener("DOMContentLoaded", () => {
        // elements
        usernameInputElement = document.getElementById("id_username");
        passwordInputElement = document.getElementById("id_password");
        submitButton = document.getElementById("submit_login");
        passwordOverlayElement = document.getElementById("passwordoverlay-container");
        pwOverlayCancelButton = document.getElementById("pwocancel");
        userlistContainerElement = document.getElementById("userlistcontainer");
        userlistButtons = document.getElementsByClassName("userlistbutton");
        // event listeners
        // [...<html-collection>] converts an html collection to an array
        [...userlistButtons].forEach(element => {
            element.addEventListener("click", () => {
                set_username(element.dataset.username);
                show_password_overlay();
            })
        });
        pwOverlayCancelButton.addEventListener("click", () => {
            hide_password_overlay();
        });
    })
    function set_username(username) {
        usernameInputElement.value = username;
    }
    function show_password_overlay() {
        window.scrollTo(0, 0);
        passwordOverlayElement.classList.remove("nodisplay");
        passwordInputElement.focus()
    }
    function hide_password_overlay() {
        passwordOverlayElement.classList.add("nodisplay");
        passwordInputElement.value = "";
        // Dispatch an Input Event to the input element to trigger the on-
        // screen keyboard to update its buffer. This fixes a security
        // issue on the login page.
        passwordInputElement.dispatchEvent(new Event("input", {bubbles: true}));
    }
})();