photochamber-webserver/static/public/js/uiAccess.js

$(() => {

document.getElementById("menu-login").addEventListener("click", e => {
    e.preventDefault();
    document.body.classList.add("login-visible")
    document.body.classList.add("overlay-visible");
});

function closeLoginPopin() {
    if (!document.body.classList.contains("login-visible"))
        return;
    document.body.classList.remove("login-visible");
    document.body.classList.remove("overlay-visible");
    let inputFields = document.querySelectorAll(".login-wrapper .input-group input");
    for (let i =0; i < inputFields.length; ++i)
        inputFields[i].value = "";
}

document.onClosePopinRequested(() => {
    closeLoginPopin();
});

document.querySelector(".login-wrapper .modal-footer button").addEventListener("click", () => closeLoginPopin());

let loginUserPass = document.getElementById("login-userpass");
let loginCode = document.getElementById("login-code");

loginUserPass.querySelector("button").addEventListener("click", () => {
    let user = loginUserPass.querySelector("input[type='text']").value;
    let pass = loginUserPass.querySelector("input[type='password']").value;
    console.log([user, pass]);
});

loginCode.querySelector("button").addEventListener("click", () => {
    let code = loginCode.querySelector("input").value;
    if (!code)
        return;
    LoadingTasks.push(async () => {
        await AccessManager.LinkLogin(new Set([code]));
        closeLoginPopin();
    });
});

async function logout(accessId, linkId) {
    await AccessManager.Logout(linkId);
    closeLoginPopin();
}

window.ReloadAccessList = function(accessList) {
    let getIconForType = type => {
        if (!!type.linkId) return "bi-link-45deg";
        if (!!type.userName) return "bi-person";
        return "bi-question-octagon";
    }

    let rootNode = document.getElementById("accessListMenu");
    let items = rootNode.querySelectorAll("li.accessItem");
    for (let i =0; i < items.length; ++i)
        items[i].remove();
    if (Object.keys(accessList||{}).length) {
        let li = document.createElement("li");
        li.classList.add("accessItem");
        li.classList.add("divider");
        let hr = document.createElement("hr");
        hr.classList.add("dropdown-divider");
        li.appendChild(hr);
        rootNode.appendChild(li);
    }
    for (let i in accessList) {
        const accessTextValue = accessList[i].linkId;

        let li = document.createElement("li");
        li.classList.add("accessItem");
        li.classList.add("dropdown-item");
        let a = document.createElement("a");
        let typeIcon = document.createElement("span");
        typeIcon.innerHTML = "&nbsp;";
        typeIcon.classList = 'type bi '+getIconForType(accessList[i]);
        let accessText = document.createElement("span");
        accessText.innerText = accessTextValue;
        let logoutIcon = document.createElement("span");
        logoutIcon.innerHTML = "&nbsp;";
        logoutIcon.classList = 'logout bi bi-box-arrow-right'
        a.appendChild(typeIcon);
        a.appendChild(accessText);
        a.appendChild(logoutIcon);
        li.appendChild(a);
        rootNode.appendChild(li);
        a.addEventListener("click", e => {
            e.preventDefault();
            if (!window.confirm("Logout account " +accessTextValue +" ?"))
                return;
            logout(i, accessList[i].linkId);
        });
    }
}

});