misc changes I should just finish this

website/helpdesk/static/helpdesk.css

@@ -0,0 +1,109 @@
+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;
+    padding: 1em 2em;
+}
+
+.headerbarTitle {
+    font-size: xx-large;
+    color: black;
+    text-decoration: none;
+}
+
+.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;
+}
+
+.articlecontent {
+    background-color: #fff;
+    padding: 2em;
+    margin: 2em 0 2em;
+    max-width: 100ch;
+}
+
+.articlecontent > h1 {
+    margin: 0 0 0.5em;
+}
+
+.articlecontent > ol > li {
+    margin: 0 0 0.2em;
+}
+
+.articlecontent img {
+    max-width: 100%;
+}
+
+.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/helpdesk/static/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);
+    }
+}

website/helpdesk/templates/article.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Enstrayed Helpdesk - <!--SSR_REPLACE_TITLE--></title>
-    <link rel="stylesheet" href="/static/helpdesk/helpdesk.css">
-    <script src="/static/helpdesk/login.js"></script>
+    <link rel="stylesheet" href="/helpdesk/static/helpdesk.css">
+    <script src="/helpdesk/static/login.js"></script>
 </head>
 <body>
     

website/helpdesk/templates/landing.html

@@ -4,13 +4,13 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Enstrayed Helpdesk</title>
-    <link rel="stylesheet" href="/static/helpdesk/helpdesk.css">
-    <script src="/static/helpdesk/login.js"></script>
+    <link rel="stylesheet" href="/helpdesk/static/helpdesk.css">
+    <script src="/helpdesk/static/login.js"></script>
 </head>
 <body>
     
     <div class="headerbar">
-        <h1>Enstrayed Helpdesk</h1>
+        <a href="/helpdesk" class="headerbarTitle">Enstrayed Helpdesk</a>
         <a href="/helpdesk/ticket/new">Open Ticket</a>
         <a href="/helpdesk/articles">Knowledgebase</a>
         

website/helpdesk/templates/newticket.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Enstrayed Helpdesk: New Ticket</title>
-    <link rel="stylesheet" href="/static/helpdesk/helpdesk.css">
-    <script src="/static/helpdesk/login.js"></script>
+    <link rel="stylesheet" href="/helpdesk/static/helpdesk.css">
+    <script src="/helpdesk/static/login.js"></script>
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             document.getElementById('formSelection').value = 'none'
@@ -29,8 +29,8 @@
 <body>
     
     <div class="headerbar">
-        <h1>Enstrayed Helpdesk</h1>
-        <a href="/helpdesk">Main Page</a>
+        <a href="/helpdesk" class="headerbarTitle">Enstrayed Helpdesk</a>
+        <a>Open Ticket</a>
         <a href="/helpdesk/articles">Knowledgebase</a>
         
         <div class="headerbarright">