FeDirect/static/add_an_instance.mts

// This file handles the "Add an instance" dialog

export function parseHost(host: string): { host: string, secure: boolean } | null {
    let parsedInstance = URL.parse(host);
    parsedInstance ??= URL.parse("https://" + host);
    if (!parsedInstance?.host) return null;
    if (!/https?:/.test(parsedInstance.protocol)) return null;
    return {
        host: parsedInstance.host,
        secure: parsedInstance.protocol === "https:"
    };
}

export function initializeAddInstanceDialog(
    dialog: HTMLDialogElement,
    callback: (
        host: string,
        secure: boolean,
        autoQueryMetadata: boolean,
    ) => void
): {
    showAddInstanceDialog: () => void,
    hideAddInstanceDialog: () => void,
} {
    const showAddInstanceDialog = () => dialog.showModal();
    const hideAddInstanceDialog = () => dialog.close();

    const form = dialog.querySelector(".addInstanceForm");
    if (!(form instanceof HTMLFormElement))
        throw new Error(".addInstanceForm isn't a form");

    const instanceHost = form.querySelector("#instanceHost");
    if (!(instanceHost instanceof HTMLInputElement))
        throw new Error("#instanceHost isn't an input");

    instanceHost.addEventListener("input", e => {
        if (parseHost(instanceHost.value) === null)
            instanceHost.setCustomValidity("Invalid instance hostname or URL");
        else
            instanceHost.setCustomValidity("");
    });

    const autoQueryMetadata = form.querySelector("#autoQueryMetadata");
    if (!(autoQueryMetadata instanceof HTMLInputElement))
        throw new Error("#autoQueryMetadata isn't an input");

    form.addEventListener("submit", e => {
        // A sane browser doesn't allow for submitting the form if the above validation fails
        const { host, secure } = parseHost(instanceHost.value)!;
        callback(host, secure, autoQueryMetadata.checked);
        form.reset();
    });

    const closeButton = form.querySelector(".close");
    if (!(closeButton instanceof HTMLButtonElement))
        throw new Error(".close isn't a button");

    closeButton.addEventListener("click", e => hideAddInstanceDialog());

    return {
        showAddInstanceDialog,
        hideAddInstanceDialog
    };
}