functional, but only partly styled admin site

1 files changed, 71 insertions, 0 deletions

diff --git a/frontend/admin.ts b/frontend/admin.ts
new file mode 100644
index 0000000..cdc8d32
--- /dev/null
+++ b/frontend/admin.ts
@@ -0,0 +1,71 @@
+import { e } from "./helper.ts"
+
+interface PendingBang {
+    bang: string,
+    name: string,
+    url: string,
+    email: string | undefined,
+}
+
+async function sendVerdict(user: string, pw: string, b: PendingBang,
+                     accept: boolean, info_block: HTMLDivElement)
+{
+    let err = await fetch(accept? "/acceptBang" : "/rejectBang", {
+        headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json",
+            Authorization: "Basic " + btoa(`${user}:${pw}`),
+        },
+        method: "POST",
+        body: JSON.stringify(b)
+    }).then(_ => null).catch(e => "" + e)
+
+    // TODO the error isn't styled, but this should only very rarely happen anyway,
+    // so it's very low priority
+    if (err)
+        info_block.appendChild(e("p", {}, "Something went wrong: " + await err))
+    else
+        info_block.remove()
+    // TODO in the accept case, we should try invalidating the browser cache
+    // for /bangs.json. My idea is to make a HEAD request to let the browser
+    // see that the etag has changed; idk of that works
+}
+
+export async function tryLoadAdminPanel(user: string, pw: string) {
+    const r = await fetch("/pendingBangs", {
+        headers: {
+            Accept: "application/json",
+            Authorization: "Basic " + btoa(`${user}:${pw}`),
+        }
+    })
+    if (!r.ok)
+        throw (await r.json()).message
+
+    const pending = await r.json() as PendingBang[]
+
+    // it doesn't make sense to use a special url for the admin panel, as reloading
+    // the page logs the user out anyway
+    //@ts-ignore HTMLCollectionOf is an iterator
+    for (const e of [...document.getElementsByTagName("section")]) e.remove()
+
+    document.body.appendChild(e("section", {}, ...pending.map(b => {
+        const btn_accept = e("button", {class: "pending-accept"}, "Accept")
+        const btn_reject = e("button", {class: "pending-reject"}, "Reject")
+
+        let r = e("div", {class: "pending-block"},
+            e("span", {class: "pending-info"},
+                e("p", {}, "!" + b.bang),
+                e("p", {}, b.name),
+                e("p", {}, b.url),
+                ...(b.email? [e("p", {}, b.email)] : [])
+            ),
+            btn_accept,
+            btn_reject,
+        )
+
+        btn_accept.addEventListener("click", () => sendVerdict(user, pw, b,  true, r))
+        btn_reject.addEventListener("click", () => sendVerdict(user, pw, b, false, r))
+
+        return r
+    })))
+}