1 files changed, 87 insertions, 0 deletions
diff --git a/Pages/Component/Titlebar.razor b/Pages/Component/Titlebar.razor
new file mode 100644
index 0000000..48257b2
--- /dev/null
+++ b/Pages/Component/Titlebar.razor
@@ -0,0 +1,87 @@
+@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">
+            <p class="mobile">HyperBooru</p>
+            <a class="mobile menu-button" href="javascript:toggleMobileMenu();">&#x2630</a>
+
+			<a class="desktop" href="/">Home</a>
+			<a class="desktop" href="/TagDefinitions">Tags</a>
+			<a class="desktop" href="/Gallery?ingest=true">Ingest</a>
+			<a class="desktop" href="/Upload">Upload</a>
+			<a class="desktop" href="javascript:;" @onclick=@(() => aboutDialog.Show())>About</a>
+
+			<p class="desktop" id="nsfw-label">NSFW</p>
+			<div id="nsfw-switch" class="desktop">
+				<NsfwSwitch/>
+			</div>
+			<form action="/Gallery" method="get" class="desktop">
+				<input type="text" name="q" placeholder="Search"/>
+			</form>
+			<a class="desktop" 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"
+					autocorrect="off"
+					autocapitalize="off"
+					autocomplete="off"
+                    autofocus/>
+                <input id="password" placeholder="Password" type="password"/>
+            </form>
+            <a href="javascript:login();">Login</a>
+        </div>
+    </NotAuthorized>
+</AuthorizeView>
+
+@code {
+    private AboutDialog aboutDialog;
+}