route handler + client register ui

frontend/components/ui/TextInput.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { TextInputProps } from '@/app/types'
 import Tooltip from './Tooltip'
+import { HiOutlineEye, HiOutlineEyeOff } from 'react-icons/hi'
 
 const TextInput = ({
   value,
@@ -12,7 +13,23 @@ const TextInput = ({
   className = '',
   maxLength,
   tooltip,
+  style,
+  isPassword,
+  togglePasswordVisibility,
+  isVisible,
 }: TextInputProps) => {
+  const getStylesProps = () => {
+    const baseStyles = 'px-3 py-2 '
+    switch (style) {
+      case 'main':
+        return `p-4`
+      case 'register':
+        return `${baseStyles}`
+      default:
+        return baseStyles
+    }
+  }
+
   return (
     <div className={className}>
       {label && (
@@ -23,17 +40,28 @@ const TextInput = ({
           {tooltip && <Tooltip content={tooltip} />}
         </div>
       )}
-      <input
-        type={type}
-        id={name}
-        name={name}
-        placeholder={placeholder}
-        value={value || ''}
-        onChange={handleChange}
-        className="w-full p-4 border border-gray-300 text-black rounded-xl focus:outline-none focus:ring-2 focus:ring-mainblocks focus:bg-white"
-        autoComplete={name}
-        maxLength={maxLength}
-      />
+      <div className="relative">
+        <input
+          type={isPassword ? (isVisible ? 'text' : 'password') : type}
+          id={name}
+          name={name}
+          placeholder={placeholder}
+          value={value || ''}
+          onChange={handleChange}
+          className={`${getStylesProps()} w-full border border-gray-300 text-black rounded-xl focus:outline-none focus:ring-1 focus:ring-blue-400 focus:bg-white`}
+          autoComplete={name}
+          maxLength={maxLength}
+        />
+        {isPassword && (
+          <button
+            type="button"
+            onClick={togglePasswordVisibility}
+            className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
+          >
+            {isVisible ? <HiOutlineEye /> : <HiOutlineEyeOff />}
+          </button>
+        )}
+      </div>
     </div>
   )
 }