Added logon page

2 files changed, 143 insertions, 0 deletions

diff --git a/Pages/Component/Titlebar.razor b/Pages/Component/Titlebar.razor
new file mode 100644
index 0000000..71f3bd0
--- /dev/null
+++ b/Pages/Component/Titlebar.razor
@@ -0,0 +1,64 @@
+@inject IUserService userService
+@inject NavigationManager navigationManager
+@inject IJSRuntime jsRuntime
+
+@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>
+
+        <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 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();
+        }
+    </script>
+}
+
+@code {
+    private bool authorized = false;
+
+    private string username;
+    private string password;
+
+    private AboutDialog aboutDialog;
+
+    private void Login() {
+        if(userService.Login(username, password))
+            navigationManager.NavigateTo("/");
+        else
+            WarnBadLogin();
+    }
+
+    private void WarnBadLogin() {
+        jsRuntime.InvokeVoidAsync("warnBadLogin");
+        username = password = "";
+    }
+}
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;
+}