1 files changed, 115 insertions, 0 deletions
diff --git a/src/components/header/authdialog/RegisterForm.tsx b/src/components/header/authdialog/RegisterForm.tsx
new file mode 100644
index 0000000..20a7c14
--- /dev/null
+++ b/src/components/header/authdialog/RegisterForm.tsx
@@ -0,0 +1,115 @@
+'use client';
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import GoogleIcon from '../../../../public/icons/google.svg';
+import { InputField } from '@/components/ui/inputfield';
+import { validate, registerUser } from './register';
+import { useAuthContext } from '@/lib/contexts/Auth.context';
+
+export default function RegisterForm() {
+    const [errors, setErrors] = useState<any>({});
+    const [loading, setLoading] = useState(false);
+    const { setUser } = useAuthContext();
+    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        setLoading(true);
+        setErrors({});
+
+        const formData = new FormData(e.currentTarget);
+        const username = formData.get('username')?.toString() || '';
+        const email = formData.get('email')?.toString() || '';
+        const password = formData.get('password')?.toString() || '';
+        const passwordConfirm =
+            formData.get('passwordConfirm')?.toString() || '';
+
+        const validationErrors = validate(
+            username,
+            email,
+            password,
+            passwordConfirm,
+        );
+
+        if (Object.keys(validationErrors).length > 0) {
+            setErrors(validationErrors);
+            setLoading(false);
+            return;
+        }
+
+        const { data, error } = await registerUser(username, email, password);
+
+        if (error) {
+            setErrors(error);
+        } else if (data) {
+            setUser({
+                id: data.id,
+                username: data.username,
+            });
+        }
+
+        setLoading(false);
+    };
+
+    return (
+        <form
+            onSubmit={handleSubmit}
+            className="flex flex-col gap-5 min-w-[310px] w-fit"
+        >
+            <Button className="w-full bg-white hover:bg-white hover:text-black">
+                <GoogleIcon />
+                <span className="text-black">Войти через Google</span>
+            </Button>
+
+            <div className="flex flex-col gap-2.5">
+                <div className="flex flex-col ">
+                    <InputField placeholder="Никнейм" name="username" />
+                    {errors.username && (
+                        <p className="text-red pl-5 text-[12px] leading-[16px] mt-[5px]">
+                            {errors.username}
+                        </p>
+                    )}
+                </div>
+
+                <div className="flex flex-col">
+                    <InputField placeholder="E-mail" name="email" />
+                    {errors.email && (
+                        <p className="text-red pl-5 text-[12px] leading-[16px] mt-[5px]">
+                            {errors.email}
+                        </p>
+                    )}
+                </div>
+
+                <div className="flex flex-col ">
+                    <InputField
+                        placeholder="Пароль"
+                        type="password"
+                        name="password"
+                    />
+                    {errors.password && (
+                        <p className="text-red pl-5 text-[12px] leading-[16px] mt-[5px]">
+                            {errors.password}
+                        </p>
+                    )}
+                </div>
+
+                <div className="flex flex-col ">
+                    <InputField
+                        placeholder="Повторите пароль"
+                        type="password"
+                        name="passwordConfirm"
+                    />
+                    {errors.passwordConfirm && (
+                        <p className="text-red pl-5 text-[12px] leading-[16px] mt-[5px]">
+                            {errors.passwordConfirm}
+                        </p>
+                    )}
+                </div>
+            </div>
+
+            {errors.general && <p className="text-red ">{errors.general}</p>}
+
+            <Button type="submit" className="w-full" disabled={loading}>
+                {loading ? 'Регистрация...' : 'Зарегистрироваться'}
+            </Button>
+        </form>
+    );
+}