PoC for modularity and WIP built-in Micropub client rework

This is the living, breathing proof that Kittybox can be split into
independent components without sacrificing any functionality. Just
make sure all neccesary backing storage components are available to
the modules that need them.

Also the Micropub client was split into several files, because it's
about to get much bigger and more full-featured.

Yes, I am going to write it in vanilla JavaScript. I don't trust
anything from NPM to run on my computer. Not anymore. Not after the
node-ipc malware fiasco. And I am definitely not going to spin up a VM
or a Docker container (who uses Docker containers as a security
measure?) to hack on my own code.

Cargo can at least be sandboxed inside Nix, where it can't do much
harm. NPM basically requires unrestricted network access to download
dependencies, and it runs arbitrary code upon **downloading**
them. Cargo and rust-analyzer, on the other hand, can be configured to
not trust the source code and its dependencies (for example, Cargo
doesn't execute code on fetching dependencies - only on building, and
rust-analyzer's proc-macro expansion support can be sacrificed for
more security).

1 files changed, 70 insertions, 0 deletions

diff --git a/kittybox-rs/companion-lite/main.js b/kittybox-rs/companion-lite/main.js
new file mode 100644
index 0000000..da7e6e1
--- /dev/null
+++ b/kittybox-rs/companion-lite/main.js
@@ -0,0 +1,70 @@
+import { query_channels, submit } from "./micropub_api.js";
+
+function get_token() {
+    return form.elements.access_token.value
+}
+
+const form = document.getElementById("micropub");
+const channel_select_radio = document.getElementById("select_channels");
+
+channel_select_radio.onclick = async () => {
+    const channels = await query_channels(form.action, get_token())
+    if (channels !== undefined) {
+        populate_channel_list(channels)
+    }
+}
+
+const no_channel_radio = document.getElementById("no_channel");
+no_channel_radio.onclick = () => {
+    document.getElementById("channels").style.display = "none";
+    const channel_list = document.getElementById("channels_target")
+    channel_list.innerHTML = "";
+}
+
+function construct_body(form) {
+    return {
+        type: ["h-entry"],
+        properties: {
+            content: [form.elements.content.value],
+            name: form.elements.name.value ? [form.elements.name.value] : undefined,
+            category: form.elements.category.value ? form.elements.category.value.split(",").map(val => val.trim()) : undefined,
+            channel: form.elements.channel_select.value ?  Array.from(form.elements.channel).map(i => i.checked ? i.value : false).filter(i => i) : undefined
+        }
+    }
+}
+
+function populate_channel_list(channels) {
+    document.getElementById("channels").style.display = "block";
+    const channel_list = document.getElementById("channels_target")
+    channel_list.innerHTML = "";
+    channels.forEach((channel) => {
+        const template = document.getElementById("channel_selector").content.cloneNode(true)
+        const input = template.querySelector("input")
+        const label = template.querySelector("label")
+        input.id = `channel_selector_option_${channel.uid}`
+        input.value = channel.uid
+        label.for = input.id
+        label.innerHTML = `<a href="${channel.uid}">${channel.name}</a>`
+
+        channel_list.appendChild(template)
+    })
+}
+
+form.onsubmit = async (event) => {
+    event.preventDefault()
+    const mf2 = construct_body(form);
+    console.log(JSON.stringify(mf2));
+    try {
+        submit(form.action, get_token(), mf2)
+    } catch (e) {
+        // TODO show errors to user
+
+        return
+    }
+    form.clear()
+}
+
+document.getElementById("authorized").style.display = "block";
+// Local Variables:
+// js-indent-level: 4
+// End: