kevin/baron-sso
1
0
Fork 0
forked from baron/baron-sso
Code Pull Requests Activity

i18n refresh and frontend fixes

Browse Source
This commit is contained in:
Lectom C Han
2026-02-10 19:15:51 +09:00
parent 390a349de6
commit 05cdc7d8ae
44 changed files with 8603 additions and 1760 deletions
Download Patch File Download Diff File Expand all files Collapse all files

224
devfront/src/features/clients/ClientsPage.tsx
View File

@@ -1,10 +1,7 @@
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import type { AxiosError } from "axios";
import {
Activity,
BookOpenText,
Copy,
Laptop,
Plus,
Search,
ServerCog,
@@ -25,6 +22,7 @@ import {
CardHeader,
CardTitle,
} from "../../components/ui/card";
import { CopyButton } from "../../components/ui/copy-button";
import { Input } from "../../components/ui/input";
import { Separator } from "../../components/ui/separator";
import { Switch } from "../../components/ui/switch";
@@ -36,14 +34,14 @@ import {
TableHeader,
TableRow,
} from "../../components/ui/table";
import { toast } from "../../components/ui/use-toast";
import {
deleteClient,
fetchClients,
updateClientStatus,
} from "../../lib/devApi";
import { t } from "../../lib/i18n";
import { cn } from "../../lib/utils";
import { CopyButton } from "../../components/ui/copy-button";
import { toast } from "../../components/ui/use-toast";
function ClientsPage() {
const navigate = useNavigate();
@@ -56,15 +54,29 @@ function ClientsPage() {
mutationFn: (payload: { id: string; status: "active" | "inactive" }) =>
updateClientStatus(payload.id, payload.status),
onSuccess: (_, variables) => {
const statusText = variables.status === "active" ? "활성화" : "비활성화";
toast(`클라이언트가 ${statusText}되었습니다.`);
const statusText =
variables.status === "active"
? t("ui.common.status.active", "활성화")
: t("ui.common.status.inactive", "비활성화");
toast(
t(
"msg.dev.clients.status_updated",
"클라이언트가 {{status}}되었습니다.",
{
status: statusText,
},
),
);
queryClient.invalidateQueries({ queryKey: ["clients"] });
},
onError: (error: AxiosError<{ error?: string }>) => {
const errMsg =
error.response?.data?.error ??
error.message ??
"Failed to update client status";
t(
"msg.dev.clients.status_update_error",
"Failed to update client status",
);
toast(errMsg, "error");
},
});
@@ -76,29 +88,49 @@ function ClientsPage() {
const clients = data?.items || [];
const totalClients = clients.length;
// TODO: Add real stats for active sessions and auth failures
const stats = [
type StatTone = "up" | "down" | "stable";
type StatItem = {
labelKey: string;
labelFallback: string;
value: string;
deltaKey: string;
deltaFallback: string;
tone: StatTone;
};
const stats: StatItem[] = [
{
label: "총 클라이언트",
labelKey: "ui.dev.clients.stats.total",
labelFallback: "총 클라이언트",
value: totalClients.toString(),
delta: "Realtime",
deltaKey: "ui.dev.clients.stats.realtime",
deltaFallback: "Realtime",
tone: "up" as const,
},
{
label: "활성 세션",
labelKey: "ui.dev.clients.stats.active_sessions",
labelFallback: "활성 세션",
value: "-",
delta: "Not impl",
deltaKey: "ui.dev.clients.stats.not_impl",
deltaFallback: "Not impl",
tone: "stable" as const,
},
{
label: "인증 실패 (24h)",
labelKey: "ui.dev.clients.stats.auth_failures",
labelFallback: "인증 실패 (24h)",
value: "0",
delta: "Stable",
deltaKey: "ui.dev.clients.stats.stable",
deltaFallback: "Stable",
tone: "stable" as const,
},
];
if (isLoading) {
return <div className="p-8 text-center">Loading clients...</div>;
return (
<div className="p-8 text-center">
{t("msg.dev.clients.loading", "Loading clients...")}
</div>
);
}
if (error) {
@@ -107,7 +139,9 @@ function ClientsPage() {
(error as Error).message;
return (
<div className="p-8 text-center text-red-500">
Error loading clients: {errMsg}
{t("msg.dev.clients.load_error", "Error loading clients: {{error}}", {
error: errMsg,
})}
</div>
);
}
@@ -119,14 +153,16 @@ function ClientsPage() {
<div className="flex items-center justify-between">
<div>
<p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
RP registry
{t("ui.dev.clients.registry.title", "RP registry")}
</p>
<CardTitle className="text-3xl font-black tracking-tight">
Relying Parties
{t("ui.dev.clients.registry.subtitle", "Relying Parties")}
</CardTitle>
<CardDescription>
OIDC 클라이언트, 인증 방식, 리다이렉트 URI, 비밀키 재발행을 감사
로그와 함께 관리합니다.
{t(
"msg.dev.clients.registry.description",
"OIDC 클라이언트, 인증 방식, 리다이렉트 URI, 비밀키 재발행을 감사 로그와 함께 관리합니다.",
)}
</CardDescription>
</div>
<div className="hidden items-center gap-2 md:flex">
@@ -135,7 +171,8 @@ function ClientsPage() {
className="shadow-lg shadow-primary/30"
onClick={() => navigate("/clients/new")}
>
<Plus className="h-4 w-4" />새 클라이언트
<Plus className="h-4 w-4" />
{t("ui.dev.clients.new", "새 클라이언트")}
</Button>
</div>
</div>
@@ -144,21 +181,30 @@ function ClientsPage() {
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Input
className="pl-10"
placeholder="클라이언트 이름/ID로 검색..."
placeholder={t(
"ui.dev.clients.search_placeholder",
"클라이언트 이름/ID로 검색...",
)}
/>
</div>
<div className="flex items-center justify-end gap-2 md:justify-start">
<Badge variant="muted">테넌트: 선택됨</Badge>
<Badge variant="success">관리자 세션</Badge>
<Badge variant="muted">
{t("ui.dev.clients.badge.tenant_selected", "테넌트: 선택됨")}
</Badge>
<Badge variant="success">
{t("ui.dev.clients.badge.admin_session", "관리자 세션")}
</Badge>
</div>
</div>
</CardHeader>
<CardContent className="pt-0">
<div className="grid gap-4 md:grid-cols-3">
{stats.map((item) => (
<Card key={item.label} className="border border-border/60">
<Card key={item.labelKey} className="border border-border/60">
<CardHeader className="pb-2">
<CardDescription>{item.label}</CardDescription>
<CardDescription>
{t(item.labelKey, item.labelFallback)}
</CardDescription>
<div className="mt-1 flex items-baseline gap-2">
<span className="text-3xl font-bold">{item.value}</span>
<Badge
@@ -176,7 +222,7 @@ function ClientsPage() {
item.tone === "stable" && "bg-muted/40 text-foreground",
)}
>
{item.delta}
{t(item.deltaKey, item.deltaFallback)}
</Badge>
</div>
</CardHeader>
@@ -190,11 +236,12 @@ function ClientsPage() {
<CardHeader className="pb-0">
<div className="flex items-center justify-between">
<CardTitle className="text-xl font-semibold">
클라이언트 목록
{t("ui.dev.clients.list.title", "클라이언트 목록")}
</CardTitle>
<div className="flex items-center gap-2 md:hidden">
<Button size="sm" onClick={() => navigate("/clients/new")}>
<Plus className="h-4 w-4" />새 클라이언트
<Plus className="h-4 w-4" />
{t("ui.dev.clients.new", "새 클라이언트")}
</Button>
</div>
</div>
@@ -203,12 +250,22 @@ function ClientsPage() {
<Table>
<TableHeader>
<TableRow>
<TableHead>애플리케이션</TableHead>
<TableHead>Client ID</TableHead>
<TableHead>유형</TableHead>
<TableHead>상태</TableHead>
<TableHead>생성일</TableHead>
<TableHead className="text-right">액션</TableHead>
<TableHead>
{t("ui.dev.clients.table.application", "애플리케이션")}
</TableHead>
<TableHead>
{t("ui.dev.clients.table.client_id", "Client ID")}
</TableHead>
<TableHead>{t("ui.dev.clients.table.type", "유형")}</TableHead>
<TableHead>
{t("ui.dev.clients.table.status", "상태")}
</TableHead>
<TableHead>
{t("ui.dev.clients.table.created_at", "생성일")}
</TableHead>
<TableHead className="text-right">
{t("ui.dev.clients.table.actions", "액션")}
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@@ -225,10 +282,11 @@ function ClientsPage() {
</div>
<div>
<p className="font-semibold">
{client.name || "Untitled"}
{client.name ||
t("ui.dev.clients.untitled", "Untitled")}
</p>
<p className="text-xs text-muted-foreground">
Tenant-scoped
{t("ui.dev.clients.tenant_scoped", "Tenant-scoped")}
</p>
</div>
</div>
@@ -242,8 +300,18 @@ function ClientsPage() {
value={client.id}
variant="ghost"
className="h-8 w-8 text-muted-foreground hover:text-primary"
aria-label="Copy client id"
onCopy={() => toast("클라이언트 ID가 복사되었습니다.")}
aria-label={t(
"ui.dev.clients.copy_client_id",
"Copy client id",
)}
onCopy={() =>
toast(
t(
"msg.dev.clients.copy_client_id",
"클라이언트 ID가 복사되었습니다.",
),
)
}
/>
</div>
</TableCell>
@@ -254,8 +322,11 @@ function ClientsPage() {
}
>
{client.type === "confidential"
? "기밀(Confidential)"
: "Public"}
? t(
"ui.dev.clients.type.confidential",
"기밀(Confidential)",
)
: t("ui.dev.clients.type.public", "Public")}
</Badge>
</TableCell>
<TableCell>
@@ -281,7 +352,9 @@ function ClientsPage() {
: "text-muted-foreground",
)}
>
{client.status === "active" ? "활성" : "비활성"}
{client.status === "active"
? t("ui.common.status.active", "활성")
: t("ui.common.status.inactive", "비활성")}
</span>
</div>
</TableCell>
@@ -293,7 +366,9 @@ function ClientsPage() {
<TableCell className="text-right">
<div className="flex items-center justify-end gap-2">
<Button variant="ghost" size="sm" asChild>
<Link to={`/clients/${client.id}`}>Edit</Link>
<Link to={`/clients/${client.id}`}>
{t("ui.common.edit", "Edit")}
</Link>
</Button>
<Button
variant="ghost"
@@ -301,7 +376,7 @@ function ClientsPage() {
className="text-muted-foreground hover:text-destructive"
onClick={() => deleteMutation.mutate(client.id)}
>
Delete
{t("ui.common.delete", "Delete")}
</Button>
</div>
</TableCell>
@@ -311,14 +386,18 @@ function ClientsPage() {
</Table>
<div className="mt-4 flex items-center justify-between rounded-xl border border-border/60 bg-secondary/60 px-4 py-3 text-sm text-muted-foreground">
<span>
Showing {clients.length} of {totalClients} clients
{t(
"msg.dev.clients.showing",
"Showing {{shown}} of {{total}} clients",
{ shown: clients.length, total: totalClients },
)}
</span>
<div className="flex gap-2">
<Button variant="outline" size="sm" disabled>
Previous
{t("ui.common.previous", "Previous")}
</Button>
<Button variant="outline" size="sm" disabled>
Next
{t("ui.common.next", "Next")}
</Button>
</div>
</div>
@@ -329,11 +408,16 @@ function ClientsPage() {
<Card className="glass-panel">
<CardHeader className="pb-2">
<CardTitle className="text-lg font-bold">
Need help with OIDC configuration?
{t(
"ui.dev.clients.help.title",
"Need help with OIDC configuration?",
)}
</CardTitle>
<CardDescription>
Developer guides for Confidential/Public clients, redirect URIs,
and auth methods.
{t(
"msg.dev.clients.help.subtitle",
"Developer guides for Confidential/Public clients, redirect URIs, and auth methods.",
)}
</CardDescription>
</CardHeader>
<CardContent className="flex items-center justify-between">
@@ -342,40 +426,56 @@ function ClientsPage() {
<BookOpenText className="h-6 w-6" />
</div>
<div>
<p className="font-semibold">Docs &amp; Examples</p>
<p className="font-semibold">
{t("ui.dev.clients.help.docs_title", "Docs & Examples")}
</p>
<p className="text-sm text-muted-foreground">
Includes PKCE, client_secret_basic, redirect URI validation
tips.
{t(
"msg.dev.clients.help.docs_body",
"Includes PKCE, client_secret_basic, redirect URI validation tips.",
)}
</p>
</div>
</div>
<Button variant="secondary">View guides</Button>
<Button variant="secondary">
{t("ui.dev.clients.help.view_guides", "View guides")}
</Button>
</CardContent>
</Card>
<Card className="glass-panel">
<CardHeader className="pb-2">
<CardTitle className="text-lg font-semibold">Owner</CardTitle>
<CardDescription>Tenant admin on-call</CardDescription>
<CardTitle className="text-lg font-semibold">
{t("ui.dev.clients.owner.title", "Owner")}
</CardTitle>
<CardDescription>
{t("ui.dev.clients.owner.subtitle", "Tenant admin on-call")}
</CardDescription>
</CardHeader>
<CardContent className="flex items-center justify-between">
<div className="flex items-center gap-3">
<Avatar>
<AvatarImage
src="https://gitea.hmac.kr/avatars/11ed71f61227be4a9ab6c61885371d92304a4c36a5f71036890625c55daa8c41?size=512"
alt="ops user"
alt={t("ui.dev.clients.owner.avatar_alt", "ops user")}
/>
<AvatarFallback>AR</AvatarFallback>
</Avatar>
<div>
<p className="font-semibold">AI Admin Bot</p>
<p className="text-xs text-muted-foreground">admin@brsw.kr</p>
<p className="font-semibold">
{t("ui.dev.clients.owner.name", "AI Admin Bot")}
</p>
<p className="text-xs text-muted-foreground">
{t("ui.dev.clients.owner.email", "admin@brsw.kr")}
</p>
</div>
</div>
<Separator className="mx-4 hidden h-10 w-px md:block" />
<div className="hidden flex-col items-end text-sm text-muted-foreground md:flex">
<span>Role: Tenant Admin</span>
<span>Scope: TENANT-12</span>
<span>
{t("ui.dev.clients.owner.role", "Role: Tenant Admin")}
</span>
<span>{t("ui.dev.clients.owner.scope", "Scope: TENANT-12")}</span>
</div>
</CardContent>
</Card>