forked from baron/baron-sso
1170 lines
42 KiB
TypeScript
1170 lines
42 KiB
TypeScript
import { useMutation, useQuery } from "@tanstack/react-query";
|
|
import type { AxiosError } from "axios";
|
|
import {
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
Download,
|
|
Edit3,
|
|
Filter,
|
|
Save,
|
|
Search,
|
|
ShieldHalf,
|
|
X,
|
|
} from "lucide-react";
|
|
import { useEffect, useMemo, useState } from "react";
|
|
import { Link, useParams } from "react-router-dom";
|
|
import { PageHeader } from "../../../../common/core/components/page";
|
|
import {
|
|
commonStickyTableHeaderClass,
|
|
commonTableShellClass,
|
|
commonTableViewportClass,
|
|
} from "../../../../common/ui/table";
|
|
import { ForbiddenMessage } from "../../components/common/ForbiddenMessage";
|
|
import { Badge } from "../../components/ui/badge";
|
|
import { Button } from "../../components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "../../components/ui/card";
|
|
import { Input } from "../../components/ui/input";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "../../components/ui/table";
|
|
import { Textarea } from "../../components/ui/textarea";
|
|
import {
|
|
fetchClient,
|
|
fetchConsents,
|
|
fetchRPUserMetadata,
|
|
revokeConsent,
|
|
updateRPUserMetadata,
|
|
} from "../../lib/devApi";
|
|
import { t } from "../../lib/i18n";
|
|
import { cn } from "../../lib/utils";
|
|
import { ClientDetailTabs } from "./ClientDetailTabs";
|
|
|
|
type RPClaimValueType =
|
|
| "text"
|
|
| "number"
|
|
| "float"
|
|
| "boolean"
|
|
| "array"
|
|
| "object"
|
|
| "date"
|
|
| "datetime";
|
|
type CustomClaimPermission = "admin_only" | "user_and_admin";
|
|
|
|
type RPClaimSchema = {
|
|
key: string;
|
|
value: string;
|
|
valueType: RPClaimValueType;
|
|
readPermission: CustomClaimPermission;
|
|
writePermission: CustomClaimPermission;
|
|
};
|
|
|
|
type MetadataDraftRow = {
|
|
id: string;
|
|
key: string;
|
|
value: string;
|
|
valueType: RPClaimValueType;
|
|
readPermission: CustomClaimPermission;
|
|
writePermission: CustomClaimPermission;
|
|
schemaBacked: boolean;
|
|
};
|
|
|
|
function isCustomClaimPermission(
|
|
value: unknown,
|
|
): value is CustomClaimPermission {
|
|
return value === "admin_only" || value === "user_and_admin";
|
|
}
|
|
|
|
function readPermissionMetadata(
|
|
metadata: Record<string, unknown> | undefined,
|
|
key: string,
|
|
fallback: CustomClaimPermission,
|
|
field: "readPermission" | "writePermission",
|
|
) {
|
|
const raw = metadata?.[`${key}_permissions`];
|
|
if (!raw || typeof raw !== "object" || Array.isArray(raw)) {
|
|
return fallback;
|
|
}
|
|
const value = (raw as Record<string, unknown>)[field];
|
|
return isCustomClaimPermission(value) ? value : fallback;
|
|
}
|
|
|
|
function metadataToDraftRows(
|
|
metadata: Record<string, unknown> | undefined,
|
|
schemas: RPClaimSchema[],
|
|
): MetadataDraftRow[] {
|
|
if (schemas.length > 0) {
|
|
return schemas.map((schema) => ({
|
|
id: `rp-claim-${schema.key}`,
|
|
key: schema.key,
|
|
value: metadataValueToInputString(
|
|
metadata?.[schema.key],
|
|
schema.value,
|
|
schema.valueType,
|
|
),
|
|
valueType: schema.valueType,
|
|
readPermission: readPermissionMetadata(
|
|
metadata,
|
|
schema.key,
|
|
schema.readPermission,
|
|
"readPermission",
|
|
),
|
|
writePermission: readPermissionMetadata(
|
|
metadata,
|
|
schema.key,
|
|
schema.writePermission,
|
|
"writePermission",
|
|
),
|
|
schemaBacked: true,
|
|
}));
|
|
}
|
|
|
|
return Object.entries(metadata ?? {})
|
|
.filter(([key]) => !key.endsWith("_permissions"))
|
|
.map(([key, value], index) => ({
|
|
id: `${key}-${index}`,
|
|
key,
|
|
value: metadataValueToString(value, ""),
|
|
valueType: "text",
|
|
readPermission: readPermissionMetadata(
|
|
metadata,
|
|
key,
|
|
"admin_only",
|
|
"readPermission",
|
|
),
|
|
writePermission: readPermissionMetadata(
|
|
metadata,
|
|
key,
|
|
"admin_only",
|
|
"writePermission",
|
|
),
|
|
schemaBacked: false,
|
|
}));
|
|
}
|
|
|
|
function draftRowsToMetadata(rows: MetadataDraftRow[]) {
|
|
const metadata: Record<string, unknown> = {};
|
|
for (const row of rows) {
|
|
const key = row.key.trim();
|
|
if (!key) continue;
|
|
metadata[key] = draftRowValueToMetadataValue(row);
|
|
metadata[`${key}_permissions`] = {
|
|
readPermission: row.readPermission,
|
|
writePermission: row.writePermission,
|
|
};
|
|
}
|
|
return metadata;
|
|
}
|
|
|
|
function draftRowValueToMetadataValue(row: MetadataDraftRow) {
|
|
const value = row.value.trim();
|
|
switch (row.valueType) {
|
|
case "number":
|
|
return /^-?\d+$/.test(value) ? Number.parseInt(value, 10) : value;
|
|
case "float": {
|
|
const parsed = Number(value);
|
|
return Number.isFinite(parsed) ? parsed : value;
|
|
}
|
|
case "boolean":
|
|
return value === "true";
|
|
case "array":
|
|
if (value === "") return [];
|
|
try {
|
|
const parsed = JSON.parse(value);
|
|
return Array.isArray(parsed) ? parsed : value;
|
|
} catch {
|
|
return value;
|
|
}
|
|
case "object":
|
|
if (value === "") return {};
|
|
try {
|
|
const parsed = JSON.parse(value);
|
|
return parsed && typeof parsed === "object" && !Array.isArray(parsed)
|
|
? parsed
|
|
: value;
|
|
} catch {
|
|
return value;
|
|
}
|
|
default:
|
|
return value;
|
|
}
|
|
}
|
|
|
|
function isRPClaimValueType(value: string): value is RPClaimValueType {
|
|
return (
|
|
value === "text" ||
|
|
value === "number" ||
|
|
value === "float" ||
|
|
value === "boolean" ||
|
|
value === "array" ||
|
|
value === "object" ||
|
|
value === "date" ||
|
|
value === "datetime"
|
|
);
|
|
}
|
|
|
|
function metadataValueToString(value: unknown, fallback: string) {
|
|
if (typeof value === "string") return value;
|
|
if (value == null) return fallback;
|
|
if (typeof value === "number" || typeof value === "boolean") {
|
|
return String(value);
|
|
}
|
|
return JSON.stringify(value);
|
|
}
|
|
|
|
function metadataValueToInputString(
|
|
value: unknown,
|
|
fallback: string,
|
|
valueType: RPClaimValueType,
|
|
) {
|
|
const text = metadataValueToString(value, fallback);
|
|
if (valueType === "date") {
|
|
return text.slice(0, 10);
|
|
}
|
|
if (valueType === "datetime") {
|
|
return text.slice(0, 16);
|
|
}
|
|
return text;
|
|
}
|
|
|
|
function readRPClaimSchemas(
|
|
metadata: Record<string, unknown> | undefined,
|
|
): RPClaimSchema[] {
|
|
const rawClaims = metadata?.id_token_claims;
|
|
if (!Array.isArray(rawClaims)) return [];
|
|
|
|
return rawClaims
|
|
.map((item) => {
|
|
if (!item || typeof item !== "object") return null;
|
|
const record = item as Record<string, unknown>;
|
|
if (record.namespace !== "rp_claims") return null;
|
|
const key = typeof record.key === "string" ? record.key.trim() : "";
|
|
if (!key) return null;
|
|
const rawValueType =
|
|
typeof record.valueType === "string" ? record.valueType : "text";
|
|
const valueType = isRPClaimValueType(rawValueType)
|
|
? rawValueType
|
|
: "text";
|
|
return {
|
|
key,
|
|
value: metadataValueToString(record.value, ""),
|
|
valueType,
|
|
readPermission: isCustomClaimPermission(record.readPermission)
|
|
? record.readPermission
|
|
: "admin_only",
|
|
writePermission: isCustomClaimPermission(record.writePermission)
|
|
? record.writePermission
|
|
: "admin_only",
|
|
};
|
|
})
|
|
.filter((item): item is RPClaimSchema => item !== null);
|
|
}
|
|
|
|
function rpClaimInputType(valueType: RPClaimValueType) {
|
|
if (valueType === "date") return "date";
|
|
if (valueType === "datetime") return "datetime-local";
|
|
return "text";
|
|
}
|
|
|
|
function rpClaimInputMode(valueType: RPClaimValueType) {
|
|
if (valueType === "number") return "numeric";
|
|
if (valueType === "float") return "decimal";
|
|
return undefined;
|
|
}
|
|
|
|
function rpClaimInputPattern(valueType: RPClaimValueType) {
|
|
if (valueType === "number") return "-?[0-9]*";
|
|
if (valueType === "float") return "-?(?:[0-9]+(?:\\.[0-9]+)?|\\.[0-9]+)";
|
|
return undefined;
|
|
}
|
|
|
|
function ClientConsentsPage() {
|
|
const params = useParams();
|
|
const clientId = params.id ?? "";
|
|
const [subjectInput, setSubjectInput] = useState("");
|
|
const [subject, setSubject] = useState("");
|
|
const [statusFilter, setStatusFilter] = useState<string[]>([]);
|
|
const [scopeFilter, setScopeFilter] = useState<string[]>([]);
|
|
const [isAdvancedFilterOpen, setIsAdvancedFilterOpen] = useState(false);
|
|
const [editingSubject, setEditingSubject] = useState("");
|
|
const [metadataDraftRows, setMetadataDraftRows] = useState<
|
|
MetadataDraftRow[]
|
|
>([]);
|
|
|
|
const { data: clientData } = useQuery({
|
|
queryKey: ["client", clientId],
|
|
queryFn: () => fetchClient(clientId),
|
|
enabled: clientId.length > 0,
|
|
});
|
|
const rpClaimSchemas = useMemo(
|
|
() => readRPClaimSchemas(clientData?.client.metadata),
|
|
[clientData?.client.metadata],
|
|
);
|
|
const {
|
|
data: consentsData,
|
|
isLoading,
|
|
error,
|
|
refetch,
|
|
} = useQuery({
|
|
queryKey: ["consents", clientId, subject],
|
|
queryFn: () => fetchConsents(subject, clientId, "all"),
|
|
enabled: clientId.length > 0,
|
|
});
|
|
const rows = consentsData?.items ?? [];
|
|
const revokeMutation = useMutation({
|
|
mutationFn: (payload: { subject: string }) =>
|
|
revokeConsent(payload.subject, clientId),
|
|
onSuccess: () => {
|
|
refetch();
|
|
},
|
|
});
|
|
const selectedRow =
|
|
rows.find((row) => row.subject === editingSubject) ?? undefined;
|
|
const metadataQuery = useQuery({
|
|
queryKey: ["rp-user-metadata", clientId, editingSubject],
|
|
queryFn: () => fetchRPUserMetadata(clientId, editingSubject),
|
|
enabled: clientId.length > 0 && editingSubject.length > 0,
|
|
});
|
|
const metadataMutation = useMutation({
|
|
mutationFn: () =>
|
|
updateRPUserMetadata(
|
|
clientId,
|
|
editingSubject,
|
|
draftRowsToMetadata(metadataDraftRows),
|
|
),
|
|
onSuccess: () => {
|
|
setEditingSubject("");
|
|
setMetadataDraftRows([]);
|
|
refetch();
|
|
},
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (metadataQuery.data) {
|
|
setMetadataDraftRows(
|
|
metadataToDraftRows(metadataQuery.data.metadata, rpClaimSchemas),
|
|
);
|
|
}
|
|
}, [metadataQuery.data, rpClaimSchemas]);
|
|
|
|
const handleRevoke = (sub: string) => {
|
|
if (
|
|
window.confirm(
|
|
t(
|
|
"msg.dev.clients.consents.revoke_confirm",
|
|
"정말로 이 사용자의 권한을 철회하시겠습니까? 철회 시 사용자는 다음 접속 시 다시 동의해야 합니다.",
|
|
),
|
|
)
|
|
) {
|
|
revokeMutation.mutate({ subject: sub });
|
|
}
|
|
};
|
|
|
|
const allScopes = Array.from(new Set(rows.flatMap((r) => r.grantedScopes)));
|
|
const filteredRows = rows.filter((row) => {
|
|
const matchStatus =
|
|
statusFilter.length === 0 || statusFilter.includes(row.status);
|
|
const matchScope =
|
|
scopeFilter.length === 0 ||
|
|
scopeFilter.some((s) => row.grantedScopes.includes(s));
|
|
return matchStatus && matchScope;
|
|
});
|
|
|
|
const handleExportCSV = () => {
|
|
if (filteredRows.length === 0) return;
|
|
|
|
const headers = [
|
|
t("ui.dev.clients.consents.table.user", "User"),
|
|
t("ui.dev.clients.consents.table.tenant", "Tenant"),
|
|
t("ui.dev.clients.table.status", "Status"),
|
|
t("ui.dev.clients.consents.table.scopes", "Granted Scopes"),
|
|
t("ui.dev.clients.consents.table.first_granted", "First Granted"),
|
|
t(
|
|
"ui.dev.clients.consents.table.last_auth",
|
|
"Last Authenticated / Revoked",
|
|
),
|
|
];
|
|
|
|
const csvContent = [
|
|
headers.join(","),
|
|
...filteredRows.map((row) => {
|
|
const lastAuthRevoked =
|
|
row.status === "revoked" && row.deletedAt
|
|
? `${t("ui.dev.clients.consents.status_revoked", "Revoked")}: ${new Date(row.deletedAt).toLocaleString()}`
|
|
: row.authenticatedAt
|
|
? new Date(row.authenticatedAt).toLocaleString()
|
|
: "-";
|
|
|
|
return [
|
|
`"${row.subject} (${row.userName || ""})"`,
|
|
`"${row.tenantName || row.tenantId || ""}"`,
|
|
`"${row.status}"`,
|
|
`"${row.grantedScopes.join(", ")}"`,
|
|
`"${new Date(row.createdAt).toLocaleString()}"`,
|
|
`"${lastAuthRevoked}"`,
|
|
].join(",");
|
|
}),
|
|
].join("\n");
|
|
|
|
const blob = new Blob([`\uFEFF${csvContent}`], {
|
|
type: "text/csv;charset=utf-8;",
|
|
});
|
|
const url = URL.createObjectURL(blob);
|
|
const link = document.createElement("a");
|
|
const date = new Date().toISOString().split("T")[0];
|
|
link.setAttribute("href", url);
|
|
link.setAttribute("download", `consents_${clientId}_${date}.csv`);
|
|
link.style.visibility = "hidden";
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
};
|
|
|
|
const handleStatusFilterChange = (status: string, checked: boolean) => {
|
|
if (checked) {
|
|
setStatusFilter((prev) => [...prev, status]);
|
|
} else {
|
|
setStatusFilter((prev) => prev.filter((s) => s !== status));
|
|
}
|
|
};
|
|
|
|
const handleScopeFilterChange = (scope: string, checked: boolean) => {
|
|
if (checked) {
|
|
setScopeFilter((prev) => [...prev, scope]);
|
|
} else {
|
|
setScopeFilter((prev) => prev.filter((s) => s !== scope));
|
|
}
|
|
};
|
|
|
|
const handleAllScopesChange = (checked: boolean) => {
|
|
if (checked) {
|
|
setScopeFilter(allScopes);
|
|
} else {
|
|
setScopeFilter([]);
|
|
}
|
|
};
|
|
|
|
const openMetadataEditor = (row: (typeof rows)[number]) => {
|
|
setEditingSubject(row.subject);
|
|
setMetadataDraftRows(metadataToDraftRows(row.rpMetadata, rpClaimSchemas));
|
|
};
|
|
|
|
const updateMetadataDraftRow = (
|
|
id: string,
|
|
patch: Partial<MetadataDraftRow>,
|
|
) => {
|
|
setMetadataDraftRows((current) =>
|
|
current.map((row) => (row.id === id ? { ...row, ...patch } : row)),
|
|
);
|
|
};
|
|
|
|
if (error) {
|
|
const axiosError = error as AxiosError<{ error?: string }>;
|
|
if (axiosError.response?.status === 403) {
|
|
return (
|
|
<div className="space-y-8">
|
|
<header className="space-y-4">
|
|
<div className="flex flex-wrap justify-between gap-4">
|
|
<div className="space-y-2">
|
|
<nav className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
|
|
<Link to="/" className="hover:text-primary">
|
|
{t("ui.dev.clients.consents.breadcrumb.home", "Home")}
|
|
</Link>
|
|
<span>/</span>
|
|
<Link to="/clients" className="hover:text-primary">
|
|
{t("ui.dev.clients.consents.breadcrumb.clients", "Apps")}
|
|
</Link>
|
|
<span>/</span>
|
|
<span>{clientData?.client?.name || clientId}</span>
|
|
<span>/</span>
|
|
<span className="text-foreground font-semibold">
|
|
{t(
|
|
"ui.dev.clients.consents.breadcrumb.current",
|
|
"User Consent Grants",
|
|
)}
|
|
</span>
|
|
</nav>
|
|
<PageHeader
|
|
icon={<ShieldHalf size={20} />}
|
|
title={t(
|
|
"ui.dev.clients.consents.title",
|
|
"User Consent Grants",
|
|
)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<ClientDetailTabs activeTab="consents" clientId={clientId} />
|
|
</header>
|
|
<ForbiddenMessage resourceToken="consents" />
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
<header className="space-y-4">
|
|
<div className="flex flex-wrap justify-between gap-4">
|
|
<div className="space-y-2">
|
|
<nav className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
|
|
<Link to="/" className="hover:text-primary">
|
|
{t("ui.dev.clients.consents.breadcrumb.home", "Home")}
|
|
</Link>
|
|
<span>/</span>
|
|
<Link to="/clients" className="hover:text-primary">
|
|
{t("ui.dev.clients.consents.breadcrumb.clients", "Apps")}
|
|
</Link>
|
|
<span>/</span>
|
|
<span>{clientData?.client?.name || clientId}</span>
|
|
<span>/</span>
|
|
<span className="text-foreground font-semibold">
|
|
{t(
|
|
"ui.dev.clients.consents.breadcrumb.current",
|
|
"User Consent Grants",
|
|
)}
|
|
</span>
|
|
</nav>
|
|
<PageHeader
|
|
icon={<ShieldHalf size={20} />}
|
|
title={t("ui.dev.clients.consents.title", "User Consent Grants")}
|
|
description={t(
|
|
"msg.dev.clients.consents.subtitle",
|
|
"OIDC Relying Party 사용자 권한을 검토·관리합니다.",
|
|
)}
|
|
/>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<Badge
|
|
variant={
|
|
clientData?.client?.status === "active" ? "info" : "muted"
|
|
}
|
|
>
|
|
{clientData?.client?.status === "active"
|
|
? t("ui.common.status.active", "Active")
|
|
: t("ui.common.status.inactive", "Inactive")}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
<ClientDetailTabs activeTab="consents" clientId={clientId} />
|
|
</header>
|
|
|
|
<Card className="glass-panel">
|
|
<CardContent className="space-y-4 pt-6">
|
|
<div className="flex flex-wrap items-center justify-between gap-4">
|
|
<div className="flex flex-wrap items-center gap-4 flex-1">
|
|
<div className="relative w-full max-w-md">
|
|
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
className="pl-10"
|
|
placeholder={t(
|
|
"ui.dev.clients.consents.search_placeholder",
|
|
"사용자 ID, 이름, 이메일로 검색",
|
|
)}
|
|
value={subjectInput}
|
|
onChange={(e) => setSubjectInput(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<Button
|
|
variant="ghost"
|
|
className={cn(
|
|
"gap-1 text-muted-foreground",
|
|
isAdvancedFilterOpen && "text-primary bg-primary/10",
|
|
)}
|
|
onClick={() => setIsAdvancedFilterOpen(!isAdvancedFilterOpen)}
|
|
>
|
|
<Filter className="h-4 w-4" />
|
|
{t(
|
|
"ui.dev.clients.consents.filters.advanced",
|
|
"Advanced Filters",
|
|
)}
|
|
</Button>
|
|
<Button
|
|
className="shadow-sm shadow-primary/30"
|
|
onClick={() => setSubject(subjectInput.trim())}
|
|
>
|
|
{t("ui.common.search", "검색")}
|
|
</Button>
|
|
<Button
|
|
className="shadow-sm shadow-primary/30"
|
|
onClick={handleExportCSV}
|
|
disabled={filteredRows.length === 0}
|
|
>
|
|
<Download className="h-4 w-4" />
|
|
{t("ui.dev.clients.consents.export_csv", "Export CSV")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{isAdvancedFilterOpen && (
|
|
<div className="flex flex-col gap-4 rounded-lg bg-secondary/30 p-4 border border-border/40 animate-in fade-in slide-in-from-top-2 duration-200">
|
|
<div className="flex flex-col gap-2">
|
|
<span className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
|
|
{t("ui.dev.clients.consents.status_label", "Status:")}
|
|
</span>
|
|
<div className="flex flex-wrap gap-4">
|
|
<label className="flex items-center gap-2 text-sm cursor-pointer hover:text-foreground">
|
|
<input
|
|
type="checkbox"
|
|
className="rounded border-input text-primary focus:ring-primary h-4 w-4"
|
|
checked={statusFilter.includes("active")}
|
|
onChange={(e) =>
|
|
handleStatusFilterChange("active", e.target.checked)
|
|
}
|
|
/>
|
|
{t("ui.common.status.active", "Active")}
|
|
</label>
|
|
<label className="flex items-center gap-2 text-sm cursor-pointer hover:text-foreground">
|
|
<input
|
|
type="checkbox"
|
|
className="rounded border-input text-primary focus:ring-primary h-4 w-4"
|
|
checked={statusFilter.includes("revoked")}
|
|
onChange={(e) =>
|
|
handleStatusFilterChange("revoked", e.target.checked)
|
|
}
|
|
/>
|
|
{t("ui.dev.clients.consents.status_revoked", "Revoked")}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2">
|
|
<span className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
|
|
{t("ui.dev.clients.consents.scope_label", "Scope:")}
|
|
</span>
|
|
<div className="flex flex-wrap gap-4">
|
|
{allScopes.length > 0 && (
|
|
<label className="flex items-center gap-2 text-sm cursor-pointer font-bold text-primary hover:opacity-80">
|
|
<input
|
|
type="checkbox"
|
|
className="rounded border-input text-primary focus:ring-primary h-4 w-4"
|
|
checked={
|
|
scopeFilter.length === allScopes.length &&
|
|
allScopes.length > 0
|
|
}
|
|
onChange={(e) =>
|
|
handleAllScopesChange(e.target.checked)
|
|
}
|
|
/>
|
|
ALL
|
|
</label>
|
|
)}
|
|
{allScopes.map((scope) => (
|
|
<label
|
|
key={scope}
|
|
className="flex items-center gap-2 text-sm cursor-pointer hover:text-foreground"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
className="rounded border-input text-primary focus:ring-primary h-4 w-4"
|
|
checked={scopeFilter.includes(scope)}
|
|
onChange={(e) =>
|
|
handleScopeFilterChange(scope, e.target.checked)
|
|
}
|
|
/>
|
|
{scope}
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-xs text-muted-foreground p-0 h-auto"
|
|
onClick={() => {
|
|
setStatusFilter([]);
|
|
setScopeFilter([]);
|
|
}}
|
|
>
|
|
{t("ui.common.reset", "초기화")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="glass-panel">
|
|
{error && (
|
|
<CardContent className="py-8 text-center text-sm text-destructive border-b border-border/50">
|
|
{t(
|
|
"msg.dev.clients.consents.load_error",
|
|
"Error loading consents: {{error}}",
|
|
{
|
|
error:
|
|
(error as AxiosError<{ error?: string }>).response?.data
|
|
?.error ?? (error as Error).message,
|
|
},
|
|
)}
|
|
</CardContent>
|
|
)}
|
|
{isLoading && (
|
|
<CardContent className="py-8 text-center text-sm text-muted-foreground border-b border-border/50">
|
|
{t("msg.dev.clients.consents.loading", "Loading consents...")}
|
|
</CardContent>
|
|
)}
|
|
|
|
<div className={commonTableShellClass}>
|
|
<div className={commonTableViewportClass}>
|
|
<Table>
|
|
<TableHeader className={commonStickyTableHeaderClass}>
|
|
<TableRow>
|
|
<TableHead>
|
|
{t("ui.dev.clients.consents.table.user", "User")}
|
|
</TableHead>
|
|
<TableHead>
|
|
{t("ui.dev.clients.consents.table.tenant", "Tenant")}
|
|
</TableHead>
|
|
<TableHead>
|
|
{t("ui.dev.clients.consents.table.status", "Status")}
|
|
</TableHead>
|
|
<TableHead>
|
|
{t(
|
|
"ui.dev.clients.consents.table.scopes",
|
|
"Granted Scopes",
|
|
)}
|
|
</TableHead>
|
|
<TableHead>
|
|
{t(
|
|
"ui.dev.clients.consents.table.first_granted",
|
|
"First Granted",
|
|
)}
|
|
</TableHead>
|
|
<TableHead>
|
|
{t(
|
|
"ui.dev.clients.consents.table.last_auth",
|
|
"Last Authenticated / Revoked",
|
|
)}
|
|
</TableHead>
|
|
<TableHead>
|
|
{t("ui.dev.clients.consents.table.rp_claims", "RP Claims")}
|
|
</TableHead>
|
|
<TableHead className="text-right">
|
|
{t("ui.dev.clients.consents.table.action", "Action")}
|
|
</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{filteredRows.length === 0 && !isLoading && !error ? (
|
|
<TableRow>
|
|
<TableCell
|
|
colSpan={8}
|
|
className="h-32 text-center text-muted-foreground"
|
|
>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<Search className="h-8 w-8 opacity-20" />
|
|
<p>
|
|
{t(
|
|
"msg.dev.clients.consents.empty",
|
|
"No consents found.",
|
|
)}
|
|
</p>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
filteredRows.map((row) => (
|
|
<TableRow
|
|
key={`${row.subject}-${row.clientId}`}
|
|
className={row.status === "revoked" ? "opacity-60" : ""}
|
|
>
|
|
<TableCell>
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-xs font-bold text-primary">
|
|
{(row.userName || row.subject)
|
|
.slice(0, 2)
|
|
.toUpperCase()}
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<span className="text-sm font-semibold">
|
|
{row.userName ||
|
|
t("ui.dev.clients.consents.subject", "Subject")}
|
|
</span>
|
|
<span className="text-xs text-muted-foreground">
|
|
{row.subject}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex flex-col">
|
|
<span className="text-sm font-semibold">
|
|
{row.tenantName || t("ui.common.na", "N/A")}
|
|
</span>
|
|
<span className="text-xs text-muted-foreground">
|
|
{row.tenantId}
|
|
</span>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
{row.status === "active" ? (
|
|
<Badge variant="success">
|
|
{t("ui.common.status.active", "Active")}
|
|
</Badge>
|
|
) : (
|
|
<Badge variant="warning">
|
|
{t(
|
|
"ui.dev.clients.consents.status_revoked",
|
|
"Revoked",
|
|
)}
|
|
</Badge>
|
|
)}
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex flex-wrap gap-1">
|
|
{row.grantedScopes.map((scope) => (
|
|
<Badge
|
|
key={scope}
|
|
variant="muted"
|
|
className="border bg-muted/40 text-foreground"
|
|
>
|
|
{scope}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">
|
|
{new Date(row.createdAt).toLocaleString()}
|
|
</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">
|
|
{row.status === "revoked" && row.deletedAt ? (
|
|
<span className="text-destructive font-medium">
|
|
{t(
|
|
"ui.dev.clients.consents.revoked_at",
|
|
"Revoked: ",
|
|
)}
|
|
{new Date(row.deletedAt).toLocaleString()}
|
|
</span>
|
|
) : row.authenticatedAt ? (
|
|
new Date(row.authenticatedAt).toLocaleString()
|
|
) : (
|
|
"-"
|
|
)}
|
|
</TableCell>
|
|
<TableCell>
|
|
{row.rpMetadata &&
|
|
Object.keys(row.rpMetadata).some(
|
|
(key) => !key.endsWith("_permissions"),
|
|
) ? (
|
|
<div className="flex flex-wrap gap-1">
|
|
{Object.entries(row.rpMetadata)
|
|
.filter(([key]) => !key.endsWith("_permissions"))
|
|
.map(([key, value]) => (
|
|
<Badge
|
|
key={key}
|
|
variant="muted"
|
|
className="border bg-muted/40 font-mono text-[11px] text-foreground"
|
|
>
|
|
{key}:{" "}
|
|
{typeof value === "string"
|
|
? value
|
|
: JSON.stringify(value)}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<span className="text-xs text-muted-foreground">
|
|
{t("ui.common.na", "N/A")}
|
|
</span>
|
|
)}
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<div className="flex justify-end gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
className="gap-2"
|
|
onClick={() => openMetadataEditor(row)}
|
|
>
|
|
<Edit3 className="h-4 w-4" />
|
|
{t(
|
|
"ui.dev.clients.consents.rp_claims.edit",
|
|
"사용자 Claim 설정",
|
|
)}
|
|
</Button>
|
|
{row.status === "active" && (
|
|
<Button
|
|
variant="ghost"
|
|
className="text-destructive hover:bg-destructive/10"
|
|
onClick={() => handleRevoke(row.subject)}
|
|
disabled={revokeMutation.isPending}
|
|
>
|
|
{t("ui.dev.clients.consents.revoke", "Revoke")}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
<CardContent className="flex items-center justify-between border-t border-border bg-muted/10 px-6 py-4 text-sm text-muted-foreground">
|
|
<p>
|
|
{t(
|
|
"msg.dev.clients.consents.showing",
|
|
"Showing {{from}} to {{to}} of {{total}} users",
|
|
{
|
|
from: filteredRows.length > 0 ? 1 : 0,
|
|
to: filteredRows.length,
|
|
total: rows.length,
|
|
},
|
|
)}
|
|
</p>
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" size="icon" disabled>
|
|
<ChevronLeft className="h-4 w-4" />
|
|
</Button>
|
|
<Button size="sm" disabled={filteredRows.length === 0}>
|
|
1
|
|
</Button>
|
|
<Button variant="outline" size="icon" disabled>
|
|
<ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{editingSubject && (
|
|
<Card className="glass-panel">
|
|
<CardHeader className="pb-4">
|
|
<div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
|
|
<div>
|
|
<CardTitle className="text-lg">
|
|
{t(
|
|
"ui.dev.clients.consents.rp_claims.title",
|
|
"RP Custom Claims",
|
|
)}
|
|
</CardTitle>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
{selectedRow?.userName || editingSubject}
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
className="gap-2"
|
|
onClick={() => {
|
|
setEditingSubject("");
|
|
setMetadataDraftRows([]);
|
|
}}
|
|
>
|
|
<X className="h-4 w-4" />
|
|
{t("ui.common.cancel", "취소")}
|
|
</Button>
|
|
<Button
|
|
className="gap-2"
|
|
disabled={metadataMutation.isPending}
|
|
onClick={() => metadataMutation.mutate()}
|
|
>
|
|
<Save className="h-4 w-4" />
|
|
{t("ui.dev.clients.consents.rp_claims.save", "Claim 저장")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
{metadataQuery.isLoading ? (
|
|
<p className="text-sm text-muted-foreground">
|
|
{t("msg.common.loading", "불러오는 중...")}
|
|
</p>
|
|
) : metadataDraftRows.length === 0 ? (
|
|
<div className="rounded-md border border-dashed p-6 text-center text-sm text-muted-foreground">
|
|
{t(
|
|
"msg.dev.clients.consents.rp_claims.empty",
|
|
"등록된 RP custom claim 값이 없습니다.",
|
|
)}
|
|
</div>
|
|
) : (
|
|
metadataDraftRows.map((row) => (
|
|
<div
|
|
key={row.id}
|
|
className="grid gap-3 md:grid-cols-[minmax(180px,0.8fr)_minmax(220px,1fr)_150px_150px_auto]"
|
|
>
|
|
<div className="flex h-10 items-center rounded-md border bg-muted/30 px-3 font-mono text-xs">
|
|
{row.key}
|
|
</div>
|
|
{row.valueType === "boolean" ? (
|
|
<select
|
|
value={row.value === "false" ? "false" : "true"}
|
|
onChange={(event) =>
|
|
updateMetadataDraftRow(row.id, {
|
|
value: event.target.value,
|
|
})
|
|
}
|
|
className="h-10 rounded-md border border-input bg-background px-3 font-mono text-xs shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
|
aria-label={`${row.key} boolean`}
|
|
>
|
|
<option value="true">true</option>
|
|
<option value="false">false</option>
|
|
</select>
|
|
) : row.valueType === "array" ||
|
|
row.valueType === "object" ? (
|
|
<Textarea
|
|
value={row.value}
|
|
onChange={(event) =>
|
|
updateMetadataDraftRow(row.id, {
|
|
value: event.target.value,
|
|
})
|
|
}
|
|
className="min-h-10 font-mono text-xs"
|
|
placeholder={
|
|
row.valueType === "array"
|
|
? `["value"]`
|
|
: `{"key": "value"}`
|
|
}
|
|
aria-label={`${row.key} ${row.valueType}`}
|
|
/>
|
|
) : (
|
|
<Input
|
|
type={rpClaimInputType(row.valueType)}
|
|
inputMode={rpClaimInputMode(row.valueType)}
|
|
pattern={rpClaimInputPattern(row.valueType)}
|
|
value={row.value}
|
|
onChange={(event) =>
|
|
updateMetadataDraftRow(row.id, {
|
|
value: event.target.value,
|
|
})
|
|
}
|
|
className="font-mono text-xs"
|
|
placeholder={t(
|
|
"ui.dev.clients.consents.rp_claims.value_placeholder",
|
|
"claim value",
|
|
)}
|
|
aria-label={`${row.key} ${row.valueType}`}
|
|
/>
|
|
)}
|
|
<select
|
|
value={row.readPermission}
|
|
onChange={(event) =>
|
|
updateMetadataDraftRow(row.id, {
|
|
readPermission: event.target
|
|
.value as CustomClaimPermission,
|
|
})
|
|
}
|
|
className="h-10 rounded-md border border-input bg-background px-3 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
|
aria-label={t(
|
|
"ui.dev.clients.consents.rp_claims.read_permission",
|
|
"읽기 권한",
|
|
)}
|
|
>
|
|
<option value="admin_only">
|
|
{t(
|
|
"ui.common.custom_claim_permission.admin_only",
|
|
"관리자만 가능",
|
|
)}
|
|
</option>
|
|
<option value="user_and_admin">
|
|
{t(
|
|
"ui.common.custom_claim_permission.user_and_admin",
|
|
"사용자 및 관리자 가능",
|
|
)}
|
|
</option>
|
|
</select>
|
|
<select
|
|
value={row.writePermission}
|
|
onChange={(event) =>
|
|
updateMetadataDraftRow(row.id, {
|
|
writePermission: event.target
|
|
.value as CustomClaimPermission,
|
|
})
|
|
}
|
|
className="h-10 rounded-md border border-input bg-background px-3 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
|
aria-label={t(
|
|
"ui.dev.clients.consents.rp_claims.write_permission",
|
|
"쓰기 권한",
|
|
)}
|
|
>
|
|
<option value="admin_only">
|
|
{t(
|
|
"ui.common.custom_claim_permission.admin_only",
|
|
"관리자만 가능",
|
|
)}
|
|
</option>
|
|
<option value="user_and_admin">
|
|
{t(
|
|
"ui.common.custom_claim_permission.user_and_admin",
|
|
"사용자 및 관리자 가능",
|
|
)}
|
|
</option>
|
|
</select>
|
|
<Badge
|
|
variant="muted"
|
|
className="h-10 justify-center rounded-md px-3 font-mono text-xs"
|
|
>
|
|
{row.valueType}
|
|
</Badge>
|
|
</div>
|
|
))
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
<div className="grid gap-6 md:grid-cols-3">
|
|
<Card className="glass-panel">
|
|
<CardHeader className="pb-2">
|
|
<p className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
|
|
{t(
|
|
"ui.dev.clients.consents.stats.active_grants",
|
|
"Active Grants",
|
|
)}
|
|
</p>
|
|
<CardTitle className="text-xl font-semibold">
|
|
{rows.filter((r) => r.status === "active").length}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
</Card>
|
|
<Card className="glass-panel">
|
|
<CardHeader className="pb-2">
|
|
<p className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
|
|
{t(
|
|
"ui.dev.clients.consents.stats.total_scopes",
|
|
"Total Scopes Issued",
|
|
)}
|
|
</p>
|
|
<CardTitle className="text-xl font-semibold">
|
|
{rows.reduce((acc, row) => acc + row.grantedScopes.length, 0)}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
</Card>
|
|
<Card className="glass-panel">
|
|
<CardHeader className="pb-2">
|
|
<p className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
|
|
{t(
|
|
"ui.dev.clients.consents.stats.avg_scopes",
|
|
"Avg. Scopes per User",
|
|
)}
|
|
</p>
|
|
<CardTitle className="text-xl font-semibold">
|
|
{rows.length > 0
|
|
? (
|
|
rows.reduce(
|
|
(acc, row) => acc + row.grantedScopes.length,
|
|
0,
|
|
) / rows.length
|
|
).toFixed(1)
|
|
: "0.0"}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ClientConsentsPage;
|