keytracker/frontend/assets/main.js

// === Core functions ===
var api_base = "http://localhost:5000";
var app_token = null;

function do_request(method, url, data, onsuccess, onerror) {
    var req = new XMLHttpRequest();
    req.open(method, window.encodeURI(api_base + url), true);
    req.onload = function() { onsuccess(this); }
    req.setRequestHeader("X-Auth-Token", app_token);
    req.onerror = function() { onerror(this); }
    if (data === null) {
        req.send();
    } else {
        req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
        req.send(data);
    }
}


// == Events ===
function oninit() {
    ui_keyholder_loading();

    if (window.location.href.search("#tracker") < 0 &&
        window.location.href.search("#keyholder") < 0)
        window.location.href = "#tracker"

    app_token = _get_token();

    if (window.location.href.search("#keyholder") > 0)
        keyholder_onload();
    update_key_status();
    load_saved_tracker_data();

    document.getElementById("input-contact").addEventListener("keyup", function(e) {
        if (e.key === "Enter")
            tracker_onsend();
    });
    document.getElementById("input-pass").addEventListener("keyup", function(e) {
        if (e.key === "Enter")
            password_submit();
    });
}

function tracker_onsend(e) {
    ui_tracker_noerror();

    var name = document.getElementById("input-name").value;
    var contact = document.getElementById("input-contact").value;
    var save_data = document.getElementById("input-tracker-save").checked;

    if (name.length < 3 || contact.length < 3) {
        ui_tracker_error("Name und Kontakt müssen mindestens 3 Zeichen lang sein")
        return;
    }

    if (app_token === null) {
        ui_tracker_error("Interner Fehler: kein Token. Bitte stelle sicher, dass du diese Seite durch Scannen den QR Codes erreicht hast");
        return;
    }

    document.getElementById("btn-tracker").classList.add("loading");
    do_request(
        "POST",
        "/claim",
        "name="+window.encodeURI(name)+"&contact="+window.encodeURI(contact),
        function(r) {
            document.getElementById("btn-tracker").classList.remove("loading");
            if (r.status == 200) {
                localStorage.setItem("last_cid", r.response);
                if (save_data) {
                    localStorage.setItem("name", name);
                    localStorage.setItem("contact", contact);
                } else {
                    localStorage.removeItem("name");
                    localStorage.removeItem("contact");
                }
                update_key_status();
            } else {
                ui_tracker_error("Fehlgeschlagen: Status code " + r.status);
                console.log("Claim request failed (Status code)");
                console.log(r);
            }
        },
        function(r) {
            document.getElementById("btn-tracker").classList.remove("loading");
            ui_tracker_error("Fehlgeschlagen: Bitte überprüfe deine Internetverbindung");
            console.log("Claim request failed");
            console.log(r);
        }
    );
}

function keyholder_onload() {
    ui_password_noerror();
    ui_keyholder_noerror();

    do_request(
        "GET",
        "/keyholder",
        null,
        function(r) {
            if (r.status == 200) {
                ui_show_keyholder(JSON.parse(r.response));
            } else if (r.status == 403) {
                ui_request_password();
            } else {
                ui_keyholder_error("Fehlgeschlagen: Status code " + r.status);
                console.log("Keyholder request failed (Status code)");
                console.log(r);
            }
        },
        function(r) {
            ui_keyholder_error("Fehlgeschlagen: Bitte überprüfe deine Internetverbindung");
            console.log("Keyholder request failed");
            console.log(r);
        },
    );
}

function password_submit() {
    ui_password_noerror();
    ui_keyholder_noerror();

    var pass = document.getElementById("input-pass").value;
    var save_token = document.getElementById("input-pass-save").checked;

    document.getElementById("btn-send-pw").classList.add("loading");
    do_request(
        "POST",
        "/auth",
        "pass=" + window.encodeURI(pass),
        function(r) {
            document.getElementById("btn-send-pw").classList.remove("loading");
            if (r.status == 200) {
                app_token = r.response;
                if (save_token)
                    localStorage.setItem("token", app_token);
                else
                    localStorage.removeItem("token");

                ui_keyholder_loading();
                keyholder_onload();

            } else if (r.status == 401) {
                ui_password_error();
            } else {
                ui_keyholder_error("Fehlgeschlagen: Status code " + r.status);
                console.log("Auth request failed (Status code)");
                console.log(r);
            }
        },
        function(r) {
            document.getElementById("btn-send-pw").classList.remove("loading");
            ui_keyholder_error("Fehlgeschlagen: Bitte überprüfe deine Internetverbindung");
            console.log("Auth request failed");
            console.log(r);
        }
    );
}


// === Helper functions ===
function update_key_status() {
    if (localStorage.getItem("last_cid") !== null) {
        do_request(
            "GET",
            "/status/" + localStorage.getItem("last_cid"),
            null,
            function(r) {
                if (r.status == 200 && r.response == "latest")
                    ui_set_has_key();
                else
                    ui_set_has_not_key();
            },
            function(r) { console.log("Status request failed"); console.log(r) }
        );
    }
}

function load_saved_tracker_data() {
    if (localStorage.getItem("name") !== null)
        document.getElementById("input-name").value = localStorage.getItem("name");
    if (localStorage.getItem("contact") !== null)
        document.getElementById("input-contact").value = localStorage.getItem("contact");
}

function _get_token() {
    if (localStorage.getItem("token") === null) {
        // Very dirty parsing as of now
        var params_str = window.location.search;
        if (params_str.search("&") >= 0)
            return null;

        var parts = params_str.split("token=");
        if (parts.length != 2)
            return null
        else
            return parts[1];
    } else {
        return localStorage.getItem("token");
    }
}


// === Ugly UI manipulation code ===
function ui_set_has_key() {
    document.getElementById("has-key").style.display = "inline"
    document.getElementById("btn-tracker").disabled = true
    document.getElementById("input-name").disabled = true
    document.getElementById("input-contact").disabled = true
    document.getElementById("input-tracker-save").disabled = true
    document.getElementById("tracker-formgroup").style.opacity = 0.5
}

function ui_set_has_not_key() {
    document.getElementById("has-key").style.display = "none"
    document.getElementById("btn-tracker").disabled = false
    document.getElementById("input-name").disabled = false
    document.getElementById("input-contact").disabled = false
    document.getElementById("input-tracker-save").disabled = false
    document.getElementById("tracker-formgroup").style.opacity = 1
}

function ui_keyholder_loading() {
    document.getElementById("keyholder-loading").style.display = "block"
    document.getElementById("btn-send-pw").style.display = "none"
    document.getElementById("btn-update").style.display = "none"
    document.getElementById("pass-formgroup").style.display = "none"
    document.getElementById("keyholder-table-container").style.display = "none"
}

function ui_request_password() {
    document.getElementById("keyholder-loading").style.display = "none"
    document.getElementById("btn-send-pw").style.display = "block"
    document.getElementById("btn-update").style.display = "none"
    document.getElementById("pass-formgroup").style.display = "block"
    document.getElementById("keyholder-table-container").style.display = "none"
}

function ui_show_keyholder(keyholder) {
    document.getElementById("keyholder-tbody").innerHTML = "";
    for (var i = 0; i < keyholder.length; i++) {
        var date = new Date(keyholder[i]["timestamp"] * 1000);

        var tr = document.createElement("tr");
        if (i > 0)
            tr.style.color = "#aaa";
        var td_name = document.createElement("td");
        var td_contact = document.createElement("td");
        var td_timestamp = document.createElement("td");
        td_name.appendChild(document.createTextNode(keyholder[i]["name"]));
        td_contact.appendChild(document.createTextNode(keyholder[i]["contact"]));
        td_timestamp.appendChild(document.createTextNode(date.toLocaleString()));
        tr.appendChild(td_name);
        tr.appendChild(td_contact);
        tr.appendChild(td_timestamp);
        document.getElementById("keyholder-tbody").appendChild(tr);
    }

    document.getElementById("keyholder-loading").style.display = "none"
    document.getElementById("btn-send-pw").style.display = "none"
    document.getElementById("btn-update").style.display = "block"
    document.getElementById("pass-formgroup").style.display = "none"
    document.getElementById("keyholder-table-container").style.display = "block"
}

function ui_tracker_error(msg) {
    document.getElementById("tracker-error").innerHTML = msg;
    document.getElementById("tracker-error").style.display = "block";
}

function ui_tracker_noerror(msg) {
    document.getElementById("tracker-error").style.display = "none";
}

function ui_keyholder_error(msg) {
    document.getElementById("keyholder-error").innerHTML = msg;
    document.getElementById("keyholder-error").style.display = "block";
}

function ui_keyholder_noerror(msg) {
    document.getElementById("keyholder-error").style.display = "none";
}

function ui_password_error() {
    document.getElementById("input-pass").classList.add("is-error")
}

function ui_password_noerror() {
    document.getElementById("input-pass").classList.remove("is-error")
}