route handler + client register ui

2025-05-17 12:07:19 +03:00
parent a867699855
commit 48d286cf55
12 changed files with 655 additions and 29 deletions
--- a/frontend/app/(urls)/register/components/ClientRegistrationForm.tsx
+++ b/frontend/app/(urls)/register/components/ClientRegistrationForm.tsx
@@ -0,0 +1,150 @@
+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 /> */}
+    </>
+  )
+}