From 5565be07f8d8d473759315fd99747c64e2ce3450 Mon Sep 17 00:00:00 2001
From: Jake Mannens <jake@asger.xyz>
Date: Fri, 15 Sep 2023 10:31:20 +1000
Subject: Completed initial login functionality

---
 Pages/Component/Titlebar.razor | 77 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 Pages/Component/Titlebar.razor

(limited to 'Pages/Component/Titlebar.razor')

diff --git a/Pages/Component/Titlebar.razor b/Pages/Component/Titlebar.razor
new file mode 100644
index 0000000..8033413
--- /dev/null
+++ b/Pages/Component/Titlebar.razor
@@ -0,0 +1,77 @@
+@inject IJSRuntime jsRuntime
+@inject IUserService userService
+
+<script suppress-error="BL9992">
+    async function login() {
+        var username = document.querySelector('input#username');
+        var password = document.querySelector('input#password');
+
+        var formData = new FormData();
+        formData.append('username', username.value);
+        formData.append('password', password.value);
+
+        var resp = await fetch('/Login', {
+            method: 'POST',
+            body: formData
+        });
+
+        if(resp.ok) {
+            window.location.href = '/';
+        } else if(resp.status == 403) {
+            var form = document.querySelector('form.login');
+            form.classList.remove('bad-login');
+            @* TODO: improve this hacky method of triggering reflow *@
+            form.offsetWidth;
+            form.classList.add('bad-login');
+            username.value = password.value = null;
+            username.focus();
+        } else {
+            alert('Unknown error while attempting to login!');
+        }
+    }
+
+    async function logout() {
+        var resp = await fetch('/Logout', { method: 'POST' });
+        if(resp.ok) {
+            window.location.href = '/Login';
+        } else {
+            alert('Error logging out!');
+        }
+    }
+</script>
+
+<AuthorizeView>
+    <Authorized>
+        <div id="navbar">
+            <a href="/">Home</a>
+            <a href="/TagDefinitions">Tags</a>
+            <a href="/Gallery?ingest=true">Ingest</a>
+            <a href="/Upload">Upload</a>
+            <a href="javascript:;" @onclick=@(() => aboutDialog.Show())>About</a>
+
+            <p id="nsfw-label">NSFW</p>
+            <div id="nsfw-switch">
+                <NsfwSwitch/>
+            </div>
+            <form action="/Gallery" method="get">
+                <input type="text" name="q" placeholder="Search"/>
+            </form>
+            <a href="javascript:logout();">Logout</a>
+        </div>
+        <AboutDialog @ref=aboutDialog/>
+    </Authorized>
+    <NotAuthorized>
+        <div id="navbar">
+            <h2>Login</h2>
+            <form class="login" action="javascript:login();">
+                <input id="username" placeholder="Username" type="text"/>
+                <input id="password" placeholder="Password" type="password"/>
+            </form>
+            <a href="javascript:login();">Login</a>
+        </div>
+    </NotAuthorized>
+</AuthorizeView>
+
+@code {
+    private AboutDialog aboutDialog;
+}
-- 
cgit v1.3