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