ob/sprint
1
0
Fork 0
mirror of https://github.com/hex248/sprint.git synced 2026-02-08 02:33:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

converted login/register form to an actual html form

Browse Source 
this allows the return key to submit the form easily
This commit is contained in:
Oliver Bryan
2025-12-22 19:18:35 +00:00
parent ef7e2fcf2e
commit 393ce37b7f
2 changed files with 80 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
packages/frontend/src/components/login-form.tsx
View File

@@ -136,81 +136,94 @@ export default function LogInForm() {
setError(""); setError("");
}; };
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (mode === "login") {
logIn();
} else {
register();
}
};
return ( return (
<div> <div>
<div <form onSubmit={handleSubmit}>
className={cn( <div
"flex flex-col gap-2 items-center border p-6 pb-4", className={cn(
error !== "" && "border-destructive", "flex flex-col gap-2 items-center border p-6 pb-4",
)} error !== "" && "border-destructive",
> )}
<span className="text-xl mb-2">{capitalise(mode)}</span> >
<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 <Field
label="Full Name" label="Username"
onChange={(e) => { onChange={(e) => {
if (e.target.value !== "") setNameInvalid(""); if (e.target.value !== "") setUsernameInvalid("");
else setNameInvalid("Cannot be empty"); else setUsernameInvalid("Cannot be empty");
setName(e.target.value); 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" ? ( {mode === "login" ? (
<> <>
<Button variant={"outline"} onClick={logIn} type={"submit"}> <Button variant={"outline"} type={"submit"}>
Log in Log in
</Button> </Button>
<Button <Button
className="text-xs hover:underline p-0" className="text-xs hover:underline p-0"
variant={"dummy"} variant={"dummy"}
onClick={() => { type="button"
setMode("register"); onClick={() => {
resetForm(); setMode("register");
}} resetForm();
> }}
I don't have an account >
</Button> I don't have an account
</> </Button>
) : ( </>
<> ) : (
<Button variant={"outline"} onClick={register} type={"submit"}> <>
Register <Button variant={"outline"} type={"submit"}>
</Button> Register
<Button </Button>
className="text-xs hover:underline p-0" <Button
variant={"dummy"} className="text-xs hover:underline p-0"
onClick={() => { variant={"dummy"}
setMode("login"); type="button"
resetForm(); onClick={() => {
}} setMode("login");
> resetForm();
I already have an account }}
</Button> >
</> I already have an account
)} </Button>
</div> </>
)}
</div>
</form>
<div className="flex items-end justify-end w-full text-xs -mb-4"> <div className="flex items-end justify-end w-full text-xs -mb-4">
{error !== "" ? ( {error !== "" ? (
<Label className="text-destructive text-sm">{error}</Label> <Label className="text-destructive text-sm">{error}</Label>

1
todo.md
View File

@@ -1,4 +1,3 @@
- make the login form submittable by pressing return
- user settings/profile page - user settings/profile page
- organisations system - organisations system
- create organisation - create organisation