Merge branch 'front' of ssh://meowgit.nekoea.red:22222/nihonium/nyanimedb into front

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/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">
+                  <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 hover:bg-gray-100" onClick={() => setDropdownOpen(false)}>Profile</Link>
+                    <Link 
-                    <button onClick={handleLogout} className="w-full text-left px-4 py-2 hover:bg-gray-100">Logout</button>
+                      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 ? (
-              <>
+              <div className="pt-2 mt-2 border-t border-gray-100 space-y-2">
-                <Link to="/profile" className="text-gray-700 hover:text-blue-600 font-medium" onClick={() => setMenuOpen(false)}>Profile</Link>
+                <Link to="/profile" className="block 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>
+                
-              </>
+                {/* 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,212 @@
-// import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
-// import { updateUser, getUsersId } from "../../api";
+import { updateUser, getUsersId, postMediaUpload } from "../../api";
-// import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
+import { useCookies } from 'react-cookie';
 
-// export const SettingsPage: React.FC = () => {
+export const SettingsPage: React.FC = () => {
-//   const navigate = useNavigate();
+    const [cookies] = useCookies(['xsrf_token']);
+    const xsrfToken = cookies['xsrf_token'] || null;
 
-//   const userId = Number(localStorage.getItem("user_id"));
+  const navigate = useNavigate();
-//   const initialNickname = localStorage.getItem("user_name") || "";
+  const fileInputRef = useRef<HTMLInputElement>(null);
-//   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 [loading, setLoading] = useState(false);
+  const userId = Number(localStorage.getItem("user_id"));
-//   const [success, setSuccess] = useState<string | null>(null);
-//   const [error, setError] = useState<string | null>(null);
   
-// useEffect(() => {
+  // Состояния для полей формы
-//   const fetch = async () => {
+  const [mail, setMail] = useState("");
-//     const res = await getUsersId({
+  const [nickname, setNickname] = useState("");
-//       path: { user_id: String(userId) },
+  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);
+          setAvatarUrl(res.data.image?.image_path ?? null);
+        }
+      } catch (err) {
+        console.error("Failed to fetch user:", err);
+      }
+    };
+    fetchUserData();
+  }, [userId]);
 
-//   const saveSettings = async (e: React.FormEvent) => {
+  // Обработка загрузки файла
-//     e.preventDefault();
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
-//     setLoading(true);
+    const file = e.target.files?.[0];
-//     setSuccess(null);
+    if (!file) return;
-//     setError(null);
 
-//     try {
+    setUploading(true);
-//       const res = await updateUser({
+    setError(null);
-//         path: { user_id: userId },
-//         body: {
-//           ...(mail ? { mail } : {}),
-//           ...(nickname ? { nickname } : {}),
-//           ...(dispName ? { disp_name: dispName } : {}),
-//           ...(userDesc ? { user_desc: userDesc } : {}),
-//           ...(avatarId !== undefined ? { avatar_id: avatarId } : {}),
-//         }
-//       });
 
-//       // Обновляем локальное отображение username
+    const formData = new FormData();
-//       if (nickname) {
+    formData.append("file", file);
-//         localStorage.setItem("user_name", nickname);
-//         window.dispatchEvent(new Event("storage")); // чтобы Header обновился
-//       }
 
-//       setSuccess("Settings updated!");
+    try {
-//       setTimeout(() => navigate("/profile"), 800);
+      const res = await postMediaUpload({
+        body: formData,
+        // Сбрасываем заголовок, чтобы браузер сам поставил multipart/form-data + boundary
+        headers: { "Content-Type": undefined as any },
+      });
 
-//     } catch (err: any) {
+      if (res.data && res.data.id) {
-//       console.error(err);
+        setAvatarId(res.data.id);
-//       setError(err?.message || "Failed to update settings");
+        setAvatarUrl(res.data.image_path ?? null); // Для мгновенного превью
-//     } finally {
+        setSuccess("Image uploaded!");
-//       setLoading(false);
+      }
-//     }
+    } catch (err: any) {
-//   };
+      setError("Failed to upload image");
+    } finally {
+      setUploading(false);
+    }
+  };
 
-//   return (
+  const saveSettings = async (e: React.FormEvent) => {
-//     <div className="max-w-2xl mx-auto p-6">
+    e.preventDefault();
-//       <h1 className="text-3xl font-bold mb-6">User Settings</h1>
+    setLoading(true);
+    setSuccess(null);
+    setError(null);
 
-//       {success && <div className="text-green-600 mb-4">{success}</div>}
+    try {
-//       {error && <div className="text-red-600 mb-4">{error}</div>}
+      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 },
+      });
 
-//       <form className="space-y-6" onSubmit={saveSettings}>
+      localStorage.setItem("user_name", nickname);
-//         {/* Email */}
+      window.dispatchEvent(new Event("storage"));
-//         <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>
 
-//         {/* Nickname */}
+      setSuccess("Settings updated successfully!");
-//         <div>
+      setTimeout(() => navigate("/profile"), 1000);
-//           <label className="block text-sm font-medium mb-1">Nickname</label>
+    } catch (err: any) {
-//           <input
+      setError(err?.message || "Failed to update settings");
-//             type="text"
+    } finally {
-//             value={nickname}
+      setLoading(false);
-//             onChange={(e) => setNickname(e.target.value)}
+    }
-//             className="w-full px-4 py-2 border rounded-lg"
+  };
-//           />
-//         </div>
 
-//         {/* Display name */}
+  return (
-//         <div>
+    <div className="max-w-2xl mx-auto p-6">
-//           <label className="block text-sm font-medium mb-1">Display name</label>
+      <h1 className="text-3xl font-bold mb-6">User Settings</h1>
-//           <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>
 
-//         {/* Bio */}
+      {success && <div className="p-3 bg-green-100 text-green-700 rounded-lg mb-4">{success}</div>}
-//         <div>
+      {error && <div className="p-3 bg-red-100 text-red-700 rounded-lg mb-4">{error}</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>
 
-//         {/* Avatar ID */}
+      <div className="mb-8 flex flex-col items-center p-4 border rounded-xl bg-gray-50">
-//         <div>
+        <div className="relative w-32 h-32 mb-4 group">
-//           <label className="block text-sm font-medium mb-1">Avatar ID</label>
+          <img
-//           <input
+            src={avatarUrl || "https://via.placeholder.com/150"}
-//             type="number"
+            alt="Avatar"
-//             value={avatarId ?? ""}
+            className="w-full h-full object-cover rounded-full border-4 border-white shadow-md"
-//             onChange={(e) => {
+          />
-//               const v = e.target.value;
+          {uploading && (
-//               setAvatarId(v === "" ? null : Number(v));
+            <div className="absolute inset-0 flex items-center justify-center bg-black/40 rounded-full text-white text-xs">
-//             }}
+              Uploading...
-//             placeholder="Image ID"
+            </div>
-//             className="w-full px-4 py-2 border rounded-lg"
+          )}
-//           />
+        </div>
         
-//           <button
+        <div className="flex gap-2">
-//             type="button"
+          <button
-//             onClick={() => setAvatarId(null)}
+            type="button"
-//             className="text-sm text-blue-600 mt-1 hover:underline"
+            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"
-//             Remove avatar
+          >
-//           </button>
+            Change photo
-//         </div>
+          </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>
 
-//         <button
+      <form className="space-y-6" onSubmit={saveSettings}>
-//           type="submit"
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-//           disabled={loading}
+          <div>
-//           className="w-full bg-blue-600 text-white py-2 rounded-lg font-semibold hover:bg-blue-700 disabled:opacity-50"
+            <label className="block text-sm font-medium mb-1">Nickname</label>
-//         >
+            <input
-//           {loading ? "Saving..." : "Save changes"}
+              type="text"
-//         </button>
+              value={nickname}
-//       </form>
+              onChange={(e) => setNickname(e.target.value)}
-//     </div>
+              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>
+  );
+};