forked from baron/baron-sso
ReBAC 고도화 및 애플리케이션 관리 시스템 통합 구현
This commit is contained in:
@@ -0,0 +1,228 @@
|
||||
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;
|
||||
Reference in New Issue
Block a user