Merge pull request 'fix: bug with avatar fixes' (#12) from develop into master

Reviewed-on: #12

frontend/package-lock.json

@@ -17,7 +17,7 @@
       "devDependencies": {
         "@eslint/js": "^9.39.1",
         "@types/node": "^24.10.1",
-        "@types/react": "^19.2.5",
+        "@types/react": "^19.2.14",
         "@types/react-dom": "^19.2.3",
         "@vitejs/plugin-react": "^5.1.1",
         "daisyui": "^5.5.14",
@@ -1640,9 +1640,9 @@
       }
     },
     "node_modules/@types/react": {
-      "version": "19.2.10",
+      "version": "19.2.14",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.10.tgz",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
-      "integrity": "sha512-WPigyYuGhgZ/cTPRXB2EwUw+XvsRA3GqHlsP4qteqrnnjDrApbS7MxcGr/hke5iUoeB7E/gQtrs9I37zAJ0Vjw==",
+      "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

frontend/package.json

@@ -19,7 +19,7 @@
   "devDependencies": {
     "@eslint/js": "^9.39.1",
     "@types/node": "^24.10.1",
-    "@types/react": "^19.2.5",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
     "daisyui": "^5.5.14",

frontend/src/App.tsx

@@ -1,6 +1,7 @@
 import "./App.css";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { useEffect } from "react";
+import { AuthProvider } from "./contexts/AuthContext.tsx";
 import Navigation from "./components/Navigation.tsx";
 import Footer from "./components/Footer.tsx";
 import AuthCallback from "./components/AuthCallback.tsx";
@@ -14,27 +15,29 @@ function App() {
   }, []);
 
   return (
-    <BrowserRouter>
+    <AuthProvider>
-      <div className="min-h-screen flex flex-col">
+      <BrowserRouter>
-        <Navigation />
+        <div className="min-h-screen flex flex-col">
-        <main className="flex-grow">
+          <Navigation />
-          <Routes>
+          <main className="flex-grow">
-            <Route
+            <Routes>
-              path="/"
+              <Route
-              element={
+                path="/"
-                <>
+                element={
-                  <Home />
+                  <>
-                  <About />
+                    <Home />
-                </>
+                    <About />
-              }
+                  </>
-            />
+                }
-            <Route path="/login" element={<Login />} />
+              />
-            <Route path="/auth/callback" element={<AuthCallback />} />
+              <Route path="/login" element={<Login />} />
-          </Routes>
+              <Route path="/auth/callback" element={<AuthCallback />} />
-        </main>
+            </Routes>
-        <Footer />
+          </main>
-      </div>
+          <Footer />
-    </BrowserRouter>
+        </div>
+      </BrowserRouter>
+    </AuthProvider>
   );
 }
 

frontend/src/components/AuthCallback.tsx

@@ -1,29 +1,36 @@
 import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
+import { useAuth } from "../contexts/AuthContext.tsx";
 
 export default function AuthCallback() {
   const navigate = useNavigate();
+  const { checkAuth } = useAuth();
 
   useEffect(() => {
-    const hash = window.location.hash.substring(1);
+    const processAuth = async () => {
-    const params = new URLSearchParams(hash);
+      const hash = window.location.hash.substring(1);
-    const token = params.get("token");
+      const params = new URLSearchParams(hash);
+      const token = params.get("token");
 
-    if (token) {
+      if (token) {
-      localStorage.setItem("auth_token", token);
+        localStorage.setItem("auth_token", token);
+        console.log("Token saved, loading user...");
 
-      navigate("/");
+        await checkAuth();
-    } else {
+
-      navigate("/login?error=no_token");
+        navigate("/", { replace: true });
-    }
+      } else {
-  }, [navigate]);
+        console.error("No token in URL");
+        navigate("/login?error=no_token");
+      }
+    };
+
+    processAuth();
+  }, [navigate, checkAuth]);
 
   return (
-    <div className="min-h-screen flex items-center justify-center">
+    <div className="fixed inset-0 bg-black flex items-center justify-center">
-      <div className="text-center">
+      <div className="w-12 h-12 border-2 border-gray-800 border-t-[hsl(270,73%,63%)] rounded-full animate-spin"></div>
-        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[hsl(270,73%,63%)] mx-auto mb-4"></div>
-        <p className="text-gray-400">Completing authentication...</p>
-      </div>
     </div>
   );
 }

frontend/src/components/Navigation.tsx

@@ -1,58 +1,15 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
+import { useAuth } from "../contexts/AuthContext.tsx";
 
-interface User {
+function AccountAvatar() {
-  name?: string;
+  const { user, isLoading, logout } = useAuth();
-  email?: string;
-  avatar?: string;
-}
-
-export default function Navigation() {
-  const [isOpen, setIsOpen] = useState(false);
-  const [user, setUser] = useState<User | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    checkAuth();
-  }, []);
-
-  const checkAuth = async () => {
-    try {
-      const token = localStorage.getItem("auth_token");
-
-      if (!token) {
-        setIsLoading(false);
-        return;
-      }
-
-      const response = await fetch("/api/v1/session", {
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-      });
-
-      if (response.ok) {
-        const data = await response.json();
-        setUser(data.user);
-        console.log("User loaded:", data.user);
-      } else {
-        console.error("Token invalid, removing");
-        localStorage.removeItem("auth_token");
-      }
-    } catch (error) {
-      console.error("Auth check failed:", error);
-      localStorage.removeItem("auth_token");
-    } finally {
-      setIsLoading(false);
-    }
-  };
 
   const handleLogout = () => {
-    localStorage.removeItem("auth_token");
+    logout();
-    setUser(null);
     window.location.href = "/";
   };
 
-  const getInitials = (user: User): string => {
+  const getInitials = (user: { name?: string; email?: string }): string => {
     if (user.name) {
       return user.name.substring(0, 2).toUpperCase();
     }
@@ -62,70 +19,73 @@ export default function Navigation() {
     return "?";
   };
 
-  const AccountAvatar = () => {
+  if (isLoading) {
-    if (isLoading) {
+    return <div className="w-10 h-10 rounded-full bg-gray-200 animate-pulse" />;
-      return (
+  }
-        <div className="w-10 h-10 rounded-full bg-gray-200 animate-pulse" />
-      );
-    }
 
-    return (
+  return (
-      <>
+    <>
-        {user ? (
+      {user ? (
-          <div
+        <div
-            className="relative cursor-pointer group"
+          className="relative cursor-pointer group"
-            onClick={handleLogout}
+          onClick={handleLogout}
-            title={`Logout (${user.name || user.email})`}
+          title={`Logout (${user.name || user.email})`}
-          >
+        >
-            {user.avatar ? (
+          {user.avatar ? (
-              <img
+            <img
-                src={user.avatar}
+              src={user.avatar}
-                alt={user.name || user.email || "User"}
+              alt={user.name || user.email || "User"}
-                className="w-10 h-10 rounded-full object-cover border-2 border-[hsl(270,73%,63%)] group-hover:border-red-500 transition-colors"
+              className="w-10 h-10 rounded-full object-cover border-2 border-[hsl(270,73%,63%)] group-hover:border-red-500 transition-colors"
-              />
+            />
-            ) : (
+          ) : (
-              <div className="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white font-semibold text-sm group-hover:from-red-500 group-hover:to-red-600 transition-colors">
+            <div className="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white font-semibold text-sm group-hover:from-red-500 group-hover:to-red-600 transition-colors">
-                {getInitials(user)}
+              {getInitials(user)}
-              </div>
-            )}
-            {/* Tooltip при наведении */}
-            <div className="absolute top-12 right-0 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
-              Click to logout
             </div>
+          )}
+          <div className="absolute top-12 right-0 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
+            Click to logout
           </div>
-        ) : (
+        </div>
-          <a
+      ) : (
-            href="/login"
+        <a
-            className="w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center hover:bg-gray-400 transition-colors"
+          href="/login"
+          className="w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center hover:bg-gray-400 transition-colors"
+        >
+          <svg
+            className="w-6 h-6 text-gray-600"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
           >
-            <svg
+            <path
-              className="w-6 h-6 text-gray-600"
+              strokeLinecap="round"
-              fill="none"
+              strokeLinejoin="round"
-              stroke="currentColor"
+              strokeWidth={2}
-              viewBox="0 0 24 24"
+              d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-            >
+            />
-              <path
+          </svg>
-                strokeLinecap="round"
+        </a>
-                strokeLinejoin="round"
+      )}
-                strokeWidth={2}
+    </>
-                d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+  );
-              />
+}
-            </svg>
+
-          </a>
+export default function Navigation() {
-        )}
+  const [isOpen, setIsOpen] = useState(false);
-      </>
+  const { user, logout } = useAuth();
-    );
+
+  const handleLogout = () => {
+    logout();
+    window.location.href = "/";
   };
 
   return (
     <>
-      {/* Account Avatar - Fixed position, synced with nav */}
       <div className="hidden md:block fixed right-4 lg:right-8 top-3 z-50">
         <AccountAvatar />
       </div>
 
       <nav className="sticky top-0 z-50 py-3">
-        {/* Desktop Navigation */}
         <div className="hidden md:flex gap-8 lg:gap-12 justify-center">
           <a
             href="/"
@@ -147,7 +107,6 @@ export default function Navigation() {
           </a>
         </div>
 
-        {/* Mobile */}
         <div className="md:hidden flex justify-between items-center px-4">
           <button
             onClick={() => setIsOpen(!isOpen)}
@@ -180,7 +139,6 @@ export default function Navigation() {
         </div>
       </nav>
 
-      {/* Mobile Menu */}
       {isOpen && (
         <>
           <div

frontend/src/contexts/AuthContext.tsx

@@ -0,0 +1,86 @@
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  type ReactNode,
+} from "react";
+
+interface User {
+  name?: string;
+  email?: string;
+  avatar?: string;
+}
+
+interface AuthContextType {
+  user: User | null;
+  isLoading: boolean;
+  checkAuth: () => Promise<void>;
+  logout: () => void;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<User | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const checkAuth = async () => {
+    setIsLoading(true);
+    try {
+      const token = localStorage.getItem("auth_token");
+
+      if (!token) {
+        setUser(null);
+        setIsLoading(false);
+        return;
+      }
+
+      const response = await fetch("/api/session", {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        setUser(data.user);
+        console.log("User loaded:", data.user);
+      } else {
+        console.error("Token invalid, removing");
+        localStorage.removeItem("auth_token");
+        setUser(null);
+      }
+    } catch (error) {
+      console.error("Auth check failed:", error);
+      localStorage.removeItem("auth_token");
+      setUser(null);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const logout = () => {
+    localStorage.removeItem("auth_token");
+    setUser(null);
+  };
+
+  useEffect(() => {
+    checkAuth();
+  }, []);
+
+  return (
+    <AuthContext.Provider value={{ user, isLoading, checkAuth, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error("useAuth must be used within AuthProvider");
+  }
+  return context;
+}