diff --git a/packages/frontend/src/components/login-form.tsx b/packages/frontend/src/components/login-form.tsx index 70bf9cd..6ce57a3 100644 --- a/packages/frontend/src/components/login-form.tsx +++ b/packages/frontend/src/components/login-form.tsx @@ -2,33 +2,16 @@ import { USER_EMAIL_MAX_LENGTH, USER_NAME_MAX_LENGTH, USER_USERNAME_MAX_LENGTH } from "@sprint/shared"; import { useEffect, useState } from "react"; -import Avatar from "@/components/avatar"; import { useSession } from "@/components/session-provider"; import { Button } from "@/components/ui/button"; -import { Dialog, DialogContent, DialogTitle, DialogTrigger } from "@/components/ui/dialog"; import { Field } from "@/components/ui/field"; -import Icon from "@/components/ui/icon"; -import { IconButton } from "@/components/ui/icon-button"; import { Label } from "@/components/ui/label"; import { UploadAvatar } from "@/components/upload-avatar"; import { capitalise, cn, getServerURL, setCsrfToken } from "@/lib/utils"; -const DEMO_USERS = [ - { name: "User 1", username: "u1", password: "a" }, - { name: "User 2", username: "u2", password: "a" }, -]; - -export default function LogInForm({ - showWarning, - setShowWarning, -}: { - showWarning: boolean; - setShowWarning: (value: boolean) => void; -}) { +export default function LogInForm() { const { setUser, setEmailVerified } = useSession(); - const [loginDetailsOpen, setLoginDetailsOpen] = useState(false); - const [mode, setMode] = useState<"login" | "register">("login"); const [name, setName] = useState(""); @@ -141,189 +124,124 @@ export default function LogInForm({ }; return ( - <> - {/* under construction warning */} - {showWarning && ( -
- { - localStorage.setItem("hide-under-construction", "true"); - setShowWarning(false); - }} - > - - - -
-

- This application is currently under construction. Your data is very likely to be lost at some - point. -

-

- It is not recommended for production use. -

-

But you're more than welcome to have a look around!

- - - Login Details - - - Demo Login Credentials -
- {DEMO_USERS.map((user) => ( - - ))} -
-
-
-
-
- )} -
-
-
- {capitalise(mode)} +
+ +
+ {capitalise(mode)} -
- {mode === "register" && ( - <> - - {avatarURL && ( - - )} - setName(e.target.value)} - validate={(v) => (v.trim() === "" ? "Cannot be empty" : undefined)} - submitAttempted={submitAttempted} - spellcheck={false} - maxLength={USER_NAME_MAX_LENGTH} - /> - setEmail(e.target.value)} - validate={(v) => (v.trim() === "" ? "Cannot be empty" : undefined)} - submitAttempted={submitAttempted} - spellcheck={false} - maxLength={USER_EMAIL_MAX_LENGTH} - /> - - )} - setUsername(e.target.value)} - validate={(v) => (v.trim() === "" ? "Cannot be empty" : undefined)} - submitAttempted={submitAttempted} - spellcheck={false} - maxLength={USER_USERNAME_MAX_LENGTH} - showCounter={mode === "register"} - /> - setPassword(e.target.value)} - validate={(v) => (v.trim() === "" ? "Cannot be empty" : undefined)} - hidden={true} - submitAttempted={submitAttempted} - spellcheck={false} - /> -
- - {mode === "login" ? ( +
+ {mode === "register" && ( <> - - - - ) : ( - <> - - + + {avatarURL && ( + + )} + setName(e.target.value)} + validate={(v) => (v.trim() === "" ? "Cannot be empty" : undefined)} + submitAttempted={submitAttempted} + spellcheck={false} + maxLength={USER_NAME_MAX_LENGTH} + /> + setEmail(e.target.value)} + validate={(v) => (v.trim() === "" ? "Cannot be empty" : undefined)} + submitAttempted={submitAttempted} + spellcheck={false} + maxLength={USER_EMAIL_MAX_LENGTH} + /> )} + setUsername(e.target.value)} + validate={(v) => (v.trim() === "" ? "Cannot be empty" : undefined)} + submitAttempted={submitAttempted} + spellcheck={false} + maxLength={USER_USERNAME_MAX_LENGTH} + showCounter={mode === "register"} + /> + setPassword(e.target.value)} + validate={(v) => (v.trim() === "" ? "Cannot be empty" : undefined)} + hidden={true} + submitAttempted={submitAttempted} + spellcheck={false} + />
- -
- {error !== "" ? ( - + + {mode === "login" ? ( + <> + + + ) : ( - + <> + + + )}
+ +
+ {error !== "" ? ( + + ) : ( + + )}
- +
); }