feat: change auth type from cookies to localstorage add loadpage, test auth to prod

2026-02-14 22:29:55 +03:00
parent 2b794f97a3
commit 8b7b732a24
6 changed files with 217 additions and 65 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,42 +1,117 @@
 <!doctype html>
 <html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/png" href="/favicon.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta
+            name="title"
+            content="d3m0k1d - DevOps Engineer & InfoSec Student | Go Backend Developer"
+        />
+        <meta
+            name="keywords"
+            content="DevOps, InfoSec, Backend Developer, Go, Linux, Security, Portfolio, Programming, Personal Website, Personal blog, DSTU, Don State Technical Unversity, Unix"
+        />
+        <script type="application/ld+json">
+            {
+                "@context": "https://schema.org",
+                "@type": "Person",
+                "name": "d3m0k1d",
+                "url": "https://d3m0k1d.ru",
+                "jobTitle": "DevOps Engineer",
+                "description": "DevOps Engineer, InfoSec student at DSTU, and Go backend developer",
+                "alumniOf": {
+                    "@type": "EducationalOrganization",
+                    "name": "Don State Technical University"
+                },
+                "knowsAbout": [
+                    "DevOps",
+                    "Information Security",
+                    "Backend Development",
+                    "Go",
+                    "Linux",
+                    "Infrastructure Automation"
+                ],
+                "sameAs": ["https://github.com/d3m0k1d"]
+            }
+        </script>
+        <link rel="canonical" href="https://d3m0k1d.ru" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.png" />
+        <meta name="author" content="d3m0k1d" />
+        <meta name="robots" content="index, follow" />
+        <title>d3m0k1d - DevOps Engineer & InfoSec Student</title>

-<head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="/favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="title" content="d3m0k1d - DevOps Engineer & InfoSec Student | Go Backend Developer" />
-    <meta name="keywords"
-        content="DevOps, InfoSec, Backend Developer, Go, Linux, Security, Portfolio, Programming, Personal Website, Personal blog, DSTU, Don State Technical Unversity, Unix" />
-    <script type="application/ld+json">
-    {
-        "@context": "https://schema.org",
-        "@type": "Person",
-        "name": "d3m0k1d",
-        "url": "https://d3m0k1d.ru",
-        "jobTitle": "DevOps Engineer",
-        "description": "DevOps Engineer, InfoSec student at DSTU, and Go backend developer",
-        "alumniOf": {
-            "@type": "EducationalOrganization",
-            "name": "Don State Technical University"
-        },
-        "knowsAbout": ["DevOps", "Information Security", "Backend Development", "Go", "Linux", "Infrastructure Automation"],
-        "sameAs": [
-            "https://github.com/d3m0k1d",
+        <style>
+            #initial-loader {
+                position: fixed;
+                inset: 0;
+                background: #000;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                z-index: 9999;
+                font-family: monospace;
+            }

-        ]
-    }
-    </script>
-    <link rel="canonical" href="https://d3m0k1d.ru" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.png" />
-    <meta name="author" content="d3m0k1d" />
-    <meta name="robots" content="index, follow" />
-    <title>d3m0k1d - DevOps Engineer & InfoSec Student</title>
-</head>
+            #initial-loader .spinner {
+                width: 48px;
+                height: 48px;
+                border: 3px solid rgba(255, 255, 255, 0.1);
+                border-top-color: hsl(270, 73%, 63%);
+                border-radius: 50%;
+                animation: spin 1s linear infinite;
+            }

-<body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-</body>
+            #initial-loader .text {
+                margin-top: 16px;
+                color: #666;
+                font-size: 14px;
+            }

+            #initial-loader .cursor {
+                color: hsl(270, 73%, 63%);
+                animation: blink 1s infinite;
+            }
+
+            @keyframes spin {
+                to {
+                    transform: rotate(360deg);
+                }
+            }
+
+            @keyframes blink {
+                0%,
+                50% {
+                    opacity: 1;
+                }
+                51%,
+                100% {
+                    opacity: 0;
+                }
+            }
+
+            /* Скрываем loader когда React готов */
+            body.loaded #initial-loader {
+                opacity: 0;
+                pointer-events: none;
+                transition: opacity 0.3s ease-out;
+            }
+        </style>
+    </head>
+
+    <body>
+        <!-- Initial loader -->
+        <div id="initial-loader">
+            <div class="spinner"></div>
+            <div class="text">
+                <span class="cursor">$</span> loading<span class="cursor"
+                    >_</span
+                >
+            </div>
+        </div>
+
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
 </html>
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,12 +1,18 @@
 import "./App.css";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { useEffect } from "react";
 import Navigation from "./components/Navigation.tsx";
 import Footer from "./components/Footer.tsx";
+import AuthCallback from "./components/AuthCallback.tsx";
 import Home from "./pages/Home.tsx";
 import About from "./components/Skills.tsx";
 import Login from "./pages/Login.tsx";

 function App() {
+  useEffect(() => {
+    document.body.classList.add("loaded");
+  }, []);
+
  return (
    <BrowserRouter>
      <div className="min-h-screen flex flex-col">
@@ -23,6 +29,7 @@ function App() {
              }
            />
            <Route path="/login" element={<Login />} />
+            <Route path="/auth/callback" element={<AuthCallback />} />
          </Routes>
        </main>
        <Footer />
--- a/frontend/src/components/AuthCallback.tsx
+++ b/frontend/src/components/AuthCallback.tsx
@@ -0,0 +1,29 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+export default function AuthCallback() {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const hash = window.location.hash.substring(1);
+    const params = new URLSearchParams(hash);
+    const token = params.get("token");
+
+    if (token) {
+      localStorage.setItem("auth_token", token);
+
+      navigate("/");
+    } else {
+      navigate("/login?error=no_token");
+    }
+  }, [navigate]);
+
+  return (
+    <div className="min-h-screen flex items-center justify-center">
+      <div className="text-center">
+        <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>
+  );
+}
--- a/frontend/src/components/Navigation.tsx
+++ b/frontend/src/components/Navigation.tsx
@@ -17,18 +17,41 @@ export default function Navigation() {

  const checkAuth = async () => {
    try {
-      const response = await fetch("/api/auth/session");
+      const token = localStorage.getItem("auth_token");
+
+      if (!token) {
+        setIsLoading(false);
+        return;
+      }
+
+      const response = await fetch("/api/v1/auth/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");
+    setUser(null);
+    window.location.href = "/";
+  };
+
  const getInitials = (user: User): string => {
    if (user.name) {
      return user.name.substring(0, 2).toUpperCase();
@@ -49,18 +72,26 @@ export default function Navigation() {
    return (
      <>
        {user ? (
-          <div className="relative cursor-pointer">
+          <div
+            className="relative cursor-pointer group"
+            onClick={handleLogout}
+            title={`Logout (${user.name || user.email})`}
+          >
            {user.avatar ? (
              <img
                src={user.avatar}
                alt={user.name || user.email || "User"}
-                className="w-10 h-10 rounded-full object-cover border-2 border-[hsl(270,73%,63%)]"
+                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">
+              <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)}
              </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>
        ) : (
          <a
@@ -186,13 +217,15 @@ export default function Navigation() {
                  <div className="py-3 px-4 text-sm text-gray-600">
                    {user.name || user.email}
                  </div>
-                  <a
-                    href="/logout"
-                    className="py-3 px-4 hover:bg-gray-100 rounded-lg transition-all text-red-600"
-                    onClick={() => setIsOpen(false)}
+                  <button
+                    onClick={() => {
+                      setIsOpen(false);
+                      handleLogout();
+                    }}
+                    className="py-3 px-4 hover:bg-gray-100 rounded-lg transition-all text-red-600 text-left"
                  >
                    Logout
-                  </a>
+                  </button>
                </>
              )}
            </div>
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -5,4 +5,13 @@ import tailwindcss from "@tailwindcss/vite";
 // https://vite.dev/config/
 export default defineConfig({
  plugins: [react(), tailwindcss()],
+  server: {
+    proxy: {
+      "/api": {
+        target: "http://localhost:8080",
+        changeOrigin: true,
+        secure: false,
+      },
+    },
+  },
 });