route handler + client register ui

frontend/components/AddressSelector.tsx

@@ -19,6 +19,7 @@ export default function AddressSelector() {
             value={fromAddress}
             handleChange={(e) => setFromAddress(e.target.value)}
             name="fromAddress"
+            style="main"
           />
         </div>
         <div className="w-full sm:flex-[3] min-w-0 sm:px-1">
@@ -29,6 +30,7 @@ export default function AddressSelector() {
             value={toAddress}
             handleChange={(e) => setToAddress(e.target.value)}
             name="toAddress"
+            style="main"
           />
         </div>
         <Button

frontend/components/ui/PhoneInput.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { PhoneInputProps } from '@/app/types'
+
+const PhoneInput = ({
+  value,
+  handleChange,
+  label = 'Номер телефона',
+  className = '',
+  operatorsInfo = true,
+}: PhoneInputProps) => {
+  return (
+    <div className={className}>
+      {label && (
+        <div className="flex items-center gap-2 my-2">
+          <label className="font-medium text-sm text-gray-500">{label}</label>
+        </div>
+      )}
+      <input
+        type="tel"
+        id="phone_number"
+        name="phone_number"
+        placeholder={'+375 (__) ___ __ __'}
+        value={value || ''}
+        onChange={handleChange}
+        className="w-full px-3 py-2 border border-gray-300 text-black rounded-xl focus:outline-none focus:ring-1 focus:bg-white focus:ring-blue-400"
+        autoComplete="tel"
+      />
+      {operatorsInfo && (
+        <p className="mt-1 text-xs text-gray-500">
+          Доступные операторы: A1 (29), А1 (44), МТС (33), life:) (25)
+        </p>
+      )}
+    </div>
+  )
+}
+
+export default PhoneInput

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>
   )
 }