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 +++++++++++++++++++++++++++++++++++++
 Pages/Gallery.razor                 |  1 +
 Pages/Login.razor                   | 17 ++++++++
 Pages/Login.razor.css               |  6 +++
 Pages/TagDefinitions.razor          |  1 +
 Pages/Upload.razor                  |  1 +
 Pages/ViewMedia.razor               |  1 +
 9 files changed, 189 insertions(+)
 create mode 100644 Pages/Component/RedirectLogin.razor
 create mode 100644 Pages/Component/Titlebar.razor
 create mode 100644 Pages/Component/Titlebar.razor.css
 create mode 100644 Pages/Login.razor
 create mode 100644 Pages/Login.razor.css

(limited to 'Pages')

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;
+}
diff --git a/Pages/Gallery.razor b/Pages/Gallery.razor
index 7e183f2..d473c28 100644
--- a/Pages/Gallery.razor
+++ b/Pages/Gallery.razor
@@ -6,6 +6,7 @@
 @inject IUserService userService
 @inject IJSRuntime jsRuntime
 @implements IDisposable
+@attribute [Authorize]
 
 <PageTitle>@Title</PageTitle>
 
diff --git a/Pages/Login.razor b/Pages/Login.razor
new file mode 100644
index 0000000..723a78a
--- /dev/null
+++ b/Pages/Login.razor
@@ -0,0 +1,17 @@
+@page "/Login"
+@inject NavigationManager navigationManager
+
+<PageTitle>HyperBooru Login</PageTitle>
+
+<div/>
+
+@code {
+    [CascadingParameter]
+    public Task<AuthenticationState> AuthenticationState{ get; set; }
+
+    protected override void OnInitialized() {
+        var authState = AuthenticationState.GetAwaiter().GetResult();
+        if(authState!.User.Identity?.IsAuthenticated ?? false)
+            navigationManager.NavigateTo("/");
+    }
+}
\ No newline at end of file
diff --git a/Pages/Login.razor.css b/Pages/Login.razor.css
new file mode 100644
index 0000000..fc8c8ca
--- /dev/null
+++ b/Pages/Login.razor.css
@@ -0,0 +1,6 @@
+div {
+    background: url('/images/loginbg.webp');
+    filter:     brightness(0.6);
+    height:     100%;
+    width:      100%;
+}
\ No newline at end of file
diff --git a/Pages/TagDefinitions.razor b/Pages/TagDefinitions.razor
index 1a29b40..f728631 100644
--- a/Pages/TagDefinitions.razor
+++ b/Pages/TagDefinitions.razor
@@ -3,6 +3,7 @@
 @inject ITagService tagService
 @inject IUserService userService
 @implements IDisposable
+@attribute [Authorize]
 
 <PageTitle>Tag Definitions</PageTitle>
 
diff --git a/Pages/Upload.razor b/Pages/Upload.razor
index 7f7980b..614cec0 100644
--- a/Pages/Upload.razor
+++ b/Pages/Upload.razor
@@ -1,4 +1,5 @@
 @page "/Upload"
+@attribute [Authorize]
 
 <div id="dropzone">
     <p>Drag a file to upload it<br/>or click to select one or more file(s)</p>
diff --git a/Pages/ViewMedia.razor b/Pages/ViewMedia.razor
index 7823c75..444fbc5 100644
--- a/Pages/ViewMedia.razor
+++ b/Pages/ViewMedia.razor
@@ -4,6 +4,7 @@
 @inject IDbContextFactory<HBContext> dbFactory
 @inject ITagService tagService
 @inject IMediaService mediaService
+@attribute [Authorize]
 
 <PageTitle>@title</PageTitle>
 
-- 
cgit v1.3