forked from baron/baron-sso
384 lines
16 KiB
TypeScript
384 lines
16 KiB
TypeScript
import { useQuery } from "@tanstack/react-query";
|
|
import {
|
|
BadgeCheck,
|
|
Building2,
|
|
ChevronDown,
|
|
Key,
|
|
KeyRound,
|
|
LayoutDashboard,
|
|
LogOut,
|
|
Moon,
|
|
NotebookTabs,
|
|
ShieldHalf,
|
|
Sun,
|
|
User as UserIcon,
|
|
Users,
|
|
} from "lucide-react";
|
|
import * as React from "react";
|
|
import { useEffect, useState } from "react";
|
|
import { useAuth } from "react-oidc-context";
|
|
import { NavLink, Outlet, useNavigate } from "react-router-dom";
|
|
import { fetchMe } from "../../lib/adminApi";
|
|
import { t } from "../../lib/i18n";
|
|
import LanguageSelector from "../common/LanguageSelector";
|
|
import RoleSwitcher from "./RoleSwitcher";
|
|
|
|
const staticNavItems = [
|
|
{ label: "ui.admin.nav.overview", to: "/", icon: LayoutDashboard },
|
|
{ label: "ui.admin.nav.users", to: "/users", icon: Users },
|
|
{ label: "ui.admin.nav.api_keys", to: "/api-keys", icon: Key },
|
|
{ label: "ui.admin.nav.audit_logs", to: "/audit-logs", icon: NotebookTabs },
|
|
{ label: "ui.admin.nav.auth_guard", to: "/auth", icon: KeyRound },
|
|
];
|
|
|
|
function AppLayout() {
|
|
const auth = useAuth();
|
|
const navigate = useNavigate();
|
|
const [theme, setTheme] = useState<"light" | "dark">(() => {
|
|
const stored = window.localStorage.getItem("admin_theme");
|
|
return stored === "dark" ? "dark" : "light";
|
|
});
|
|
const [isProfileOpen, setIsProfileOpen] = useState(false);
|
|
|
|
const { data: profile } = useQuery({
|
|
queryKey: ["me"],
|
|
queryFn: fetchMe,
|
|
enabled:
|
|
(auth.isAuthenticated && !auth.isLoading) ||
|
|
import.meta.env.MODE === "development" ||
|
|
(window as Window & typeof globalThis & { _IS_TEST_MODE?: boolean })
|
|
._IS_TEST_MODE === true,
|
|
});
|
|
|
|
const navItems = React.useMemo(() => {
|
|
const items = [...staticNavItems];
|
|
const isTest =
|
|
(window as Window & typeof globalThis & { _IS_TEST_MODE?: boolean })
|
|
._IS_TEST_MODE === true;
|
|
|
|
// 테스트 모드이면 profile이 없어도 super_admin으로 간주하여 모든 메뉴 렌더링
|
|
const isSuperAdmin = isTest || profile?.role === "super_admin";
|
|
const isTenantAdmin = profile?.role === "tenant_admin";
|
|
const manageableCount = profile?.manageableTenants?.length ?? 0;
|
|
|
|
const filteredItems = items.filter((item) => {
|
|
if (isTest) return true;
|
|
if (item.to === "/api-keys") return isSuperAdmin;
|
|
return true;
|
|
});
|
|
|
|
if (isSuperAdmin) {
|
|
filteredItems.splice(1, 0, {
|
|
label: "ui.admin.nav.tenants",
|
|
to: "/tenants",
|
|
icon: Building2,
|
|
});
|
|
} else if (isTenantAdmin || manageableCount > 0) {
|
|
if (manageableCount <= 1 && profile?.tenantId) {
|
|
// Direct link if only one (or zero in array but has tenantId) tenant
|
|
filteredItems.splice(1, 0, {
|
|
label: "ui.admin.nav.my_tenant",
|
|
to: `/tenants/${profile.tenantId}`,
|
|
icon: Building2,
|
|
});
|
|
} else if (manageableCount > 1) {
|
|
// Show list menu if multiple tenants
|
|
filteredItems.splice(1, 0, {
|
|
label: "ui.admin.nav.tenants",
|
|
to: "/tenants",
|
|
icon: Building2,
|
|
});
|
|
}
|
|
}
|
|
|
|
return filteredItems;
|
|
}, [profile]);
|
|
|
|
const handleLogout = () => {
|
|
if (
|
|
window.confirm(t("msg.admin.logout_confirm", "로그아웃 하시겠습니까?"))
|
|
) {
|
|
window.localStorage.removeItem("admin_session");
|
|
auth.removeUser();
|
|
navigate("/login");
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!auth.isLoading && !auth.isAuthenticated) {
|
|
navigate("/login");
|
|
}
|
|
}, [auth.isLoading, auth.isAuthenticated, navigate]);
|
|
|
|
useEffect(() => {
|
|
if (auth.user?.access_token) {
|
|
window.localStorage.setItem("admin_session", auth.user.access_token);
|
|
}
|
|
}, [auth.user]);
|
|
|
|
useEffect(() => {
|
|
const root = document.documentElement;
|
|
root.classList.remove("light", "dark");
|
|
if (theme === "light") {
|
|
root.classList.add("light");
|
|
} else {
|
|
root.classList.add("dark");
|
|
}
|
|
window.localStorage.setItem("admin_theme", theme);
|
|
}, [theme]);
|
|
|
|
const toggleTheme = () => {
|
|
setTheme((prev) => (prev === "light" ? "dark" : "light"));
|
|
};
|
|
|
|
if (auth.isLoading) {
|
|
return (
|
|
<div className="flex h-screen items-center justify-center bg-background">
|
|
<div className="h-8 w-8 border-4 border-primary/30 border-t-primary rounded-full animate-spin" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="grid min-h-screen bg-background text-foreground md:grid-cols-[240px,1fr]">
|
|
<aside className="border-b border-border bg-card md:sticky md:top-0 md:h-screen md:border-b-0 md:border-r md:bg-card md:backdrop-blur">
|
|
<div className="flex items-center justify-between px-5 py-4 md:block md:space-y-6 md:py-6">
|
|
<div className="flex items-center gap-3 md:flex-col md:items-start">
|
|
<div className="grid h-11 w-11 place-items-center rounded-xl bg-primary/15 text-primary shadow-[0_12px_30px_rgba(54,211,153,0.22)]">
|
|
<ShieldHalf size={20} />
|
|
</div>
|
|
<div>
|
|
<p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">
|
|
{t("ui.admin.brand", "Baron 로그인")}
|
|
</p>
|
|
<h1 className="text-lg font-semibold">
|
|
{t("ui.admin.title", "Admin Control")}
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<div className="hidden rounded-full border border-border px-3 py-2 text-xs text-muted-foreground md:inline-flex md:items-center md:gap-2">
|
|
<BadgeCheck size={14} />
|
|
{t("msg.admin.scope_admin", "Scoped to /admin")}
|
|
</div>
|
|
</div>
|
|
<nav className="px-2 pb-4 md:px-3 md:pb-8">
|
|
<div className="flex flex-wrap gap-2 px-3 pb-4 text-[11px] text-muted-foreground md:flex-col md:items-start">
|
|
<span className="rounded-full border border-border px-3 py-1">
|
|
{t("msg.admin.idp_env_prod", "IDP env: prod")}
|
|
</span>
|
|
<span className="rounded-full border border-border px-3 py-1">
|
|
{t("msg.admin.tenant_headers", "Tenant-aware headers")}
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
{navItems.map(({ label, to, icon: Icon }) => (
|
|
<NavLink
|
|
key={to}
|
|
to={to}
|
|
className={({ isActive }) =>
|
|
[
|
|
"flex items-center gap-3 rounded-xl px-3 py-3 text-sm transition",
|
|
isActive
|
|
? "bg-primary/10 text-primary shadow-[0_12px_40px_rgba(54,211,153,0.18)]"
|
|
: "text-muted-foreground hover:bg-muted/10 hover:text-foreground",
|
|
].join(" ")
|
|
}
|
|
>
|
|
<Icon size={18} />
|
|
<span>{t(label, label)}</span>
|
|
</NavLink>
|
|
))}
|
|
</div>
|
|
|
|
<div className="px-3 pt-4 border-t border-border/50">
|
|
<button
|
|
type="button"
|
|
onClick={handleLogout}
|
|
className="w-full flex items-center gap-3 rounded-xl px-3 py-3 text-sm transition text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
|
|
>
|
|
<LogOut size={18} />
|
|
<span>{t("ui.admin.nav.logout", "Logout")}</span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
<div className="hidden space-y-2 px-5 pb-6 text-xs text-[var(--color-muted)] md:block">
|
|
<p>
|
|
{t(
|
|
"msg.admin.notice.scope",
|
|
"관리 기능은 /admin 네임스페이스에서만 노출합니다.",
|
|
)}
|
|
</p>
|
|
<p>
|
|
{t(
|
|
"msg.admin.notice.idp_policy",
|
|
"IDP 관리 키는 서버 내부 래핑 API로만 사용하며, 감사·레이트리밋을 기본 적용합니다.",
|
|
)}
|
|
</p>
|
|
</div>
|
|
</aside>
|
|
|
|
<div className="relative">
|
|
<header className="sticky top-0 z-20 border-b border-border bg-background/90 backdrop-blur">
|
|
<div className="flex items-center justify-between px-5 py-4 md:px-8">
|
|
<div className="flex flex-col gap-1">
|
|
<p className="text-xs uppercase tracking-[0.22em] text-muted-foreground">
|
|
{t("ui.admin.header.plane", "Admin Plane")}
|
|
</p>
|
|
<span className="text-lg font-semibold">
|
|
{t(
|
|
"msg.admin.header.subtitle",
|
|
"Tenant isolation & least privilege by default",
|
|
)}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-sm">
|
|
<LanguageSelector />
|
|
<button
|
|
type="button"
|
|
onClick={toggleTheme}
|
|
className="inline-flex items-center gap-2 rounded-full border border-border px-3 py-2 text-muted-foreground transition hover:bg-muted/20"
|
|
aria-label={t("ui.common.theme_toggle", "테마 전환")}
|
|
>
|
|
{theme === "light" ? <Sun size={16} /> : <Moon size={16} />}
|
|
{theme === "light"
|
|
? t("ui.common.theme_light", "Light")
|
|
: t("ui.common.theme_dark", "Dark")}
|
|
</button>
|
|
|
|
<div className="relative">
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsProfileOpen(!isProfileOpen)}
|
|
className="inline-flex items-center gap-2 rounded-full border border-border bg-card px-3 py-1.5 text-muted-foreground transition hover:bg-muted/20"
|
|
>
|
|
<div className="flex h-7 w-7 items-center justify-center rounded-full bg-primary/10 text-primary font-bold text-xs uppercase">
|
|
{profile?.name?.charAt(0) || <UserIcon size={14} />}
|
|
</div>
|
|
<span className="hidden max-w-[100px] truncate font-medium md:inline-block">
|
|
{profile?.name || auth.user?.profile.name || "User"}
|
|
</span>
|
|
<ChevronDown
|
|
size={14}
|
|
className={`transition-transform duration-200 ${isProfileOpen ? "rotate-180" : ""}`}
|
|
/>
|
|
</button>
|
|
|
|
{isProfileOpen && (
|
|
<>
|
|
<div
|
|
className="fixed inset-0 z-30"
|
|
onClick={() => setIsProfileOpen(false)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Escape") setIsProfileOpen(false);
|
|
}}
|
|
role="button"
|
|
tabIndex={-1}
|
|
aria-label="Close profile menu"
|
|
/>
|
|
<div className="absolute right-0 mt-2 w-56 origin-top-right rounded-xl border border-border bg-card p-2 shadow-xl ring-1 ring-black ring-opacity-5 focus:outline-none z-40 animate-in fade-in zoom-in-95 duration-200">
|
|
<div className="px-3 py-3 border-b border-border/50 mb-1">
|
|
<p className="text-sm font-semibold truncate">
|
|
{profile?.name || auth.user?.profile.name}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground truncate">
|
|
{profile?.email || auth.user?.profile.email}
|
|
</p>
|
|
<div className="mt-2">
|
|
<span className="inline-flex items-center rounded-md bg-primary/10 px-2 py-0.5 text-[10px] font-medium text-primary uppercase">
|
|
{t(
|
|
`ui.admin.role.${profile?.role || "user"}`,
|
|
profile?.role || "USER",
|
|
)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Manageable Tenants Section */}
|
|
{profile?.manageableTenants &&
|
|
profile.manageableTenants.length > 0 && (
|
|
<div className="px-2 py-2 border-b border-border/50 mb-1">
|
|
<p className="px-1 mb-2 text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
|
|
{t(
|
|
"ui.admin.profile.manageable_tenants",
|
|
"Manageable Tenants",
|
|
)}
|
|
</p>
|
|
<div className="max-h-40 overflow-y-auto space-y-1 pr-1 custom-scrollbar">
|
|
{profile.manageableTenants.map((tenant) => (
|
|
<button
|
|
key={tenant.id}
|
|
type="button"
|
|
onClick={() => {
|
|
setIsProfileOpen(false);
|
|
navigate(`/tenants/${tenant.id}`);
|
|
}}
|
|
className="w-full flex items-center gap-2 rounded-lg px-2 py-1.5 text-xs text-left text-muted-foreground transition hover:bg-muted/50 hover:text-foreground group"
|
|
>
|
|
<div className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-muted text-muted-foreground group-hover:bg-primary/20 group-hover:text-primary transition-colors">
|
|
{tenant.type === "USER_GROUP" ? (
|
|
<Users size={12} />
|
|
) : (
|
|
<Building2 size={12} />
|
|
)}
|
|
</div>
|
|
<div className="flex flex-col truncate">
|
|
<span className="font-medium truncate">
|
|
{tenant.name}
|
|
</span>
|
|
<span className="text-[9px] opacity-60 font-mono truncate">
|
|
{tenant.slug}
|
|
</span>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setIsProfileOpen(false);
|
|
navigate(
|
|
`/users/${profile?.id || auth.user?.profile.sub}`,
|
|
);
|
|
}}
|
|
className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
|
|
>
|
|
<UserIcon size={16} />
|
|
<span>{t("ui.userfront.nav.profile", "내 정보")}</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setIsProfileOpen(false);
|
|
handleLogout();
|
|
}}
|
|
className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-destructive transition hover:bg-destructive/10"
|
|
>
|
|
<LogOut size={16} />
|
|
<span>{t("ui.admin.nav.logout", "Logout")}</span>
|
|
</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
<span className="hidden md:inline-flex rounded-full border border-border px-3 py-2 text-muted-foreground">
|
|
{t("msg.admin.session_ttl", "Session TTL: 15m admin")}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main className="px-5 py-6 md:px-10 md:py-10">
|
|
<Outlet />
|
|
</main>
|
|
<RoleSwitcher />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default AppLayout;
|
|
// force reload
|