chore: WIP

components/ui/custom/CustomInput.tsx

@@ -9,18 +9,20 @@ import { z } from "zod";
 import { FormControl, FormField, FormMessage } from "@/components/ui/form";
 import { authFormSchema } from "@/types";
 
+const formSchema = authFormSchema("sign-up");
+
 type CustomInputProps =
   | {
-      control: Control<z.infer<typeof authFormSchema>>;
-      name: FieldPath<z.infer<typeof authFormSchema>>;
-      password?: false;
+      control: Control<z.infer<typeof formSchema>>;
+      name: FieldPath<z.infer<typeof formSchema>>;
       label: string;
       type: "text" | "email";
       placeholder: string;
       isRequired?: boolean;
+      password?: false;
     }
   | {
-      control: Control<z.infer<typeof authFormSchema>>;
+      control: Control<z.infer<typeof formSchema>>;
       password: true;
       name?: never;
       label?: never;
@@ -42,32 +44,28 @@ export const CustomInput = ({
 
   const toggleVisibility = () => setIsVisible(!isVisible);
 
-  const inputProps = password
-    ? {
-        name: "password",
-        label: "Password",
-        type: isVisible ? "text" : "password",
-        placeholder: "Enter your password",
-        isRequired: true,
-      }
-    : { name, label, type, placeholder, isRequired };
+  const inputName = password ? "password" : name!;
+  const inputLabel = password ? "Password" : label;
+  const inputType = password ? (isVisible ? "text" : "password") : type;
+  const inputPlaceholder = password ? "Enter your password" : placeholder;
+  const inputIsRequired = password ? true : isRequired;
 
   return (
     <FormField
       control={control}
-      name={inputProps.name}
+      name={inputName as FieldPath<z.infer<typeof formSchema>>}
       render={({ field }) => (
         <>
           <FormControl>
             <Input
-              isRequired={inputProps.isRequired}
-              label={inputProps.label}
-              placeholder={inputProps.placeholder}
-              type={inputProps.type}
+              isRequired={inputIsRequired}
+              label={inputLabel}
+              placeholder={inputPlaceholder}
+              type={inputType}
               variant="bordered"
               {...field}
               endContent={
-                password && (
+                password ? (
                   <button type="button" onClick={toggleVisibility}>
                     <Icon
                       className="pointer-events-none text-2xl text-default-400"
@@ -76,7 +74,7 @@ export const CustomInput = ({
                       }
                     />
                   </button>
-                )
+                ) : null
               }
             />
           </FormControl>