From d7a87f54bb93d77993f7be63c0fc530d2bf8bed4 Mon Sep 17 00:00:00 2001
From: CnF-Gris <chricchio.risi@icloud.com>
Date: Mon, 30 Jun 2025 20:06:47 +0000
Subject: [PATCH] Added UI to handle login and registration

---
 src/routes/app/login/+page.svelte    | 53 ++++++++++++++++++++++++++++
 src/routes/app/register/+page.svelte | 52 +++++++++++++++++++++++++++
 2 files changed, 105 insertions(+)
 create mode 100644 src/routes/app/login/+page.svelte
 create mode 100644 src/routes/app/register/+page.svelte

diff --git a/src/routes/app/login/+page.svelte b/src/routes/app/login/+page.svelte
new file mode 100644
index 0000000..42ca939
--- /dev/null
+++ b/src/routes/app/login/+page.svelte
@@ -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}
+
+
diff --git a/src/routes/app/register/+page.svelte b/src/routes/app/register/+page.svelte
new file mode 100644
index 0000000..969dee9
--- /dev/null
+++ b/src/routes/app/register/+page.svelte
@@ -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}
+
+