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/RedirectLogin.razor |  6 +++
 Pages/Component/Titlebar.razor      | 77 ++++++++++++++++++++++++++++++++++++
 Pages/Component/Titlebar.razor.css  | 79 +++++++++++++++++++++++++++++++++++++
 3 files changed, 162 insertions(+)
 create mode 100644 Pages/Component/RedirectLogin.razor
 create mode 100644 Pages/Component/Titlebar.razor
 create mode 100644 Pages/Component/Titlebar.razor.css

(limited to 'Pages/Component')

diff --git a/Pages/Component/RedirectLogin.razor b/Pages/Component/RedirectLogin.razor
new file mode 100644
index 0000000..290a7ac
--- /dev/null
+++ b/Pages/Component/RedirectLogin.razor
@@ -0,0 +1,6 @@
+@inject NavigationManager navigationManager
+
+@code {
+    protected override void OnInitialized() =>
+        navigationManager.NavigateTo("/Login", true);
+}
\ No newline at end of file
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;
+}
diff --git a/Pages/Component/Titlebar.razor.css b/Pages/Component/Titlebar.razor.css
new file mode 100644
index 0000000..ea10740
--- /dev/null
+++ b/Pages/Component/Titlebar.razor.css
@@ -0,0 +1,79 @@
+div#navbar {
+    align-items:   center;
+    background:    var(--col-navbar-bg);
+    box-shadow:    rgba(0, 0, 0, 0.5) 0px 10px 10px;
+    display:       flex;
+    height:        59px;
+    z-index:       100;
+}
+
+div#navbar > h2 {
+    margin-left: 20px;
+}
+
+div#navbar > a {
+    align-items: center;
+    color:       white;
+    display:     flex;
+    height:      100%;
+    padding:     0 20px 0 20px;
+}
+
+div#navbar > a:hover {
+    background: rgba(255, 255, 255, 0.4);
+    filter:     none;
+}
+
+div#navbar > a:active {
+    background: #fff;
+    color:      var(--col-navbar-bg);
+}
+
+p#nsfw-label {
+    align-self:  center;
+    font-size:   9pt;
+    margin-left: auto;
+}
+
+div#nsfw-switch {
+    align-self:  center;
+    margin-left: 10px;
+}
+
+form {
+    display:   flex;
+    margin:    0 20px 0 20px;
+    min-width: 30%;
+}
+
+form.login {
+    margin-left: auto;
+}
+
+form.login.bad-login {
+    animation-iteration-count: 3;
+    animation-timing-function: linear;
+    animation:                 bad-login 0.2s;
+}
+
+@keyframes bad-login {
+      0% { transform: translateX(0);     }
+     33% { transform: translateX(-20px); }
+     66% { transform: translateX(+20px); }
+    100% { transform: translateX(0);     }
+}
+
+input[type="text"], input[type="password"] {
+    align-self:    center;
+    background:    var(--col-bg);
+    border-radius: 0;
+    color:         white;
+    font-size:     12pt;
+    height:        40px !important;
+    margin:        0;
+    width:         100%;
+}
+
+input[type="password"] {
+    margin-left: 20px;
+}
-- 
cgit v1.3