functional, but only partly styled admin site

5 files changed, 102 insertions, 30 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
+    })))
+}
diff --git a/frontend/adminpanel.ts b/frontend/adminpanel.ts
deleted file mode 100644
index aef7a31..0000000
--- a/frontend/adminpanel.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { e } from "./helper.ts"
-
-let user: string | undefined = undefined
-let pw:   string | undefined = undefined
-
-interface PendingBang {
-    bang: string,
-    name: string,
-    url: string,
-    email: string | undefined,
-}
-
-export async function tryLoadAdminPanel(user_: string, pw_: string) {
-    user = user_
-    pw = pw_
-
-    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[]
-    console.log(pending)
-}
diff --git a/frontend/pwmodal.ts b/frontend/pwmodal.ts
index 594db49..a20a79f 100644
--- a/frontend/pwmodal.ts
+++ b/frontend/pwmodal.ts
@@ -1,5 +1,5 @@
 import { e } from "./helper.ts"
-import { tryLoadAdminPanel } from "./adminpanel.ts"
+import { tryLoadAdminPanel } from "./admin.ts"
 
 export function pw_modal() {
     const inp_name  = e("input", {type: "text",     placeholder: "Username"})
diff --git a/frontend/start.ts b/frontend/start.ts
index 614d04b..6a82af6 100644
--- a/frontend/start.ts
+++ b/frontend/start.ts
@@ -96,7 +96,7 @@ function setSearchResults(ul: HTMLElement, input: HTMLInputElement, submit: () =
         })
     }
 
-    bangsSearch.then(fs => {
+    bangsSearch!.then(fs => {
         ul.innerHTML = ""
         const results = fs(input.value)
 
diff --git a/frontend/style.sass b/frontend/style.sass
index 5828f41..3e0c6ab 100644
--- a/frontend/style.sass
+++ b/frontend/style.sass
@@ -3,6 +3,9 @@ $ac-dark: #452273
 $light:    rgb(255, 116, 227)
 $ac-light: rgb(217,  99, 193)
 
+$accept: #0f0
+$reject: #f00
+
 body
     background-color: $dark
     margin: 0px
@@ -102,6 +105,32 @@ section.admin-btn
         position: absolute
         right: 10%
 
+div.pending-block
+    display: flex
+    margin: 1em
+    align-items: center
+    span
+        display: inline-block
+    button
+        transition: background-color 0.2s, color 0.2s
+        border-radius: 0.5em
+
+        &.pending-accept
+            background-color: black
+            color: $accept
+            border: 1px solid $accept
+            &:hover
+                background-color: $accept
+                color: black
+
+        &.pending-reject
+            background-color: black
+            color: $reject
+            border: 1px solid $reject
+            &:hover
+                background-color: $reject
+                color: black
+
 dialog
     background-color: $dark
     button