From c592ba9eaf56ad043259607e25fe31d1cabbaeb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=98=D0=B2=D0=B0=D0=BD?= <ivan@Ivan--MacBook-Pro.local>
Date: Sun, 14 Dec 2025 14:09:47 +0300
Subject: [PATCH] Implement authentification logic

---
 src/api/useAuthentificate.ts         |  28 ++-
 src/components/layout/AuthDialog.tsx | 257 +++++++++++++--------------
 2 files changed, 139 insertions(+), 146 deletions(-)

diff --git a/src/api/useAuthentificate.ts b/src/api/useAuthentificate.ts
index 032e168..ff38dc6 100644
--- a/src/api/useAuthentificate.ts
+++ b/src/api/useAuthentificate.ts
@@ -1,5 +1,6 @@
 import { useMutation } from "@tanstack/react-query";
 import useAuthStore from "@/stores/useAuthStore";
+import useApiClient from "@/hooks/useApiClient";
 
 interface AuthDataType {
   email: string;
@@ -7,35 +8,28 @@ interface AuthDataType {
   rememberMe: boolean;
 }
 
-const useAuthentificate = (authData: AuthDataType) => {
-  const { rememberMe } = authData;
+const useAuthentificate = () => {
+  const client = useApiClient();
   const setToken = useAuthStore((state) => state.setToken);
 
   return useMutation({
-    mutationKey: ["auth", authData.email],
-    mutationFn: async () => {
-      const response = await fetch("/api/auth/login/", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(authData),
-      });
+    mutationKey: ["auth"],
+    mutationFn: async (authData: AuthDataType) => {
+      const response = await client.post("/api/auth/login/", authData);
 
-      if (!response.ok) {
-        throw new Error("Ошибка авторизации");
-      }
-
-      const { access_token } = await response.json();
+      const { access_token } = await response.data;
 
       if (!access_token) {
         throw new Error("Не удалось получить токен авторизации");
       }
 
-      setToken(access_token, rememberMe);
+      setToken(access_token, authData.rememberMe);
 
       return access_token;
     },
+    onError: () => {
+      throw new Error("Ошибка авторизации");
+    },
   });
 };
 
diff --git a/src/components/layout/AuthDialog.tsx b/src/components/layout/AuthDialog.tsx
index 3eea41f..61c6e76 100644
--- a/src/components/layout/AuthDialog.tsx
+++ b/src/components/layout/AuthDialog.tsx
@@ -1,152 +1,151 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import {
-    Dialog,
-    DialogContent,
-    DialogHeader,
-    DialogTitle,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Field, FieldContent } from "@/components/ui/field";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
 import Image from "next/image";
+import useAuthentificate from "@/api/useAuthentificate";
 
 interface AuthDialogProps {
-    isOpen: boolean;
-    onClose: () => void;
+  isOpen: boolean;
+  onClose: () => void;
 }
 
 export default function AuthDialog({ isOpen, onClose }: AuthDialogProps) {
-    const [email, setEmail] = useState("");
-    const [password, setPassword] = useState("");
-    const [rememberMe, setRememberMe] = useState(false);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [rememberMe, setRememberMe] = useState(false);
 
-    const handleSubmit = (e: React.FormEvent) => {
-        e.preventDefault();
-        // Здесь будет логика авторизации
-        console.log("Авторизация:", { email, password, rememberMe });
-        onClose();
-    };
+  const mutation = useAuthentificate();
 
-    return (
-        <Dialog open={isOpen} onOpenChange={onClose}>
-            <DialogContent className="[&>button]:hidden max-w-4xl w-full h-[600px] rounded-[30px] bg-[#F8F8F8]">
-                <div className="flex h-full gap-10">
-                    {/* Левая часть - форма */}
-                    <div className="flex-1 rounded-l-[10px] py-8 pl-1 flex flex-col justify-center">
-                        <DialogHeader className="text-left mb-8">
-                            <DialogTitle className="text-2xl font-bold text-gray-800 mb-2">
-                                Авторизация
-                            </DialogTitle>
-                        </DialogHeader>
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    mutation.mutate({ email, password, rememberMe });
+  };
 
-                        <form onSubmit={handleSubmit} className="space-y-6">
-                            {/* Поле email */}
-                            <Field>
-                                <FieldContent>
-                                    <input
-                                        id="email"
-                                        type="email"
-                                        value={email}
-                                        onChange={(e) =>
-                                            setEmail(e.target.value)
-                                        }
-                                        placeholder="Электронная почта"
-                                        className="w-full bg-white px-5 py-4 border border-gray-300 rounded-full focus:ring-2 focus:ring-[#008299] focus:border-transparent outline-none transition-colors"
-                                        required
-                                    />
-                                </FieldContent>
-                            </Field>
+  useEffect(() => {
+    if (mutation.isSuccess) {
+      onClose();
+    }
+  }, [mutation.isSuccess]);
 
-                            {/* Поле пароля */}
-                            <Field>
-                                <FieldContent>
-                                    <input
-                                        id="password"
-                                        type="password"
-                                        value={password}
-                                        onChange={(e) =>
-                                            setPassword(e.target.value)
-                                        }
-                                        placeholder="Пароль"
-                                        className="w-full bg-white px-5 py-4 border border-gray-300 rounded-full focus:ring-2 focus:ring-[#008299] focus:border-transparent outline-none transition-colors"
-                                        required
-                                    />
-                                </FieldContent>
-                            </Field>
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="[&>button]:hidden max-w-4xl w-full h-[600px] rounded-[30px] bg-[#F8F8F8]">
+        <div className="flex h-full gap-10">
+          {/* Левая часть - форма */}
+          <div className="flex-1 rounded-l-[10px] py-8 pl-1 flex flex-col justify-center">
+            <DialogHeader className="text-left mb-8">
+              <DialogTitle className="text-2xl font-bold text-gray-800 mb-2">
+                Авторизация
+              </DialogTitle>
+            </DialogHeader>
 
-                            {/* Чекбокс и ссылка */}
-                            <div className="flex items-center justify-between">
-                                <div className="flex items-center space-x-2">
-                                    <Checkbox
-                                        id="remember"
-                                        checked={rememberMe}
-                                        onCheckedChange={(checked) =>
-                                            setRememberMe(checked as boolean)
-                                        }
-                                    />
-                                    <Label
-                                        htmlFor="remember"
-                                        className="text-sm"
-                                    >
-                                        Запомнить меня
-                                    </Label>
-                                </div>
-                                <button
-                                    type="button"
-                                    className="text-sm hover:text-[#008299] transition-colors"
-                                >
-                                    Забыли пароль?
-                                </button>
-                            </div>
+            <form onSubmit={handleSubmit} className="space-y-6">
+              {/* Поле email */}
+              <Field>
+                <FieldContent>
+                  <input
+                    id="email"
+                    type="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    placeholder="Электронная почта"
+                    className="w-full bg-white px-5 py-4 border border-gray-300 rounded-full focus:ring-2 focus:ring-[#008299] focus:border-transparent outline-none transition-colors"
+                    required
+                  />
+                </FieldContent>
+              </Field>
 
-                            {/* Кнопка входа */}
-                            <Button
-                                type="submit"
-                                className="w-full h-[56px] bg-brand px-5 py-4 hover:bg-brand-hover text-white rounded-full font-semibold transition-colors"
-                            >
-                                Войти
-                            </Button>
+              {/* Поле пароля */}
+              <Field>
+                <FieldContent>
+                  <input
+                    id="password"
+                    type="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    placeholder="Пароль"
+                    className="w-full bg-white px-5 py-4 border border-gray-300 rounded-full focus:ring-2 focus:ring-[#008299] focus:border-transparent outline-none transition-colors"
+                    required
+                  />
+                </FieldContent>
+              </Field>
 
-                            {/* Ссылка на регистрацию */}
-                            <div className="text-center">
-                                <button
-                                    type="button"
-                                    className="hover:text-brand font-bold transition-colors"
-                                >
-                                    Создать аккаунт
-                                </button>
-                            </div>
-                        </form>
-
-                        {/* Договор */}
-                        <div className="mt-8 text-xs text-gray-400 text-center">
-                            Входя в аккаунт или создавая новый, вы соглашаетесь
-                            с нашими{" "}
-                            <button className="text-primary hover:underline">
-                                Правилами и условиями
-                            </button>{" "}
-                            и{" "}
-                            <button className="text-primary hover:underline">
-                                Положением о конфиденциальности
-                            </button>
-                        </div>
-                    </div>
-
-                    {/* Правая часть - изображение */}
-                    <div className="hidden md:block flex-1 relative overflow-hidden rounded-[20px]">
-                        {/* Изображение яхт */}
-                        <Image
-                            src="/images/auth.jpg"
-                            alt="Яхты"
-                            fill
-                            className="object-cover rounded-lg"
-                        />
-                    </div>
+              {/* Чекбокс и ссылка */}
+              <div className="flex items-center justify-between">
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="remember"
+                    checked={rememberMe}
+                    onCheckedChange={(checked) =>
+                      setRememberMe(checked as boolean)
+                    }
+                  />
+                  <Label htmlFor="remember" className="text-sm">
+                    Запомнить меня
+                  </Label>
                 </div>
-            </DialogContent>
-        </Dialog>
-    );
+                <button
+                  type="button"
+                  className="text-sm hover:text-[#008299] transition-colors"
+                >
+                  Забыли пароль?
+                </button>
+              </div>
+
+              {/* Кнопка входа */}
+              <Button
+                type="submit"
+                className="w-full h-[56px] bg-brand px-5 py-4 hover:bg-brand-hover text-white rounded-full font-semibold transition-colors"
+              >
+                Войти
+              </Button>
+
+              {/* Ссылка на регистрацию */}
+              <div className="text-center">
+                <button
+                  type="button"
+                  className="hover:text-brand font-bold transition-colors"
+                >
+                  Создать аккаунт
+                </button>
+              </div>
+            </form>
+
+            {/* Договор */}
+            <div className="mt-8 text-xs text-gray-400 text-center">
+              Входя в аккаунт или создавая новый, вы соглашаетесь с нашими{" "}
+              <button className="text-primary hover:underline">
+                Правилами и условиями
+              </button>{" "}
+              и{" "}
+              <button className="text-primary hover:underline">
+                Положением о конфиденциальности
+              </button>
+            </div>
+          </div>
+
+          {/* Правая часть - изображение */}
+          <div className="hidden md:block flex-1 relative overflow-hidden rounded-[20px]">
+            {/* Изображение яхт */}
+            <Image
+              src="/images/auth.jpg"
+              alt="Яхты"
+              fill
+              className="object-cover rounded-lg"
+            />
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
 }