error handling for login; partial adminpanel infrastructure

6 files changed, 48 insertions, 13 deletions

diff --git a/frontend/adminpanel.ts b/frontend/adminpanel.ts
new file mode 100644
index 0000000..aef7a31
--- /dev/null
+++ b/frontend/adminpanel.ts
@@ -0,0 +1,28 @@
+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/helper.ts b/frontend/helper.ts
index 879d322..827a204 100644
--- a/frontend/helper.ts
+++ b/frontend/helper.ts
@@ -11,14 +11,14 @@ interface Opts<E> {
     href?: string,
     method?: string,
     placeholder?: string,
-    onclick?: (e: E) => void,
-    onchange?: (e: E) => void,
+    onclick?: (e: Event) => void,
+    onchange?: (e: Event) => void,
 }
 
 function apply_opts<E extends HTMLElement>(e: E, o: Opts<E>) {
     if (o.id) e.id = o.id
-    if (o.onclick) e.onclick = () => o.onclick!(e)
-    if (o.onchange) e.onchange = () => o.onchange!(e)
+    if (o.onclick) e.onclick = ev => o.onclick!(ev)
+    if (o.onchange) e.onchange = ev => o.onchange!(ev)
     // TODO can we do this properly?
     if (o.for) (e as unknown as HTMLLabelElement).htmlFor = o.for
     if (o.type && (e instanceof HTMLInputElement || e instanceof HTMLLinkElement)) e.type = o.type
diff --git a/frontend/pwmodal.ts b/frontend/pwmodal.ts
index 3d783c6..594db49 100644
--- a/frontend/pwmodal.ts
+++ b/frontend/pwmodal.ts
@@ -1,15 +1,16 @@
 import { e } from "./helper.ts"
-
-export let username: string | undefined = undefined;
-export let password: string | undefined = undefined;
+import { tryLoadAdminPanel } from "./adminpanel.ts"
 
 export function pw_modal() {
     const inp_name  = e("input", {type: "text",     placeholder: "Username"})
     const inp_pw    = e("input", {type: "password", placeholder: "Password"})
+    const error_msg = e("span", {class: "error-msg"}, "")
     const login_btn = e("button", {
-        onclick: () => {
-            username = inp_name.value
-            password = inp_pw.value
+        onclick: ev => {
+            ev.preventDefault()
+            tryLoadAdminPanel(inp_name.value, inp_pw.value).catch(err => {
+                error_msg.textContent = err
+            })
         }
     }, "Login")
 
@@ -18,6 +19,7 @@ export function pw_modal() {
             inp_name,
             inp_pw,
             login_btn,
+            error_msg,
         )
     )
 }
diff --git a/frontend/style.sass b/frontend/style.sass
index c0a7a5f..5828f41 100644
--- a/frontend/style.sass
+++ b/frontend/style.sass
@@ -149,3 +149,8 @@ a
     transition: color 0.2s
     &:hover
         color: $ac-light
+
+span.error-msg
+    margin-left: 1em
+    color: #ffe600
+    font-size: 0.8em
diff --git a/makefile b/makefile
index 510c397..8aea40d 100644
--- a/makefile
+++ b/makefile
@@ -2,11 +2,11 @@ ESFLAGS = --target=esnext --format=esm
 
 deploy-dir: deploy deploy/bundle.js deploy/style.css deploy/index.html deploy/fastbangs
 
-.PHONY: watch clean deploy-dir
+.PHONY: watch-script watch-style clean deploy-dir
 watch-script: frontend/fuzzysort.js
 	esbuild frontend/main.ts --bundle --outfile=deploy/bundle.js $(ESFLAGS) --watch
 watch-style:
-	while true; do inotifywait -e modify -e move frontend/style.sass; make deploy/style.css; done
+	while true; do make deploy/style.css; inotifywait -e modify -e move frontend/style.sass; done
 
 clean:
 	stack clean --full
diff --git a/src/Auth.hs b/src/Auth.hs
index 397dd75..df97e8b 100644
--- a/src/Auth.hs
+++ b/src/Auth.hs
@@ -14,7 +14,7 @@ import Yesod
 ensureAuth :: MonadHandler m => m ()
 ensureAuth = lookupBasicAuth >>= \case
     Nothing -> notAuthenticated
-    Just (user, pw) -> unless (hashSha512 pw == hardcodedPw && user == "bleb") notAuthenticated
+    Just (user, pw) -> unless (hashSha512 pw == hardcodedPw && user == "bleb") $ permissionDenied "Wrong username/password"
   where hashSha512 pw = convertToBase Base64 $ (hash $ encodeUtf8 pw :: Digest SHA512)
         hardcodedPw :: ByteString
         hardcodedPw = "l2gTDo5UCimSIQcdK4IrAvJtCIE7KPB7IyS5N7EN4ic78/1mI+8pikPTQTn06+W1XTOk39TgqGEX5KfpAQVm4w=="