login form created

frontend/src/lib/formSutff/Input.Field.tsx

@@ -0,0 +1,37 @@
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { useFieldContext } from ".";
+import { FieldErrors } from "./Errors.Field";
+
+type InputFieldProps = {
+	label: string;
+	inputType: string;
+	required: boolean;
+};
+
+const autoCompleteMap: Record<string, string> = {
+	email: "email",
+	password: "current-password",
+	text: "off",
+	username: "username",
+};
+
+export const InputField = ({ label, inputType, required }: InputFieldProps) => {
+	const field = useFieldContext<any>();
+
+	return (
+		<div className="grid gap-3">
+			<Label htmlFor={field.name}>{label}</Label>
+			<Input
+				id={field.name}
+				autoComplete={autoCompleteMap[inputType] ?? "off"}
+				value={field.state.value}
+				onChange={(e) => field.handleChange(e.target.value)}
+				onBlur={field.handleBlur}
+				type={inputType}
+				required={required}
+			/>
+			<FieldErrors meta={field.state.meta} />
+		</div>
+	);
+};