forked from baron/baron-sso
278 lines
11 KiB
TypeScript
278 lines
11 KiB
TypeScript
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import type { AxiosError } from "axios";
|
|
import { AlertCircle, Copy, Eye, Link2, Shield, Workflow, Save } from "lucide-react";
|
|
import { Link, useParams } from "react-router-dom";
|
|
import { Badge } from "../../components/ui/badge";
|
|
import { Button } from "../../components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../../components/ui/card";
|
|
import { Separator } from "../../components/ui/separator";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableRow,
|
|
} from "../../components/ui/table";
|
|
import { Textarea } from "../../components/ui/textarea";
|
|
import { Label } from "../../components/ui/label";
|
|
import { fetchClient, updateClient } from "../../lib/devApi";
|
|
import { useState, useEffect } from "react";
|
|
|
|
function ClientDetailsPage() {
|
|
const params = useParams();
|
|
const queryClient = useQueryClient();
|
|
const clientId = params.id ?? "";
|
|
|
|
const { data, isLoading, error } = useQuery({
|
|
queryKey: ["client", clientId],
|
|
queryFn: () => fetchClient(clientId),
|
|
enabled: clientId.length > 0,
|
|
});
|
|
|
|
const [redirectUris, setRedirectUris] = useState("");
|
|
|
|
useEffect(() => {
|
|
if (data?.client?.redirectUris) {
|
|
setRedirectUris(data.client.redirectUris.join(", "));
|
|
}
|
|
}, [data]);
|
|
|
|
const mutation = useMutation({
|
|
mutationFn: () => {
|
|
const uriList = redirectUris
|
|
.split(",")
|
|
.map((u) => u.trim())
|
|
.filter(Boolean);
|
|
return updateClient(clientId, { redirectUris: uriList });
|
|
},
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ["client", clientId] });
|
|
alert("Redirect URIs가 저장되었습니다.");
|
|
},
|
|
onError: (err) => {
|
|
alert(`저장 실패: ${(err as Error).message}`);
|
|
},
|
|
});
|
|
|
|
if (!clientId) {
|
|
return <div className="p-8 text-center">Client ID가 필요합니다.</div>;
|
|
}
|
|
|
|
if (isLoading) {
|
|
return <div className="p-8 text-center">Loading client...</div>;
|
|
}
|
|
|
|
if (error || !data) {
|
|
const errMsg =
|
|
(error as AxiosError<{ error?: string }>).response?.data?.error ??
|
|
(error as Error)?.message;
|
|
return (
|
|
<div className="p-8 text-center text-red-500">
|
|
Error loading client: {errMsg || "unknown error"}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const endpoints = [
|
|
{ label: "Discovery Endpoint", value: data.endpoints.discovery },
|
|
{ label: "Issuer URL", value: data.endpoints.issuer },
|
|
{ label: "Authorization Endpoint", value: data.endpoints.authorization },
|
|
{ label: "Token Endpoint", value: data.endpoints.token },
|
|
{ label: "UserInfo Endpoint", value: data.endpoints.userinfo },
|
|
];
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
<div className="space-y-3">
|
|
<div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
|
|
<Link to="/clients" className="text-primary hover:underline">
|
|
Relying Parties
|
|
</Link>
|
|
<span>/</span>
|
|
<span className="text-foreground">클라이언트 상세</span>
|
|
</div>
|
|
<div className="flex flex-wrap items-start justify-between gap-3">
|
|
<div>
|
|
<h1 className="text-4xl font-black leading-tight tracking-tight">
|
|
{data.client.name || data.client.id}
|
|
</h1>
|
|
<p className="text-muted-foreground">
|
|
OIDC 자격 증명과 엔드포인트를 관리합니다.
|
|
</p>
|
|
</div>
|
|
<Badge
|
|
variant={data.client.status === "active" ? "success" : "muted"}
|
|
className="px-3 py-1 text-xs uppercase"
|
|
>
|
|
{data.client.status === "active" ? "Active" : "Inactive"}
|
|
</Badge>
|
|
</div>
|
|
<div className="flex gap-6 border-b border-border">
|
|
<Link
|
|
to={`/clients/${clientId}`}
|
|
className="border-b-2 border-primary pb-3 text-sm font-bold text-primary"
|
|
>
|
|
Connection
|
|
</Link>
|
|
<Link
|
|
to={`/clients/${clientId}/consents`}
|
|
className="pb-3 text-sm font-bold text-muted-foreground hover:text-foreground"
|
|
>
|
|
Consent & Users
|
|
</Link>
|
|
<Link
|
|
to={`/clients/${clientId}/settings`}
|
|
className="pb-3 text-sm font-bold text-muted-foreground hover:text-foreground"
|
|
>
|
|
Settings
|
|
</Link>
|
|
<Link
|
|
to={`/clients/${clientId}/federation`}
|
|
className="pb-3 text-sm font-bold text-muted-foreground hover:text-foreground"
|
|
>
|
|
Federation
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-8 lg:grid-cols-2">
|
|
<div className="space-y-6">
|
|
<div className="space-y-4">
|
|
<h2 className="text-xl font-bold">클라이언트 자격 증명</h2>
|
|
<Card className="glass-panel">
|
|
<CardContent className="flex flex-col gap-4 p-6">
|
|
<div>
|
|
<p className="text-xs font-bold uppercase tracking-widest text-muted-foreground">
|
|
Client ID
|
|
</p>
|
|
<div className="flex items-center justify-between gap-2">
|
|
<p className="font-mono text-lg truncate">{data.client.id}</p>
|
|
<Button variant="secondary" size="icon" className="shrink-0" onClick={() => navigator.clipboard.writeText(data.client.id)}>
|
|
<Copy className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<p className="text-xs font-bold uppercase tracking-widest text-muted-foreground">
|
|
Client Secret
|
|
</p>
|
|
<div className="flex items-center justify-between gap-2">
|
|
<p className="font-mono text-lg tracking-widest">••••••••••••••••</p>
|
|
<div className="flex gap-2 shrink-0">
|
|
<Button variant="secondary" size="icon">
|
|
<Eye className="h-4 w-4" />
|
|
</Button>
|
|
<Button variant="outline" size="icon" className="border-amber-500/50 text-amber-500">
|
|
<AlertCircle className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-2">
|
|
<h2 className="text-xl font-bold">OIDC 엔드포인트</h2>
|
|
<Badge variant="muted" className="gap-1">
|
|
<Link2 className="h-3 w-3" />
|
|
읽기 전용
|
|
</Badge>
|
|
</div>
|
|
<Card className="glass-panel">
|
|
<Table>
|
|
<TableBody>
|
|
{endpoints.map((endpoint) => (
|
|
<TableRow key={endpoint.label} className="border-border/70">
|
|
<TableCell className="w-1/3">
|
|
<p className="text-xs font-bold uppercase tracking-[0.12em] text-muted-foreground">
|
|
{endpoint.label}
|
|
</p>
|
|
</TableCell>
|
|
<TableCell className="flex items-center justify-between gap-3">
|
|
<span className="break-all font-mono text-sm">
|
|
{endpoint.value}
|
|
</span>
|
|
<Button
|
|
variant="secondary"
|
|
size="icon"
|
|
className="h-8 w-8 shrink-0"
|
|
onClick={() => navigator.clipboard.writeText(endpoint.value)}
|
|
>
|
|
<Copy className="h-4 w-4" />
|
|
</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<div className="space-y-4">
|
|
<h2 className="text-xl font-bold">리디렉션 URI 설정</h2>
|
|
<Card className="glass-panel border-primary/20">
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">Redirect URIs</CardTitle>
|
|
<CardDescription>
|
|
인증 성공 후 사용자를 리다이렉트할 허용된 URL 목록입니다. 콤마(,)로 구분하여 여러 개 입력할 수 있습니다.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="redirect-uris" className="text-sm font-semibold">인증 콜백 URL</Label>
|
|
<Textarea
|
|
id="redirect-uris"
|
|
placeholder="https://your-app.com/callback, http://localhost:3000/auth/callback"
|
|
rows={5}
|
|
value={redirectUris}
|
|
onChange={(e) => setRedirectUris(e.target.value)}
|
|
className="font-mono text-sm"
|
|
/>
|
|
</div>
|
|
<Button
|
|
className="w-full gap-2"
|
|
onClick={() => mutation.mutate()}
|
|
disabled={mutation.isPending}
|
|
>
|
|
<Save className="h-4 w-4" />
|
|
{mutation.isPending ? "저장 중..." : "Redirect URIs 저장"}
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="glass-panel p-6 opacity-80">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/15 text-primary">
|
|
<Shield className="h-6 w-6" />
|
|
</div>
|
|
<div>
|
|
<p className="text-lg font-semibold">보안 메모</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
엔드포인트는 읽기 전용으로 유지하고, 비밀키 재발행/복사는 감사
|
|
로그와 연계하세요.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Separator className="my-4" />
|
|
<p className="text-sm text-muted-foreground">
|
|
비밀키 재발행 작업에는 관리자 세션 TTL 확인과 레이트리밋, 알림 연동을
|
|
권장합니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ClientDetailsPage;
|