route handlers for account/main

frontend/app/(urls)/login/ClientView.tsx

@@ -2,10 +2,10 @@ import React from 'react'
 import { useForm } from '@/app/hooks/useForm'
 import Button from '@/components/ui/Button'
 // import LoginButton from '@/app/components/ui/LoginButton'
-import { HiOutlineEye, HiOutlineEyeOff } from 'react-icons/hi'
 import showToast from '@/components/ui/Toast'
 import { useRouter } from 'next/navigation'
 import { signIn } from 'next-auth/react'
+import TextInput from '@/components/ui/TextInput'
 // import PasswordRecovery from '@/app/components/ui/PasswordRecovery'
 
 const validationRules = {
@@ -52,50 +52,32 @@ const ClientView = () => {
   return (
     <>
       <form className="flex flex-col gap-1" onSubmit={handleSubmit}>
-        <div className="mb-2">
-          <label className="block mb-2 text-gray-700" htmlFor="email">
-            Ваш email:
-          </label>
-          <input
-            type="email"
-            id="email"
-            placeholder="my_email@gmail.com"
-            value={values.email}
-            onChange={handleChange}
-            className="w-full px-3 py-2 border text-black rounded-xl focus:outline-none focus:ring-2 focus:ring-mainblocks"
-            autoComplete="true"
-          />
-        </div>
+        <TextInput
+          value={values.email}
+          name="email"
+          handleChange={handleChange}
+          placeholder="my_email@gmail.com"
+          style="register"
+          label="Ваш еmail"
+        />
 
-        <div className="mb-4">
-          <label className="block mb-2 text-gray-700" htmlFor="email">
-            Ваш пароль:
-          </label>
-          <div className="relative">
-            <input
-              type={isVisible ? 'text' : 'password'}
-              id="password"
-              placeholder="Пароль"
-              value={values.password}
-              onChange={handleChange}
-              className="w-full px-3 py-2 border text-black rounded-xl focus:outline-none focus:ring-2 focus:ring-mainblocks"
-              autoComplete="true"
-            />
-            <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>
+        <TextInput
+          value={values.password}
+          name="password"
+          handleChange={handleChange}
+          placeholder="Не менее 8 символов"
+          style="register"
+          label="Ваш пароль"
+          isPassword={true}
+          isVisible={isVisible}
+          togglePasswordVisibility={togglePasswordVisibility}
+        />
         {/* <div className="flex flex-row-reverse text-sm justify-between pb-2">
           <PasswordRecovery />
         </div> */}
         <Button
           text="Войти"
-          className="flex items-center justify-center bg-black rounded-2xl text-white text-base font-semibold py-3"
+          className="flex items-center justify-center bg-orange rounded-2xl text-white text-base font-semibold py-3 mt-3"
           type="submit"
         />
       </form>