137 lines
4.3 KiB
TypeScript
137 lines
4.3 KiB
TypeScript
import { useState, useCallback } from "react";
|
|
import { Outlet, Navigate, useLocation } from "react-router-dom";
|
|
import { motion } from "framer-motion";
|
|
import { useAuth } from "../context/AuthContext";
|
|
import { useTheme } from "../../context/ThemeContext";
|
|
import { setLogoutAlert } from "../utils/api";
|
|
import useModalLock from "../hooks/useModalLock";
|
|
import Sidebar from "./Sidebar";
|
|
import ShortcutsHelp from "./ShortcutsHelp";
|
|
|
|
export default function AdminLayout() {
|
|
const { isAuthenticated, loading, user, logout } = useAuth();
|
|
const { theme, toggleTheme } = useTheme();
|
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
|
const [loggingOut, setLoggingOut] = useState(false);
|
|
const location = useLocation();
|
|
|
|
// Session is managed by AuthProvider (initial check + proactive refresh via setTimeout).
|
|
// Do not call checkSession on route changes — concurrent refresh calls with token rotation
|
|
// would invalidate each other and kick the user out.
|
|
|
|
const handleLogout = useCallback(() => {
|
|
setLoggingOut(true);
|
|
setSidebarOpen(false);
|
|
setLogoutAlert();
|
|
setTimeout(() => logout(), 400);
|
|
}, [logout]);
|
|
|
|
useModalLock(sidebarOpen);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="admin-layout">
|
|
<div className="admin-loading" style={{ width: "100%" }}>
|
|
<div className="admin-spinner" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!isAuthenticated) {
|
|
return <Navigate to="/login" replace />;
|
|
}
|
|
|
|
// If 2FA is required but user hasn't enabled it, redirect to dashboard (where setup lives)
|
|
const needs2FASetup = user?.require2FA && !user?.totpEnabled;
|
|
if (needs2FASetup && location.pathname !== "/") {
|
|
return <Navigate to="/" replace />;
|
|
}
|
|
|
|
return (
|
|
<motion.div
|
|
className="admin-layout"
|
|
initial={{ opacity: 0, scale: 0.98 }}
|
|
animate={
|
|
loggingOut
|
|
? { scale: 1.5, opacity: 0, filter: "blur(12px)" }
|
|
: { scale: 1, opacity: 1, filter: "none" }
|
|
}
|
|
transition={{ duration: loggingOut ? 0.4 : 0.25, ease: [0.4, 0, 0.2, 1] }}
|
|
>
|
|
<Sidebar
|
|
isOpen={sidebarOpen}
|
|
onClose={() => setSidebarOpen(false)}
|
|
onLogout={handleLogout}
|
|
/>
|
|
|
|
<div className="admin-main">
|
|
<header className="admin-header">
|
|
<button
|
|
onClick={() => setSidebarOpen(true)}
|
|
className="admin-menu-btn"
|
|
aria-label="Otevřít menu"
|
|
>
|
|
<svg
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
>
|
|
<line x1="3" y1="12" x2="21" y2="12" />
|
|
<line x1="3" y1="6" x2="21" y2="6" />
|
|
<line x1="3" y1="18" x2="21" y2="18" />
|
|
</svg>
|
|
</button>
|
|
|
|
<div className="flex-1" />
|
|
|
|
<button
|
|
onClick={toggleTheme}
|
|
className="admin-header-theme-btn"
|
|
title={theme === "dark" ? "Světlý režim" : "Tmavý režim"}
|
|
aria-label={theme === "dark" ? "Světlý režim" : "Tmavý režim"}
|
|
>
|
|
<span
|
|
className={`admin-theme-icon ${theme === "light" ? "visible" : ""}`}
|
|
>
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
>
|
|
<circle cx="12" cy="12" r="5" />
|
|
<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
|
|
</svg>
|
|
</span>
|
|
<span
|
|
className={`admin-theme-icon ${theme === "dark" ? "visible" : ""}`}
|
|
>
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
>
|
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
</header>
|
|
|
|
<main className="admin-content">
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
<ShortcutsHelp />
|
|
</motion.div>
|
|
);
|
|
}
|