1 files changed, 98 insertions, 0 deletions
diff --git a/Server.Client/Pages/Component/Titlebar.razor b/Server.Client/Pages/Component/Titlebar.razor
new file mode 100644
index 0000000..521fb46
--- /dev/null
+++ b/Server.Client/Pages/Component/Titlebar.razor
@@ -0,0 +1,98 @@
+@inject IJSRuntime jsRuntime
+@inject NavigationManager nav
+@inject HBSession session;
+@* @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>
+
+@if(!IsLoginPage) {
+	<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> *@
+		<a class="desktop" href="javascript:;">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/> *@
+} else {
+	<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
+                @bind=Username/>
+			<input id="password" placeholder="Password" type="password" @bind=Password/>
+		</form>
+		<a @onclick=Login>Login</a>
+	</div>
+}
+
+@code {
+    // private AboutDialog aboutDialog;
+
+    public string Username { get; set; } = "";
+    public string Password { get; set; } = "";
+
+    private bool IsLoginPage =>
+        new Uri(nav.Uri).AbsolutePath.Equals("/Login", StringComparison.OrdinalIgnoreCase);
+
+    private async void Login() {
+        await session.LoginAsync(Username, Password);
+    }
+}