[web] Improve login page

This commit is contained in:
orosmatthew 2023-08-26 11:22:43 -04:00
parent efeb27516b
commit fcc23d5da9
6 changed files with 95 additions and 43 deletions

View File

@ -1,3 +1,17 @@
<script lang="ts">
import { goto } from '$app/navigation';
async function onLogout() {
const res = await fetch('/logout', { method: 'POST' });
if (res.status === 200) {
const resData = await res.json();
if (resData.success === true) {
goto('/login');
}
}
}
</script>
<header style="font-size: 24px" class="mt-2 d-flex align-items-center justify-content-center"> <header style="font-size: 24px" class="mt-2 d-flex align-items-center justify-content-center">
<ul class="nav col-12 col-md-auto justify-content-center"> <ul class="nav col-12 col-md-auto justify-content-center">
<li><a href="/admin" class="nav-link px-2">Home</a></li> <li><a href="/admin" class="nav-link px-2">Home</a></li>
@ -7,7 +21,7 @@
<li><a href="/admin/scoreboard" class="nav-link px-2">Scoreboards</a></li> <li><a href="/admin/scoreboard" class="nav-link px-2">Scoreboards</a></li>
<li><a href="/admin/teams" class="nav-link px-2">Teams</a></li> <li><a href="/admin/teams" class="nav-link px-2">Teams</a></li>
<li><a href="/admin/contests" class="nav-link px-2">Contests</a></li> <li><a href="/admin/contests" class="nav-link px-2">Contests</a></li>
<li><a href="/logout" class="nav-link px-2" data-sveltekit-preload-data="off">Logout</a></li> <li><button on:click={onLogout} class="nav-link px-2">Logout</button></li>
</ul> </ul>
</header> </header>
<hr /> <hr />

View File

@ -4,13 +4,16 @@ import { attemptLogin } from '$lib/server/auth';
export const actions = { export const actions = {
login: async ({ cookies, request }) => { login: async ({ cookies, request }) => {
const data = await request.formData(); const data = await request.formData();
const username = data.get('username')?.toString(); const formUsername = data.get('username');
const password = data.get('password')?.toString(); const formPassword = data.get('password');
if (!username || !password) { if (formUsername === null || formPassword === null) {
return { success: false }; return { success: false, message: 'Incomplete form data' };
} }
if ((await attemptLogin(cookies, username, password)) !== true) { if (
return { success: false }; (await attemptLogin(cookies, formUsername.toString().trim(), formPassword.toString())) !==
true
) {
return { success: false, message: 'Invalid login' };
} else { } else {
return { success: true }; return { success: true };
} }

View File

@ -1,37 +1,73 @@
<script lang="ts"> <script lang="ts">
import { browser } from '$app/environment';
import { enhance } from '$app/forms'; import { enhance } from '$app/forms';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import type { ActionData } from './$types'; import type { Actions } from './$types';
export let form: ActionData; import { slide, fly } from 'svelte/transition';
$: if (browser) { export let form: Actions;
if (form && form.success) {
goto('/admin/reviews'); let dismissed = false;
$: if (form) {
if (form.success) {
goto('/admin');
} }
dismissed = false;
} }
</script> </script>
<div class="mt-4 row justify-content-center"> <div transition:fly|global={{ y: -50 }} class="container login-modal bg-body-tertiary">
<div class="col-4"> <h1 class="mt-3 text-center">BW Contest Admin</h1>
<h1>Login</h1> {#if form && !dismissed}
<form method="POST" action="?/login" use:enhance> <div
<label for="username_field" class="form-label">Username</label> transition:slide|global
<input type="text" name="username" class="form-control" id="username_field" /> class={`mt-4 alert alert-dismissible alert-${form.success ? 'success' : 'danger'}`}
>
<label for="password_field" class="form-label">Password</label> {form.success ? 'Success' : form.message ?? 'Unknown Error'}
<input type="password" name="password" class="form-control" id="password_field" /> <button
on:click={() => {
<div class="mt-2"> dismissed = true;
}}
type="button"
class="btn-close"
aria-label="Close"
/>
</div>
{/if}
<form class="mt-4" action="?/login" method="POST" use:enhance>
<div class="form-floating">
<input
name="username"
type="text"
class="form-control"
id="usernameInput"
placeholder="Username"
/>
<label for="usernameInput">Username</label>
</div>
<div class="mt-4 form-floating">
<input
name="password"
type="password"
class="form-control"
id="passwordInput"
placeholder="Password"
/>
<label for="passwordInput">Password</label>
</div>
<div class="d-flex flex-row mt-4 mb-4 justify-content-end">
<button type="submit" class="btn btn-primary">Login</button> <button type="submit" class="btn btn-primary">Login</button>
</div> </div>
</form> </form>
<div class="mt-2">
{#if form?.success}
<div class="alert alert-success" role="alert">Success!</div>
{:else if form && !form.success}
<div class="alert alert-danger" role="alert">Invalid login</div>
{/if}
</div>
</div>
</div> </div>
<style>
.login-modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
border-radius: 10px;
}
</style>

View File

@ -1,8 +0,0 @@
import { redirect } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';
import { logout } from '$lib/server/auth';
export const load = (async ({ cookies }) => {
await logout(cookies);
throw redirect(302, '/login');
}) satisfies PageServerLoad;

View File

@ -1 +0,0 @@
<h1>Logging Out</h1>

View File

@ -0,0 +1,8 @@
import { logout } from '$lib/server/auth';
import { json } from '@sveltejs/kit';
import type { RequestHandler } from './$types';
export const POST = (async ({ cookies }) => {
await logout(cookies);
return json({ success: true });
}) satisfies RequestHandler;