Implement basic client side form logic

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>