forked from baron/baron-sso
ory용 MCP 제작, devfront/adminfront 백엔드 연결
This commit is contained in:
Lectom C Han
194
devfront/src/features/clients/ClientDetailsPage.tsx
Normal file
194
devfront/src/features/clients/ClientDetailsPage.tsx
Normal file
@@ -0,0 +1,194 @@
|
||||
import { AlertCircle, Copy, Eye, Link2, Shield, Workflow } from "lucide-react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Badge } from "../../components/ui/badge";
|
||||
import { Button } from "../../components/ui/button";
|
||||
import { Card, CardContent } from "../../components/ui/card";
|
||||
import { Separator } from "../../components/ui/separator";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableRow,
|
||||
} from "../../components/ui/table";
|
||||
|
||||
const endpoints = [
|
||||
{
|
||||
label: "Discovery Endpoint",
|
||||
value: "https://auth.acme-idp.com/.well-known/openid-configuration",
|
||||
},
|
||||
{ label: "Issuer URL", value: "https://auth.acme-idp.com/" },
|
||||
{
|
||||
label: "Authorization Endpoint",
|
||||
value: "https://auth.acme-idp.com/oauth2/authorize",
|
||||
},
|
||||
{ label: "Token Endpoint", value: "https://auth.acme-idp.com/oauth2/token" },
|
||||
{
|
||||
label: "UserInfo Endpoint",
|
||||
value: "https://auth.acme-idp.com/oauth2/userinfo",
|
||||
},
|
||||
];
|
||||
|
||||
function ClientDetailsPage() {
|
||||
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">
|
||||
Developer Portal App
|
||||
</h1>
|
||||
<p className="text-muted-foreground">
|
||||
OIDC 자격 증명과 엔드포인트를 관리합니다.
|
||||
</p>
|
||||
</div>
|
||||
<Badge variant="success" className="px-3 py-1 text-xs uppercase">
|
||||
Active
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex gap-6 border-b border-border">
|
||||
<Link
|
||||
to="/clients/cli_481...8k2"
|
||||
className="border-b-2 border-primary pb-3 text-sm font-bold text-primary"
|
||||
>
|
||||
Overview
|
||||
</Link>
|
||||
<Link
|
||||
to="/clients/cli_481...8k2/consents"
|
||||
className="pb-3 text-sm font-bold text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Consent & Users
|
||||
</Link>
|
||||
<Link
|
||||
to="/clients/cli_481...8k2/settings"
|
||||
className="pb-3 text-sm font-bold text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Settings
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-xl font-bold">클라이언트 자격 증명</h2>
|
||||
<Card className="glass-panel">
|
||||
<CardContent className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
||||
<div>
|
||||
<p className="text-xs font-bold uppercase tracking-widest text-muted-foreground">
|
||||
Client ID
|
||||
</p>
|
||||
<p className="font-mono text-lg">721948305612-oidc-client-prod</p>
|
||||
</div>
|
||||
<Button variant="secondary" className="gap-2">
|
||||
<Copy className="h-4 w-4" />
|
||||
ID 복사
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="glass-panel">
|
||||
<CardContent className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
||||
<div>
|
||||
<p className="text-xs font-bold uppercase tracking-widest text-muted-foreground">
|
||||
Client Secret
|
||||
</p>
|
||||
<p className="font-mono text-lg tracking-widest">
|
||||
••••••••••••••••
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button variant="secondary" className="gap-2">
|
||||
<Eye className="h-4 w-4" />
|
||||
보기
|
||||
</Button>
|
||||
<Button variant="secondary" className="gap-2">
|
||||
<Copy className="h-4 w-4" />
|
||||
복사
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="gap-2 border-amber-500/50 text-amber-500"
|
||||
>
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
비밀키 재발행
|
||||
</Button>
|
||||
</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"
|
||||
aria-label={`${endpoint.label} 복사`}
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</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 className="hidden items-center gap-2 md:flex">
|
||||
<Badge variant="outline" className="gap-1">
|
||||
<Workflow className="h-4 w-4" />
|
||||
감사 이벤트 필요
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<Separator className="my-4" />
|
||||
<p className="text-sm text-muted-foreground">
|
||||
비밀키 재발행 작업에는 관리자 세션 TTL 확인과 레이트리밋, 알림 연동을
|
||||
권장합니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ClientDetailsPage;
|
||||
Reference in New Issue
Block a user