mirror of
https://github.com/hex248/sprint.git
synced 2026-02-08 02:33:01 +00:00
implemented custom Field component
This commit is contained in:
Oliver Bryan
@@ -1,4 +1,4 @@
|
||||
import { type FormEvent, useMemo, useState } from "react";
|
||||
import { type FormEvent, useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
@@ -8,7 +8,7 @@ import {
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Field } from "@/components/ui/field";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { issue } from "@/lib/server";
|
||||
import { cn } from "@/lib/utils";
|
||||
@@ -27,35 +27,14 @@ export function CreateIssue({
|
||||
const [open, setOpen] = useState(false);
|
||||
const [title, setTitle] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
|
||||
const [titleTouched, setTitleTouched] = useState(false);
|
||||
const [descriptionTouched, setDescriptionTouched] = useState(false);
|
||||
const [submitAttempted, setSubmitAttempted] = useState(false);
|
||||
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const titleInvalid = useMemo(
|
||||
() => ((titleTouched || submitAttempted) && title.trim() === "" ? "Cannot be empty" : ""),
|
||||
[titleTouched, submitAttempted, title],
|
||||
);
|
||||
|
||||
const descriptionInvalid = useMemo(
|
||||
() =>
|
||||
(descriptionTouched || submitAttempted) && description.trim().length > 2048
|
||||
? "Too long (2048 character limit)"
|
||||
: "",
|
||||
[descriptionTouched, submitAttempted, description],
|
||||
);
|
||||
|
||||
const reset = () => {
|
||||
setTitle("");
|
||||
setDescription("");
|
||||
|
||||
setTitleTouched(false);
|
||||
setDescriptionTouched(false);
|
||||
setSubmitAttempted(false);
|
||||
|
||||
setSubmitting(false);
|
||||
setError(null);
|
||||
};
|
||||
@@ -72,7 +51,7 @@ export function CreateIssue({
|
||||
setError(null);
|
||||
setSubmitAttempted(true);
|
||||
|
||||
if (title.trim() === "" || descriptionInvalid !== "") {
|
||||
if (title.trim() === "" || description.trim().length > 2048) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -130,51 +109,25 @@ export function CreateIssue({
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="grid gap-4 mt-2">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="issue-title">Title</Label>
|
||||
<Input
|
||||
id="issue-title"
|
||||
name="title"
|
||||
value={title}
|
||||
onChange={(e) => {
|
||||
setTitle(e.target.value);
|
||||
}}
|
||||
onBlur={() => setTitleTouched(true)}
|
||||
aria-invalid={titleInvalid !== ""}
|
||||
placeholder="Demo Issue"
|
||||
required
|
||||
/>
|
||||
<div className="flex items-end justify-end w-full text-xs -mb-4 -mt-2">
|
||||
{titleInvalid !== "" ? (
|
||||
<Label className="text-destructive text-sm">{titleInvalid}</Label>
|
||||
) : (
|
||||
<Label className="opacity-0 text-sm">a</Label>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="issue-description">Description</Label>
|
||||
<Input
|
||||
id="issue-description"
|
||||
name="description"
|
||||
value={description}
|
||||
onChange={(e) => {
|
||||
setDescription(e.target.value);
|
||||
}}
|
||||
onBlur={() => setDescriptionTouched(true)}
|
||||
aria-invalid={descriptionInvalid !== ""}
|
||||
placeholder="Optional details"
|
||||
/>
|
||||
<div className="flex items-end justify-end w-full text-xs -mb-4 -mt-2">
|
||||
{descriptionInvalid !== "" ? (
|
||||
<Label className="text-destructive text-sm">{descriptionInvalid}</Label>
|
||||
) : (
|
||||
<Label className="opacity-0 text-sm">a</Label>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid mt-2">
|
||||
<Field
|
||||
label="Title"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
validate={(v) => (v.trim() === "" ? "Cannot be empty" : undefined)}
|
||||
submitAttempted={submitAttempted}
|
||||
placeholder="Demo Issue"
|
||||
/>
|
||||
<Field
|
||||
label="Description (optional)"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
validate={(v) =>
|
||||
v.trim().length > 2048 ? "Too long (2048 character limit)" : undefined
|
||||
}
|
||||
submitAttempted={submitAttempted}
|
||||
placeholder="Optional details"
|
||||
/>
|
||||
|
||||
<div className="flex items-end justify-end w-full text-xs -mb-2 -mt-2">
|
||||
{error ? (
|
||||
@@ -184,7 +137,7 @@ export function CreateIssue({
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 w-full justify-end">
|
||||
<div className="flex gap-2 w-full justify-end mt-2">
|
||||
<DialogClose asChild>
|
||||
<Button variant="outline" type="button">
|
||||
Cancel
|
||||
@@ -192,7 +145,11 @@ export function CreateIssue({
|
||||
</DialogClose>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={submitting || titleInvalid !== "" || descriptionInvalid !== ""}
|
||||
disabled={
|
||||
submitting ||
|
||||
(title.trim() === "" && submitAttempted) ||
|
||||
(description.trim().length > 2048 && submitAttempted)
|
||||
}
|
||||
>
|
||||
{submitting ? "Creating..." : "Create"}
|
||||
</Button>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { type FormEvent, useMemo, useState } from "react";
|
||||
import { type FormEvent, useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
@@ -8,7 +8,7 @@ import {
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Field } from "@/components/ui/field";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { organisation } from "@/lib/server";
|
||||
import { cn } from "@/lib/utils";
|
||||
@@ -34,34 +34,17 @@ export function CreateOrganisation({
|
||||
const [name, setName] = useState("");
|
||||
const [slug, setSlug] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
|
||||
const [nameTouched, setNameTouched] = useState(false);
|
||||
const [slugTouched, setSlugTouched] = useState(false);
|
||||
const [slugManuallyEdited, setSlugManuallyEdited] = useState(false);
|
||||
const [submitAttempted, setSubmitAttempted] = useState(false);
|
||||
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const nameInvalid = useMemo(
|
||||
() => ((nameTouched || submitAttempted) && name.trim() === "" ? "Cannot be empty" : ""),
|
||||
[nameTouched, submitAttempted, name],
|
||||
);
|
||||
const slugInvalid = useMemo(
|
||||
() => ((slugTouched || submitAttempted) && slug.trim() === "" ? "Cannot be empty" : ""),
|
||||
[slugTouched, submitAttempted, slug],
|
||||
);
|
||||
|
||||
const reset = () => {
|
||||
setName("");
|
||||
setSlug("");
|
||||
setDescription("");
|
||||
|
||||
setNameTouched(false);
|
||||
setSlugTouched(false);
|
||||
setSlugManuallyEdited(false);
|
||||
setSubmitAttempted(false);
|
||||
|
||||
setSubmitting(false);
|
||||
setError(null);
|
||||
};
|
||||
@@ -128,69 +111,42 @@ export function CreateOrganisation({
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="grid gap-4 mt-2">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="org-name">Name</Label>
|
||||
<Input
|
||||
id="org-name"
|
||||
name="name"
|
||||
value={name}
|
||||
onChange={(e) => {
|
||||
const nextName = e.target.value;
|
||||
setName(nextName);
|
||||
|
||||
if (!slugManuallyEdited) {
|
||||
setSlug(slugify(nextName));
|
||||
}
|
||||
}}
|
||||
onBlur={() => setNameTouched(true)}
|
||||
aria-invalid={nameInvalid !== ""}
|
||||
placeholder="Demo Organisation"
|
||||
required
|
||||
/>
|
||||
<div className="flex items-end justify-end w-full text-xs -mb-4 -mt-2">
|
||||
{nameInvalid !== "" ? (
|
||||
<Label className="text-destructive text-sm">{nameInvalid}</Label>
|
||||
) : (
|
||||
<Label className="opacity-0 text-sm">a</Label>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="org-slug">Slug</Label>
|
||||
<Input
|
||||
id="org-slug"
|
||||
name="slug"
|
||||
value={slug}
|
||||
onChange={(e) => {
|
||||
setSlug(slugify(e.target.value));
|
||||
setSlugManuallyEdited(true);
|
||||
}}
|
||||
onBlur={() => setSlugTouched(true)}
|
||||
aria-invalid={slugInvalid !== ""}
|
||||
placeholder="demo-organisation"
|
||||
required
|
||||
/>
|
||||
<div className="flex items-end justify-end w-full text-xs -mb-4 -mt-2">
|
||||
{slugInvalid !== "" ? (
|
||||
<Label className="text-destructive text-sm">{slugInvalid}</Label>
|
||||
) : (
|
||||
<Label className="opacity-0 text-sm">a</Label>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="org-description">Description (optional)</Label>
|
||||
<Input
|
||||
id="org-description"
|
||||
name="description"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="What is this organisation for?"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid mt-2">
|
||||
<Field
|
||||
label="Name"
|
||||
value={name}
|
||||
onChange={(e) => {
|
||||
const nextName = e.target.value;
|
||||
setName(nextName);
|
||||
if (!slugManuallyEdited) {
|
||||
setSlug(slugify(nextName));
|
||||
}
|
||||
}}
|
||||
validate={(v) => (v.trim() === "" ? "Cannot be empty" : undefined)}
|
||||
submitAttempted={submitAttempted}
|
||||
placeholder="Demo Organisation"
|
||||
/>
|
||||
<Field
|
||||
label="Slug"
|
||||
value={slug}
|
||||
onChange={(e) => {
|
||||
setSlug(slugify(e.target.value));
|
||||
setSlugManuallyEdited(true);
|
||||
}}
|
||||
validate={(v) => (v.trim() === "" ? "Cannot be empty" : undefined)}
|
||||
submitAttempted={submitAttempted}
|
||||
placeholder="demo-organisation"
|
||||
/>
|
||||
<Field
|
||||
label="Description (optional)"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
validate={(v) =>
|
||||
v.trim().length > 2048 ? "Too long (2048 character limit)" : undefined
|
||||
}
|
||||
submitAttempted={submitAttempted}
|
||||
placeholder="What is this organisation for?"
|
||||
/>
|
||||
|
||||
<div className="flex items-end justify-end w-full text-xs -mb-2 -mt-2">
|
||||
{error ? (
|
||||
@@ -200,7 +156,7 @@ export function CreateOrganisation({
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 w-full justify-end">
|
||||
<div className="flex gap-2 w-full justify-end mt-2">
|
||||
<DialogClose asChild>
|
||||
<Button variant="outline" type="button">
|
||||
Cancel
|
||||
@@ -208,7 +164,11 @@ export function CreateOrganisation({
|
||||
</DialogClose>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={submitting || nameInvalid !== "" || slugInvalid !== ""}
|
||||
disabled={
|
||||
submitting ||
|
||||
(name.trim() === "" && submitAttempted) ||
|
||||
(slug.trim() === "" && submitAttempted)
|
||||
}
|
||||
>
|
||||
{submitting ? "Creating..." : "Create"}
|
||||
</Button>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import type { ProjectRecord } from "@issue/shared";
|
||||
import { type FormEvent, useMemo, useState } from "react";
|
||||
import { type FormEvent, useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Field } from "@/components/ui/field";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { project } from "@/lib/server";
|
||||
import { cn } from "@/lib/utils";
|
||||
@@ -34,36 +34,16 @@ export function CreateProject({
|
||||
const [open, setOpen] = useState(false);
|
||||
const [name, setName] = useState("");
|
||||
const [key, setKey] = useState("");
|
||||
|
||||
const [nameTouched, setNameTouched] = useState(false);
|
||||
const [keyTouched, setKeyTouched] = useState(false);
|
||||
const [keyManuallyEdited, setKeyManuallyEdited] = useState(false);
|
||||
const [submitAttempted, setSubmitAttempted] = useState(false);
|
||||
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const nameInvalid = useMemo(
|
||||
() => ((nameTouched || submitAttempted) && name.trim() === "" ? "Cannot be empty" : ""),
|
||||
[nameTouched, submitAttempted, name],
|
||||
);
|
||||
|
||||
const keyInvalid = useMemo(() => {
|
||||
if (!(keyTouched || submitAttempted)) return "";
|
||||
if (key.trim() === "") return "Cannot be empty";
|
||||
if (key.length > 4) return "Must be 4 or less characters";
|
||||
return "";
|
||||
}, [keyTouched, submitAttempted, key]);
|
||||
|
||||
const reset = () => {
|
||||
setName("");
|
||||
setKey("");
|
||||
|
||||
setNameTouched(false);
|
||||
setKeyTouched(false);
|
||||
setKeyManuallyEdited(false);
|
||||
setSubmitAttempted(false);
|
||||
|
||||
setSubmitting(false);
|
||||
setError(null);
|
||||
};
|
||||
@@ -80,7 +60,7 @@ export function CreateProject({
|
||||
setError(null);
|
||||
setSubmitAttempted(true);
|
||||
|
||||
if (name.trim() === "" || key.length > 4) {
|
||||
if (name.trim() === "" || key.trim() === "" || key.length > 4) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -140,58 +120,36 @@ export function CreateProject({
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="grid gap-4 mt-2">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="project-name">Name</Label>
|
||||
<Input
|
||||
id="project-name"
|
||||
name="name"
|
||||
value={name}
|
||||
onChange={(e) => {
|
||||
const nextName = e.target.value;
|
||||
setName(nextName);
|
||||
|
||||
if (!keyManuallyEdited) {
|
||||
setKey(keyify(nextName));
|
||||
}
|
||||
}}
|
||||
onBlur={() => setNameTouched(true)}
|
||||
aria-invalid={nameInvalid !== ""}
|
||||
placeholder="Demo Project"
|
||||
required
|
||||
/>
|
||||
<div className="flex items-end justify-end w-full text-xs -mb-4 -mt-2">
|
||||
{nameInvalid !== "" ? (
|
||||
<Label className="text-destructive text-sm">{nameInvalid}</Label>
|
||||
) : (
|
||||
<Label className="opacity-0 text-sm">a</Label>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="project-key">Key</Label>
|
||||
<Input
|
||||
id="project-key"
|
||||
name="key"
|
||||
value={key}
|
||||
onChange={(e) => {
|
||||
setKey(keyify(e.target.value));
|
||||
setKeyManuallyEdited(true);
|
||||
}}
|
||||
onBlur={() => setKeyTouched(true)}
|
||||
aria-invalid={keyInvalid !== ""}
|
||||
placeholder="DEMO"
|
||||
required
|
||||
/>
|
||||
<div className="flex items-end justify-end w-full text-xs -mb-4 -mt-2">
|
||||
{keyInvalid !== "" ? (
|
||||
<Label className="text-destructive text-sm">{keyInvalid}</Label>
|
||||
) : (
|
||||
<Label className="opacity-0 text-sm">a</Label>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid mt-2">
|
||||
<Field
|
||||
label="Name"
|
||||
value={name}
|
||||
onChange={(e) => {
|
||||
const nextName = e.target.value;
|
||||
setName(nextName);
|
||||
if (!keyManuallyEdited) {
|
||||
setKey(keyify(nextName));
|
||||
}
|
||||
}}
|
||||
validate={(v) => (v.trim() === "" ? "Cannot be empty" : undefined)}
|
||||
submitAttempted={submitAttempted}
|
||||
placeholder="Demo Project"
|
||||
/>
|
||||
<Field
|
||||
label="Key"
|
||||
value={key}
|
||||
onChange={(e) => {
|
||||
setKey(keyify(e.target.value));
|
||||
setKeyManuallyEdited(true);
|
||||
}}
|
||||
validate={(v) => {
|
||||
if (v.trim() === "") return "Cannot be empty";
|
||||
if (v.length > 4) return "Must be 4 or less characters";
|
||||
return undefined;
|
||||
}}
|
||||
submitAttempted={submitAttempted}
|
||||
placeholder="DEMO"
|
||||
/>
|
||||
|
||||
<div className="flex items-end justify-end w-full text-xs -mb-2 -mt-2">
|
||||
{error ? (
|
||||
@@ -201,7 +159,7 @@ export function CreateProject({
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 w-full justify-end">
|
||||
<div className="flex gap-2 w-full justify-end mt-2">
|
||||
<DialogClose asChild>
|
||||
<Button variant="outline" type="button">
|
||||
Cancel
|
||||
@@ -209,7 +167,11 @@ export function CreateProject({
|
||||
</DialogClose>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={submitting || nameInvalid !== "" || keyInvalid !== ""}
|
||||
disabled={
|
||||
submitting ||
|
||||
(name.trim() === "" && submitAttempted) ||
|
||||
((key.trim() === "" || key.length > 4) && submitAttempted)
|
||||
}
|
||||
>
|
||||
{submitting ? "Creating..." : "Create"}
|
||||
</Button>
|
||||
|
||||
@@ -1,77 +1,19 @@
|
||||
/** biome-ignore-all lint/correctness/useExhaustiveDependencies: <> */
|
||||
import { type ChangeEvent, useEffect, useMemo, useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { ServerConfigurationDialog } from "@/components/server-configuration-dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Field } from "@/components/ui/field";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { capitalise, cn, getServerURL } from "@/lib/utils";
|
||||
|
||||
function Field({
|
||||
label = "label",
|
||||
onChange = () => {},
|
||||
onBlur,
|
||||
invalidMessage = "",
|
||||
hidden = false,
|
||||
}: {
|
||||
label: string;
|
||||
onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
|
||||
onBlur?: () => void;
|
||||
invalidMessage?: string;
|
||||
hidden?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-end justify-between w-full text-xs">
|
||||
<Label htmlFor="org-slug" className="flex items-center text-sm">
|
||||
{label}
|
||||
</Label>
|
||||
</div>
|
||||
<Input
|
||||
id="org-slug"
|
||||
placeholder={label}
|
||||
onChange={onChange}
|
||||
onBlur={onBlur}
|
||||
name={label}
|
||||
aria-invalid={invalidMessage !== ""}
|
||||
type={hidden ? "password" : "text"}
|
||||
/>
|
||||
<div className="flex items-end justify-end w-full text-xs -mb-0 -mt-1">
|
||||
{invalidMessage !== "" ? (
|
||||
<Label className="text-destructive text-sm">{invalidMessage}</Label>
|
||||
) : (
|
||||
<Label className="opacity-0 text-sm">a</Label>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function LogInForm() {
|
||||
const [mode, setMode] = useState<"login" | "register">("login");
|
||||
|
||||
const [name, setName] = useState("");
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
|
||||
const [nameTouched, setNameTouched] = useState(false);
|
||||
const [usernameTouched, setUsernameTouched] = useState(false);
|
||||
const [passwordTouched, setPasswordTouched] = useState(false);
|
||||
const [submitAttempted, setSubmitAttempted] = useState(false);
|
||||
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const nameInvalid = useMemo(
|
||||
() => ((nameTouched || submitAttempted) && name.trim() === "" ? "Cannot be empty" : ""),
|
||||
[nameTouched, submitAttempted, name],
|
||||
);
|
||||
const usernameInvalid = useMemo(
|
||||
() => ((usernameTouched || submitAttempted) && username.trim() === "" ? "Cannot be empty" : ""),
|
||||
[usernameTouched, submitAttempted, username],
|
||||
);
|
||||
const passwordInvalid = useMemo(
|
||||
() => ((passwordTouched || submitAttempted) && password.trim() === "" ? "Cannot be empty" : ""),
|
||||
[passwordTouched, submitAttempted, password],
|
||||
);
|
||||
const [submitAttempted, setSubmitAttempted] = useState(false);
|
||||
|
||||
const logIn = () => {
|
||||
if (username.trim() === "" || password.trim() === "") {
|
||||
@@ -154,11 +96,6 @@ export default function LogInForm() {
|
||||
const resetForm = () => {
|
||||
setError("");
|
||||
setSubmitAttempted(false);
|
||||
|
||||
setNameTouched(false);
|
||||
setUsernameTouched(false);
|
||||
setPasswordTouched(false);
|
||||
|
||||
requestAnimationFrame(() => focusFirstInput());
|
||||
};
|
||||
|
||||
@@ -187,23 +124,26 @@ export default function LogInForm() {
|
||||
{mode === "register" && (
|
||||
<Field
|
||||
label="Full Name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
onBlur={() => setNameTouched(true)}
|
||||
invalidMessage={nameInvalid}
|
||||
validate={(v) => (v.trim() === "" ? "Cannot be empty" : undefined)}
|
||||
submitAttempted={submitAttempted}
|
||||
/>
|
||||
)}
|
||||
<Field
|
||||
label="Username"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
onBlur={() => setUsernameTouched(true)}
|
||||
invalidMessage={usernameInvalid}
|
||||
validate={(v) => (v.trim() === "" ? "Cannot be empty" : undefined)}
|
||||
submitAttempted={submitAttempted}
|
||||
/>
|
||||
<Field
|
||||
label="Password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
onBlur={() => setPasswordTouched(true)}
|
||||
invalidMessage={passwordInvalid}
|
||||
validate={(v) => (v.trim() === "" ? "Cannot be empty" : undefined)}
|
||||
hidden={true}
|
||||
submitAttempted={submitAttempted}
|
||||
/>
|
||||
|
||||
{mode === "login" ? (
|
||||
|
||||
Reference in New Issue
Block a user