Added UI to handle login and registration
This commit is contained in:
parent
b62d101a88
commit
d7a87f54bb
53
src/routes/app/login/+page.svelte
Normal file
53
src/routes/app/login/+page.svelte
Normal 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}
|
||||||
|
|
||||||
|
|
||||||
52
src/routes/app/register/+page.svelte
Normal file
52
src/routes/app/register/+page.svelte
Normal 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}
|
||||||
|
|
||||||
|
|
||||||
Loading…
x
Reference in New Issue
Block a user