From 393ce37b7fc9eb7c995410fe895fd470752ee7ac Mon Sep 17 00:00:00 2001
From: Oliver Bryan <04oliverbryan@gmail.com>
Date: Mon, 22 Dec 2025 19:18:35 +0000
Subject: [PATCH] converted login/register form to an actual html form

this allows the return key to submit the form easily
---
 .../frontend/src/components/login-form.tsx    | 147 ++++++++++--------
 todo.md                                       |   1 -
 2 files changed, 80 insertions(+), 68 deletions(-)

diff --git a/packages/frontend/src/components/login-form.tsx b/packages/frontend/src/components/login-form.tsx
index 7882a35..0ecdb29 100644
--- a/packages/frontend/src/components/login-form.tsx
+++ b/packages/frontend/src/components/login-form.tsx
@@ -136,81 +136,94 @@ export default function LogInForm() {
         setError("");
     };
 
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (mode === "login") {
+            logIn();
+        } else {
+            register();
+        }
+    };
+
     return (
         <div>
-            <div
-                className={cn(
-                    "flex flex-col gap-2 items-center border p-6 pb-4",
-                    error !== "" && "border-destructive",
-                )}
-            >
-                <span className="text-xl mb-2">{capitalise(mode)}</span>
+            <form onSubmit={handleSubmit}>
+                <div
+                    className={cn(
+                        "flex flex-col gap-2 items-center border p-6 pb-4",
+                        error !== "" && "border-destructive",
+                    )}
+                >
+                    <span className="text-xl mb-2">{capitalise(mode)}</span>
 
-                {mode === "register" && (
+                    {mode === "register" && (
+                        <Field
+                            label="Full Name"
+                            onChange={(e) => {
+                                if (e.target.value !== "") setNameInvalid("");
+                                else setNameInvalid("Cannot be empty");
+                                setName(e.target.value);
+                            }}
+                            invalidMessage={nameInvalid}
+                        />
+                    )}
                     <Field
-                        label="Full Name"
+                        label="Username"
                         onChange={(e) => {
-                            if (e.target.value !== "") setNameInvalid("");
-                            else setNameInvalid("Cannot be empty");
-                            setName(e.target.value);
+                            if (e.target.value !== "") setUsernameInvalid("");
+                            else setUsernameInvalid("Cannot be empty");
+                            setUsername(e.target.value);
                         }}
-                        invalidMessage={nameInvalid}
+                        invalidMessage={usernameInvalid}
+                    />
+                    <Field
+                        label="Password"
+                        onChange={(e) => {
+                            if (e.target.value !== "") setPasswordInvalid("");
+                            else setPasswordInvalid("Cannot be empty");
+                            setPassword(e.target.value);
+                        }}
+                        invalidMessage={passwordInvalid}
+                        hidden={true}
                     />
-                )}
-                <Field
-                    label="Username"
-                    onChange={(e) => {
-                        if (e.target.value !== "") setUsernameInvalid("");
-                        else setUsernameInvalid("Cannot be empty");
-                        setUsername(e.target.value);
-                    }}
-                    invalidMessage={usernameInvalid}
-                />
-                <Field
-                    label="Password"
-                    onChange={(e) => {
-                        if (e.target.value !== "") setPasswordInvalid("");
-                        else setPasswordInvalid("Cannot be empty");
-                        setPassword(e.target.value);
-                    }}
-                    invalidMessage={passwordInvalid}
-                    hidden={true}
-                />
 
-                {mode === "login" ? (
-                    <>
-                        <Button variant={"outline"} onClick={logIn} type={"submit"}>
-                            Log in
-                        </Button>
-                        <Button
-                            className="text-xs hover:underline p-0"
-                            variant={"dummy"}
-                            onClick={() => {
-                                setMode("register");
-                                resetForm();
-                            }}
-                        >
-                            I don't have an account
-                        </Button>
-                    </>
-                ) : (
-                    <>
-                        <Button variant={"outline"} onClick={register} type={"submit"}>
-                            Register
-                        </Button>
-                        <Button
-                            className="text-xs hover:underline p-0"
-                            variant={"dummy"}
-                            onClick={() => {
-                                setMode("login");
-                                resetForm();
-                            }}
-                        >
-                            I already have an account
-                        </Button>
-                    </>
-                )}
-            </div>
+                    {mode === "login" ? (
+                        <>
+                            <Button variant={"outline"} type={"submit"}>
+                                Log in
+                            </Button>
+                            <Button
+                                className="text-xs hover:underline p-0"
+                                variant={"dummy"}
+                                type="button"
+                                onClick={() => {
+                                    setMode("register");
+                                    resetForm();
+                                }}
+                            >
+                                I don't have an account
+                            </Button>
+                        </>
+                    ) : (
+                        <>
+                            <Button variant={"outline"} type={"submit"}>
+                                Register
+                            </Button>
+                            <Button
+                                className="text-xs hover:underline p-0"
+                                variant={"dummy"}
+                                type="button"
+                                onClick={() => {
+                                    setMode("login");
+                                    resetForm();
+                                }}
+                            >
+                                I already have an account
+                            </Button>
+                        </>
+                    )}
+                </div>
+            </form>
             <div className="flex items-end justify-end w-full text-xs -mb-4">
                 {error !== "" ? (
                     <Label className="text-destructive text-sm">{error}</Label>
diff --git a/todo.md b/todo.md
index abe63a0..190c05a 100644
--- a/todo.md
+++ b/todo.md
@@ -1,4 +1,3 @@
-- make the login form submittable by pressing return
 - user settings/profile page
 - organisations system
 - create organisation