151 lines
4.3 KiB
TypeScript
151 lines
4.3 KiB
TypeScript
import React from 'react'
|
||
import Link from 'next/link'
|
||
import { useForm } from '@/app/hooks/useForm'
|
||
import Button from '@/components/ui/Button'
|
||
// import LoginButton from '@/app/components/ui/LoginButton'
|
||
import showToast from '@/components/ui/Toast'
|
||
import { useRouter } from 'next/navigation'
|
||
import { signIn } from 'next-auth/react'
|
||
import TextInput from '@/components/ui/TextInput'
|
||
import PhoneInput from '@/components/ui/PhoneInput'
|
||
|
||
const validationRules = {
|
||
name: { required: true },
|
||
surname: { required: true },
|
||
phone_number: {
|
||
required: true,
|
||
minLength: 11,
|
||
},
|
||
password: { required: true, minLength: 8 },
|
||
privacy_accepted: { required: true },
|
||
}
|
||
|
||
export default function ClientRegistrationForm() {
|
||
const router = useRouter()
|
||
const {
|
||
values,
|
||
isVisible,
|
||
handleChange,
|
||
handleSubmit,
|
||
togglePasswordVisibility,
|
||
} = useForm(
|
||
{
|
||
name: '',
|
||
surname: '',
|
||
email: '',
|
||
phone_number: '',
|
||
password: '',
|
||
privacy_accepted: false,
|
||
},
|
||
validationRules,
|
||
async (values) => {
|
||
try {
|
||
const result = await signIn('register-credentials', {
|
||
email: values.email,
|
||
password: values.password,
|
||
username: values.name,
|
||
phone_number: values.phone_number,
|
||
privacy_accepted: values.privacy_accepted.toString(),
|
||
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 space-y-4">
|
||
<TextInput
|
||
value={values.name}
|
||
name="name"
|
||
handleChange={handleChange}
|
||
placeholder="Иван"
|
||
style="register"
|
||
label="Ваше имя"
|
||
/>
|
||
|
||
<TextInput
|
||
value={values.surname}
|
||
name="surname"
|
||
handleChange={handleChange}
|
||
placeholder="Иванов"
|
||
style="register"
|
||
label="Ваша фамилия"
|
||
/>
|
||
|
||
<TextInput
|
||
value={values.email}
|
||
name="email"
|
||
handleChange={handleChange}
|
||
placeholder="my_email@gmail.com"
|
||
style="register"
|
||
label="Ваш еmail"
|
||
/>
|
||
<PhoneInput
|
||
value={values.phone_number}
|
||
handleChange={handleChange}
|
||
operatorsInfo={false}
|
||
/>
|
||
|
||
<TextInput
|
||
value={values.password}
|
||
name="password"
|
||
handleChange={handleChange}
|
||
placeholder="Не менее 8 символов"
|
||
style="register"
|
||
label="Ваш пароль"
|
||
isPassword={true}
|
||
isVisible={isVisible}
|
||
togglePasswordVisibility={togglePasswordVisibility}
|
||
/>
|
||
</div>
|
||
|
||
<div className="pb-2 flex items-start">
|
||
<input
|
||
type="checkbox"
|
||
id="privacy_accepted"
|
||
name="privacy_accepted"
|
||
onChange={handleChange}
|
||
checked={values.privacy_accepted}
|
||
className="mt-1 cursor-pointer"
|
||
/>
|
||
<label
|
||
htmlFor="privacy_accepted"
|
||
className="px-2 cursor-pointer select-none text-gray-700"
|
||
>
|
||
Даю согласие на обработку моих{' '}
|
||
<Link
|
||
href="/privacy-policy"
|
||
className="text-orange/60 hover:underline"
|
||
>
|
||
персональных данных.
|
||
</Link>
|
||
</label>
|
||
</div>
|
||
<Button
|
||
text="Зарегистрироваться"
|
||
className="flex items-center justify-center bg-black text-white rounded-2xl 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-500">Или</p>
|
||
<div className="flex-1 border-t border-gray-300" />
|
||
</div>
|
||
{/* <LoginButton /> */}
|
||
</>
|
||
)
|
||
}
|