locutus/www/res/js/locutus.js

"use strict";

let main, windows;
let defaultLocation = '/welcome';

let token = "";
let domain = "";
let dest = "";

function createWelcomeWindow() {
    let win = document.createElement("div");
    win.id = "welcome-win";

    win.innerHTML = `
        <h1>Welcome to Locutus!</h1>
        <a href="#/login" class="button">Login</a>`;

    while (windows.lastChild) windows.removeChild(windows.lastChild);
    windows.appendChild(win);
}

function createChatWindow() {
    let win = document.createElement("div");
    win.id = "chat-win";

    win.innerHTML = `
        <div id="message-win">
            <p>Test Message</p>
        </div>
        <input id="sendMessage" name="message" placeholder="Very important message..." type="text">
    `;

    win.getElementById("sendMessage").addEventListener("keyup", (evt) => {
        if (evt.keyCode === 13) {
            evt.preventDefault();
            //TODO: Send Message
        }
    });


    main.appendChild(win);
}

async function sendEvent(message) {
    let res = await fetch(dest, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `usimp ${token}`,
        },
        body: message
    });

    let result = await res;
    alert(result.message);
}


function createLoginWindow() {
    let win = document.createElement("div");
    win.id = "login-win";

    win.innerHTML = `
        <h1>Login to USIMP Account</h1>
        <form>
            <input name="account" placeholder="Account name" type="text" required/>
            <input name="domain" placeholder="Domain" type="text" pattern="([a-zA-Z0-9_-]+\\.)+[a-zA-Z]{2,}" required/>
            <input name="password" placeholder="Password" type="password" required/>
            <button type="submit">Login</button>
        </form>`;

    win.getElementsByTagName("form")[0].addEventListener("submit", (evt) => {
        evt.preventDefault();
        let form = evt.target;
        for (let e of form) e.disabled = true;

        for (let d of form.getElementsByTagName("div")) {
            form.removeChild(d);
        }

        function formError(msg) {
            let div = document.createElement("div");
            div.classList.add("error");
            div.innerText = msg;
            form.appendChild(div);
        }

        usimp.lookup(form.domain.value)
            .then(res => {
                if (res.ok) {
                    res.json()
                        .then(data => {
                            console.log(data["domain"]);
                            let domainServer = usimp.chooseDomainServer(data["domain_servers"]);
                            console.log(domainServer);
                            dest = "http://" + domainServer.host + ':' + domainServer.protocols.http + "/"

                            usimp.login(domainServer, data["domain"].id, form.elements["account"].value, form.elements["password"].value)
                                .then(res => res.json())
                                .then(data => {
                                    token = data.token;
                                    console.log(data.token);
                                })

                        })
                        .catch(reason => {
                            console.error(reason);
                            formError("Could not communicate with USIMP domain");
                        })
                } else {
                    document.getElementsByName("domain")[0].setAttribute("invalid", "invalid");
                    formError("Invalid USIMP domain");
                }
            })
            .catch(reason => {
                document.getElementsByName("domain")[0].setAttribute("invalid", "invalid");
                formError("Invalid USIMP domain");
            })
            .finally(() => {
                for (let e of form) e.disabled = false;
            });
    });

    while (windows.lastChild) windows.removeChild(windows.lastChild);
    windows.appendChild(win);

    document.getElementsByName("domain")[0].addEventListener("input", (evt) => {
        evt.target.removeAttribute("invalid");
    });

    document.getElementsByName("account")[0].focus();
}

function handleHash(hash) {
    if (hash[0] === '#') hash = hash.substr(1);

    switch (hash) {
        case "/welcome": createWelcomeWindow(); break;
        case "/login": createLoginWindow(); break;
        default:
            console.warn(`Invalid url hash #${hash}`);
            history.replaceState(null, null, `#${defaultLocation}`);
            handleHash(defaultLocation)
            return;
    }

    let url = new URL(document.URL);
    url.hash = hash;
    location.href = url.toString();
}

function handleUrl(url) {
    handleHash(new URL(url).hash);
}

window.addEventListener("DOMContentLoaded", (evt) => {
    main = document.getElementsByTagName("main")[0];
    windows = document.getElementById("windows");

    // Remove <noscript> tag
    document.getElementsByTagName("noscript")[0].remove();

    handleUrl(document.URL)
});

window.addEventListener("hashchange", (evt) => {
    handleUrl(evt.newURL);
});