Merge branch 'front' into dev

deploy/docker-compose.yml

@@ -73,8 +73,10 @@ services:
     # ports:
     #   - "8080:8080"
     depends_on:
-      - postgres
-      - rabbitmq
+      postgres:
+        condition: service_started
+      rabbitmq:
+        condition: service_healthy
     networks:
       - nyanimedb-network
 

modules/frontend/nginx-default.conf

@@ -30,6 +30,9 @@ server {
     }
 
     location /media/ {
+        limit_except GET {
+            deny all;
+        }
         rewrite ^/media/(.*)$ /$1 break;
         proxy_pass http://nyanimedb-images:8000/;
         proxy_http_version 1.1;

modules/frontend/src/App.tsx

@@ -5,6 +5,7 @@ import UserPage from "./pages/UserPage/UserPage";
 import TitlesPage from "./pages/TitlesPage/TitlesPage";
 import TitlePage from "./pages/TitlePage/TitlePage";
 import { LoginPage } from "./pages/LoginPage/LoginPage";
+import { SettingsPage } from "./pages/SettingsPage/SettingsPage";
 import { Header } from "./components/Header/Header";
 
 // import { OpenAPI } from "./api";
@@ -46,6 +47,12 @@ const App: React.FC = () => {
           element={userId ? <UserPage userId={userId} /> : <LoginPage />}
         />
 
+        {/*settings*/}
+        <Route
+          path="/settings"
+          element={userId ? <SettingsPage /> : <LoginPage />}
+        />
+
         {/* titles */}
         <Route path="/titles" element={<TitlesPage />} />
         <Route path="/titles/:id" element={<TitlePage />} />

modules/frontend/src/api/AuthClient/AuthClient.ts

@@ -0,0 +1,64 @@
+import { createClient, createConfig } from "../client";
+import type { ClientOptions as ClientOptions2 } from '../types.gen';
+import type { Client, RequestOptions, RequestResult } from "../client";
+import { refreshTokens } from "../../auth";
+import type { ResponseStyle } from "../client";
+
+let refreshPromise: Promise<boolean> | null = null;
+
+async function getRefreshed(): Promise<boolean> {
+  if (!refreshPromise) {
+    refreshPromise = (async () => {
+      try {
+        const res = await refreshTokens({ throwOnError: true });
+        return !!res.data;
+      } catch {
+        return false;
+      }
+    })();
+  }
+  return refreshPromise;
+}
+
+const baseClient = createClient(createConfig<ClientOptions2>({ baseUrl: '/api/v1' }));
+
+export const authClient: Client = {
+  ...baseClient,
+
+  request: (async <
+    TData = unknown,
+    TError = unknown,
+    ThrowOnError extends boolean = false,
+    TResponseStyle extends ResponseStyle = 'fields',
+  >(
+    options: Omit<RequestOptions<TData, TResponseStyle, ThrowOnError>, 'method'> &
+      Pick<Required<RequestOptions<TData, TResponseStyle, ThrowOnError>>, 'method'>
+  ): Promise<RequestResult<TData, TError, ThrowOnError, TResponseStyle>> => {
+    
+    let result = await baseClient.request<TData, TError, ThrowOnError, TResponseStyle>(options);
+
+    // 1. Cast to a Record to allow the 'in' operator check on a generic
+    // We use 'unknown' instead of 'any' to maintain safety.
+    const resultObj = result as Record<string, unknown>;
+
+    // 2. Check if the object is valid and contains the error key
+    if (result && typeof result === 'object' && 'error' in resultObj) {
+      
+      // 3. Narrow the error property specifically
+      const error = resultObj.error as { response?: { status?: number } } | null | undefined;
+
+      if (error?.response?.status === 401) {
+        const refreshed = await getRefreshed();
+
+        if (refreshed) {
+          result = await baseClient.request<TData, TError, ThrowOnError, TResponseStyle>(options);
+        } else {
+          localStorage.clear();
+          window.location.href = "/login";
+        }
+      }
+    }
+
+    return result;
+  }) as Client['request'],
+};

modules/frontend/src/components/Header/Header.tsx

@@ -32,6 +32,8 @@ export const Header: React.FC = () => {
       localStorage.removeItem("user_id");
       localStorage.removeItem("user_name");
       setUsername(null);
+      setDropdownOpen(false);
+      setMenuOpen(false);
       navigate("/login");
     } catch (err) {
       console.error(err);
@@ -74,14 +76,38 @@ export const Header: React.FC = () => {
               <div className="relative">
                 <button
                   onClick={() => setDropdownOpen(!dropdownOpen)}
-                  className="text-gray-700 hover:text-blue-600 font-medium"
+                  className="text-gray-700 hover:text-blue-600 font-medium flex items-center gap-1"
                 >
                   {username}
+                  <span className="text-[10px]">▼</span>
                 </button>
                 {dropdownOpen && (
-                  <div className="absolute right-0 mt-2 w-40 bg-white border rounded shadow-md z-50">
-                    <Link to="/profile" className="block px-4 py-2 hover:bg-gray-100" onClick={() => setDropdownOpen(false)}>Profile</Link>
-                    <button onClick={handleLogout} className="w-full text-left px-4 py-2 hover:bg-gray-100">Logout</button>
+                  <div className="absolute right-0 mt-2 w-48 bg-white border rounded shadow-lg z-50 py-1">
+                    <Link 
+                      to="/profile" 
+                      className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" 
+                      onClick={() => setDropdownOpen(false)}
+                    >
+                      Profile
+                    </Link>
+                    
+                    {/* КНОПКА SETTINGS */}
+                    <Link 
+                      to="/settings" 
+                      className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" 
+                      onClick={() => setDropdownOpen(false)}
+                    >
+                      Settings
+                    </Link>
+
+                    <div className="border-t border-gray-100 my-1"></div>
+                    
+                    <button 
+                      onClick={handleLogout} 
+                      className="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50"
+                    >
+                      Logout
+                    </button>
                   </div>
                 )}
               </div>
@@ -107,11 +133,16 @@ export const Header: React.FC = () => {
             <Link to="/titles" className="text-gray-700 hover:text-blue-600" onClick={() => setMenuOpen(false)}>Titles</Link>
             <Link to="/users" className="text-gray-700 hover:text-blue-600" onClick={() => setMenuOpen(false)}>Users</Link>
             <Link to="/about" className="text-gray-700 hover:text-blue-600" onClick={() => setMenuOpen(false)}>About</Link>
+            
             {username ? (
-              <>
-                <Link to="/profile" className="text-gray-700 hover:text-blue-600 font-medium" onClick={() => setMenuOpen(false)}>Profile</Link>
-                <button onClick={handleLogout} className="text-gray-700 hover:text-blue-600 font-medium text-left">Logout</button>
-              </>
+              <div className="pt-2 mt-2 border-t border-gray-100 space-y-2">
+                <Link to="/profile" className="block text-gray-700 hover:text-blue-600 font-medium" onClick={() => setMenuOpen(false)}>Profile</Link>
+                
+                {/* SETTINGS (Mobile) */}
+                <Link to="/settings" className="block text-gray-700 hover:text-blue-600 font-medium" onClick={() => setMenuOpen(false)}>Settings</Link>
+                
+                <button onClick={handleLogout} className="block w-full text-left text-red-600 font-medium">Logout</button>
+              </div>
             ) : (
               <Link to="/login" className="text-gray-700 hover:text-blue-600 font-medium" onClick={() => setMenuOpen(false)}>Login</Link>
             )}

modules/frontend/src/pages/SettingsPage/SettingsPage.tsx

@@ -1,154 +1,235 @@
-// import React, { useEffect, useState } from "react";
-// import { updateUser, getUsersId } from "../../api";
-// import { useNavigate } from "react-router-dom";
+import React, { useEffect, useState, useRef } from "react";
+import { updateUser, getUsersId } from "../../api";
+import { useNavigate } from "react-router-dom";
+import { useCookies } from 'react-cookie';
 
-// export const SettingsPage: React.FC = () => {
-//   const navigate = useNavigate();
+export const SettingsPage: React.FC = () => {
+    const [cookies] = useCookies(['xsrf_token']);
+    const xsrfToken = cookies['xsrf_token'] || null;
 
-//   const userId = Number(localStorage.getItem("user_id"));
-//   const initialNickname = localStorage.getItem("user_name") || "";
-//   const [mail, setMail] = useState("");
-//   const [nickname, setNickname] = useState(initialNickname);
-//   const [dispName, setDispName] = useState("");
-//   const [userDesc, setUserDesc] = useState("");
-//   const [avatarId, setAvatarId] = useState<number | null>(null);
+  const navigate = useNavigate();
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
-//   const [loading, setLoading] = useState(false);
-//   const [success, setSuccess] = useState<string | null>(null);
-//   const [error, setError] = useState<string | null>(null);
+  const userId = Number(localStorage.getItem("user_id"));
   
-// useEffect(() => {
-//   const fetch = async () => {
-//     const res = await getUsersId({
-//       path: { user_id: String(userId) },
-//     });
+  // Состояния для полей формы
+  const [mail, setMail] = useState("");
+  const [nickname, setNickname] = useState("");
+  const [dispName, setDispName] = useState("");
+  const [userDesc, setUserDesc] = useState("");
+  const [avatarId, setAvatarId] = useState<number | null>(null);
+  const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
 
-//     setProfile(res.data);
-//   };
+  const [loading, setLoading] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const [success, setSuccess] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
 
-//   fetch();
-// }, [userId]);
+  // Загружаем текущие данные пользователя при входе
+  useEffect(() => {
+    const fetchUserData = async () => {
+      try {
+        const res = await getUsersId({
+          path: { user_id: String(userId) },
+        });
+        if (res.data) {
+          setMail(res.data.mail || "");
+          setNickname(res.data.nickname || "");
+          setDispName(res.data.disp_name || "");
+          setUserDesc(res.data.user_desc || "");
+          setAvatarId(res.data.image?.id ?? null);
+          const path = res.data.image?.image_path;
+          setAvatarUrl(path ? (path.startsWith('http') ? path : `/media/${path}`) : null);
+        }
+      } catch (err) {
+        console.error("Failed to fetch user:", err);
+      }
+    };
+    fetchUserData();
+  }, [userId]);
 
-//   const saveSettings = async (e: React.FormEvent) => {
-//     e.preventDefault();
-//     setLoading(true);
-//     setSuccess(null);
-//     setError(null);
+  // Обработка загрузки файла
+const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+  const file = e.target.files?.[0];
+  if (!file) return;
 
-//     try {
-//       const res = await updateUser({
-//         path: { user_id: userId },
-//         body: {
-//           ...(mail ? { mail } : {}),
-//           ...(nickname ? { nickname } : {}),
-//           ...(dispName ? { disp_name: dispName } : {}),
-//           ...(userDesc ? { user_desc: userDesc } : {}),
-//           ...(avatarId !== undefined ? { avatar_id: avatarId } : {}),
-//         }
-//       });
+  setUploading(true);
+  setError(null);
+  setSuccess(null);
 
-//       // Обновляем локальное отображение username
-//       if (nickname) {
-//         localStorage.setItem("user_name", nickname);
-//         window.dispatchEvent(new Event("storage")); // чтобы Header обновился
-//       }
+  const formData = new FormData();
+  formData.append("image", file);
 
-//       setSuccess("Settings updated!");
-//       setTimeout(() => navigate("/profile"), 800);
+  try {
+    // 1. Загружаем файл на сервер (POST)
+    const uploadRes = await fetch("/api/v1/media/upload", {
+      method: "POST",
+      body: formData,
+      headers: {
+        "X-XSRF-TOKEN": xsrfToken || "",
+      },
+    });
 
-//     } catch (err: any) {
-//       console.error(err);
-//       setError(err?.message || "Failed to update settings");
-//     } finally {
-//       setLoading(false);
-//     }
-//   };
+    if (!uploadRes.ok) throw new Error("Failed to upload image to storage");
 
-//   return (
-//     <div className="max-w-2xl mx-auto p-6">
-//       <h1 className="text-3xl font-bold mb-6">User Settings</h1>
+    const uploadData = await uploadRes.json();
+    const newAvatarId = uploadData.id;
 
-//       {success && <div className="text-green-600 mb-4">{success}</div>}
-//       {error && <div className="text-red-600 mb-4">{error}</div>}
+    if (newAvatarId) {
+      // 2. СРАЗУ отправляем PATCH запрос для обновления профиля пользователя
+      await updateUser({
+        path: { user_id: userId },
+        body: {
+          avatar_id: newAvatarId, // Привязываем новый ID к юзеру
+        },
+        headers: { "X-XSRF-TOKEN": xsrfToken },
+      });
 
-//       <form className="space-y-6" onSubmit={saveSettings}>
-//         {/* Email */}
-//         <div>
-//           <label className="block text-sm font-medium mb-1">Email</label>
-//           <input
-//             type="email"
-//             value={mail}
-//             onChange={(e) => setMail(e.target.value)}
-//             placeholder="example@mail.com"
-//             className="w-full px-4 py-2 border rounded-lg"
-//           />
-//         </div>
+      // 3. Обновляем локальный стейт для отображения
+      setAvatarId(newAvatarId);
+      const path = uploadData.image_path;
+      setAvatarUrl(path ? (path.startsWith("/") ? path : `/media/${path}`) : null);
       
-//         {/* Nickname */}
-//         <div>
-//           <label className="block text-sm font-medium mb-1">Nickname</label>
-//           <input
-//             type="text"
-//             value={nickname}
-//             onChange={(e) => setNickname(e.target.value)}
-//             className="w-full px-4 py-2 border rounded-lg"
-//           />
-//         </div>
+      setSuccess("Avatar updated successfully!");
+    }
+  } catch (err: any) {
+    console.error("Upload & Patch error:", err);
+    setError(err.message || "Failed to update avatar");
+  } finally {
+    setUploading(false);
+  }
+};
 
-//         {/* Display name */}
-//         <div>
-//           <label className="block text-sm font-medium mb-1">Display name</label>
-//           <input
-//             type="text"
-//             value={dispName}
-//             onChange={(e) => setDispName(e.target.value)}
-//             placeholder="Shown name"
-//             className="w-full px-4 py-2 border rounded-lg"
-//           />
-//         </div>
+  const saveSettings = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setSuccess(null);
+    setError(null);
 
-//         {/* Bio */}
-//         <div>
-//           <label className="block text-sm font-medium mb-1">Bio</label>
-//           <textarea
-//             value={userDesc}
-//             onChange={(e) => setUserDesc(e.target.value)}
-//             rows={4}
-//             className="w-full px-4 py-2 border rounded-lg resize-none"
-//           />
-//         </div>
+    try {
+      await updateUser({
+        path: { user_id: userId },
+        body: {
+          mail: mail || undefined,
+          nickname: nickname || undefined,
+          disp_name: dispName || undefined,
+          user_desc: userDesc || undefined,
+          avatar_id: avatarId, // Может быть числом или null для удаления
+        },
+        headers: { "X-XSRF-TOKEN": xsrfToken },
+      });
 
-//         {/* Avatar ID */}
-//         <div>
-//           <label className="block text-sm font-medium mb-1">Avatar ID</label>
-//           <input
-//             type="number"
-//             value={avatarId ?? ""}
-//             onChange={(e) => {
-//               const v = e.target.value;
-//               setAvatarId(v === "" ? null : Number(v));
-//             }}
-//             placeholder="Image ID"
-//             className="w-full px-4 py-2 border rounded-lg"
-//           />
+      localStorage.setItem("user_name", nickname);
+      window.dispatchEvent(new Event("storage"));
 
-//           <button
-//             type="button"
-//             onClick={() => setAvatarId(null)}
-//             className="text-sm text-blue-600 mt-1 hover:underline"
-//           >
-//             Remove avatar
-//           </button>
-//         </div>
+      setSuccess("Settings updated successfully!");
+      setTimeout(() => navigate("/profile"), 1000);
+    } catch (err: any) {
+      setError(err?.message || "Failed to update settings");
+    } finally {
+      setLoading(false);
+    }
+  };
 
-//         <button
-//           type="submit"
-//           disabled={loading}
-//           className="w-full bg-blue-600 text-white py-2 rounded-lg font-semibold hover:bg-blue-700 disabled:opacity-50"
-//         >
-//           {loading ? "Saving..." : "Save changes"}
-//         </button>
-//       </form>
-//     </div>
-//   );
-// };
+  return (
+    <div className="max-w-2xl mx-auto p-6">
+      <h1 className="text-3xl font-bold mb-6">User Settings</h1>
+
+      {success && <div className="p-3 bg-green-100 text-green-700 rounded-lg mb-4">{success}</div>}
+      {error && <div className="p-3 bg-red-100 text-red-700 rounded-lg mb-4">{error}</div>}
+
+      <div className="mb-8 flex flex-col items-center p-4 border rounded-xl bg-gray-50">
+        <div className="relative w-32 h-32 mb-4 group">
+          <img
+            src={avatarUrl || "https://via.placeholder.com/150"}
+            alt="Avatar"
+            className="w-full h-full object-cover rounded-full border-4 border-white shadow-md"
+          />
+          {uploading && (
+            <div className="absolute inset-0 flex items-center justify-center bg-black/40 rounded-full text-white text-xs">
+              Uploading...
+            </div>
+          )}
+        </div>
+        
+        <div className="flex gap-2">
+          <button
+            type="button"
+            onClick={() => fileInputRef.current?.click()}
+            className="px-4 py-2 bg-white border border-gray-300 rounded-lg text-sm font-medium hover:bg-gray-100"
+          >
+            Change photo
+          </button>
+          {avatarId && (
+            <button
+              type="button"
+              onClick={() => { setAvatarId(null); setAvatarUrl(null); }}
+              className="px-4 py-2 text-sm text-red-600 hover:text-red-700"
+            >
+              Remove
+            </button>
+          )}
+        </div>
+        <input
+          ref={fileInputRef}
+          type="file"
+          className="hidden"
+          accept="image/*"
+          onChange={handleFileChange}
+        />
+      </div>
+
+      <form className="space-y-6" onSubmit={saveSettings}>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium mb-1">Nickname</label>
+            <input
+              type="text"
+              value={nickname}
+              onChange={(e) => setNickname(e.target.value)}
+              className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
+              required
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-1">Display Name</label>
+            <input
+              type="text"
+              value={dispName}
+              onChange={(e) => setDispName(e.target.value)}
+              className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
+            />
+          </div>
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-1">Email</label>
+          <input
+            type="email"
+            value={mail}
+            onChange={(e) => setMail(e.target.value)}
+            className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-1">Bio</label>
+          <textarea
+            value={userDesc}
+            onChange={(e) => setUserDesc(e.target.value)}
+            rows={4}
+            className="w-full px-4 py-2 border rounded-lg resize-none focus:ring-2 focus:ring-blue-500 outline-none"
+          />
+        </div>
+
+        <button
+          type="submit"
+          disabled={loading || uploading}
+          className="w-full bg-blue-600 text-white py-3 rounded-lg font-bold hover:bg-blue-700 disabled:opacity-50 transition-colors"
+        >
+          {loading ? "Saving Changes..." : "Save Settings"}
+        </button>
+      </form>
+    </div>
+  );
+};

modules/frontend/src/pages/TitlesPage/TitlesPage.tsx

@@ -9,6 +9,7 @@ import { getTitles, type CursorObj, type Title, type TitleSort } from "../../api
 import { LayoutSwitch } from "../../components/LayoutSwitch/LayoutSwitch";
 import { Link } from "react-router-dom";
 import { type TitlesFilter, TitlesFilterPanel } from "../../components/TitlesFilterPanel/TitlesFilterPanel";
+import { authClient } from "../../api/AuthClient/AuthClient";
 
 const PAGE_SIZE = 10;
 
@@ -51,7 +52,12 @@ export default function TitlesPage() {
         offset: PAGE_SIZE,
         fields: "all",
       },
-    });
+      client: authClient,
+    },);
+
+    if (response.response.status === 403) {
+
+    }
 
     return {
       items: response.data?.data ?? [],

modules/frontend/src/pages/UserPage/UserPage.tsx

@@ -155,7 +155,7 @@ export default function UserPage({ userId }: UserPageProps) {
       {errorUser && <div className="mt-10 text-red-600 font-medium">{errorUser}</div>}
       {user && (
         <div className="bg-white shadow-lg rounded-xl p-6 w-full max-w-sm flex flex-col items-center mb-8">
-          <img src={user.image?.image_path} alt={user.nickname} className="w-32 h-32 rounded-full object-cover mb-4" />
+          <img src={"/media/" + user.image?.image_path} alt={user.nickname} className="w-32 h-32 rounded-full object-cover mb-4" />
           <h2 className="text-2xl font-bold mb-2">{user.disp_name || user.nickname}</h2>
           {user.mail && <p className="text-gray-600 mb-2">{user.mail}</p>}
           {user.user_desc && <p className="text-gray-700 text-center">{user.user_desc}</p>}