From 25f87ba9a6ea365315804b6714602c4b6f842f60 Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Wed, 17 Jan 2024 18:11:24 -0800
Subject: [PATCH] feat: add submit form function

---
 frontend/src/routes/login/+page.svelte | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
index 90f0bb71..c4bd36cd 100644
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -3,13 +3,26 @@
 
 	let username: string = "";
 	let password: string = "";
+	$: formValid = username.length > 0 && password.length > 0;
+
+	/**
+	 * Gets run on button "Login" or form submit (pressing enter)
+	 * @todo add login logic with tokens and making a request to the backend
+	 */
+	function submitForm() {
+		if (!formValid) return;
+
+		console.log("submitted");
+		console.table({ username, password });
+	}
 </script>
 
-<form on:submit|preventDefault class="flex gap-4 flex-col">
+<form on:submit={submitForm} class="flex gap-5 flex-col">
 	<div>
 		<Label for="username">Username</Label>
 		<Input
 			id="username"
+			style="width: 300px;"
 			bind:value={username}
 			placeholder="Enter your username..."
 		/>
@@ -20,15 +33,13 @@
 		<Input
 			type="password"
 			id="password"
+			style="width: 300px;"
 			bind:value={password}
 			placeholder="Enter your password..."
 		/>
 	</div>
 
-	<Button
-		type="submit"
-		on:click={() => {
-			console.log("hit submit", password, username);
-		}}>Login</Button
-	>
+	<div>
+		<Button size="lg" type="submit" disabled={!formValid}>Login</Button>
+	</div>
 </form>