fix(ts): refactor codebase for capacitor setup

components/FormField.tsx

@@ -1,4 +1,11 @@
-import React, { useState } from "react";
+import React, { useState, InputHTMLAttributes } from "react";
+
+interface FormFieldProps extends InputHTMLAttributes<HTMLInputElement> {
+  title: string;
+  placeholder?: string;
+  value: string;
+  handleChangeText: (value: string) => void;
+}
 
 const FormField = ({
   title,
@@ -6,68 +13,38 @@ const FormField = ({
   value,
   handleChangeText,
   ...props
-}) => {
+}: FormFieldProps) => {
   const [showPassword, setShowPassword] = useState(false);
+  const isPasswordField = title.toLowerCase().includes("password");
 
-  const isPasswordField = title === "Password" || title === "Confirm Password";
+  const inputId = `input-${title.replace(/\s+/g, "-").toLowerCase()}`;
 
   return (
     <div className="w-full">
       <label
-        className="block mb-2"
-        style={{
-          color: "#666666",
-          fontFamily: "Montserrat, sans-serif",
-          fontWeight: "500",
-          fontSize: 18,
-          marginBottom: 8,
-          letterSpacing: "-0.5px",
-        }}
+        htmlFor={inputId}
+        className="block mb-2 text-[#666666] text-[18px] font-medium font-montserrat tracking-[-0.5px]"
       >
         {title}
       </label>
 
-      <div
-        className="h-16 px-4 bg-blue-200 rounded-3xl flex items-center justify-between"
-        style={{
-          height: 64,
-          paddingLeft: 16,
-          paddingRight: 16,
-          backgroundColor: "#D2DFF0",
-          borderRadius: 20,
-        }}
-      >
+      <div className="h-16 px-4 bg-[#D2DFF0] rounded-3xl flex items-center justify-between">
         <input
+          id={inputId}
           type={isPasswordField && !showPassword ? "password" : "text"}
           value={value}
           placeholder={placeholder}
           onChange={(e) => handleChangeText(e.target.value)}
-          className="flex-1 bg-transparent outline-none border-none text-blue-950"
-          style={{
-            color: "#0D47A1",
-            fontSize: 16,
-            fontFamily: "inherit",
-            backgroundColor: "transparent",
-            border: "none",
-            outline: "none",
-          }}
+          className="flex-1 bg-transparent outline-none border-none text-blue-950 text-[16px] font-inherit"
           {...props}
         />
 
         {isPasswordField && (
           <button
             type="button"
-            onClick={() => setShowPassword(!showPassword)}
-            className="ml-2 text-gray-600 hover:text-gray-800 focus:outline-none"
-            style={{
-              fontFamily: "Montserrat, sans-serif",
-              fontWeight: "500",
-              fontSize: 16,
-              background: "none",
-              border: "none",
-              cursor: "pointer",
-              padding: 0,
-            }}
+            onClick={() => setShowPassword((prev) => !prev)}
+            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"
           >
             {showPassword ? "Hide" : "Show"}
           </button>