diff options
Diffstat (limited to 'Pages/Component')
| -rw-r--r-- | Pages/Component/RedirectLogin.razor | 6 | ||||
| -rw-r--r-- | Pages/Component/Titlebar.razor | 77 | ||||
| -rw-r--r-- | Pages/Component/Titlebar.razor.css | 79 |
3 files changed, 162 insertions, 0 deletions
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; +} |