115 lines
3.5 KiB
TypeScript
115 lines
3.5 KiB
TypeScript
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 PasswordRecovery from '@/app/components/ui/PasswordRecovery'
|
||
|
||
const validationRules = {
|
||
email: { required: true },
|
||
password: { required: true, minLength: 8 },
|
||
}
|
||
|
||
const ClientView = () => {
|
||
const router = useRouter()
|
||
|
||
const {
|
||
values,
|
||
isVisible,
|
||
handleChange,
|
||
handleSubmit,
|
||
togglePasswordVisibility,
|
||
} = useForm(
|
||
{
|
||
email: '',
|
||
password: '',
|
||
},
|
||
validationRules,
|
||
async (values) => {
|
||
try {
|
||
const result = await signIn('credentials', {
|
||
email: values.email,
|
||
password: values.password,
|
||
redirect: false,
|
||
})
|
||
|
||
if (result?.error) {
|
||
showToast({ type: 'error', message: result.error })
|
||
return
|
||
}
|
||
|
||
showToast({ type: 'success', message: 'Авторизация успешна!' })
|
||
router.push('/account')
|
||
} catch {
|
||
showToast({ type: 'error', message: 'Ошибка при входе в аккаунт' })
|
||
}
|
||
}
|
||
)
|
||
|
||
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>
|
||
|
||
<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>
|
||
{/* <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"
|
||
type="submit"
|
||
/>
|
||
</form>
|
||
|
||
<div className="flex items-center gap-4">
|
||
<div className="flex-1 border-t border-gray-300" />
|
||
<p className="shrink-0 px-2 text-gray-700">Или</p>
|
||
<div className="flex-1 border-t border-gray-300" />
|
||
</div>
|
||
|
||
{/* <LoginButton /> */}
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default ClientView
|