signUpForm use-form hook set up

Author: monicasmith463

frontend/eslint.config.mjs

@@ -13,7 +13,13 @@ const eslintConfig = [
   {
     ignores: ["src/client/**"], // ✅ Ignore generated OpenAPI client
   },
-  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  ...compat.config({
+    extends: ["next/core-web-vitals", "next/typescript"],
+
+    rules: {
+      "@typescript-eslint/no-explicit-any": "warn",
+    },
+  }),
 ];
 
 export default eslintConfig;

frontend/src/app/layout.tsx

@@ -1,16 +1,10 @@
 'use client';
-
-import { Outfit } from 'next/font/google';
 import './globals.css';
 
 import { SidebarProvider } from '@/context/SidebarContext';
 import { ThemeProvider } from '@/context/ThemeContext';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
-const outfit = Outfit({
-  subsets: ["latin"],
-});
-
 const queryClient = new QueryClient();
 
 

frontend/src/components/auth/SignUpForm.tsx

@@ -19,8 +19,9 @@ export default function SignUpForm() {
     register,
     handleSubmit,
     formState: { errors },
-  } = useForm<FormData>();
-
+  } = useForm<FormData>({
+    mode: "onChange"
+  });
   const onSubmit = (data: FormData) => {
     console.log("Form data:", data);
   };

frontend/src/components/form/input/InputField.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import React, { forwardRef } from "react";
 
 interface InputProps {
   type?: "text" | "number" | "email" | "password" | "date" | "time" | string;
@@ -7,23 +7,25 @@ interface InputProps {
   placeholder?: string;
   defaultValue?: string | number;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void; // new
   className?: string;
   min?: string | number;
   max?: string | number;
   step?: number;
   disabled?: boolean;
   success?: boolean;
   error?: boolean;
-  hint?: string; // Optional hint text
+  hint?: string;
 }
 
-const Input: FC<InputProps> = ({
+const Input = forwardRef<HTMLInputElement, InputProps>(({
   type = "text",
   id,
   name,
   placeholder,
   defaultValue,
   onChange,
+  onBlur,       // new
   className = "",
   min,
   max,
@@ -32,53 +34,49 @@ const Input: FC<InputProps> = ({
   success = false,
   error = false,
   hint,
-}) => {
-  // Determine input styles based on state (disabled, success, error)
+  ...rest       // catch other props (like ref will be forwarded automatically)
+}, ref) => {
   let inputClasses = `h-11 w-full rounded-lg border appearance-none px-4 py-2.5 text-sm shadow-theme-xs placeholder:text-gray-400 focus:outline-hidden focus:ring-3 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800 ${className}`;
 
-  // Add styles for the different states
   if (disabled) {
     inputClasses += ` text-gray-500 border-gray-300 cursor-not-allowed dark:bg-gray-800 dark:text-gray-400 dark:border-gray-700`;
   } else if (error) {
-    inputClasses += ` text-error-800 border-error-500 focus:ring-3 focus:ring-error-500/10  dark:text-error-400 dark:border-error-500`;
+    inputClasses += ` text-error-800 border-error-500 focus:ring-3 focus:ring-error-500/10 dark:text-error-400 dark:border-error-500`;
   } else if (success) {
-    inputClasses += ` text-success-500 border-success-400 focus:ring-success-500/10 focus:border-success-300  dark:text-success-400 dark:border-success-500`;
+    inputClasses += ` text-success-500 border-success-400 focus:ring-success-500/10 focus:border-success-300 dark:text-success-400 dark:border-success-500`;
   } else {
     inputClasses += ` bg-transparent text-gray-800 border-gray-300 focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:focus:border-brand-800`;
   }
 
   return (
     <div className="relative">
       <input
+        ref={ref}
         type={type}
         id={id}
         name={name}
         placeholder={placeholder}
         defaultValue={defaultValue}
         onChange={onChange}
+        onBlur={onBlur}
         min={min}
         max={max}
         step={step}
         disabled={disabled}
         className={inputClasses}
+        {...rest}
       />
-
-      {/* Optional Hint Text */}
       {hint && (
-        <p
-          className={`mt-1.5 text-xs ${
-            error
-              ? "text-error-500"
-              : success
-              ? "text-success-500"
-              : "text-gray-500"
-          }`}
-        >
+        <p className={`mt-1.5 text-xs ${
+          error ? "text-error-500" : success ? "text-success-500" : "text-gray-500"
+        }`}>
           {hint}
         </p>
       )}
     </div>
   );
-};
+});
+
+Input.displayName = "Input";
 
 export default Input;