FeDirect/static/add_an_instance.mts

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

import { findButtonOrFail, findFormOrFail, findInputOrFail } from "./dom.mjs";

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 = findFormOrFail(dialog, ".addInstanceForm");
    const instanceHost = findInputOrFail(form, "#instanceHost");
    const autoQueryMetadata = findInputOrFail(form, "#autoQueryMetadata");
    const closeButton = findButtonOrFail(form, ".close");

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

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

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

    return {
        showAddInstanceDialog,
        hideAddInstanceDialog
    };
}