add jwt

1 files changed, 103 insertions, 14 deletions

diff --git a/src/components/header/authdialog/LoginForm.tsx b/src/components/header/authdialog/LoginForm.tsx
index 0a72f67..ceadbcd 100644
--- a/src/components/header/authdialog/LoginForm.tsx
+++ b/src/components/header/authdialog/LoginForm.tsx
@@ -1,23 +1,112 @@
+'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 { Input } from '@/components/ui/input';
+import { useAuthContext } from '@/lib/contexts/Auth.context';
+
 export default function LoginForm() {
+    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 emailOrUsername =
+            formData.get('emailOrUsername')?.toString() || '';
+        const password = formData.get('password')?.toString() || '';
+
+        const newErrors: any = {};
+        if (!emailOrUsername)
+            newErrors.emailOrUsername = 'Введите никнейм или email';
+        if (!password) newErrors.password = 'Введите пароль';
+
+        if (Object.keys(newErrors).length > 0) {
+            setErrors(newErrors);
+            setLoading(false);
+            return;
+        }
+
+        const body = new URLSearchParams();
+        body.append('username', emailOrUsername);
+        body.append('password', password);
+
+        try {
+            const res = await fetch('http://localhost:8000/api/auth/login', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                },
+                body: body.toString(),
+            });
+
+            const data = await res.json();
+
+            if (!res.ok) {
+                setErrors({ general: 'Неверный логин или пароль' });
+            } else if (data.access_token) {
+                localStorage.setItem('token', data.access_token);
+
+                const meRes = await fetch('http://localhost:8000/api/me', {
+                    headers: { Authorization: `Bearer ${data.access_token}` },
+                });
+                const meData = await meRes.json();
+                setUser(meData);
+            }
+        } finally {
+            setLoading(false);
+        }
+    };
+
     return (
-        <>
-            <div className="gap-5 flex flex-col h-[148px] w-[310px]">
-                <Button className="w-full bg-white hover:bg-white hover:text-black">
-                    <GoogleIcon />
-                    <span className="text-black text-sm">
-                        Войти через Google
-                    </span>
-                </Button>
-                <div className="gap-[10px] flex-col flex h-[88px]">
-                    <InputField placeholder="Никнейм или почта" />
-                    <InputField isPassword placeholder="Пароль" />
+        <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 text-sm">Войти через Google</span>
+            </Button>
+
+            <div className="flex flex-col gap-2.5">
+                <div className="flex flex-col">
+                    <InputField
+                        placeholder="Никнейм или почта"
+                        name="emailOrUsername"
+                    />
+                    {errors.emailOrUsername && (
+                        <p className="text-red pl-5 text-[12px] leading-[16px] mt-[5px]">
+                            {errors.emailOrUsername}
+                        </p>
+                    )}
+                </div>
+
+                <div className="flex flex-col">
+                    <InputField
+                        isPassword
+                        placeholder="Пароль"
+                        name="password"
+                    />
+                    {errors.password && (
+                        <p className="text-red pl-5 text-[12px] leading-[16px] mt-[5px]">
+                            {errors.password}
+                        </p>
+                    )}
+                    {!errors.password && errors.general && (
+                        <p className="text-red pl-5 text-[12px] leading-[16px] mt-[5px]">
+                            {errors.general}
+                        </p>
+                    )}
                 </div>
             </div>
-            <Button className="w-full gap-[10px]">Войти</Button>
-        </>
+
+            <Button type="submit" className="w-full" disabled={loading}>
+                {loading ? 'Вход...' : 'Войти'}
+            </Button>
+        </form>
     );
 }