forked from baron/baron-sso
chore: consolidate local integration changes
This commit is contained in:
317
adminfront/src/features/users/GlobalCustomClaimsPage.tsx
Normal file
317
adminfront/src/features/users/GlobalCustomClaimsPage.tsx
Normal file
@@ -0,0 +1,317 @@
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { Key, Plus, Save, Trash2, Users } from "lucide-react";
|
||||
import * as React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { PageHeader } from "../../../../common/core/components/page";
|
||||
import { Button } from "../../components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "../../components/ui/card";
|
||||
import { Input } from "../../components/ui/input";
|
||||
import { toast } from "../../components/ui/use-toast";
|
||||
import {
|
||||
fetchGlobalCustomClaimDefinitions,
|
||||
type GlobalCustomClaimDefinition,
|
||||
type GlobalCustomClaimPermission,
|
||||
updateGlobalCustomClaimDefinitions,
|
||||
} from "../../lib/adminApi";
|
||||
import { t } from "../../lib/i18n";
|
||||
|
||||
type ClaimDraft = GlobalCustomClaimDefinition & { id: string };
|
||||
|
||||
const valueTypes: GlobalCustomClaimDefinition["valueType"][] = [
|
||||
"text",
|
||||
"number",
|
||||
"boolean",
|
||||
"array",
|
||||
"object",
|
||||
"date",
|
||||
"datetime",
|
||||
];
|
||||
|
||||
const permissions: GlobalCustomClaimPermission[] = [
|
||||
"admin_only",
|
||||
"user_and_admin",
|
||||
];
|
||||
|
||||
function toDrafts(items: GlobalCustomClaimDefinition[]): ClaimDraft[] {
|
||||
return items.map((item, index) => ({
|
||||
id: `${item.key || "claim"}-${index}`,
|
||||
key: item.key,
|
||||
label: item.label,
|
||||
valueType: item.valueType || "text",
|
||||
readPermission: item.readPermission || "admin_only",
|
||||
writePermission: item.writePermission || "admin_only",
|
||||
description: item.description || "",
|
||||
}));
|
||||
}
|
||||
|
||||
function toDefinitions(drafts: ClaimDraft[]): GlobalCustomClaimDefinition[] {
|
||||
return drafts
|
||||
.map((draft) => ({
|
||||
key: draft.key.trim(),
|
||||
label: draft.label.trim(),
|
||||
valueType: draft.valueType,
|
||||
readPermission: draft.readPermission,
|
||||
writePermission: draft.writePermission,
|
||||
description: draft.description?.trim(),
|
||||
}))
|
||||
.filter((draft) => draft.key.length > 0);
|
||||
}
|
||||
|
||||
function permissionLabel(permission: GlobalCustomClaimPermission) {
|
||||
return permission === "user_and_admin"
|
||||
? t(
|
||||
"ui.common.custom_claim_permission.user_and_admin",
|
||||
"사용자 및 관리자 가능",
|
||||
)
|
||||
: t("ui.common.custom_claim_permission.admin_only", "관리자만 가능");
|
||||
}
|
||||
|
||||
export default function GlobalCustomClaimsPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const [drafts, setDrafts] = React.useState<ClaimDraft[]>([]);
|
||||
|
||||
const query = useQuery({
|
||||
queryKey: ["global-custom-claim-definitions"],
|
||||
queryFn: fetchGlobalCustomClaimDefinitions,
|
||||
});
|
||||
|
||||
React.useEffect(() => {
|
||||
if (query.data) {
|
||||
setDrafts(toDrafts(query.data.items));
|
||||
}
|
||||
}, [query.data]);
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: updateGlobalCustomClaimDefinitions,
|
||||
onSuccess: (data) => {
|
||||
queryClient.setQueryData(["global-custom-claim-definitions"], data);
|
||||
toast.success(t("msg.info.saved_success", "저장되었습니다."));
|
||||
},
|
||||
onError: () => {
|
||||
toast.error(t("err.common.unknown", "오류가 발생했습니다."));
|
||||
},
|
||||
});
|
||||
|
||||
const addClaim = () => {
|
||||
setDrafts((current) => [
|
||||
...current,
|
||||
{
|
||||
id: `global-claim-${Date.now()}`,
|
||||
key: "",
|
||||
label: "",
|
||||
valueType: "text",
|
||||
readPermission: "admin_only",
|
||||
writePermission: "admin_only",
|
||||
description: "",
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
const updateClaim = (id: string, patch: Partial<ClaimDraft>) => {
|
||||
setDrafts((current) =>
|
||||
current.map((draft) =>
|
||||
draft.id === id ? { ...draft, ...patch } : draft,
|
||||
),
|
||||
);
|
||||
};
|
||||
|
||||
const removeClaim = (id: string) => {
|
||||
setDrafts((current) => current.filter((draft) => draft.id !== id));
|
||||
};
|
||||
|
||||
const saveClaims = () => {
|
||||
mutation.mutate({ items: toDefinitions(drafts) });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
titleAs="h2"
|
||||
icon={<Key size={20} />}
|
||||
title={t(
|
||||
"ui.admin.users.global_custom_claims.title",
|
||||
"전역 Claim 설정",
|
||||
)}
|
||||
description={t(
|
||||
"msg.admin.users.global_custom_claims.description",
|
||||
"모든 RP에 공통 적용할 사용자 claim 정의와 읽기/쓰기 권한 기본값을 관리합니다.",
|
||||
)}
|
||||
actions={
|
||||
<>
|
||||
<Button asChild variant="outline" size="sm" className="h-9">
|
||||
<Link to="/users">
|
||||
<Users size={16} />
|
||||
{t("ui.admin.users.list.title", "사용자 관리")}
|
||||
</Link>
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-9 gap-2"
|
||||
onClick={addClaim}
|
||||
>
|
||||
<Plus size={16} />
|
||||
{t("ui.common.add", "추가")}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
className="h-9 gap-2"
|
||||
disabled={mutation.isPending}
|
||||
onClick={saveClaims}
|
||||
>
|
||||
<Save size={16} />
|
||||
{t("ui.common.save", "저장")}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
<Card className="bg-[var(--color-panel)]">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">
|
||||
{t(
|
||||
"ui.admin.users.global_custom_claims.registry",
|
||||
"Global Claim Registry",
|
||||
)}
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
{t(
|
||||
"msg.admin.users.global_custom_claims.registry",
|
||||
"정의된 claim key만 사용자 상세의 전역 claim 값 관리 대상이 됩니다.",
|
||||
)}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{query.isLoading ? (
|
||||
<div className="py-12 text-center text-sm text-muted-foreground">
|
||||
{t("ui.common.loading", "로딩 중...")}
|
||||
</div>
|
||||
) : drafts.length === 0 ? (
|
||||
<div className="rounded-lg border border-dashed py-12 text-center text-sm text-muted-foreground">
|
||||
{t(
|
||||
"msg.admin.users.global_custom_claims.empty",
|
||||
"정의된 전역 claim이 없습니다.",
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
drafts.map((claim) => (
|
||||
<div
|
||||
key={claim.id}
|
||||
className="grid gap-3 rounded-md border bg-background p-3 lg:grid-cols-[minmax(160px,0.8fr)_minmax(160px,0.8fr)_130px_160px_160px_minmax(220px,1fr)_40px]"
|
||||
>
|
||||
<Input
|
||||
value={claim.key}
|
||||
className="font-mono text-xs"
|
||||
placeholder="claim_key"
|
||||
data-testid={`global-claim-definition-key-${claim.key || claim.id}`}
|
||||
onChange={(event) =>
|
||||
updateClaim(claim.id, { key: event.target.value })
|
||||
}
|
||||
/>
|
||||
<Input
|
||||
value={claim.label}
|
||||
placeholder={t(
|
||||
"ui.admin.users.global_custom_claims.label_placeholder",
|
||||
"표시 이름",
|
||||
)}
|
||||
data-testid={`global-claim-definition-label-${claim.key || claim.id}`}
|
||||
onChange={(event) =>
|
||||
updateClaim(claim.id, { label: event.target.value })
|
||||
}
|
||||
/>
|
||||
<select
|
||||
aria-label={t(
|
||||
"ui.admin.users.global_custom_claims.value_type",
|
||||
"Claim 타입",
|
||||
)}
|
||||
value={claim.valueType}
|
||||
className="h-10 rounded-md border border-input bg-background px-3 text-sm"
|
||||
onChange={(event) =>
|
||||
updateClaim(claim.id, {
|
||||
valueType: event.target
|
||||
.value as GlobalCustomClaimDefinition["valueType"],
|
||||
})
|
||||
}
|
||||
>
|
||||
{valueTypes.map((valueType) => (
|
||||
<option key={valueType} value={valueType}>
|
||||
{valueType}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
aria-label={t(
|
||||
"ui.admin.users.global_custom_claims.read_permission",
|
||||
"읽기 권한",
|
||||
)}
|
||||
value={claim.readPermission}
|
||||
className="h-10 rounded-md border border-input bg-background px-3 text-sm"
|
||||
data-testid={`global-claim-definition-read-permission-${claim.key || claim.id}`}
|
||||
onChange={(event) =>
|
||||
updateClaim(claim.id, {
|
||||
readPermission: event.target
|
||||
.value as GlobalCustomClaimPermission,
|
||||
})
|
||||
}
|
||||
>
|
||||
{permissions.map((permission) => (
|
||||
<option key={permission} value={permission}>
|
||||
{permissionLabel(permission)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
aria-label={t(
|
||||
"ui.admin.users.global_custom_claims.write_permission",
|
||||
"쓰기 권한",
|
||||
)}
|
||||
value={claim.writePermission}
|
||||
className="h-10 rounded-md border border-input bg-background px-3 text-sm"
|
||||
data-testid={`global-claim-definition-write-permission-${claim.key || claim.id}`}
|
||||
onChange={(event) =>
|
||||
updateClaim(claim.id, {
|
||||
writePermission: event.target
|
||||
.value as GlobalCustomClaimPermission,
|
||||
})
|
||||
}
|
||||
>
|
||||
{permissions.map((permission) => (
|
||||
<option key={permission} value={permission}>
|
||||
{permissionLabel(permission)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<Input
|
||||
value={claim.description || ""}
|
||||
placeholder={t(
|
||||
"ui.admin.users.global_custom_claims.description_placeholder",
|
||||
"설명",
|
||||
)}
|
||||
onChange={(event) =>
|
||||
updateClaim(claim.id, { description: event.target.value })
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => removeClaim(claim.id)}
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</Button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user