forked from baron/baron-sso
396 lines
15 KiB
TypeScript
396 lines
15 KiB
TypeScript
import { useQuery } from "@tanstack/react-query";
|
|
import {
|
|
BadgeCheck,
|
|
LogOut,
|
|
Moon,
|
|
NotebookTabs,
|
|
ShieldHalf,
|
|
Sun,
|
|
User as UserIcon,
|
|
} from "lucide-react";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { useAuth } from "react-oidc-context";
|
|
import { NavLink, Outlet, useNavigate } from "react-router-dom";
|
|
import { t } from "../../lib/i18n";
|
|
import { resolveProfileRole } from "../../lib/role";
|
|
import LanguageSelector from "../common/LanguageSelector";
|
|
import { Toaster } from "../ui/toaster";
|
|
import { Badge } from "../ui/badge";
|
|
import { fetchMe } from "../../features/auth/authApi";
|
|
|
|
const navItems = [
|
|
{
|
|
labelKey: "ui.dev.nav.clients",
|
|
labelFallback: "Clients",
|
|
to: "/clients",
|
|
icon: ShieldHalf,
|
|
},
|
|
{
|
|
labelKey: "ui.dev.nav.audit_logs",
|
|
labelFallback: "Audit Logs",
|
|
to: "/audit-logs",
|
|
icon: NotebookTabs,
|
|
},
|
|
];
|
|
|
|
function AppLayout() {
|
|
const auth = useAuth();
|
|
const navigate = useNavigate();
|
|
const profileMenuRef = useRef<HTMLDivElement>(null);
|
|
const [theme, setTheme] = useState<"light" | "dark">(() => {
|
|
const stored = window.localStorage.getItem("admin_theme");
|
|
return stored === "dark" ? "dark" : "light";
|
|
});
|
|
const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false);
|
|
const [isRefreshingSession, setIsRefreshingSession] = useState(false);
|
|
const [nowMs, setNowMs] = useState(() => Date.now());
|
|
|
|
const hasAccessToken = Boolean(auth.user?.access_token);
|
|
const { data: profile } = useQuery({
|
|
queryKey: ["userMe"],
|
|
queryFn: fetchMe,
|
|
enabled: hasAccessToken,
|
|
});
|
|
|
|
const handleLogout = () => {
|
|
if (window.confirm(t("msg.dev.logout_confirm", "로그아웃 하시겠습니까?"))) {
|
|
auth.removeUser();
|
|
navigate("/login");
|
|
}
|
|
};
|
|
|
|
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]);
|
|
|
|
useEffect(() => {
|
|
const timer = window.setInterval(() => {
|
|
setNowMs(Date.now());
|
|
}, 1000);
|
|
return () => {
|
|
window.clearInterval(timer);
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
if (
|
|
profileMenuRef.current &&
|
|
!profileMenuRef.current.contains(event.target as Node)
|
|
) {
|
|
setIsProfileMenuOpen(false);
|
|
}
|
|
};
|
|
|
|
document.addEventListener("mousedown", handleClickOutside);
|
|
return () => {
|
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
};
|
|
}, []);
|
|
|
|
const toggleTheme = () => {
|
|
setTheme((prev) => (prev === "light" ? "dark" : "light"));
|
|
};
|
|
|
|
const profileName =
|
|
auth.user?.profile?.name?.toString().trim() ||
|
|
auth.user?.profile?.preferred_username?.toString().trim() ||
|
|
auth.user?.profile?.nickname?.toString().trim() ||
|
|
t("ui.dev.profile.unknown_name", "Unknown User");
|
|
const profileEmail =
|
|
auth.user?.profile?.email?.toString().trim() ||
|
|
t("ui.dev.profile.unknown_email", "unknown@example.com");
|
|
const profileInitial = profileName.charAt(0).toUpperCase();
|
|
const currentRole = resolveProfileRole(
|
|
auth.user?.profile as Record<string, unknown> | undefined,
|
|
);
|
|
|
|
// Use profile.role from API if available, otherwise fallback to local role
|
|
const displayRoleKey = profile?.role || currentRole;
|
|
|
|
const isDevConsoleAllowed = [
|
|
"super_admin",
|
|
"tenant_admin",
|
|
"rp_admin",
|
|
].includes(currentRole);
|
|
const expiresAtSec = auth.user?.expires_at;
|
|
const remainingMs =
|
|
typeof expiresAtSec === "number" ? expiresAtSec * 1000 - nowMs : null;
|
|
const remainingTotalSec =
|
|
remainingMs !== null ? Math.max(0, Math.floor(remainingMs / 1000)) : null;
|
|
const remainingMinutes =
|
|
remainingTotalSec !== null ? Math.floor(remainingTotalSec / 60) : null;
|
|
const remainingSeconds =
|
|
remainingTotalSec !== null ? remainingTotalSec % 60 : null;
|
|
|
|
let sessionToneClass =
|
|
"border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300";
|
|
let sessionText = t("ui.dev.session.active", "세션 만료 시간 확인 중");
|
|
|
|
if (remainingMs === null) {
|
|
sessionToneClass = "border-border bg-card text-muted-foreground";
|
|
sessionText = t("ui.dev.session.unknown", "세션 만료 시간 확인 불가");
|
|
} else if (remainingMs <= 0) {
|
|
sessionToneClass =
|
|
"border-rose-500/30 bg-rose-500/10 text-rose-700 dark:text-rose-300";
|
|
sessionText = t("ui.dev.session.expired", "세션 만료됨");
|
|
} else {
|
|
if (
|
|
remainingMinutes !== null &&
|
|
remainingSeconds !== null &&
|
|
remainingMinutes <= 5
|
|
) {
|
|
sessionToneClass =
|
|
"border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300";
|
|
sessionText = t(
|
|
"ui.dev.session.expiring",
|
|
"만료 임박: {{minutes}}분 {{seconds}}초 남음",
|
|
{
|
|
minutes: remainingMinutes,
|
|
seconds: remainingSeconds,
|
|
},
|
|
);
|
|
} else {
|
|
sessionText = t(
|
|
"ui.dev.session.remaining",
|
|
"만료까지 {{minutes}}분 {{seconds}}초",
|
|
{
|
|
minutes: remainingMinutes ?? 0,
|
|
seconds: remainingSeconds ?? 0,
|
|
},
|
|
);
|
|
}
|
|
}
|
|
|
|
const handleRefreshSessionExpiry = async () => {
|
|
if (isRefreshingSession) {
|
|
return;
|
|
}
|
|
setIsRefreshingSession(true);
|
|
try {
|
|
await auth.signinSilent();
|
|
setNowMs(Date.now());
|
|
setIsProfileMenuOpen(false);
|
|
} catch (error) {
|
|
console.error("Failed to refresh session expiry:", error);
|
|
} finally {
|
|
setIsRefreshingSession(false);
|
|
}
|
|
};
|
|
|
|
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 flex flex-col justify-between">
|
|
<div>
|
|
<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.dev.brand", "Baron 로그인")}
|
|
</p>
|
|
<h1 className="text-lg font-semibold">
|
|
{t("ui.dev.console_title", "Developer Console")}
|
|
</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("ui.dev.scope_badge", "Scoped to /dev")}
|
|
</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("ui.dev.env_badge", "Env: dev")}
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
{isDevConsoleAllowed &&
|
|
navItems.map(({ labelKey, labelFallback, 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(labelKey, labelFallback)}</span>
|
|
</NavLink>
|
|
))}
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
<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.dev.nav.logout", "Logout")}</span>
|
|
</button>
|
|
</div>
|
|
<div className="hidden space-y-2 px-5 pb-6 pt-2 text-xs text-[var(--color-muted)] md:block">
|
|
<p>{t("msg.dev.sidebar.notice", "Developer Console")}</p>
|
|
<p>
|
|
{t(
|
|
"msg.dev.sidebar.notice_detail",
|
|
"Register and manage client applications.",
|
|
)}
|
|
</p>
|
|
</div>
|
|
</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.dev.header.plane", "Dev Plane")}
|
|
</p>
|
|
<span className="text-lg font-semibold">
|
|
{t("ui.dev.header.subtitle", "Manage your applications")}
|
|
</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>
|
|
<span
|
|
className={[
|
|
"hidden rounded-full border px-3 py-2 text-xs font-medium md:inline-flex",
|
|
sessionToneClass,
|
|
].join(" ")}
|
|
>
|
|
{sessionText}
|
|
</span>
|
|
<div className="relative" ref={profileMenuRef}>
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsProfileMenuOpen((prev) => !prev)}
|
|
className="inline-flex items-center gap-3 rounded-full border border-border bg-card px-3 py-2 transition hover:bg-muted/20"
|
|
aria-haspopup="menu"
|
|
aria-expanded={isProfileMenuOpen}
|
|
aria-label={t("ui.dev.profile.menu_aria", "계정 메뉴 열기")}
|
|
>
|
|
<div className="grid h-8 w-8 place-items-center rounded-full bg-primary/15 text-xs font-semibold text-primary">
|
|
{profileInitial}
|
|
</div>
|
|
<div className="hidden min-w-0 text-left md:block">
|
|
<p className="truncate text-xs font-medium text-foreground">
|
|
{profileName}
|
|
</p>
|
|
<p className="truncate text-[11px] text-muted-foreground">
|
|
{profileEmail}
|
|
</p>
|
|
</div>
|
|
</button>
|
|
{isProfileMenuOpen ? (
|
|
<div
|
|
role="menu"
|
|
className="absolute right-0 z-30 mt-2 w-72 rounded-xl border border-border bg-card p-3 shadow-xl"
|
|
>
|
|
<p className="text-xs uppercase tracking-[0.16em] text-muted-foreground">
|
|
{t("ui.dev.profile.menu_title", "Account")}
|
|
</p>
|
|
<div className="mt-2 rounded-lg border border-border px-3 py-3 flex flex-col gap-2">
|
|
<div>
|
|
<p className="truncate text-sm font-semibold text-foreground">
|
|
{profileName}
|
|
</p>
|
|
<p className="truncate text-xs text-muted-foreground">
|
|
{profileEmail}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center pt-1">
|
|
<Badge
|
|
variant="outline"
|
|
className="text-[10px] px-2 py-0"
|
|
>
|
|
{t(
|
|
`ui.common.role.${displayRoleKey}`,
|
|
displayRoleKey.toUpperCase(),
|
|
)}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
role="menuitem"
|
|
className="mt-2 w-full flex items-center gap-2 rounded-lg border border-border px-3 py-2 text-left text-sm text-foreground transition hover:bg-muted/20"
|
|
onClick={() => {
|
|
navigate("/profile");
|
|
setIsProfileMenuOpen(false);
|
|
}}
|
|
>
|
|
<UserIcon size={16} className="text-muted-foreground" />
|
|
<span>{t("ui.dev.profile.title", "내 정보")}</span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
role="menuitem"
|
|
className="mt-2 w-full rounded-lg border border-border px-3 py-2 text-left text-sm text-foreground transition hover:bg-muted/20 disabled:cursor-not-allowed disabled:opacity-60"
|
|
onClick={handleRefreshSessionExpiry}
|
|
disabled={isRefreshingSession}
|
|
>
|
|
{isRefreshingSession
|
|
? t("ui.dev.session.refreshing", "Refreshing...")
|
|
: t("ui.dev.session.refresh", "Refresh session expiry")}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
role="menuitem"
|
|
className="mt-2 w-full flex items-center gap-2 rounded-lg border border-border px-3 py-2 text-left text-sm text-muted-foreground transition hover:bg-destructive/10 hover:text-destructive"
|
|
onClick={handleLogout}
|
|
>
|
|
<LogOut size={16} />
|
|
<span>{t("ui.dev.nav.logout", "Logout")}</span>
|
|
</button>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main className="px-5 py-6 md:px-10 md:py-10">
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
<Toaster />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default AppLayout;
|
|
// force reload
|