forked from baron/baron-sso
adminfront RP 관리 기능 삭제
This commit is contained in:
@@ -11,11 +11,6 @@ import TenantDetailPage from "../features/tenants/routes/TenantDetailPage";
|
|||||||
import TenantListPage from "../features/tenants/routes/TenantListPage";
|
import TenantListPage from "../features/tenants/routes/TenantListPage";
|
||||||
import { TenantProfilePage } from "../features/tenants/routes/TenantProfilePage";
|
import { TenantProfilePage } from "../features/tenants/routes/TenantProfilePage";
|
||||||
import { TenantSchemaPage } from "../features/tenants/routes/TenantSchemaPage";
|
import { TenantSchemaPage } from "../features/tenants/routes/TenantSchemaPage";
|
||||||
import TenantRelyingPartyListPage from "../features/tenants/routes/TenantRelyingPartyListPage";
|
|
||||||
import TenantRelyingPartyCreatePage from "../features/tenants/routes/TenantRelyingPartyCreatePage";
|
|
||||||
import TenantRelyingPartyDetailPage from "../features/tenants/routes/TenantRelyingPartyDetailPage";
|
|
||||||
import RelyingPartyListPage from "../features/relying-parties/RelyingPartyListPage";
|
|
||||||
import RelyingPartyCreatePage from "../features/relying-parties/RelyingPartyCreatePage";
|
|
||||||
import UserCreatePage from "../features/users/UserCreatePage";
|
import UserCreatePage from "../features/users/UserCreatePage";
|
||||||
import UserDetailPage from "../features/users/UserDetailPage";
|
import UserDetailPage from "../features/users/UserDetailPage";
|
||||||
import UserListPage from "../features/users/UserListPage";
|
import UserListPage from "../features/users/UserListPage";
|
||||||
@@ -33,8 +28,6 @@ export const router = createBrowserRouter(
|
|||||||
{ path: "users", element: <UserListPage /> },
|
{ path: "users", element: <UserListPage /> },
|
||||||
{ path: "users/new", element: <UserCreatePage /> },
|
{ path: "users/new", element: <UserCreatePage /> },
|
||||||
{ path: "users/:id", element: <UserDetailPage /> },
|
{ path: "users/:id", element: <UserDetailPage /> },
|
||||||
{ path: "relying-parties", element: <RelyingPartyListPage /> },
|
|
||||||
{ path: "relying-parties/new", element: <RelyingPartyCreatePage /> },
|
|
||||||
{ path: "tenants", element: <TenantListPage /> },
|
{ path: "tenants", element: <TenantListPage /> },
|
||||||
{ path: "tenants/new", element: <TenantCreatePage /> },
|
{ path: "tenants/new", element: <TenantCreatePage /> },
|
||||||
{
|
{
|
||||||
@@ -43,9 +36,6 @@ export const router = createBrowserRouter(
|
|||||||
children: [
|
children: [
|
||||||
{ index: true, element: <TenantProfilePage /> },
|
{ index: true, element: <TenantProfilePage /> },
|
||||||
{ path: "schema", element: <TenantSchemaPage /> },
|
{ path: "schema", element: <TenantSchemaPage /> },
|
||||||
{ path: "relying-parties", element: <TenantRelyingPartyListPage /> },
|
|
||||||
{ path: "relying-parties/new", element: <TenantRelyingPartyCreatePage /> },
|
|
||||||
{ path: "relying-parties/:id", element: <TenantRelyingPartyDetailPage /> },
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{ path: "api-keys", element: <ApiKeyListPage /> },
|
{ path: "api-keys", element: <ApiKeyListPage /> },
|
||||||
|
|||||||
@@ -9,7 +9,6 @@ import {
|
|||||||
ShieldHalf,
|
ShieldHalf,
|
||||||
Sun,
|
Sun,
|
||||||
Users,
|
Users,
|
||||||
Share2,
|
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { NavLink, Outlet } from "react-router-dom";
|
import { NavLink, Outlet } from "react-router-dom";
|
||||||
@@ -20,7 +19,6 @@ const navItems = [
|
|||||||
{ label: "Tenant Dashboard", to: "/dashboard", icon: ShieldHalf },
|
{ label: "Tenant Dashboard", to: "/dashboard", icon: ShieldHalf },
|
||||||
{ label: "Tenants", to: "/tenants", icon: Building2 },
|
{ label: "Tenants", to: "/tenants", icon: Building2 },
|
||||||
{ label: "Users", to: "/users", icon: Users },
|
{ label: "Users", to: "/users", icon: Users },
|
||||||
{ label: "Applications", to: "/relying-parties", icon: Share2 },
|
|
||||||
{ label: "API Keys (M2M)", to: "/api-keys", icon: Key },
|
{ label: "API Keys (M2M)", to: "/api-keys", icon: Key },
|
||||||
{ label: "Audit Logs", to: "/audit-logs", icon: NotebookTabs },
|
{ label: "Audit Logs", to: "/audit-logs", icon: NotebookTabs },
|
||||||
{ label: "Auth Guard", to: "/auth", icon: KeyRound },
|
{ label: "Auth Guard", to: "/auth", icon: KeyRound },
|
||||||
|
|||||||
@@ -1,228 +0,0 @@
|
|||||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
||||||
import type { AxiosError } from "axios";
|
|
||||||
import { ArrowLeft, Save } from "lucide-react";
|
|
||||||
import { useState } from "react";
|
|
||||||
import { Link, useNavigate } from "react-router-dom";
|
|
||||||
import { Button } from "../../components/ui/button";
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "../../components/ui/card";
|
|
||||||
import { Input } from "../../components/ui/input";
|
|
||||||
import { Label } from "../../components/ui/label";
|
|
||||||
import {
|
|
||||||
createRelyingParty,
|
|
||||||
fetchTenants,
|
|
||||||
} from "../../lib/adminApi";
|
|
||||||
import type { HydraClientReq } from "../../lib/adminApi";
|
|
||||||
import { Badge } from "../../components/ui/badge";
|
|
||||||
|
|
||||||
function RelyingPartyCreatePage() {
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
|
|
||||||
const [selectedTenantId, setSelectedTenantId] = useState("");
|
|
||||||
const [formData, setFormData] = useState<HydraClientReq>({
|
|
||||||
client_name: "",
|
|
||||||
redirect_uris: [],
|
|
||||||
scope: "openid profile email",
|
|
||||||
grant_types: ["authorization_code", "refresh_token"],
|
|
||||||
response_types: ["code"],
|
|
||||||
token_endpoint_auth_method: "client_secret_basic",
|
|
||||||
});
|
|
||||||
const [redirectUriInput, setRedirectUriInput] = useState("");
|
|
||||||
|
|
||||||
// 테넌트 목록 조회 (선택용)
|
|
||||||
const { data: tenantsData } = useQuery({
|
|
||||||
queryKey: ["tenants", { limit: 100 }],
|
|
||||||
queryFn: () => fetchTenants(100, 0),
|
|
||||||
});
|
|
||||||
const tenants = tenantsData?.items ?? [];
|
|
||||||
|
|
||||||
const createMutation = useMutation({
|
|
||||||
mutationFn: (data: HydraClientReq) => createRelyingParty(selectedTenantId, data),
|
|
||||||
onSuccess: () => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ["relyingParties"] });
|
|
||||||
navigate("/relying-parties");
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const errorMsg = (createMutation.error as AxiosError<{ error?: string }>)
|
|
||||||
?.response?.data?.error;
|
|
||||||
|
|
||||||
const handleSubmit = (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
if (!selectedTenantId) {
|
|
||||||
alert("소속될 테넌트를 선택해주세요.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
createMutation.mutate(formData);
|
|
||||||
};
|
|
||||||
|
|
||||||
const addRedirectUri = () => {
|
|
||||||
if (!redirectUriInput.trim()) return;
|
|
||||||
setFormData((prev) => ({
|
|
||||||
...prev,
|
|
||||||
redirect_uris: [...prev.redirect_uris, redirectUriInput.trim()],
|
|
||||||
}));
|
|
||||||
setRedirectUriInput("");
|
|
||||||
};
|
|
||||||
|
|
||||||
const removeRedirectUri = (index: number) => {
|
|
||||||
setFormData((prev) => ({
|
|
||||||
...prev,
|
|
||||||
redirect_uris: prev.redirect_uris.filter((_, i) => i !== index),
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-8">
|
|
||||||
<header className="flex flex-wrap items-start justify-between gap-4">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="flex items-center gap-2 text-sm text-[var(--color-muted)]">
|
|
||||||
<Link to="/relying-parties" className="inline-flex items-center gap-2">
|
|
||||||
<ArrowLeft size={14} />
|
|
||||||
Applications
|
|
||||||
</Link>
|
|
||||||
<span>/</span>
|
|
||||||
<span className="text-foreground">New App</span>
|
|
||||||
</div>
|
|
||||||
<h2 className="text-3xl font-semibold">새 애플리케이션 등록</h2>
|
|
||||||
<p className="text-sm text-[var(--color-muted)]">
|
|
||||||
전체 시스템 차원에서 새로운 Relying Party를 등록합니다.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<form onSubmit={handleSubmit} className="max-w-2xl">
|
|
||||||
<Card className="bg-[var(--color-panel)]">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>App & Tenant Assignment</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
애플리케이션이 소속될 테넌트와 기본 정보를 설정합니다.
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-6">
|
|
||||||
{errorMsg && (
|
|
||||||
<div className="rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
|
|
||||||
{errorMsg}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 테넌트 선택 추가 */}
|
|
||||||
<div className="space-y-1">
|
|
||||||
<Label htmlFor="tenant_select">Owner Tenant</Label>
|
|
||||||
<select
|
|
||||||
id="tenant_select"
|
|
||||||
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
|
||||||
value={selectedTenantId}
|
|
||||||
onChange={(e) => setSelectedTenantId(e.target.value)}
|
|
||||||
required
|
|
||||||
>
|
|
||||||
<option value="">-- 테넌트 선택 --</option>
|
|
||||||
{tenants.map(t => (
|
|
||||||
<option key={t.id} value={t.id}>{t.name} ({t.slug})</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
<p className="text-xs text-muted-foreground">이 앱을 관리할 조직을 선택하세요.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
|
||||||
<Label htmlFor="client_name">Client Name</Label>
|
|
||||||
<Input
|
|
||||||
id="client_name"
|
|
||||||
value={formData.client_name}
|
|
||||||
onChange={(e) =>
|
|
||||||
setFormData({ ...formData, client_name: e.target.value })
|
|
||||||
}
|
|
||||||
placeholder="My Awesome App"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
|
||||||
<Label>Redirect URIs</Label>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<Input
|
|
||||||
value={redirectUriInput}
|
|
||||||
onChange={(e) => setRedirectUriInput(e.target.value)}
|
|
||||||
placeholder="https://myapp.com/callback"
|
|
||||||
onKeyDown={(e) => {
|
|
||||||
if (e.key === "Enter") {
|
|
||||||
e.preventDefault();
|
|
||||||
addRedirectUri();
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Button type="button" variant="secondary" onClick={addRedirectUri}>
|
|
||||||
Add
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div className="mt-2 flex flex-wrap gap-2">
|
|
||||||
{formData.redirect_uris.map((uri, idx) => (
|
|
||||||
<Badge key={idx} variant="secondary" className="gap-1 pr-1">
|
|
||||||
{uri}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => removeRedirectUri(idx)}
|
|
||||||
className="ml-1 rounded-full p-0.5 hover:bg-muted-foreground/20"
|
|
||||||
>
|
|
||||||
×
|
|
||||||
</button>
|
|
||||||
</Badge>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
|
||||||
<Label htmlFor="scope">Scope</Label>
|
|
||||||
<Input
|
|
||||||
id="scope"
|
|
||||||
value={formData.scope}
|
|
||||||
onChange={(e) =>
|
|
||||||
setFormData({ ...formData, scope: e.target.value })
|
|
||||||
}
|
|
||||||
placeholder="openid profile email"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
|
||||||
<div className="space-y-1">
|
|
||||||
<Label>Auth Method</Label>
|
|
||||||
<select
|
|
||||||
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
|
||||||
value={formData.token_endpoint_auth_method}
|
|
||||||
onChange={(e) => setFormData({...formData, token_endpoint_auth_method: e.target.value})}
|
|
||||||
>
|
|
||||||
<option value="client_secret_basic">client_secret_basic</option>
|
|
||||||
<option value="client_secret_post">client_secret_post</option>
|
|
||||||
<option value="none">none (Public Client)</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="justify-end gap-2">
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="ghost"
|
|
||||||
onClick={() => navigate("/relying-parties")}
|
|
||||||
>
|
|
||||||
취소
|
|
||||||
</Button>
|
|
||||||
<Button type="submit" disabled={createMutation.isPending}>
|
|
||||||
<Save size={16} className="mr-2" />
|
|
||||||
생성
|
|
||||||
</Button>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default RelyingPartyCreatePage;
|
|
||||||
@@ -1,175 +0,0 @@
|
|||||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
|
||||||
import type { AxiosError } from "axios";
|
|
||||||
import { Pencil, Plus, RefreshCw, Trash2, Share2, Building2 } from "lucide-react";
|
|
||||||
import { useNavigate, Link } from "react-router-dom";
|
|
||||||
import { Button } from "../../components/ui/button";
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "../../components/ui/card";
|
|
||||||
import {
|
|
||||||
Table,
|
|
||||||
TableBody,
|
|
||||||
TableCell,
|
|
||||||
TableHead,
|
|
||||||
TableHeader,
|
|
||||||
TableRow,
|
|
||||||
} from "../../components/ui/table";
|
|
||||||
import { deleteRelyingParty, fetchAllRelyingParties } from "../../lib/adminApi";
|
|
||||||
|
|
||||||
function RelyingPartyListPage() {
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
const query = useQuery({
|
|
||||||
queryKey: ["relyingParties", "all"],
|
|
||||||
queryFn: fetchAllRelyingParties,
|
|
||||||
});
|
|
||||||
|
|
||||||
const deleteMutation = useMutation({
|
|
||||||
mutationFn: (clientId: string) => deleteRelyingParty(clientId),
|
|
||||||
onSuccess: () => {
|
|
||||||
query.refetch();
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const errorMsg = (query.error as AxiosError<{ error?: string }>)?.response
|
|
||||||
?.data?.error;
|
|
||||||
const fallbackError =
|
|
||||||
!errorMsg && query.isError ? "애플리케이션 목록 조회에 실패했습니다." : null;
|
|
||||||
|
|
||||||
const items = query.data ?? [];
|
|
||||||
|
|
||||||
const handleDelete = (clientId: string, name: string) => {
|
|
||||||
if (!window.confirm(`앱 "${name}"를 삭제할까요?`)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
deleteMutation.mutate(clientId);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-8">
|
|
||||||
<header className="flex flex-wrap items-start justify-between gap-4">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="flex items-center gap-2 text-sm text-[var(--color-muted)]">
|
|
||||||
<span>Applications</span>
|
|
||||||
<span>/</span>
|
|
||||||
<span className="text-foreground">List</span>
|
|
||||||
</div>
|
|
||||||
<h2 className="text-3xl font-semibold">애플리케이션 관리</h2>
|
|
||||||
<p className="text-sm text-[var(--color-muted)]">
|
|
||||||
전체 테넌트의 Relying Party 목록을 확인하고 관리합니다.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => query.refetch()}
|
|
||||||
disabled={query.isFetching}
|
|
||||||
>
|
|
||||||
<RefreshCw size={16} />
|
|
||||||
새로고침
|
|
||||||
</Button>
|
|
||||||
<Button asChild>
|
|
||||||
<Link to="/relying-parties/new">
|
|
||||||
<Plus size={16} />
|
|
||||||
앱 추가
|
|
||||||
</Link>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<Card className="bg-[var(--color-panel)]">
|
|
||||||
<CardHeader className="flex flex-row items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<CardTitle>Application Registry</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
총 {items.length}개 앱 등록됨
|
|
||||||
</CardDescription>
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
{(errorMsg || fallbackError) && (
|
|
||||||
<div className="mb-4 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
|
|
||||||
{errorMsg ?? fallbackError}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Table>
|
|
||||||
<TableHeader>
|
|
||||||
<TableRow>
|
|
||||||
<TableHead>NAME</TableHead>
|
|
||||||
<TableHead>TENANT ID</TableHead>
|
|
||||||
<TableHead>CLIENT ID</TableHead>
|
|
||||||
<TableHead>UPDATED</TableHead>
|
|
||||||
<TableHead className="text-right">ACTIONS</TableHead>
|
|
||||||
</TableRow>
|
|
||||||
</TableHeader>
|
|
||||||
<TableBody>
|
|
||||||
{query.isLoading && (
|
|
||||||
<TableRow>
|
|
||||||
<TableCell colSpan={5}>로딩 중...</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
)}
|
|
||||||
{!query.isLoading && items.length === 0 && (
|
|
||||||
<TableRow>
|
|
||||||
<TableCell colSpan={5}>
|
|
||||||
등록된 애플리케이션이 없습니다.
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
)}
|
|
||||||
{items.map((rp) => (
|
|
||||||
<TableRow key={rp.clientId}>
|
|
||||||
<TableCell className="font-semibold">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Share2 size={14} className="text-primary" />
|
|
||||||
{rp.name}
|
|
||||||
</div>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
<div className="flex items-center gap-1 text-xs text-muted-foreground">
|
|
||||||
<Building2 size={12} />
|
|
||||||
{rp.tenantId}
|
|
||||||
</div>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className="font-mono text-xs text-muted-foreground">
|
|
||||||
{rp.clientId}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
{rp.updatedAt
|
|
||||||
? new Date(rp.updatedAt).toLocaleString("ko-KR")
|
|
||||||
: "-"}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className="text-right">
|
|
||||||
<div className="flex justify-end gap-2">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => navigate(`/tenants/${rp.tenantId}/relying-parties/${rp.clientId}`)}
|
|
||||||
>
|
|
||||||
<Pencil size={14} />
|
|
||||||
관리
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => handleDelete(rp.clientId, rp.name)}
|
|
||||||
disabled={deleteMutation.isPending}
|
|
||||||
>
|
|
||||||
<Trash2 size={14} />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
))}
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default RelyingPartyListPage;
|
|
||||||
@@ -70,16 +70,6 @@ function TenantDetailPage() {
|
|||||||
>
|
>
|
||||||
Schema
|
Schema
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
|
||||||
to={`/tenants/${tenantId}/relying-parties`}
|
|
||||||
className={`px-4 py-2 text-sm font-medium ${
|
|
||||||
location.pathname.includes("/relying-parties")
|
|
||||||
? "border-b-2 border-blue-500 text-blue-600"
|
|
||||||
: "text-gray-500 hover:text-gray-700"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
Relying Parties
|
|
||||||
</Link>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Outlet for nested routes */}
|
{/* Outlet for nested routes */}
|
||||||
|
|||||||
@@ -1,239 +0,0 @@
|
|||||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
|
||||||
import type { AxiosError } from "axios";
|
|
||||||
import { ArrowLeft, Save } from "lucide-react";
|
|
||||||
import { useState } from "react";
|
|
||||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
|
||||||
import { Button } from "../../../components/ui/button";
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "../../../components/ui/card";
|
|
||||||
import { Input } from "../../../components/ui/input";
|
|
||||||
import { Label } from "../../../components/ui/label";
|
|
||||||
import {
|
|
||||||
createRelyingParty,
|
|
||||||
} from "../../../lib/adminApi";
|
|
||||||
import type { HydraClientReq } from "../../../lib/adminApi";
|
|
||||||
import { Badge } from "../../../components/ui/badge";
|
|
||||||
|
|
||||||
function TenantRelyingPartyCreatePage() {
|
|
||||||
const { tenantId } = useParams<{ tenantId: string }>();
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
|
|
||||||
const [formData, setFormData] = useState<HydraClientReq>({
|
|
||||||
client_name: "",
|
|
||||||
redirect_uris: [],
|
|
||||||
scope: "openid profile email",
|
|
||||||
grant_types: ["authorization_code", "refresh_token"],
|
|
||||||
response_types: ["code"],
|
|
||||||
token_endpoint_auth_method: "client_secret_basic",
|
|
||||||
});
|
|
||||||
const [redirectUriInput, setRedirectUriInput] = useState("");
|
|
||||||
|
|
||||||
const createMutation = useMutation({
|
|
||||||
mutationFn: (data: HydraClientReq) => createRelyingParty(tenantId!, data),
|
|
||||||
onSuccess: () => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ["relyingParties", tenantId] });
|
|
||||||
navigate(`/tenants/${tenantId}/relying-parties`);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const errorMsg = (createMutation.error as AxiosError<{ error?: string }>)
|
|
||||||
?.response?.data?.error;
|
|
||||||
|
|
||||||
const handleSubmit = (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
createMutation.mutate(formData);
|
|
||||||
};
|
|
||||||
|
|
||||||
const addRedirectUri = () => {
|
|
||||||
if (!redirectUriInput.trim()) return;
|
|
||||||
setFormData((prev) => ({
|
|
||||||
...prev,
|
|
||||||
redirect_uris: [...prev.redirect_uris, redirectUriInput.trim()],
|
|
||||||
}));
|
|
||||||
setRedirectUriInput("");
|
|
||||||
};
|
|
||||||
|
|
||||||
const removeRedirectUri = (index: number) => {
|
|
||||||
setFormData((prev) => ({
|
|
||||||
...prev,
|
|
||||||
redirect_uris: prev.redirect_uris.filter((_, i) => i !== index),
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-8">
|
|
||||||
<header className="flex flex-wrap items-start justify-between gap-4">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="flex items-center gap-2 text-sm text-[var(--color-muted)]">
|
|
||||||
<Link to={`/tenants/${tenantId}/relying-parties`} className="inline-flex items-center gap-2">
|
|
||||||
<ArrowLeft size={14} />
|
|
||||||
Back to List
|
|
||||||
</Link>
|
|
||||||
<span>/</span>
|
|
||||||
<span className="text-foreground">New App</span>
|
|
||||||
</div>
|
|
||||||
<h2 className="text-3xl font-semibold">새 애플리케이션 등록</h2>
|
|
||||||
<p className="text-sm text-[var(--color-muted)]">
|
|
||||||
Ory Hydra OAuth2 Client를 생성하고 현재 테넌트에 연결합니다.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<form onSubmit={handleSubmit} className="max-w-2xl">
|
|
||||||
<Card className="bg-[var(--color-panel)]">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Basic Information</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
애플리케이션의 기본 정보를 입력하세요.
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-4">
|
|
||||||
{errorMsg && (
|
|
||||||
<div className="rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
|
|
||||||
{errorMsg}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
|
||||||
<Label htmlFor="client_name">Client Name</Label>
|
|
||||||
<Input
|
|
||||||
id="client_name"
|
|
||||||
value={formData.client_name}
|
|
||||||
onChange={(e) =>
|
|
||||||
setFormData({ ...formData, client_name: e.target.value })
|
|
||||||
}
|
|
||||||
placeholder="My Awesome App"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
|
||||||
<Label>Redirect URIs</Label>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<Input
|
|
||||||
value={redirectUriInput}
|
|
||||||
onChange={(e) => setRedirectUriInput(e.target.value)}
|
|
||||||
placeholder="https://myapp.com/callback"
|
|
||||||
onKeyDown={(e) => {
|
|
||||||
if (e.key === "Enter") {
|
|
||||||
e.preventDefault();
|
|
||||||
addRedirectUri();
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Button type="button" variant="secondary" onClick={addRedirectUri}>
|
|
||||||
Add
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div className="mt-2 flex flex-wrap gap-2">
|
|
||||||
{formData.redirect_uris.map((uri, idx) => (
|
|
||||||
<Badge key={idx} variant="secondary" className="gap-1 pr-1">
|
|
||||||
{uri}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => removeRedirectUri(idx)}
|
|
||||||
className="ml-1 rounded-full p-0.5 hover:bg-muted-foreground/20"
|
|
||||||
>
|
|
||||||
×
|
|
||||||
</button>
|
|
||||||
</Badge>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<p className="text-xs text-muted-foreground">
|
|
||||||
OAuth2 인증 후 리디렉션될 URI 목록입니다.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
|
||||||
<Label htmlFor="scope">Scope</Label>
|
|
||||||
<Input
|
|
||||||
id="scope"
|
|
||||||
value={formData.scope}
|
|
||||||
onChange={(e) =>
|
|
||||||
setFormData({ ...formData, scope: e.target.value })
|
|
||||||
}
|
|
||||||
placeholder="openid profile email"
|
|
||||||
/>
|
|
||||||
<p className="text-xs text-muted-foreground">
|
|
||||||
Space-separated scopes.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
|
||||||
<div className="space-y-1">
|
|
||||||
<Label>Grant Types</Label>
|
|
||||||
<div className="flex flex-col gap-1 text-sm text-muted-foreground">
|
|
||||||
<label className="flex items-center gap-2">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={formData.grant_types?.includes("authorization_code")}
|
|
||||||
disabled
|
|
||||||
/> authorization_code
|
|
||||||
</label>
|
|
||||||
<label className="flex items-center gap-2">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={formData.grant_types?.includes("refresh_token")}
|
|
||||||
disabled
|
|
||||||
/> refresh_token
|
|
||||||
</label>
|
|
||||||
<label className="flex items-center gap-2">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={formData.grant_types?.includes("client_credentials")}
|
|
||||||
onChange={(e) => {
|
|
||||||
const checked = e.target.checked;
|
|
||||||
setFormData(prev => ({
|
|
||||||
...prev,
|
|
||||||
grant_types: checked
|
|
||||||
? [...(prev.grant_types || []), "client_credentials"]
|
|
||||||
: (prev.grant_types || []).filter(t => t !== "client_credentials")
|
|
||||||
}))
|
|
||||||
}}
|
|
||||||
/> client_credentials
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
|
||||||
<Label>Auth Method</Label>
|
|
||||||
<select
|
|
||||||
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
|
|
||||||
value={formData.token_endpoint_auth_method}
|
|
||||||
onChange={(e) => setFormData({...formData, token_endpoint_auth_method: e.target.value})}
|
|
||||||
>
|
|
||||||
<option value="client_secret_basic">client_secret_basic</option>
|
|
||||||
<option value="client_secret_post">client_secret_post</option>
|
|
||||||
<option value="none">none (Public Client)</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="justify-end gap-2">
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="ghost"
|
|
||||||
onClick={() => navigate(`/tenants/${tenantId}/relying-parties`)}
|
|
||||||
>
|
|
||||||
취소
|
|
||||||
</Button>
|
|
||||||
<Button type="submit" disabled={createMutation.isPending}>
|
|
||||||
<Save size={16} className="mr-2" />
|
|
||||||
생성
|
|
||||||
</Button>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default TenantRelyingPartyCreatePage;
|
|
||||||
@@ -1,126 +0,0 @@
|
|||||||
import { useQuery } from "@tanstack/react-query";
|
|
||||||
import { ArrowLeft, Copy, ShieldCheck } 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,
|
|
||||||
CardDescription,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "../../../components/ui/card";
|
|
||||||
import { fetchRelyingParty } from "../../../lib/adminApi";
|
|
||||||
|
|
||||||
function TenantRelyingPartyDetailPage() {
|
|
||||||
const { tenantId, id } = useParams<{ tenantId: string; id: string }>();
|
|
||||||
|
|
||||||
const { data, isLoading, error } = useQuery({
|
|
||||||
queryKey: ["relyingParty", id],
|
|
||||||
queryFn: () => fetchRelyingParty(id!),
|
|
||||||
enabled: !!id,
|
|
||||||
});
|
|
||||||
|
|
||||||
const copyToClipboard = (text: string) => {
|
|
||||||
navigator.clipboard.writeText(text);
|
|
||||||
alert("복사되었습니다.");
|
|
||||||
};
|
|
||||||
|
|
||||||
if (isLoading) return <div>Loading...</div>;
|
|
||||||
if (error) return <div className="text-destructive">Error loading app details.</div>;
|
|
||||||
|
|
||||||
const { relyingParty, oauth2Config } = data!;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-8">
|
|
||||||
<header className="flex flex-wrap items-start justify-between gap-4">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="flex items-center gap-2 text-sm text-[var(--color-muted)]">
|
|
||||||
<Link to={`/tenants/${tenantId}/relying-parties`} className="inline-flex items-center gap-2">
|
|
||||||
<ArrowLeft size={14} />
|
|
||||||
Relying Parties
|
|
||||||
</Link>
|
|
||||||
<span>/</span>
|
|
||||||
<span className="text-foreground">{relyingParty.name}</span>
|
|
||||||
</div>
|
|
||||||
<h2 className="text-3xl font-semibold">{relyingParty.name}</h2>
|
|
||||||
<p className="text-sm text-[var(--color-muted)]">
|
|
||||||
{relyingParty.description || "상세 설정을 확인하고 관리합니다."}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
|
|
||||||
<ShieldCheck size={14} className="mr-1" />
|
|
||||||
Keto Protected
|
|
||||||
</Badge>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div className="grid gap-6 md:grid-cols-2">
|
|
||||||
<Card className="bg-[var(--color-panel)]">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>OAuth2 Credentials</CardTitle>
|
|
||||||
<CardDescription>연동에 필요한 클라이언트 정보입니다.</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-4">
|
|
||||||
<div className="space-y-1">
|
|
||||||
<p className="text-xs font-medium text-muted-foreground uppercase">Client ID</p>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<code className="flex-1 rounded bg-muted p-2 text-sm">{oauth2Config.client_id}</code>
|
|
||||||
<Button variant="ghost" size="sm" onClick={() => copyToClipboard(oauth2Config.client_id!)}>
|
|
||||||
<Copy size={14} />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
|
||||||
<p className="text-xs font-medium text-muted-foreground uppercase">Client Secret</p>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<code className="flex-1 rounded bg-muted p-2 text-sm">
|
|
||||||
{oauth2Config.client_secret || (oauth2Config.metadata?.client_secret as string) || "********"}
|
|
||||||
</code>
|
|
||||||
{(oauth2Config.client_secret || oauth2Config.metadata?.client_secret) && (
|
|
||||||
<Button variant="ghost" size="sm" onClick={() => copyToClipboard((oauth2Config.client_secret || oauth2Config.metadata?.client_secret) as string)}>
|
|
||||||
<Copy size={14} />
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<p className="text-[10px] text-amber-600">
|
|
||||||
* Secret은 생성 시점에만 노출되거나 메타데이터에 암호화되어 저장될 수 있습니다.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className="bg-[var(--color-panel)]">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Configuration</CardTitle>
|
|
||||||
<CardDescription>OAuth2 동작 설정</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-4">
|
|
||||||
<div className="space-y-1">
|
|
||||||
<p className="text-xs font-medium text-muted-foreground uppercase">Redirect URIs</p>
|
|
||||||
<ul className="list-inside list-disc text-sm">
|
|
||||||
{(oauth2Config.redirect_uris || []).map((uri, i) => (
|
|
||||||
<li key={i}>{uri}</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1">
|
|
||||||
<p className="text-xs font-medium text-muted-foreground uppercase">Allowed Scopes</p>
|
|
||||||
<div className="flex flex-wrap gap-1">
|
|
||||||
{(oauth2Config.scope || "").split(" ").filter(Boolean).map(s => (
|
|
||||||
<Badge key={s} variant="secondary">{s}</Badge>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1">
|
|
||||||
<p className="text-xs font-medium text-muted-foreground uppercase">Auth Method</p>
|
|
||||||
<span className="text-sm">{oauth2Config.token_endpoint_auth_method}</span>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default TenantRelyingPartyDetailPage;
|
|
||||||
@@ -1,155 +0,0 @@
|
|||||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
|
||||||
import type { AxiosError } from "axios";
|
|
||||||
import { Pencil, Plus, RefreshCw, Trash2, Share2 } from "lucide-react";
|
|
||||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
|
||||||
import { Button } from "../../../components/ui/button";
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "../../../components/ui/card";
|
|
||||||
import {
|
|
||||||
Table,
|
|
||||||
TableBody,
|
|
||||||
TableCell,
|
|
||||||
TableHead,
|
|
||||||
TableHeader,
|
|
||||||
TableRow,
|
|
||||||
} from "../../../components/ui/table";
|
|
||||||
import { deleteRelyingParty, fetchRelyingParties } from "../../../lib/adminApi";
|
|
||||||
|
|
||||||
function TenantRelyingPartyListPage() {
|
|
||||||
const { tenantId } = useParams<{ tenantId: string }>();
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
const query = useQuery({
|
|
||||||
queryKey: ["relyingParties", tenantId],
|
|
||||||
queryFn: () => fetchRelyingParties(tenantId!),
|
|
||||||
enabled: !!tenantId,
|
|
||||||
});
|
|
||||||
|
|
||||||
const deleteMutation = useMutation({
|
|
||||||
mutationFn: (clientId: string) => deleteRelyingParty(clientId),
|
|
||||||
onSuccess: () => {
|
|
||||||
query.refetch();
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const errorMsg = (query.error as AxiosError<{ error?: string }>)?.response
|
|
||||||
?.data?.error;
|
|
||||||
const fallbackError =
|
|
||||||
!errorMsg && query.isError ? "앱 목록 조회에 실패했습니다." : null;
|
|
||||||
|
|
||||||
const items = query.data ?? [];
|
|
||||||
|
|
||||||
const handleDelete = (clientId: string, name: string) => {
|
|
||||||
if (!window.confirm(`앱 "${name}"를 삭제할까요?`)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
deleteMutation.mutate(clientId);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card className="bg-[var(--color-panel)] mt-6">
|
|
||||||
<CardHeader className="flex flex-row items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<CardTitle>Relying Parties (Apps)</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
이 테넌트에 등록된 OAuth2/OIDC 애플리케이션입니다.
|
|
||||||
</CardDescription>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => query.refetch()}
|
|
||||||
disabled={query.isFetching}
|
|
||||||
>
|
|
||||||
<RefreshCw size={14} />
|
|
||||||
새로고침
|
|
||||||
</Button>
|
|
||||||
<Button size="sm" asChild>
|
|
||||||
<Link to={`/tenants/${tenantId}/relying-parties/new`}>
|
|
||||||
<Plus size={14} />
|
|
||||||
앱 추가
|
|
||||||
</Link>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
{(errorMsg || fallbackError) && (
|
|
||||||
<div className="mb-4 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
|
|
||||||
{errorMsg ?? fallbackError}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Table>
|
|
||||||
<TableHeader>
|
|
||||||
<TableRow>
|
|
||||||
<TableHead>CLIENT ID</TableHead>
|
|
||||||
<TableHead>NAME</TableHead>
|
|
||||||
<TableHead>DESCRIPTION</TableHead>
|
|
||||||
<TableHead>UPDATED</TableHead>
|
|
||||||
<TableHead className="text-right">ACTIONS</TableHead>
|
|
||||||
</TableRow>
|
|
||||||
</TableHeader>
|
|
||||||
<TableBody>
|
|
||||||
{query.isLoading && (
|
|
||||||
<TableRow>
|
|
||||||
<TableCell colSpan={5}>로딩 중...</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
)}
|
|
||||||
{!query.isLoading && items.length === 0 && (
|
|
||||||
<TableRow>
|
|
||||||
<TableCell colSpan={5}>
|
|
||||||
아직 등록된 앱이 없습니다.
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
)}
|
|
||||||
{items.map((rp) => (
|
|
||||||
<TableRow key={rp.clientId}>
|
|
||||||
<TableCell className="font-mono text-xs">{rp.clientId}</TableCell>
|
|
||||||
<TableCell className="font-semibold">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Share2 size={14} className="text-muted-foreground" />
|
|
||||||
{rp.name}
|
|
||||||
</div>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className="text-muted-foreground">{rp.description || "-"}</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
{rp.updatedAt
|
|
||||||
? new Date(rp.updatedAt).toLocaleString("ko-KR")
|
|
||||||
: "-"}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className="text-right">
|
|
||||||
<div className="flex justify-end gap-2">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => navigate(`/tenants/${tenantId}/relying-parties/${rp.clientId}`)}
|
|
||||||
>
|
|
||||||
<Pencil size={14} />
|
|
||||||
관리
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => handleDelete(rp.clientId, rp.name)}
|
|
||||||
disabled={deleteMutation.isPending}
|
|
||||||
>
|
|
||||||
<Trash2 size={14} />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
))}
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default TenantRelyingPartyListPage;
|
|
||||||
Reference in New Issue
Block a user