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

$(() => {

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

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

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(() => {
        return new Promise(ok => {
            $.ajax({
                url: "/api/access/link",
                type: "POST",
                data: { linkId: code },
                success: data => {
                    window.ReloadAccessList(data);
                    closeLoginPopin();
                    ok();
                },
                error: err => ok(false),
            });
        });
    });
});

function logout(accessId) {
    LoadingTasks.push(() => {
        return new Promise(ok => {
            $.ajax({
                url: `/api/access/${accessId}`,
                type: "DELETE",
                success: data => {
                    window.ReloadAccessList(data);
                    closeLoginPopin();
                    ok();
                },
                error: err => ok(false),
            });
        });
    });
}

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);
        });
    }
}

});