Fixed build issues

src/components/Auth/SigninWithPassword.tsx

@@ -2,49 +2,64 @@
 import { PasswordIcon, UserIcon } from "@/assets/icons";
 
 import InputGroup from "../FormElements/InputGroup";
-import { Controller, SubmitHandler, useForm } from "react-hook-form";
+import { SubmitHandler, useForm } from "react-hook-form";
 import { ILoginCredentials } from "@/lib/api";
 import { useLoginQuery } from "@/hooks/queries";
+import { useRef, useState } from "react";
+
+import { FormErrorMessages } from "@/constants/Texts";
 
 export default function SigninWithPassword() {
-  const { handleSubmit, control, reset } = useForm<ILoginCredentials>();
+  const [passwordFieldInputType, setPasswordFieldInputType] = useState<
+    "password" | "text"
+  >("password");
+  const { handleSubmit, control, reset, register } =
+    useForm<ILoginCredentials>();
   const { mutate, isPending } = useLoginQuery();
+  const passwordInputRef = useRef<HTMLInputElement>(null);
   const onSubmit: SubmitHandler<ILoginCredentials> = (data) => {
     mutate(data);
     reset();
   };
-
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
-      <Controller
+      <InputGroup
+        type="username"
+        {...register("username", {
+          required: {
+            value: true,
+            message: FormErrorMessages.required,
+          },
+        })}
+        label="Username"
+        className="mb-4 [&_input]:py-[15px]"
+        placeholder="Enter your Username"
         name="username"
-        control={control}
-        render={({ field: username }) => (
-          <InputGroup
-            type="username"
-            handleChange={(value) => username.onChange(value)}
-            label="Username"
-            className="mb-4 [&_input]:py-[15px]"
-            placeholder="Enter your Username"
-            name="username"
-            icon={<UserIcon />}
-          />
-        )}
+        icon={<UserIcon />}
       />
-      <Controller
+
+      <InputGroup
+        type={passwordFieldInputType}
+        {...register("password", {
+          required: {
+            value: true,
+            message: FormErrorMessages.required,
+          },
+        })}
+        label="Password"
+        className="mb-5 [&_input]:py-[15px]"
+        placeholder="Enter your password"
         name="password"
-        control={control}
-        render={({ field: password }) => (
-          <InputGroup
-            type="password"
-            handleChange={(value) => password.onChange(value)}
-            label="Password"
-            className="mb-5 [&_input]:py-[15px]"
-            placeholder="Enter your password"
-            name="password"
-            icon={<PasswordIcon />}
+        icon={
+          <PasswordIcon
+            className="cursor-pointer"
+            onClick={() => {
+              setPasswordFieldInputType(
+                passwordFieldInputType === "password" ? "text" : "password",
+              );
+            }}
           />
-        )}
+        }
       />
 
       <div className="mb-4.5">
@@ -53,9 +68,6 @@ export default function SigninWithPassword() {
           className="flex w-full cursor-pointer items-center justify-center gap-2 rounded-lg bg-primary p-4 font-medium text-white transition hover:bg-opacity-90"
         >
           Sign In
-          {/* {loading && (
-            <span className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-solid border-white border-t-transparent dark:border-primary dark:border-t-transparent" />
-          )} */}
         </button>
       </div>
     </form>