Instance host & secure fields

static/add_an_instance.mts

@@ -4,6 +4,7 @@ export function parseHost(host: string): { host: string, secure: boolean } | nul
     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:"

static/confirm_instance_details.mts

@@ -9,6 +9,8 @@ export function initializeInstanceDetailsDialog(dialog: HTMLDialogElement): {
     hideInstanceDetailsDialog: () => void,
     populateInstanceDetailsDialog: (
         instanceNameValue: string,
+        instanceHostValue: string,
+        instanceHostSecureValue: boolean,
         instanceSoftwareValue: string,
         instanceIconValue: string | null
     ) => void,
@@ -24,6 +26,14 @@ export function initializeInstanceDetailsDialog(dialog: HTMLDialogElement): {
     if (!(instanceName instanceof HTMLInputElement))
         throw new Error("#instanceName isn't an input");
 
+    const instanceHost = form.querySelector("#instanceHost");
+    if (!(instanceHost instanceof HTMLInputElement))
+        throw new Error("#instanceHost isn't an input");
+
+    const instanceHostSecure = form.querySelector("#instanceHostSecure");
+    if (!(instanceHostSecure instanceof HTMLInputElement))
+        throw new Error("#instanceHostSecure isn't an input");
+
     const instanceSoftware = form.querySelector("#instanceSoftware");
     if (!(instanceSoftware instanceof HTMLSelectElement))
         throw new Error("#instanceSoftware isn't a select");
@@ -41,12 +51,17 @@ export function initializeInstanceDetailsDialog(dialog: HTMLDialogElement): {
 
     const populateInstanceDetailsDialog = (
         instanceNameValue: string,
+        instanceHostValue: string,
+        instanceHostSecureValue: boolean,
         instanceSoftwareValue: string,
         instanceIconValue: string | null
     ) => {
         instanceName.value = instanceNameValue;
+        instanceHost.value = instanceHostValue;
+        instanceHostSecure.checked = instanceHostSecureValue;
         instanceSoftware.value = instanceSoftwareValue;
         instanceIcon.src = instanceIconValue ?? blankImage;
+
     };
 
     form.addEventListener("submit", e => {

static/crossroad.html

@@ -65,7 +65,19 @@ We do not track or save any requests or data.">
                 <div class="half-width">
                     <label for="instanceName">Instance name</label>
                     <br>
-                    <input id="instanceName" type="text" name="instanceName" />
+                    <input id="instanceName" type="text" name="instanceName" required />
+                    <br><br>
+                    <label for="instanceHost">Instance hostname</label>
+                    <br>
+                    <input id="instanceHost" type="text" name="instanceHost" required />
+                    <br>
+                    <input type="checkbox" name="instanceHostSecure" id="instanceHostSecure" checked />
+                    <label for="instanceHostSecure">
+                        <abbr title="Whether to use HTTPS (as opposed to HTTP).
+Unchecking this is not recommended, and this option only exists for exceptional cases">
+                            Secure?
+                        </abbr>
+                    </label>
                     <br><br>
                     <label for="instanceSoftware">Instance software</label>
                     <br>

static/crossroad.mts

@@ -24,10 +24,8 @@ const addInstanceDialogCallback = async (
     secure: boolean,
     autoQueryMetadata: boolean,
 ) => {
-    if (!autoQueryMetadata) {
+    try {
-        showInstanceDetailsDialog();
+        if (!autoQueryMetadata) throw new Error("Don't");
-        return;
-    }
         const { name, software, iconURL } =
             await fetch(`/api/instance_info/${secure}/${encodeURI(host)}`)
                 .then(r => r.json());
@@ -37,8 +35,11 @@ const addInstanceDialogCallback = async (
             || !(typeof iconURL === "string" || iconURL === null)
         )
             throw new Error("Invalid API response");
-    populateInstanceDetailsDialog(name, software, iconURL as string | null);
+        populateInstanceDetailsDialog(name, host, secure, software, iconURL as string | null);
+    } finally {
+        populateInstanceDetailsDialog("", host, secure, "", null);
         showInstanceDetailsDialog();
+    }
 }
 
 const addDialog = document.querySelector("#addInstance");

static/image.mts

@@ -0,0 +1,15 @@
+export function resize(image: HTMLImageElement, width: number = 16, height: number = 16): string {
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    canvas.style.display = "none";
+    document.body.appendChild(canvas);
+    const ctx = canvas.getContext("2d");
+    if (ctx === null) throw Error("Resize failed");
+    const w = Math.min(image.width / image.height, 1) * width;
+    const h = Math.min(image.height / image.width, 1) * height;
+    ctx.drawImage(image, (width - w) / 2, (height - h) / 2, w, h);
+    const url = canvas.toDataURL();
+    document.body.removeChild(canvas);
+    return url;
+}