From 21c5c3b58fa3246b6188cc317d2cd0523b8ff3a7 Mon Sep 17 00:00:00 2001
From: cspark <git@cspark.dev>
Date: Mon, 15 Apr 2024 11:42:20 +0100
Subject: [PATCH] Implement basic client side form logic

---
 src/pages/Login.tsx | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 52ce1c7..d65a993 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -1,13 +1,39 @@
 import * as React from "react";
 
 export default function Login() {
+  const [usernameValue, setUsernameValue] = React.useState("");
+  function handleUsernameChange(eventData) {
+    setUsernameValue(eventData.target.value);
+  }
+
+  function onUsernameInputDefocus(formEvent) {
+    console.log("Down");
+  }
+
+  function onLoginSubmit(formEvent) {
+    formEvent.preventDefault();
+
+    const formData = new FormData(formEvent.target);
+    console.log(formData);
+  }
+
   return (
     <>
       <div className="centeredBoxArea">
         <div id="loginBox">
           <div id="loginBoxContents">
             <h1>Login</h1>
-            <input value="Hi"></input>
+            <form onSubmit={onLoginSubmit}>
+              <input
+                type="text"
+                name="username"
+                value={usernameValue}
+                onChange={handleUsernameChange}
+                onBlur={onUsernameInputDefocus}
+              ></input>
+              <input type="password" name="password"></input>
+              <button type="submit">Login</button>
+            </form>
           </div>
         </div>
       </div>