Finished initial implementation of login page

1 files changed, 67 insertions, 48 deletions

diff --git a/Pages/Component/Titlebar.razor b/Pages/Component/Titlebar.razor
index 71f3bd0..bcd5f61 100644
--- a/Pages/Component/Titlebar.razor
+++ b/Pages/Component/Titlebar.razor
@@ -1,64 +1,83 @@
 @inject IUserService userService
 @inject NavigationManager navigationManager
 @inject IJSRuntime jsRuntime
+@inject AuthenticationStateProvider authStateProvider
 
-@if(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>
+<script suppress-error="BL9992">
+    async function login() {
+        var username = document.querySelector('input#username');
+        var password = document.querySelector('input#password');
 
-        <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:;" @onclick=userService.Logout>Logout</a>
-    </div>
-    <AboutDialog @ref=aboutDialog/>
-} else {
-    <div id="navbar">
-        <h2>Login</h2>
-        <form @onsubmit=Login class="login">
-            <input @bind=username name="username" placeholder="Username" type="text"/>
-            <input @bind=password name="password" placeholder="Password" type="password"/>
-        </form>
-        <a href="javascript:;" @onclick=Login>Login</a>
-        <a href="javascript:;" @onclick=userService.Logout>Logout</a>
-    </div>
-    <script suppress-error="BL9992">
-        function warnBadLogin() {
+        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) {
+            if(document.referrer) {
+                window.location.href = document.referrer;
+            } else {
+                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');
-            document.querySelector('form.login input').focus();
+            username.value = password.value = null;
+            username.focus();
+        } else {
+            alert('Unknown error while attempting to login!');
         }
-    </script>
-}
-
-@code {
-    private bool authorized = false;
+    }
 
-    private string username;
-    private string password;
+    async function logout() {
+        var resp = await fetch('/Logout', { method: 'POST' });
+        if(resp.ok) {
+            window.location.href = '/Login';
+        } else {
+            alert('Error logging out!');
+        }
+    }
+</script>
 
-    private AboutDialog aboutDialog;
+<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>
 
-    private void Login() {
-        if(userService.Login(username, password))
-            navigationManager.NavigateTo("/");
-        else
-            WarnBadLogin();
-    }
+            <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 onsubmit="login" class="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>
 
-    private void WarnBadLogin() {
-        jsRuntime.InvokeVoidAsync("warnBadLogin");
-        username = password = "";
-    }
+@code {
+    private AboutDialog aboutDialog;
 }