Added UI to handle login and registration

This commit is contained in:
CnF-Gris 2025-06-30 20:06:47 +00:00
parent b62d101a88
commit d7a87f54bb
2 changed files with 105 additions and 0 deletions

View File

@ -0,0 +1,53 @@
<script lang="ts">
import { redirect } from "@sveltejs/kit";
let error = $state("")
async function loginButton(event: SubmitEvent) {
event.preventDefault()
const form = event.target as HTMLFormElement
const username : string | null = form.username.value
const password : string | null = form.password.value
// UGLY: standardize
const jsonPayload = {
username: username,
password: password
}
const res = await fetch(
"/api/login",
{
method: "POST",
body: JSON.stringify(jsonPayload)
}
)
if (res.status != 200) {
error = res.statusText
}
redirect(302, "/app/program")
}
</script>
<h1>Login</h1>
<form action="" onsubmit={loginButton} >
<input name="username" type="text" required minlength="4" autocomplete="username" />
<input name="password" type="password" required minlength="8" autocomplete="current-password" />
<input type="submit">
</form>
{#if (error.length !== 0)}
<span>{error}</span>
{/if}

View File

@ -0,0 +1,52 @@
<script lang="ts">
import { redirect } from "@sveltejs/kit";
let error = $state("")
async function registerButton(event: SubmitEvent) {
event.preventDefault()
const form = event.target as HTMLFormElement
const username : string | null = form.username.value
const password : string | null = form.password.value
// UGLY: standardize
const jsonPayload = {
username: username,
password: password
}
const res = await fetch(
"/api/register",
{
method: "POST",
body: JSON.stringify(jsonPayload)
}
)
if (res.status != 201) {
error = res.statusText
}
}
</script>
<h1>Register</h1>
<form action="" onsubmit={registerButton} >
<input name="username" type="text" required minlength="4" autocomplete="username" />
<input name="password" type="password" required minlength="8" autocomplete="new-password" />
<input name="confirm-password" type="password" required minlength="8" autocomplete="new-password" />
<input type="submit">
</form>
{#if (error.length !== 0)}
<span>{error}</span>
{/if}