Finish login form with components

wretched-machines-frontend/src/app/(auth)/login/page.tsx

@@ -1,8 +1,48 @@
+"use client"
+
+import Form from "@/components/ui/form";
+import { FormLabel, FormSubmitInput, FormTextInput } from "@/components/ui/form-input";
+import { ChangeEvent, useState } from "react";
+
 const Login = () => {
+
+    const [inputData, setInputData] = useState({
+        "email": "",
+        "password": ""
+    });
+
+    const handleAction = (formData: FormData) => {
+        console.log(formData.get("email") + " " + formData.get("password"));
+    }
+
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+        e.preventDefault();
+        setInputData({
+            ...inputData,
+            [e.target.name]: e.target.value
+        });
+    }
+
     return (
-        <nav>
+        <main className="flex min-h-screen flex-col items-center justify-between p-24">
-            Test
+            <div className="w-full max-w-xs">
-        </nav>
+                <Form className="shadow-md rounded px-8 pt-6 pb-8 mb-4" formAction={handleAction}>
+                <div className="mb-4">
+                    <FormLabel className="block text-gray-700 text-sm font-bold mb-2" name={"email"}></FormLabel>
+                    <FormTextInput className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="email..." type="email" name="email" value={inputData.email} onChangeHandler={handleChange}>Test</FormTextInput>
+                </div>
+                <div className="mb-6">
+                    <FormLabel className="block text-gray-700 text-sm font-bold mb-2" name={"password"}></FormLabel>
+                    <FormTextInput className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="password..." type="password" name="password" value={inputData.password} onChangeHandler={handleChange}>Test</FormTextInput>
+                    <p className="text-red-500 text-xs italic">Please choose a password.</p>
+                </div>
+                <div className="flex items-center justify-between">
+                    <FormSubmitInput className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" name="submit" onSubmitHandler={undefined} value={"Sign In"}></FormSubmitInput>
+                </div>
+                </Form>
+            </div>
+
+        </main>
     );
 }
 

wretched-machines-frontend/src/components/ui/form-input.tsx

@@ -0,0 +1,45 @@
+interface FormTextInputProps {
+    value: string,
+    name: string,
+    onChangeHandler: React.ChangeEventHandler<HTMLInputElement>,
+    type: "text" | "password" | "email",
+    children?: React.ReactNode,
+    className?: string,
+    placeholder?: string
+}
+
+interface FormSubmitInputProps {
+    name: string,
+    value: string | undefined,
+    onSubmitHandler: React.FormEventHandler<HTMLInputElement> | undefined,
+    children?: React.ReactNode,
+    className?: string
+}
+
+interface FormLabelProps {
+    name: string,
+    className?: string
+}
+
+const FormLabel = (props: FormLabelProps) => {
+    const label = props.name.charAt(0).toUpperCase() + props.name.slice(1);
+    return(<label className={props.className} htmlFor={props.name}>{label}</label>);
+}
+
+const FormTextInput = (props: FormTextInputProps) => {
+    return(      
+            <input className={props.className} type={props.type} name={props.name} value={props.value} placeholder={props.placeholder} onChange={props.onChangeHandler}></input>
+    );
+}
+
+const FormSubmitInput = (props: FormSubmitInputProps) => {
+    return(
+            <input className={props.className} type="submit" name={props.name} value={props.value} onSubmit={props.onSubmitHandler}>{props.children}</input>
+    );
+}
+
+export {
+    FormTextInput,
+    FormSubmitInput,
+    FormLabel
+};

wretched-machines-frontend/src/components/ui/form.tsx

@@ -0,0 +1,17 @@
+import React from "react"
+
+interface FormProps {
+    children: React.ReactNode,
+    formAction: ((formData: FormData) => void),
+    className?: string
+}
+
+const Form = (props: FormProps) => {
+    return(
+        <form className={props.className} action={props.formAction}>
+            {props.children}
+        </form>
+    );
+}
+
+export default Form

wretched-machines-frontend/src/components/ui/navbar.tsx

@@ -16,6 +16,9 @@ const Navbar = () => {
             <Link href="/demos">
                 <div>Demos</div>
             </Link>
+            <Link href="/login">
+                <div>Login</div>
+            </Link>
         </div>
     );
 }