forked from baron/baron-sso
941 lines
35 KiB
TypeScript
941 lines
35 KiB
TypeScript
import { useMutation, useQuery } from "@tanstack/react-query";
|
|
import type { AxiosError } from "axios";
|
|
import { Filter, Plus, Search, ShieldHalf, X } from "lucide-react";
|
|
import { useEffect, useMemo, useState } from "react";
|
|
import { useAuth } from "react-oidc-context";
|
|
import { Link, useNavigate } from "react-router-dom";
|
|
import { PageHeader } from "../../../../common/core/components/page";
|
|
import {
|
|
SortableTableHead,
|
|
sortableTableHeadBaseClassName,
|
|
sortableTableHeaderClassName,
|
|
} from "../../../../common/core/components/sort";
|
|
import {
|
|
type SortConfig,
|
|
type SortResolverMap,
|
|
sortItems,
|
|
toggleSort,
|
|
} from "../../../../common/core/utils";
|
|
import { SearchFilterBar } from "../../../../common/ui/search-filter-bar";
|
|
import {
|
|
commonTableShellClass,
|
|
commonTableViewportClass,
|
|
} from "../../../../common/ui/table";
|
|
import { ForbiddenMessage } from "../../components/common/ForbiddenMessage";
|
|
import { Badge } from "../../components/ui/badge";
|
|
import { Button } from "../../components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "../../components/ui/card";
|
|
import { Input } from "../../components/ui/input";
|
|
import { Label } from "../../components/ui/label";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "../../components/ui/table";
|
|
import { Textarea } from "../../components/ui/textarea";
|
|
import {
|
|
type ClientSummary,
|
|
fetchClients,
|
|
fetchDeveloperRequestStatus,
|
|
fetchDevUser,
|
|
fetchMyTenants,
|
|
requestDeveloperAccess,
|
|
} from "../../lib/devApi";
|
|
import { t } from "../../lib/i18n";
|
|
import { resolveProfileRole } from "../../lib/role";
|
|
import { cn } from "../../lib/utils";
|
|
import { fetchMe } from "../auth/authApi";
|
|
import { resolveClientCreateAccess } from "./clientCreateAccess";
|
|
import { ClientLogo } from "./components/ClientLogo";
|
|
|
|
type ClientSortKey = "application" | "id" | "type" | "status" | "createdAt";
|
|
const clientListPreviewCount = 5;
|
|
|
|
type ClientCreatorInfo = {
|
|
name?: string;
|
|
email?: string;
|
|
};
|
|
|
|
function isClientTenantLimited(client: ClientSummary) {
|
|
const metadata = client.metadata ?? {};
|
|
if (metadata.tenant_access_restricted === true) {
|
|
return true;
|
|
}
|
|
if (!Array.isArray(metadata.allowed_tenants)) {
|
|
return false;
|
|
}
|
|
return metadata.allowed_tenants.some(
|
|
(tenantId) => typeof tenantId === "string" && tenantId.trim() !== "",
|
|
);
|
|
}
|
|
|
|
function isHeadlessLoginClient(client: ClientSummary) {
|
|
return client.metadata?.headless_login_enabled === true;
|
|
}
|
|
|
|
function clientCreatorID(client: ClientSummary) {
|
|
return (
|
|
client.creatorId?.trim() ||
|
|
(typeof client.metadata?.user_id === "string"
|
|
? client.metadata.user_id.trim()
|
|
: "")
|
|
);
|
|
}
|
|
|
|
function ClientsPage() {
|
|
const navigate = useNavigate();
|
|
const auth = useAuth();
|
|
const hasAccessToken = Boolean(auth.user?.access_token);
|
|
const userProfile = auth.user?.profile as Record<string, unknown> | undefined;
|
|
const role = resolveProfileRole(userProfile);
|
|
const tenantId = userProfile?.tenant_id as string | undefined;
|
|
const companyCode = userProfile?.companyCode as string | undefined;
|
|
|
|
const {
|
|
data,
|
|
isLoading: isLoadingClients,
|
|
error: clientError,
|
|
} = useQuery({
|
|
queryKey: ["clients"],
|
|
queryFn: fetchClients,
|
|
enabled: hasAccessToken,
|
|
});
|
|
|
|
const { data: me, isLoading: isLoadingMe } = useQuery({
|
|
queryKey: ["userMe"],
|
|
queryFn: fetchMe,
|
|
enabled: hasAccessToken,
|
|
});
|
|
|
|
const profileRole = me?.role?.trim() || role;
|
|
|
|
const {
|
|
data: requestStatus,
|
|
isLoading: isLoadingRequest,
|
|
refetch: refetchRequest,
|
|
} = useQuery({
|
|
queryKey: ["developer-request", tenantId],
|
|
queryFn: () => fetchDeveloperRequestStatus(tenantId),
|
|
enabled: hasAccessToken && profileRole === "user",
|
|
});
|
|
const { data: tenants } = useQuery({
|
|
queryKey: ["myTenants"],
|
|
queryFn: fetchMyTenants,
|
|
enabled: hasAccessToken,
|
|
});
|
|
|
|
const createAccessState = resolveClientCreateAccess({
|
|
role: profileRole,
|
|
accessStatus: requestStatus,
|
|
});
|
|
const canCreateClient = createAccessState === "can_create";
|
|
const isClientCreatePending = createAccessState === "pending";
|
|
const canRequestClientCreateAccess =
|
|
createAccessState === "request_required" && !isLoadingRequest;
|
|
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const [typeFilter, setTypeFilter] = useState("all");
|
|
const [statusFilter, setStatusFilter] = useState("all");
|
|
const [isAdvancedFilterOpen, setIsAdvancedFilterOpen] = useState(false);
|
|
const [isRequestModalOpen, setIsRequestModalOpen] = useState(false);
|
|
const [isClientListExpanded, setIsClientListExpanded] = useState(false);
|
|
const [sortConfig, setSortConfig] =
|
|
useState<SortConfig<ClientSortKey> | null>({
|
|
key: "createdAt",
|
|
direction: "desc",
|
|
});
|
|
|
|
const clients = data?.items || [];
|
|
const creatorIds = useMemo(
|
|
() =>
|
|
Array.from(
|
|
new Set(
|
|
clients
|
|
.map((client) => clientCreatorID(client))
|
|
.filter((creatorId) => creatorId !== ""),
|
|
),
|
|
).sort(),
|
|
[clients],
|
|
);
|
|
|
|
const { data: clientCreators = {} } = useQuery({
|
|
queryKey: ["client-creators", creatorIds],
|
|
queryFn: async () => {
|
|
const entries = await Promise.all(
|
|
creatorIds.map(async (creatorId) => {
|
|
try {
|
|
const user = await fetchDevUser(creatorId);
|
|
return [
|
|
creatorId,
|
|
{
|
|
name: user.name,
|
|
email: user.email,
|
|
},
|
|
] as const;
|
|
} catch {
|
|
return [creatorId, null] as const;
|
|
}
|
|
}),
|
|
);
|
|
|
|
return entries.reduce<Record<string, ClientCreatorInfo>>(
|
|
(acc, [creatorId, user]) => {
|
|
if (user) {
|
|
acc[creatorId] = user;
|
|
}
|
|
return acc;
|
|
},
|
|
{},
|
|
);
|
|
},
|
|
enabled: hasAccessToken && creatorIds.length > 0,
|
|
});
|
|
|
|
const clientSortResolvers = useMemo<
|
|
SortResolverMap<ClientSummary, ClientSortKey>
|
|
>(
|
|
() => ({
|
|
application: (client) => client.name || client.id,
|
|
id: (client) => client.id,
|
|
type: (client) =>
|
|
isHeadlessLoginClient(client) ? "private-headless" : client.type,
|
|
status: (client) => client.status,
|
|
createdAt: (client) =>
|
|
client.createdAt ? new Date(client.createdAt) : null,
|
|
}),
|
|
[],
|
|
);
|
|
|
|
const filteredClients = useMemo(() => {
|
|
const nextClients = clients.filter((client) => {
|
|
const matchesSearch =
|
|
!searchQuery ||
|
|
client.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
client.id.toLowerCase().includes(searchQuery.toLowerCase());
|
|
const matchesType =
|
|
typeFilter === "all" ||
|
|
(typeFilter === "headless"
|
|
? isHeadlessLoginClient(client)
|
|
: client.type === typeFilter && !isHeadlessLoginClient(client));
|
|
const matchesStatus =
|
|
statusFilter === "all" || client.status === statusFilter;
|
|
return matchesSearch && matchesType && matchesStatus;
|
|
});
|
|
|
|
return sortItems(nextClients, sortConfig, clientSortResolvers);
|
|
}, [
|
|
clientSortResolvers,
|
|
clients,
|
|
searchQuery,
|
|
sortConfig,
|
|
statusFilter,
|
|
typeFilter,
|
|
]);
|
|
|
|
const hasFilterResult = filteredClients.length > 0;
|
|
const isFilteredOut = clients.length > 0 && !hasFilterResult;
|
|
const visibleClients = useMemo(() => {
|
|
if (isClientListExpanded) {
|
|
return filteredClients;
|
|
}
|
|
|
|
return filteredClients.slice(0, clientListPreviewCount);
|
|
}, [filteredClients, isClientListExpanded]);
|
|
const canToggleClientList = filteredClients.length > clientListPreviewCount;
|
|
const currentTenant = tenants?.find(
|
|
(tenant) => tenant.id === tenantId || tenant.slug === companyCode,
|
|
);
|
|
const organizationName = currentTenant?.name || companyCode || "";
|
|
const profileName = me?.name || (userProfile?.name as string) || "";
|
|
const profileEmail = me?.email || (userProfile?.email as string) || "";
|
|
const profilePhone =
|
|
me?.phone ||
|
|
(userProfile?.phone as string | undefined) ||
|
|
(userProfile?.phone_number as string | undefined) ||
|
|
"";
|
|
const profileRoleLabel = t(`ui.admin.role.${profileRole}`, profileRole);
|
|
|
|
const isLoading =
|
|
isLoadingClients ||
|
|
isLoadingRequest ||
|
|
(hasAccessToken && !profileRole && isLoadingMe);
|
|
|
|
const requestSort = (key: ClientSortKey) => {
|
|
setSortConfig((current) => toggleSort(current, key));
|
|
};
|
|
|
|
if (auth.isLoading || !hasAccessToken || isLoading) {
|
|
return (
|
|
<div className="p-8 text-center">
|
|
{t("msg.dev.clients.loading", "Loading clients...")}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (clientError) {
|
|
const axiosError = clientError as AxiosError<{ error?: string }>;
|
|
if (axiosError.response?.status === 403) {
|
|
return <ForbiddenMessage resourceToken="clients" />;
|
|
}
|
|
const errMsg =
|
|
axiosError.response?.data?.error ?? (clientError as Error).message;
|
|
return (
|
|
<div className="p-8 text-center text-red-500">
|
|
{t("msg.dev.clients.load_error", "Error loading clients: {{error}}", {
|
|
error: errMsg,
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
<PageHeader
|
|
icon={<ShieldHalf size={20} />}
|
|
title={t("ui.dev.clients.registry.subtitle", "연동 앱")}
|
|
description={t(
|
|
"msg.dev.clients.registry.description",
|
|
"OIDC 클라이언트, 인증 방식, 리다이렉트 URI, 비밀키 재발행을 감사 로그와 함께 관리합니다.",
|
|
)}
|
|
actions={
|
|
canCreateClient ? (
|
|
<Button
|
|
size="sm"
|
|
className="mt-1 shadow-lg shadow-primary/30"
|
|
onClick={() => navigate("/clients/new")}
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
{t("ui.dev.clients.new", "새 클라이언트")}
|
|
</Button>
|
|
) : isClientCreatePending ? (
|
|
<div className="flex items-center justify-end gap-3">
|
|
<p className="max-w-xs text-right text-sm text-muted-foreground">
|
|
{t(
|
|
"msg.dev.clients.create_pending_detail",
|
|
"개발자 권한 신청을 검토 중입니다. 승인되면 연동 앱을 추가할 수 있습니다.",
|
|
)}
|
|
</p>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => navigate("/developer-requests")}
|
|
>
|
|
{t("ui.dev.nav.developer_request", "개발자 권한 신청")}
|
|
</Button>
|
|
</div>
|
|
) : canRequestClientCreateAccess ? (
|
|
<div className="flex items-center justify-end gap-3">
|
|
<p className="max-w-xs whitespace-pre-line text-right text-sm text-muted-foreground">
|
|
{t(
|
|
"msg.dev.clients.create_requires_request",
|
|
"연동 앱을 생성할 권한이 없습니다.\n개발자 권한 신청을 요청한 뒤 승인 받아주세요.",
|
|
).replaceAll("\\n", "\n")}
|
|
</p>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => navigate("/developer-requests")}
|
|
>
|
|
{t("ui.dev.welcome.btn_request", "개발자 권한 신청")}
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col items-end gap-2 text-right">
|
|
<p className="max-w-xs text-sm text-muted-foreground">
|
|
{t(
|
|
"msg.dev.clients.create_forbidden_detail",
|
|
"연동 앱을 생성할 권한이 없습니다. 관리자에게 개발자 권한 또는 적절한 RP 권한 부여를 요청해 주세요.",
|
|
)}
|
|
</p>
|
|
<Button type="button" variant="outline" size="sm" disabled>
|
|
<Plus className="h-4 w-4" />
|
|
{t("ui.dev.clients.new", "새 클라이언트")}
|
|
</Button>
|
|
</div>
|
|
)
|
|
}
|
|
/>
|
|
|
|
<Card className="glass-panel">
|
|
<CardHeader className="space-y-4 pb-4 pt-6">
|
|
<div>
|
|
<CardTitle className="text-xl font-semibold">
|
|
{t("ui.dev.clients.list.title", "클라이언트 목록")}
|
|
</CardTitle>
|
|
<CardDescription>
|
|
{t(
|
|
"msg.dev.clients.showing",
|
|
"총 {{shown}}개의 애플리케이션이 등록되어 있습니다.",
|
|
{ shown: clients.length },
|
|
)}
|
|
</CardDescription>
|
|
</div>
|
|
<SearchFilterBar
|
|
primary={
|
|
<div className="relative flex-1">
|
|
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
className="pl-10"
|
|
placeholder={t(
|
|
"ui.dev.clients.search_placeholder",
|
|
"클라이언트 이름/ID로 검색...",
|
|
)}
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
/>
|
|
</div>
|
|
}
|
|
actions={
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className={cn(
|
|
"gap-1 text-muted-foreground",
|
|
isAdvancedFilterOpen && "text-primary bg-primary/10",
|
|
)}
|
|
onClick={() => setIsAdvancedFilterOpen(!isAdvancedFilterOpen)}
|
|
>
|
|
<Filter className="h-4 w-4" />
|
|
{t(
|
|
"ui.dev.clients.consents.filters.advanced",
|
|
"Advanced Filters",
|
|
)}
|
|
</Button>
|
|
}
|
|
advancedOpen={isAdvancedFilterOpen}
|
|
advanced={
|
|
<div className="flex flex-wrap items-center gap-6">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs font-bold uppercase tracking-wider text-muted-foreground whitespace-nowrap">
|
|
{t("ui.dev.clients.filter.type_label", "Type:")}
|
|
</span>
|
|
<select
|
|
className="h-9 min-w-[140px] rounded-md border border-input bg-background px-3 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/30"
|
|
value={typeFilter}
|
|
onChange={(e) => setTypeFilter(e.target.value)}
|
|
>
|
|
<option value="all">
|
|
{t("ui.dev.clients.filter.type_all", "모든 유형")}
|
|
</option>
|
|
<option value="private">
|
|
{t("ui.dev.clients.type.private", "Server side App")}
|
|
</option>
|
|
<option value="pkce">
|
|
{t("ui.dev.clients.type.pkce", "PKCE")}
|
|
</option>
|
|
<option value="headless">
|
|
{t("ui.dev.clients.type.headless", "Headless Login")}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs font-bold uppercase tracking-wider text-muted-foreground whitespace-nowrap">
|
|
{t("ui.dev.clients.consents.status_label", "Status:")}
|
|
</span>
|
|
<select
|
|
className="h-9 min-w-[140px] rounded-md border border-input bg-background px-3 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/30"
|
|
value={statusFilter}
|
|
onChange={(e) => setStatusFilter(e.target.value)}
|
|
>
|
|
<option value="all">
|
|
{t("ui.dev.clients.filter.status_all", "모든 상태")}
|
|
</option>
|
|
<option value="active">
|
|
{t("ui.common.status.active", "Active")}
|
|
</option>
|
|
<option value="inactive">
|
|
{t("ui.common.status.inactive", "Inactive")}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="ml-auto text-xs text-muted-foreground"
|
|
onClick={() => {
|
|
setTypeFilter("all");
|
|
setStatusFilter("all");
|
|
}}
|
|
>
|
|
{t("ui.common.reset", "초기화")}
|
|
</Button>
|
|
</div>
|
|
}
|
|
/>
|
|
</CardHeader>
|
|
<CardContent className="flex-1 flex flex-col min-h-0 pt-0">
|
|
<div className={commonTableShellClass}>
|
|
<div className={commonTableViewportClass}>
|
|
<Table className="min-w-[1280px]">
|
|
<TableHeader className={sortableTableHeaderClassName}>
|
|
<TableRow>
|
|
<SortableTableHead
|
|
label={t(
|
|
"ui.dev.clients.table.application",
|
|
"애플리케이션",
|
|
)}
|
|
onSort={requestSort}
|
|
sortConfig={sortConfig}
|
|
sortKey="application"
|
|
/>
|
|
<SortableTableHead
|
|
label={t("ui.dev.clients.table.client_id", "Client ID")}
|
|
onSort={requestSort}
|
|
sortConfig={sortConfig}
|
|
sortKey="id"
|
|
/>
|
|
<SortableTableHead
|
|
label={t("ui.dev.clients.table.type", "유형")}
|
|
onSort={requestSort}
|
|
sortConfig={sortConfig}
|
|
sortKey="type"
|
|
/>
|
|
<SortableTableHead
|
|
label={t("ui.dev.clients.table.status", "상태")}
|
|
onSort={requestSort}
|
|
sortConfig={sortConfig}
|
|
sortKey="status"
|
|
/>
|
|
<TableHead className={sortableTableHeadBaseClassName}>
|
|
{t("ui.dev.clients.table.creator", "생성자")}
|
|
</TableHead>
|
|
<SortableTableHead
|
|
label={t("ui.dev.clients.table.created_at", "생성일")}
|
|
onSort={requestSort}
|
|
sortConfig={sortConfig}
|
|
sortKey="createdAt"
|
|
/>
|
|
<TableHead
|
|
className={`${sortableTableHeadBaseClassName} text-right`}
|
|
>
|
|
{t("ui.dev.clients.table.actions", "액션")}
|
|
</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{!hasFilterResult && (
|
|
<TableRow>
|
|
<TableCell
|
|
colSpan={7}
|
|
className="h-32 text-center text-muted-foreground"
|
|
>
|
|
<div className="space-y-1">
|
|
<p className="font-medium text-foreground">
|
|
{isFilteredOut
|
|
? t(
|
|
"msg.dev.clients.empty_filtered",
|
|
"조건에 맞는 연동 앱이 없습니다.",
|
|
)
|
|
: canCreateClient
|
|
? t(
|
|
"msg.dev.clients.empty_can_create",
|
|
"아직 등록된 연동 앱이 없습니다.",
|
|
)
|
|
: isClientCreatePending
|
|
? t(
|
|
"msg.dev.clients.empty_pending",
|
|
"개발자 권한 신청을 검토 중입니다.",
|
|
)
|
|
: t(
|
|
"msg.dev.clients.empty",
|
|
"조회 가능한 RP가 없습니다.",
|
|
)}
|
|
</p>
|
|
<div className="text-sm space-y-2">
|
|
<p className="text-muted-foreground">
|
|
{isFilteredOut
|
|
? t(
|
|
"msg.dev.clients.empty_filtered_detail",
|
|
"검색어나 필터 조건을 변경해 보세요.",
|
|
)
|
|
: canCreateClient
|
|
? t(
|
|
"msg.dev.clients.empty_can_create_detail",
|
|
"연동 앱 추가 버튼으로 새 RP를 생성하면 이 목록에 표시됩니다.",
|
|
)
|
|
: isClientCreatePending
|
|
? t(
|
|
"msg.dev.clients.empty_pending_detail",
|
|
"super admin이 승인하면 연동 앱을 추가할 수 있습니다.",
|
|
)
|
|
: t(
|
|
"msg.dev.clients.empty_detail",
|
|
"RP 관계가 부여되면 이 목록에 해당 RP가 표시됩니다.",
|
|
)}
|
|
</p>
|
|
{!isFilteredOut && canCreateClient && (
|
|
<button
|
|
type="button"
|
|
className="text-primary font-bold hover:underline"
|
|
onClick={() => navigate("/clients/new")}
|
|
>
|
|
{t("ui.dev.clients.new", "연동 앱 추가")}
|
|
</button>
|
|
)}
|
|
{!isFilteredOut && canRequestClientCreateAccess && (
|
|
<button
|
|
type="button"
|
|
className="text-primary font-bold hover:underline"
|
|
onClick={() => navigate("/developer-requests")}
|
|
>
|
|
{t(
|
|
"ui.dev.welcome.btn_request",
|
|
"개발자 등록 신청하기",
|
|
)}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
{visibleClients.map((client) => (
|
|
<TableRow key={client.id}>
|
|
<TableCell>
|
|
<Link
|
|
to={`/clients/${client.id}`}
|
|
className="flex items-center gap-3 transition-colors hover:text-primary"
|
|
>
|
|
<ClientLogo client={client} />
|
|
<div>
|
|
<p className="font-semibold">
|
|
{client.name ||
|
|
t("ui.dev.clients.untitled", "Untitled")}
|
|
</p>
|
|
{isClientTenantLimited(client) && (
|
|
<p className="text-xs text-muted-foreground">
|
|
<span aria-hidden="true">
|
|
{t(
|
|
"ui.dev.clients.tenant_limited",
|
|
"Tenant-limited",
|
|
)}
|
|
</span>
|
|
</p>
|
|
)}
|
|
</div>
|
|
</Link>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex items-center gap-2">
|
|
<code className="rounded-md bg-secondary/60 px-2 py-1 font-mono text-xs text-muted-foreground">
|
|
{client.id}
|
|
</code>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<Badge
|
|
variant={
|
|
client.type === "private" ||
|
|
isHeadlessLoginClient(client)
|
|
? "success"
|
|
: "muted"
|
|
}
|
|
>
|
|
{isHeadlessLoginClient(client)
|
|
? t(
|
|
"ui.dev.clients.type.private_headless",
|
|
"Server side App (Headless Login)",
|
|
)
|
|
: client.type === "private"
|
|
? t(
|
|
"ui.dev.clients.type.private",
|
|
"Server side App",
|
|
)
|
|
: t("ui.dev.clients.type.pkce", "PKCE")}
|
|
</Badge>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge
|
|
variant={
|
|
client.status === "active" ? "info" : "muted"
|
|
}
|
|
className="px-3 py-1 text-xs uppercase"
|
|
>
|
|
{client.status === "active"
|
|
? t("ui.common.status.active", "Active")
|
|
: t("ui.common.status.inactive", "Inactive")}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell className="text-sm">
|
|
{(() => {
|
|
const creatorId = clientCreatorID(client);
|
|
const creator = creatorId
|
|
? clientCreators[creatorId]
|
|
: undefined;
|
|
const name = creator?.name?.trim();
|
|
const email = creator?.email?.trim();
|
|
|
|
if (!creatorId) {
|
|
return (
|
|
<span className="text-muted-foreground">-</span>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-1">
|
|
<p className="font-medium text-foreground">
|
|
{name || creatorId}
|
|
</p>
|
|
<p className="break-all text-xs text-muted-foreground">
|
|
{email || creatorId}
|
|
</p>
|
|
</div>
|
|
);
|
|
})()}
|
|
</TableCell>
|
|
<TableCell className="text-muted-foreground">
|
|
{client.createdAt
|
|
? new Date(client.createdAt).toLocaleDateString()
|
|
: "-"}
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<div className="flex items-center justify-end gap-2">
|
|
<Button variant="ghost" size="sm" asChild>
|
|
<Link to={`/clients/${client.id}`}>
|
|
{t("ui.common.view", "View")}
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
{canToggleClientList ? (
|
|
<div className="mt-4 flex justify-center">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
aria-label={
|
|
isClientListExpanded
|
|
? t(
|
|
"ui.dev.clients.list.collapse_aria",
|
|
"연동 앱 목록 접기",
|
|
)
|
|
: t("ui.dev.clients.list.more_aria", "연동 앱 목록 더보기")
|
|
}
|
|
onClick={() => setIsClientListExpanded((current) => !current)}
|
|
>
|
|
{isClientListExpanded
|
|
? t("ui.common.collapse", "접기")
|
|
: t("ui.common.load_more", "더보기")}
|
|
</Button>
|
|
</div>
|
|
) : null}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<RequestAccessModal
|
|
isOpen={isRequestModalOpen}
|
|
onClose={() => setIsRequestModalOpen(false)}
|
|
onSuccess={() => {
|
|
refetchRequest();
|
|
setIsRequestModalOpen(false);
|
|
}}
|
|
tenantId={tenantId || ""}
|
|
initialName={profileName}
|
|
initialOrg={organizationName}
|
|
initialEmail={profileEmail}
|
|
initialPhone={profilePhone}
|
|
initialRole={profileRoleLabel}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface RequestAccessModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onSuccess: () => void;
|
|
tenantId: string;
|
|
initialName: string;
|
|
initialOrg: string;
|
|
initialEmail: string;
|
|
initialPhone: string;
|
|
initialRole: string;
|
|
}
|
|
|
|
function RequestAccessModal({
|
|
isOpen,
|
|
onClose,
|
|
onSuccess,
|
|
tenantId,
|
|
initialName,
|
|
initialOrg,
|
|
initialEmail,
|
|
initialPhone,
|
|
initialRole,
|
|
}: RequestAccessModalProps) {
|
|
const [name, setName] = useState(initialName);
|
|
const [organization, setOrganization] = useState(initialOrg);
|
|
const [reason, setReason] = useState("");
|
|
|
|
useEffect(() => {
|
|
if (!isOpen) return;
|
|
setName(initialName);
|
|
setOrganization(initialOrg);
|
|
}, [initialName, initialOrg, isOpen]);
|
|
|
|
const mutation = useMutation({
|
|
mutationFn: requestDeveloperAccess,
|
|
onSuccess: () => {
|
|
onSuccess();
|
|
},
|
|
});
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
mutation.mutate({
|
|
name,
|
|
organization,
|
|
reason,
|
|
tenantId,
|
|
accessPages: ["all"],
|
|
});
|
|
};
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-background/80 backdrop-blur-sm animate-in fade-in duration-200">
|
|
<div className="relative w-full max-w-lg bg-card border border-border shadow-2xl rounded-2xl overflow-hidden animate-in zoom-in-95 duration-200">
|
|
<div className="flex items-center justify-between p-6 border-b border-border/40">
|
|
<div>
|
|
<h2 className="text-xl font-bold tracking-tight">
|
|
{t("ui.dev.request.modal.title", "개발자 등록 신청")}
|
|
</h2>
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
{t(
|
|
"msg.dev.request.modal.desc",
|
|
"신청 사유를 입력해 주세요. 관리자 확인 후 승인됩니다.",
|
|
)}
|
|
</p>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="rounded-full"
|
|
onClick={onClose}
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="p-6 space-y-6">
|
|
<div className="grid gap-4">
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="name">
|
|
{t("ui.dev.request.modal.name", "성함")}
|
|
</Label>
|
|
<Input
|
|
id="name"
|
|
value={name}
|
|
readOnly
|
|
className="focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-input"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="org">
|
|
{t("ui.dev.request.modal.org", "소속")}
|
|
</Label>
|
|
<Input
|
|
id="org"
|
|
value={organization}
|
|
readOnly
|
|
className="focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-input"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="email">
|
|
{t("ui.dev.request.modal.email", "이메일")}
|
|
</Label>
|
|
<Input
|
|
id="email"
|
|
value={initialEmail}
|
|
readOnly
|
|
className="focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-input"
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="phone">
|
|
{t("ui.dev.request.modal.phone", "전화번호")}
|
|
</Label>
|
|
<Input
|
|
id="phone"
|
|
value={initialPhone}
|
|
readOnly
|
|
className="focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-input"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="role">
|
|
{t("ui.dev.request.modal.role", "역할")}
|
|
</Label>
|
|
<Input
|
|
id="role"
|
|
value={initialRole}
|
|
readOnly
|
|
className="focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-input"
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="reason">
|
|
{t("ui.dev.request.modal.reason", "신청 사유")}{" "}
|
|
<span className="text-destructive">*</span>
|
|
</Label>
|
|
<Textarea
|
|
id="reason"
|
|
value={reason}
|
|
onChange={(e) => setReason(e.target.value)}
|
|
placeholder={t(
|
|
"ui.dev.request.modal.reason_placeholder",
|
|
"예: 자체 서비스 연동 및 테스트용 OIDC 클라이언트 생성이 필요합니다.",
|
|
)}
|
|
className="min-h-[120px] resize-none border-primary/50 bg-background focus-visible:ring-primary/40"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-end gap-3 pt-2">
|
|
<Button type="button" variant="outline" onClick={onClose}>
|
|
{t("ui.common.cancel", "취소")}
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
disabled={mutation.isPending}
|
|
className="px-8 font-bold"
|
|
>
|
|
{mutation.isPending
|
|
? t("ui.common.submitting", "제출 중...")
|
|
: t("ui.common.submit", "신청하기")}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ClientsPage;
|