drinks-manager/app/static/js/login.js

(() => {

    // Define variables
    let usernameInputElement;
    let passwordInputElement;
    let submitButton;
    let passwordOverlayElement;
    let pwOverlayCancelButton;
    let userlistButtons;
    let pinpadButtons;
    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("passwordoverlaycontainer");
        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");
        userlistContainerElement.classList.add("nodisplay");
    }

    function hide_password_overlay() {
        passwordOverlayElement.classList.add("nodisplay");
        userlistContainerElement.classList.remove("nodisplay");
        passwordInputElement.value = "";
    }

})()