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:
Dotta
2026-03-06 14:36:02 -06:00
parent 5f2dfcb94e
commit 67247b5d6a

View File

@@ -1,3 +1,5 @@
import { useState } from "react";
import { Eye, EyeOff } from "lucide-react";
import type { AdapterConfigFieldsProps } from "../types";
import {
Field,
@@ -8,6 +10,41 @@ import {
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";
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({
isCreate,
values,
@@ -120,27 +157,19 @@ export function OpenClawConfigFields({
</Field>
)}
<Field label="Webhook auth header (optional)">
<DraftInput
value={
eff("adapterConfig", "webhookAuthHeader", String(config.webhookAuthHeader ?? ""))
}
onCommit={(v) => mark("adapterConfig", "webhookAuthHeader", v || undefined)}
immediate
className={inputClass}
placeholder="Bearer <token>"
/>
</Field>
<SecretField
label="Webhook auth header (optional)"
value={eff("adapterConfig", "webhookAuthHeader", String(config.webhookAuthHeader ?? ""))}
onCommit={(v) => mark("adapterConfig", "webhookAuthHeader", v || undefined)}
placeholder="Bearer <token>"
/>
<Field label="Gateway auth token (x-openclaw-auth)">
<DraftInput
value={effectiveGatewayAuthHeader}
onCommit={commitGatewayAuthHeader}
immediate
className={inputClass}
placeholder="OpenClaw gateway token"
/>
</Field>
<SecretField
label="Gateway auth token (x-openclaw-auth)"
value={effectiveGatewayAuthHeader}
onCommit={commitGatewayAuthHeader}
placeholder="OpenClaw gateway token"
/>
</>
)}
</>