feat(ui): hide sensitive OpenClaw fields behind password toggle with eye icon
Webhook auth header and gateway auth token fields now render as password inputs by default, with an eye/eye-off toggle icon on the left to reveal the value. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,3 +1,5 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { Eye, EyeOff } from "lucide-react";
|
||||||
import type { AdapterConfigFieldsProps } from "../types";
|
import type { AdapterConfigFieldsProps } from "../types";
|
||||||
import {
|
import {
|
||||||
Field,
|
Field,
|
||||||
@@ -8,6 +10,41 @@ import {
|
|||||||
const inputClass =
|
const inputClass =
|
||||||
"w-full rounded-md border border-border px-2.5 py-1.5 bg-transparent outline-none text-sm font-mono placeholder:text-muted-foreground/40";
|
"w-full rounded-md border border-border px-2.5 py-1.5 bg-transparent outline-none text-sm font-mono placeholder:text-muted-foreground/40";
|
||||||
|
|
||||||
|
function SecretField({
|
||||||
|
label,
|
||||||
|
value,
|
||||||
|
onCommit,
|
||||||
|
placeholder,
|
||||||
|
}: {
|
||||||
|
label: string;
|
||||||
|
value: string;
|
||||||
|
onCommit: (v: string) => void;
|
||||||
|
placeholder?: string;
|
||||||
|
}) {
|
||||||
|
const [visible, setVisible] = useState(false);
|
||||||
|
return (
|
||||||
|
<Field label={label}>
|
||||||
|
<div className="relative">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setVisible((v) => !v)}
|
||||||
|
className="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground/50 hover:text-muted-foreground transition-colors"
|
||||||
|
>
|
||||||
|
{visible ? <Eye className="h-3.5 w-3.5" /> : <EyeOff className="h-3.5 w-3.5" />}
|
||||||
|
</button>
|
||||||
|
<DraftInput
|
||||||
|
value={value}
|
||||||
|
onCommit={onCommit}
|
||||||
|
immediate
|
||||||
|
type={visible ? "text" : "password"}
|
||||||
|
className={inputClass + " pl-8"}
|
||||||
|
placeholder={placeholder}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Field>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export function OpenClawConfigFields({
|
export function OpenClawConfigFields({
|
||||||
isCreate,
|
isCreate,
|
||||||
values,
|
values,
|
||||||
@@ -120,27 +157,19 @@ export function OpenClawConfigFields({
|
|||||||
</Field>
|
</Field>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<Field label="Webhook auth header (optional)">
|
<SecretField
|
||||||
<DraftInput
|
label="Webhook auth header (optional)"
|
||||||
value={
|
value={eff("adapterConfig", "webhookAuthHeader", String(config.webhookAuthHeader ?? ""))}
|
||||||
eff("adapterConfig", "webhookAuthHeader", String(config.webhookAuthHeader ?? ""))
|
onCommit={(v) => mark("adapterConfig", "webhookAuthHeader", v || undefined)}
|
||||||
}
|
placeholder="Bearer <token>"
|
||||||
onCommit={(v) => mark("adapterConfig", "webhookAuthHeader", v || undefined)}
|
/>
|
||||||
immediate
|
|
||||||
className={inputClass}
|
|
||||||
placeholder="Bearer <token>"
|
|
||||||
/>
|
|
||||||
</Field>
|
|
||||||
|
|
||||||
<Field label="Gateway auth token (x-openclaw-auth)">
|
<SecretField
|
||||||
<DraftInput
|
label="Gateway auth token (x-openclaw-auth)"
|
||||||
value={effectiveGatewayAuthHeader}
|
value={effectiveGatewayAuthHeader}
|
||||||
onCommit={commitGatewayAuthHeader}
|
onCommit={commitGatewayAuthHeader}
|
||||||
immediate
|
placeholder="OpenClaw gateway token"
|
||||||
className={inputClass}
|
/>
|
||||||
placeholder="OpenClaw gateway token"
|
|
||||||
/>
|
|
||||||
</Field>
|
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
|
|||||||
Reference in New Issue
Block a user