this codebase is kindof a mess now

website/static/helpdesk/helpdesk.css

@@ -0,0 +1,83 @@
+html {
+    font-family: 'Segoe UI Variable', sans-serif;
+
+    background-color: #282828;
+}
+
+body {
+    margin: 0;
+    display: grid;
+    grid-template-rows: auto 1fr;
+    grid-template-columns: 1fr;
+    height: 100vh;
+}
+
+.headerbar {
+    background-color: #fff;
+    padding: 0 2em 0 2em;
+    display: flex;
+    flex-direction: row;
+    gap: 2em;
+    align-items: center;
+}
+
+
+.headerbarright {
+    margin-left: auto;
+}
+
+.maincontent {
+    display: grid;
+    place-items: center;
+}
+
+.cardrow {
+    display: flex;
+    flex-direction: row;
+    gap: 2em;
+}
+
+.cardrow > div, .newticketmaincontent {
+    background-color: #fff;
+    padding: 2em;
+}
+
+.newticketmaincontent {
+    min-width: 80ch;
+    max-width: 80ch;
+}
+
+.cardrow > div > h1 {
+    margin: 0 0 0.5em 0;
+}
+
+.linkColumn {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+}
+
+a, a:link {
+    color: #366FFF;
+}
+
+a > img {
+    margin-right: 0.2em;
+}
+
+dialog {
+    padding: 2em;
+    border: none;
+}
+
+dialog > h2, .newticketmaincontent > h2 {
+    margin: 0 0 0.5em 0;
+}
+
+dialog > button {
+    float: right;
+}
+
+dialog::backdrop {
+    background-color: rgba(0, 0, 0, 0.5);
+}

website/static/helpdesk/login.js

@@ -0,0 +1,54 @@
+var globalLoggedIn = false
+
+function useGlobalDialog(title,body) {
+    document.getElementById("globalDialogHeader").innerText = title
+    document.getElementById("globalDialogText").innerText = body
+    document.getElementById("globalDialog").showModal()
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+    fetch(`/api/auth/whoami`).then(fetchRes => {
+        fetchRes.json().then(jsonRes => {
+            if (jsonRes.loggedIn) {
+                globalLoggedIn = true
+                document.getElementById("loginButton").innerText = `Logout ${jsonRes.username}`
+            } else {
+                globalLoggedIn = false
+                document.getElementById("loginButton").innerText = `Login`
+            }
+        })
+    })
+})
+
+function loginFunction() {
+    if (globalLoggedIn === true) {
+        fetch(`/api/auth/logout`).then(fetchRes => {
+            if (fetchRes.status === 200) {
+                globalLoggedIn = false
+                document.getElementById("loginButton").innerText = `Login`
+            } else {
+                fetchRes.text().then(textRes => {
+                    useGlobalDialog("Error", `An error occurred during logout: ${textRes}`)
+                })
+            }
+        })
+    } else {
+        let loginWindow = window.open(`/api/auth/login?state=close`, `_blank`)
+        let loginWatcher = setInterval(() => {
+            if (loginWindow.closed) {
+                fetch(`/api/auth/whoami`).then(fetchRes => {
+                    fetchRes.json().then(jsonRes => {
+                        if (jsonRes.loggedIn) {
+                            globalLoggedIn = true
+                            document.getElementById("loginButton").innerText = `Logout ${jsonRes.username}`
+                        } else {
+                            useGlobalDialog("Error", `You are not logged in. Please try logging in again.`)
+                        }
+                        clearInterval(loginWatcher);
+                    })
+                })
+
+            }
+        }, 500);
+    }
+}