Nekomata/FeDirect
Nekomata/FeDirect
2
2
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

AddInstance dialog, fixed

Browse source 
This time with less technical debt!
This commit is contained in:
CenTdemeern1 2025-01-13 06:59:58 +01:00
parent 028f4b8a05
commit 8e6a2d20b4
3 changed files with 79 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
static/add_an_instance.mts Normal file
View file

@ -0,0 +1,54 @@
// 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;
return {
host: parsedInstance.host,
secure: parsedInstance.protocol === "https:"
};
}
export function initializeAddInstanceDialog(dialog: HTMLDialogElement): {
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("");
});
form.addEventListener("submit", async e => {
// A sane browser doesn't allow for submitting the form if the above validation fails
const { host, secure } = parseHost(instanceHost.value)!;
console.log(
await fetch(`/api/instance_info/${secure}/${encodeURI(host)}`).then(r => r.json())
);
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
};
}

21
static/crossroad.html
View file

@ -9,9 +9,12 @@
</head> </head>
<body> <body>
<script type="module" src="/static/crossroad.mjs"></script> <script type="module">
Object.assign(globalThis, await import("/static/crossroad.mjs"));
getMainDialog().show(); // Don't show until the page is ready
</script>
<div class="flex-vcenter"> <div class="flex-vcenter">
<dialog open> <dialog id="mainDialog">
<h1>FeDirect</h1> <h1>FeDirect</h1>
<p>By Nekomata</p> <p>By Nekomata</p>
<form> <form>
@ -20,14 +23,20 @@
Instances and stuff go here! Instances and stuff go here!
</label> </label>
</form> </form>
<br /> <br>
<button onclick="document.getElementById('addInstance').showModal()">Add an instance</button> <button onclick="showAddInstanceDialog()">Add an instance</button>
</dialog> </dialog>
</div> </div>
<dialog id="addInstance"> <dialog id="addInstance">
<h1>Add an instance</h1> <h1>Add an instance</h1>
<form method="dialog"> <form method="dialog" class="addInstanceForm">
<button>OK</button> <label for="instanceHost">Instance hostname or URL<br>
(for example <code>mastodon.social</code> or <code>https://kitsunes.club/</code>)<br>
</label>
<input id="instanceHost" type="text" name="instanceHost" />
<br>
<button type="submit">OK</button>
<button type="reset" class="close">Cancel</button>
</form> </form>
</dialog> </dialog>
</body> </body>

10
static/crossroad.mts
View file

@ -1,5 +1,15 @@
import { initializeAddInstanceDialog } from "./add_an_instance.mjs";
import knownSoftware from "./known_software.mjs"; import knownSoftware from "./known_software.mjs";
import storageManager from "./storage_manager.mjs"; import storageManager from "./storage_manager.mjs";
console.log(knownSoftware); console.log(knownSoftware);
console.log(storageManager.storage.instances); console.log(storageManager.storage.instances);
export function getMainDialog(): HTMLDialogElement {
return document.getElementById('mainDialog') as HTMLDialogElement;
}
const dialog = document.querySelector("#addInstance");
if (!(dialog instanceof HTMLDialogElement))
throw new Error("Couldn't find addInstance dialog");
export const { showAddInstanceDialog, hideAddInstanceDialog } = initializeAddInstanceDialog(dialog);