fix(api): fix api endpoint logic #1

components/FormField.tsx

@@ -1,23 +1,32 @@
-import React, { useState, InputHTMLAttributes } from "react";
+import React, { useState, useId, InputHTMLAttributes } from "react";
 
-interface FormFieldProps extends InputHTMLAttributes<HTMLInputElement> {
+interface FormFieldProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> {
   title: string;
+  value: string | number;
   placeholder?: string;
-  value: string;
   handleChangeText: (value: string) => void;
 }
 
-const FormField = ({
+const FormField: React.FC<FormFieldProps> = ({
   title,
-  placeholder,
   value,
+  placeholder,
   handleChangeText,
+  type,
   ...props
-}: FormFieldProps) => {
+}) => {
   const [showPassword, setShowPassword] = useState(false);
-  const isPasswordField = title.toLowerCase().includes("password");
+  const inputId = useId();
 
-  const inputId = `input-${title.replace(/\s+/g, "-").toLowerCase()}`;
+  const isPasswordField =
+    type === "password" || title.toLowerCase().includes("password");
+
+  const inputType = isPasswordField
+    ? showPassword
+      ? "text"
+      : "password"
+    : type || "text";
 
   return (
     <div className="w-full">
@@ -31,9 +40,10 @@ const FormField = ({
       <div className="h-16 px-4 bg-[#D2DFF0] rounded-3xl flex items-center justify-between">
         <input
           id={inputId}
-          type={isPasswordField && !showPassword ? "password" : "text"}
+          type={inputType}
           value={value}
-          placeholder={placeholder}
+          placeholder={placeholder || `Enter ${title.toLowerCase()}`}
+          autoComplete={isPasswordField ? "current-password" : "on"}
           onChange={(e) => handleChangeText(e.target.value)}
           className="flex-1 bg-transparent outline-none border-none text-blue-950 text-[16px] font-inherit"
           {...props}
@@ -43,8 +53,9 @@ const FormField = ({
           <button
             type="button"
             onClick={() => setShowPassword((prev) => !prev)}
+            aria-pressed={showPassword}
             aria-label={showPassword ? "Hide password" : "Show password"}
-            className="ml-2 text-gray-600 hover:text-gray-800 focus:outline-none font-montserrat font-medium text-[16px] bg-none border-none"
+            className="ml-2 text-gray-600 hover:text-gray-800 focus:outline-none font-montserrat font-medium text-[16px]"
           >
             {showPassword ? "Hide" : "Show"}
           </button>