forked from baron/baron-sso
앱 유형 명칭 Private/PKCE 반영 및 UI 로직 업데이트
This commit is contained in:
@@ -47,7 +47,7 @@ function ClientGeneralPage() {
|
|||||||
const [name, setName] = useState("");
|
const [name, setName] = useState("");
|
||||||
const [description, setDescription] = useState("");
|
const [description, setDescription] = useState("");
|
||||||
const [logoUrl, setLogoUrl] = useState("");
|
const [logoUrl, setLogoUrl] = useState("");
|
||||||
const [clientType, setClientType] = useState<ClientType>("confidential");
|
const [clientType, setClientType] = useState<ClientType>("private");
|
||||||
const [status, setStatus] = useState<ClientStatus>("active");
|
const [status, setStatus] = useState<ClientStatus>("active");
|
||||||
const [redirectUris, setRedirectUris] = useState("");
|
const [redirectUris, setRedirectUris] = useState("");
|
||||||
const [scopes, setScopes] = useState<ScopeItem[]>(() => [
|
const [scopes, setScopes] = useState<ScopeItem[]>(() => [
|
||||||
@@ -490,7 +490,7 @@ function ClientGeneralPage() {
|
|||||||
<label
|
<label
|
||||||
className={cn(
|
className={cn(
|
||||||
"relative flex cursor-pointer flex-col gap-1 rounded-xl border-2 p-4 transition",
|
"relative flex cursor-pointer flex-col gap-1 rounded-xl border-2 p-4 transition",
|
||||||
clientType === "confidential"
|
clientType === "private"
|
||||||
? "border-primary bg-primary/5"
|
? "border-primary bg-primary/5"
|
||||||
: "border-border bg-card hover:border-muted-foreground/40",
|
: "border-border bg-card hover:border-muted-foreground/40",
|
||||||
)}
|
)}
|
||||||
@@ -499,31 +499,31 @@ function ClientGeneralPage() {
|
|||||||
className="sr-only"
|
className="sr-only"
|
||||||
type="radio"
|
type="radio"
|
||||||
name="client-type"
|
name="client-type"
|
||||||
checked={clientType === "confidential"}
|
checked={clientType === "private"}
|
||||||
onChange={() => setClientType("confidential")}
|
onChange={() => setClientType("private")}
|
||||||
/>
|
/>
|
||||||
<span className="flex items-center gap-2 text-sm font-bold uppercase text-foreground">
|
<span className="flex items-center gap-2 text-sm font-bold uppercase text-foreground">
|
||||||
<Shield className="h-4 w-4 text-primary" />
|
<Shield className="h-4 w-4 text-primary" />
|
||||||
{t(
|
{t(
|
||||||
"ui.dev.clients.general.security.confidential",
|
"ui.dev.clients.general.security.private",
|
||||||
"Confidential",
|
"Private",
|
||||||
)}
|
)}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-xs text-muted-foreground">
|
<span className="text-xs text-muted-foreground">
|
||||||
{t(
|
{t(
|
||||||
"msg.dev.clients.general.security.confidential_help",
|
"msg.dev.clients.general.security.private_help",
|
||||||
"서버 사이드 앱(예: Node.js, Java)처럼 비밀키를 안전하게 보관 가능한 경우.",
|
"서버 사이드 앱(예: Node.js, Java)처럼 비밀키를 안전하게 보관 가능한 경우.",
|
||||||
)}
|
)}
|
||||||
</span>
|
</span>
|
||||||
<span className="absolute right-4 top-4 text-primary">
|
<span className="absolute right-4 top-4 text-primary">
|
||||||
{clientType === "confidential" ? "✓" : ""}
|
{clientType === "private" ? "✓" : ""}
|
||||||
</span>
|
</span>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<label
|
<label
|
||||||
className={cn(
|
className={cn(
|
||||||
"relative flex cursor-pointer flex-col gap-1 rounded-xl border-2 p-4 transition",
|
"relative flex cursor-pointer flex-col gap-1 rounded-xl border-2 p-4 transition",
|
||||||
clientType === "public"
|
clientType === "pkce"
|
||||||
? "border-primary bg-primary/5"
|
? "border-primary bg-primary/5"
|
||||||
: "border-border bg-card hover:border-muted-foreground/40",
|
: "border-border bg-card hover:border-muted-foreground/40",
|
||||||
)}
|
)}
|
||||||
@@ -532,21 +532,21 @@ function ClientGeneralPage() {
|
|||||||
className="sr-only"
|
className="sr-only"
|
||||||
type="radio"
|
type="radio"
|
||||||
name="client-type"
|
name="client-type"
|
||||||
checked={clientType === "public"}
|
checked={clientType === "pkce"}
|
||||||
onChange={() => setClientType("public")}
|
onChange={() => setClientType("pkce")}
|
||||||
/>
|
/>
|
||||||
<span className="flex items-center gap-2 text-sm font-bold uppercase text-foreground">
|
<span className="flex items-center gap-2 text-sm font-bold uppercase text-foreground">
|
||||||
<Sparkles className="h-4 w-4" />
|
<Sparkles className="h-4 w-4" />
|
||||||
{t("ui.dev.clients.general.security.public", "Public")}
|
{t("ui.dev.clients.general.security.pkce", "PKCE")}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-xs text-muted-foreground">
|
<span className="text-xs text-muted-foreground">
|
||||||
{t(
|
{t(
|
||||||
"msg.dev.clients.general.security.public_help",
|
"msg.dev.clients.general.security.pkce_help",
|
||||||
"SPA/모바일 앱처럼 비밀키 보관이 어려운 경우. PKCE를 기본 사용합니다.",
|
"SPA/모바일 앱처럼 비밀키 보관이 어려운 경우. PKCE를 기본 사용합니다.",
|
||||||
)}
|
)}
|
||||||
</span>
|
</span>
|
||||||
<span className="absolute right-4 top-4 text-primary">
|
<span className="absolute right-4 top-4 text-primary">
|
||||||
{clientType === "public" ? "✓" : ""}
|
{clientType === "pkce" ? "✓" : ""}
|
||||||
</span>
|
</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -266,7 +266,7 @@ function ClientsPage() {
|
|||||||
<TableCell>
|
<TableCell>
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
|
<div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
|
||||||
{client.type === "confidential" ? (
|
{client.type === "private" ? (
|
||||||
<ServerCog className="h-4 w-4" />
|
<ServerCog className="h-4 w-4" />
|
||||||
) : (
|
) : (
|
||||||
<ShieldHalf className="h-4 w-4" />
|
<ShieldHalf className="h-4 w-4" />
|
||||||
@@ -310,15 +310,15 @@ function ClientsPage() {
|
|||||||
<TableCell>
|
<TableCell>
|
||||||
<Badge
|
<Badge
|
||||||
variant={
|
variant={
|
||||||
client.type === "confidential" ? "success" : "muted"
|
client.type === "private" ? "success" : "muted"
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{client.type === "confidential"
|
{client.type === "private"
|
||||||
? t(
|
? t(
|
||||||
"ui.dev.clients.type.confidential",
|
"ui.dev.clients.type.private",
|
||||||
"기밀(Confidential)",
|
"Private",
|
||||||
)
|
)
|
||||||
: t("ui.dev.clients.type.public", "Public")}
|
: t("ui.dev.clients.type.pkce", "PKCE")}
|
||||||
</Badge>
|
</Badge>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell>
|
<TableCell>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import apiClient from "./apiClient";
|
import apiClient from "./apiClient";
|
||||||
|
|
||||||
export type ClientStatus = "active" | "inactive";
|
export type ClientStatus = "active" | "inactive";
|
||||||
export type ClientType = "confidential" | "public";
|
export type ClientType = "private" | "pkce";
|
||||||
|
|
||||||
export type ClientSummary = {
|
export type ClientSummary = {
|
||||||
id: string;
|
id: string;
|
||||||
|
|||||||
Reference in New Issue
Block a user