From 67247b5d6a72fccefd70d40bb5c078d4d8bb85ac Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Fri, 6 Mar 2026 14:36:02 -0600
Subject: [PATCH] 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>
---
 ui/src/adapters/openclaw/config-fields.tsx | 69 +++++++++++++++-------
 1 file changed, 49 insertions(+), 20 deletions(-)

diff --git a/ui/src/adapters/openclaw/config-fields.tsx b/ui/src/adapters/openclaw/config-fields.tsx
index 5200256a..a50892eb 100644
--- a/ui/src/adapters/openclaw/config-fields.tsx
+++ b/ui/src/adapters/openclaw/config-fields.tsx
@@ -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"
+          />
         </>
       )}
     </>