1
0
forked from baron/baron-sso

Merge branch 'dev' into feature/af-issue363

This commit is contained in:
2026-03-18 09:05:23 +09:00
35 changed files with 2225 additions and 317 deletions

View File

@@ -8,6 +8,7 @@ import ClientConsentsPage from "../features/clients/ClientConsentsPage";
import ClientDetailsPage from "../features/clients/ClientDetailsPage";
import ClientGeneralPage from "../features/clients/ClientGeneralPage";
import ClientsPage from "../features/clients/ClientsPage";
import ProfilePage from "../features/profile/ProfilePage";
export const router = createBrowserRouter(
[
@@ -33,6 +34,7 @@ export const router = createBrowserRouter(
{ path: "clients/:id/consents", element: <ClientConsentsPage /> },
{ path: "clients/:id/settings", element: <ClientGeneralPage /> },
{ path: "audit-logs", element: <AuditLogsPage /> },
{ path: "profile", element: <ProfilePage /> },
],
},
],

View File

@@ -1,3 +1,4 @@
import { useQuery } from "@tanstack/react-query";
import {
BadgeCheck,
LogOut,
@@ -5,13 +6,17 @@ import {
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 = [
{
@@ -40,6 +45,13 @@ function AppLayout() {
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();
@@ -96,6 +108,18 @@ function AppLayout() {
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;
@@ -191,23 +215,24 @@ function AppLayout() {
</span>
</div>
<div className="flex flex-col gap-1">
{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>
))}
{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>
@@ -296,14 +321,41 @@ function AppLayout() {
<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-2">
<p className="truncate text-sm font-semibold text-foreground">
{profileName}
</p>
<p className="truncate text-xs text-muted-foreground">
{profileEmail}
</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"

View File

@@ -1,5 +1,7 @@
import { useAuth } from "react-oidc-context";
import { Navigate, Outlet } from "react-router-dom";
import { t } from "../../lib/i18n";
import { resolveProfileRole } from "../../lib/role";
export default function AuthGuard() {
const auth = useAuth();
@@ -16,5 +18,39 @@ export default function AuthGuard() {
return <Navigate to="/login" replace />;
}
const normalizedRole = resolveProfileRole(
auth.user?.profile as Record<string, unknown> | undefined,
);
const isTenantMember =
normalizedRole === "user" || normalizedRole === "tenant_member";
if (isTenantMember) {
return (
<div className="min-h-screen grid place-items-center bg-background text-foreground p-6">
<div className="max-w-lg w-full rounded-xl border border-border bg-card p-6 space-y-4">
<h1 className="text-xl font-semibold">
{t("msg.dev.auth.access_denied_title", "접근 권한이 없습니다.")}
</h1>
<p className="text-sm text-muted-foreground">
{t(
"msg.dev.auth.access_denied_description",
"DevFront는 관리자 전용 화면입니다. 권한이 필요하면 관리자에게 요청해 주세요.",
)}
</p>
<button
type="button"
className="inline-flex items-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90"
onClick={() => {
auth.removeUser();
window.location.href = "/login";
}}
>
{t("ui.common.back_to_login", "로그인으로 돌아가기")}
</button>
</div>
</div>
);
}
return <Outlet />;
}

View File

@@ -356,7 +356,7 @@ function ClientConsentsPage() {
<div className="flex justify-end">
<Button
variant="link"
variant="ghost"
size="sm"
className="text-xs text-muted-foreground p-0 h-auto"
onClick={() => {

View File

@@ -262,7 +262,7 @@ function ClientsPage() {
</select>
</div>
<Button
variant="link"
variant="ghost"
size="sm"
className="text-xs text-muted-foreground ml-auto"
onClick={() => {
@@ -291,7 +291,7 @@ function ClientsPage() {
item.tone === "up"
? "success"
: item.tone === "down"
? "destructive"
? "warning"
: "muted"
}
className={cn(

View File

@@ -0,0 +1,216 @@
import { useQuery } from "@tanstack/react-query";
import {
User,
Shield,
Briefcase,
Mail,
Fingerprint,
Building2,
} from "lucide-react";
import { useState } from "react";
import { useAuth } from "react-oidc-context";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "../../components/ui/card";
import { fetchMe } from "../auth/authApi";
import { t } from "../../lib/i18n";
function ProfilePage() {
const auth = useAuth();
const hasAccessToken = Boolean(auth.user?.access_token);
const {
data: profile,
isLoading,
error,
} = useQuery({
queryKey: ["userMe"],
queryFn: fetchMe,
enabled: hasAccessToken,
});
const [activeTab, setActiveTab] = useState<"basic" | "role">("basic");
if (isLoading) {
return (
<div className="p-8 text-center">
{t("ui.dev.profile.loading", "Loading profile...")}
</div>
);
}
if (error || !profile) {
return (
<div className="p-8 text-center text-red-500">
{t("ui.dev.profile.error", "Failed to load profile information.")}
</div>
);
}
// Fallback to token information if API data is incomplete
const displayTenant =
profile.tenant?.name ||
profile.tenantId ||
auth.user?.profile?.tenant_id?.toString() ||
"-";
const displayCompanyCode =
profile.companyCode || auth.user?.profile?.companyCode?.toString() || "-";
return (
<div className="space-y-6 max-w-4xl mx-auto">
<div>
<h1 className="text-3xl font-black tracking-tight">
{t("ui.dev.profile.title", "내 정보")}
</h1>
<p className="text-muted-foreground mt-2">
{t(
"ui.dev.profile.subtitle",
"사용자 상세 정보 및 할당된 역할(Role)을 확인합니다.",
)}
</p>
</div>
<div className="flex space-x-1 border-b border-border pb-px">
<button
type="button"
onClick={() => setActiveTab("basic")}
className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
activeTab === "basic"
? "border-primary text-primary"
: "border-transparent text-muted-foreground hover:text-foreground hover:border-border"
}`}
>
{t("ui.dev.profile.tab.basic", "기본 정보")}
</button>
<button
type="button"
onClick={() => setActiveTab("role")}
className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
activeTab === "role"
? "border-primary text-primary"
: "border-transparent text-muted-foreground hover:text-foreground hover:border-border"
}`}
>
{t("ui.dev.profile.tab.role", "권한 및 역할")}
</button>
</div>
<div className="pt-4">
{activeTab === "basic" && (
<div className="grid gap-6 md:grid-cols-2">
<Card className="glass-panel">
<CardHeader>
<CardTitle className="text-lg flex items-center gap-2">
<User className="h-5 w-5 text-primary" />
{t("ui.dev.profile.basic.title", "사용자 정보")}
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-1">
<p className="text-sm font-medium text-muted-foreground flex items-center gap-2">
<Fingerprint className="h-4 w-4" />
{t("ui.dev.profile.basic.id", "User ID")}
</p>
<p className="text-sm break-all font-mono bg-muted/50 p-2 rounded-md">
{profile.id}
</p>
</div>
<div className="space-y-1">
<p className="text-sm font-medium text-muted-foreground flex items-center gap-2">
<User className="h-4 w-4" />
{t("ui.dev.profile.basic.name", "Name")}
</p>
<p className="text-sm">{profile.name}</p>
</div>
<div className="space-y-1">
<p className="text-sm font-medium text-muted-foreground flex items-center gap-2">
<Mail className="h-4 w-4" />
{t("ui.dev.profile.basic.email", "Email")}
</p>
<p className="text-sm">{profile.email}</p>
</div>
<div className="space-y-1">
<p className="text-sm font-medium text-muted-foreground flex items-center gap-2">
<Briefcase className="h-4 w-4" />
{t("ui.dev.profile.basic.phone", "Phone")}
</p>
<p className="text-sm">{profile.phone || "-"}</p>
</div>
</CardContent>
</Card>
<Card className="glass-panel">
<CardHeader>
<CardTitle className="text-lg flex items-center gap-2">
<Building2 className="h-5 w-5 text-primary" />
{t("ui.dev.profile.org.title", "조직 정보")}
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-1">
<p className="text-sm font-medium text-muted-foreground">
{t("ui.dev.profile.org.tenant", "테넌트")}
</p>
<p className="text-sm">{displayTenant}</p>
</div>
<div className="space-y-1">
<p className="text-sm font-medium text-muted-foreground">
{t("ui.dev.profile.org.company_code", "회사 코드")}
</p>
<p className="text-sm">{displayCompanyCode}</p>
</div>
</CardContent>
</Card>
</div>
)}
{activeTab === "role" && (
<Card className="glass-panel">
<CardHeader>
<CardTitle className="text-lg flex items-center gap-2">
<Shield className="h-5 w-5 text-primary" />
{t("ui.dev.profile.role.title", "시스템 역할")}
</CardTitle>
<CardDescription>
{t(
"ui.dev.profile.role.description",
"현재 계정에 부여된 권한 등급입니다.",
)}
</CardDescription>
</CardHeader>
<CardContent>
<div className="flex items-center gap-4 bg-muted/30 p-4 rounded-lg border border-border">
<div className="h-12 w-12 rounded-full bg-primary/20 flex items-center justify-center text-primary shrink-0">
<Briefcase className="h-6 w-6" />
</div>
<div className="flex flex-col gap-1 w-full">
<p className="text-sm text-muted-foreground font-medium uppercase tracking-wider">
{t("ui.dev.profile.role.current", "Current Role")}
</p>
<p className="text-xl font-bold mt-1">
{t(
`ui.common.role.${profile.role}`,
profile.role.toUpperCase(),
)}
</p>
<p className="mt-1 text-sm text-muted-foreground">
{t(
`ui.dev.profile.role.desc_${profile.role}`,
"시스템 역할에 대한 설명이 제공되지 않았습니다.",
)}
</p>
</div>
</div>
</CardContent>
</Card>
)}
</div>
</div>
);
}
export default ProfilePage;

27
devfront/src/lib/role.ts Normal file
View File

@@ -0,0 +1,27 @@
export function normalizeRole(rawRole: unknown): string {
if (typeof rawRole !== "string") return "";
const role = rawRole.trim().toLowerCase();
if (role === "tenant_member") return "user";
if (role === "admin") return "tenant_admin";
if (role === "superadmin") return "super_admin";
if (role === "tenantadmin") return "tenant_admin";
if (role === "rpadmin") return "rp_admin";
return role;
}
export function resolveProfileRole(
profile: Record<string, unknown> | undefined,
) {
if (!profile) return "";
const candidates = [
profile.role,
profile.grade,
profile["custom:role"],
profile["custom:grade"],
];
for (const candidate of candidates) {
const normalized = normalizeRole(candidate);
if (normalized) return normalized;
}
return "";
}

View File

@@ -313,6 +313,10 @@ unknown_error = "unknown error"
[msg.dev]
logout_confirm = "Are you sure you want to log out?"
[msg.dev.auth]
access_denied_description = "DevFront is for administrators only. Request access from your administrator."
access_denied_title = "Access denied."
[msg.dev.audit]
empty = "No audit logs found."
forbidden = "You do not have permission to view audit logs. Please request access from an administrator."
@@ -1140,6 +1144,7 @@ all = "All"
admin_only = "Admin Only"
assign = "Assign"
back = "Back"
back_to_login = "Back to login"
cancel = "Cancel"
change_file = "Change File"
clear_search = "Clear Search"
@@ -1657,3 +1662,51 @@ verify = "Verify"
[ui.userfront.signup.success]
action = "Action"
[ui.dev.profile]
unknown_name = "Unknown User"
unknown_email = "unknown@example.com"
menu_aria = "Open account menu"
menu_title = "Account"
title = "Profile"
subtitle = "View user details and assigned roles."
loading = "Loading profile..."
error = "Failed to load profile."
[ui.dev.profile.tab]
basic = "Basic Info"
role = "Roles & Permissions"
[ui.dev.profile.basic]
title = "User Info"
id = "User ID"
name = "Name"
email = "Email"
phone = "Phone Number"
[ui.dev.profile.org]
title = "Organization Info"
tenant = "Tenant"
company_code = "Company Code"
[ui.dev.profile.role]
title = "System Role"
description = "The permission level granted to this account."
current = "Current Role"
desc_super_admin = "Can manage all tenants and applications system-wide without restriction."
desc_tenant_admin = "Can manage all applications within their assigned tenant."
desc_rp_admin = "Can view and manage only assigned/linked applications."
desc_user = "Standard application access. DevFront access is denied."
desc_tenant_member = "Standard application access. DevFront access is denied."
[ui.admin.nav]
api_keys = "API Keys"
audit_logs = "Audit Logs"
auth_guard = "Auth Guard"
logout = "Logout"
overview = "Overview"
relying_parties = "Apps (RP)"
tenant_dashboard = "Tenant Dashboard"
user_groups = "User Groups"
tenants = "Tenants"
users = "Users"

View File

@@ -313,6 +313,10 @@ unknown_error = "알 수 없는 오류"
[msg.dev]
logout_confirm = "로그아웃 하시겠습니까?"
[msg.dev.auth]
access_denied_description = "DevFront는 관리자 전용 화면입니다. 권한이 필요하면 관리자에게 요청해 주세요."
access_denied_title = "접근 권한이 없습니다."
[msg.dev.audit]
empty = "조회된 감사 로그가 없습니다."
forbidden = "감사 로그를 조회할 권한이 없습니다. 관리자에게 권한을 요청해주세요."
@@ -1140,6 +1144,7 @@ all = "전체"
admin_only = "관리자 전용"
assign = "할당"
back = "돌아가기"
back_to_login = "로그인으로 돌아가기"
cancel = "취소"
change_file = "파일 변경"
clear_search = "검색 초기화"
@@ -1653,3 +1658,51 @@ verify = "본인인증"
[ui.userfront.signup.success]
action = "로그인하기"
[ui.admin.nav]
api_keys = "API 키"
audit_logs = "감사 로그"
auth_guard = "인증 가드"
logout = "로그아웃"
overview = "개요"
relying_parties = "애플리케이션(RP)"
tenant_dashboard = "테넌트 대시보드"
user_groups = "유저 그룹"
tenants = "테넌트"
users = "사용자"
[ui.dev.profile]
unknown_name = "알 수 없는 사용자"
unknown_email = "unknown@example.com"
menu_aria = "계정 메뉴 열기"
menu_title = "Account"
title = "내 정보"
subtitle = "사용자 상세 정보 및 할당된 역할(Role)을 확인합니다."
loading = "프로필 정보를 불러오는 중..."
error = "프로필 정보를 불러오지 못했습니다."
[ui.dev.profile.tab]
basic = "기본 정보"
role = "권한 및 역할"
[ui.dev.profile.basic]
title = "사용자 정보"
id = "사용자 ID"
name = "이름"
email = "이메일"
phone = "전화번호"
[ui.dev.profile.org]
title = "조직 정보"
tenant = "테넌트"
company_code = "회사 코드"
[ui.dev.profile.role]
title = "시스템 역할"
description = "현재 계정에 부여된 권한 등급입니다."
current = "현재 역할"
desc_super_admin = "전체 시스템의 모든 테넌트와 모든 앱을 제한 없이 관리할 수 있습니다."
desc_tenant_admin = "본인이 속한 테넌트(조직/회사) 하위의 모든 앱을 관리할 수 있습니다."
desc_rp_admin = "본인에게 할당된 연동 앱(Client)만 확인 및 관리할 수 있습니다."
desc_user = "기본 앱 이용 권한을 가지며, DevFront 접근은 차단됩니다."
desc_tenant_member = "기본 앱 이용 권한을 가지며, DevFront 접근은 차단됩니다."

View File

@@ -313,6 +313,10 @@ unknown_error = ""
[msg.dev]
logout_confirm = ""
[msg.dev.auth]
access_denied_description = ""
access_denied_title = ""
[msg.dev.audit]
empty = ""
forbidden = ""
@@ -1140,6 +1144,7 @@ all = ""
admin_only = ""
assign = ""
back = ""
back_to_login = ""
cancel = ""
change_file = ""
clear_search = ""
@@ -1653,3 +1658,39 @@ verify = ""
[ui.userfront.signup.success]
action = ""
[ui.dev.profile]
unknown_name = ""
unknown_email = ""
menu_aria = ""
menu_title = ""
title = ""
subtitle = ""
loading = ""
error = ""
[ui.dev.profile.tab]
basic = ""
role = ""
[ui.dev.profile.basic]
title = ""
id = ""
name = ""
email = ""
phone = ""
[ui.dev.profile.org]
title = ""
tenant = ""
company_code = ""
[ui.dev.profile.role]
title = ""
description = ""
current = ""
desc_super_admin = ""
desc_tenant_admin = ""
desc_rp_admin = ""
desc_user = ""
desc_tenant_member = ""