From 3ef3c684b38ecba1e4b76564f39b7fbc28e9c187 Mon Sep 17 00:00:00 2001
From: gwdgithubnom <gwd163nom@163.com>
Date: Wed, 27 May 2026 22:46:00 +0800
Subject: [PATCH] fix(ui): add show/hide toggle for API key inputs and populate
 key on edit

Add eye toggle button for all API key input fields so users can verify their keys before saving.

Changes:

- BaseProviderForm: wrap single API key field (Gemini/Codex/Claude/Vertex) with passwordField + toggle button

- BaseProviderForm: wrap per-entry API key fields (OpenAI-compatible) with passwordField + toggle button

- BaseProviderForm: extract applyRawApiKey helper to populate apiKey from resource.raw in edit mode

- BaseProviderForm: sync initialFormSignature with applyRawApiKey to prevent false isDirty

- sharedForm.module.scss: add .passwordField, .passwordInput, .passwordToggle styles

- i18n: add showApiKey/hideApiKey keys to en, zh-CN, zh-TW, ru locale files

- accessibility: add aria-label and title attributes on both toggle buttons
---
 .../sheets/forms/BaseProviderForm.tsx         | 153 ++++++++++++++----
 .../sheets/forms/sharedForm.module.scss       |  58 +++++++
 src/i18n/locales/en.json                      |   2 +
 src/i18n/locales/ru.json                      |   2 +
 src/i18n/locales/zh-CN.json                   |   2 +
 src/i18n/locales/zh-TW.json                   |   2 +
 6 files changed, 186 insertions(+), 33 deletions(-)

diff --git a/src/features/providers/sheets/forms/BaseProviderForm.tsx b/src/features/providers/sheets/forms/BaseProviderForm.tsx
index 03dd197..24fa4ea 100644
--- a/src/features/providers/sheets/forms/BaseProviderForm.tsx
+++ b/src/features/providers/sheets/forms/BaseProviderForm.tsx
@@ -4,6 +4,8 @@ import {
   IconAlertTriangle,
   IconCheckCircle2,
   IconDownload,
+  IconEye,
+  IconEyeOff,
   IconLoader2,
   IconPlus,
   IconX,
@@ -65,6 +67,19 @@ const headersObjectToText = (headers?: Record<string, string>): string =>
 const stripDisableAllRule = (list?: string[]): string[] =>
   (list ?? []).filter((s) => s.trim() !== '*');
 
+/** Populate apiKey from resource.raw when editing a non-OpenAI provider. */
+const applyRawApiKey = (
+  brand: Exclude<ProviderBrand, 'ampcode'>,
+  resource: ProviderResource | null,
+  mode: 'create' | 'edit',
+  form: ProviderEntryFormInput
+): void => {
+  if (mode === 'edit' && resource && brand !== 'openaiCompatibility') {
+    const rawKey = (resource.raw as { apiKey?: string } | undefined)?.apiKey ?? '';
+    if (rawKey) form.apiKey = rawKey;
+  }
+};
+
 function buildInitialForm(
   brand: Exclude<ProviderBrand, 'ampcode'>,
   resource: ProviderResource | null,
@@ -204,13 +219,37 @@ export function BaseProviderForm({
   const { t } = useTranslation();
   const descriptor = PROVIDER_DESCRIPTORS[brand];
   const fid = useId();
-  const [form, setForm] = useState<ProviderEntryFormInput>(() =>
-    buildInitialForm(brand, resource, mode)
-  );
-  const [initialFormSignature] = useState<string>(() =>
-    JSON.stringify(buildInitialForm(brand, resource, mode))
-  );
+  const [form, setForm] = useState<ProviderEntryFormInput>(() => {
+    const initial = buildInitialForm(brand, resource, mode);
+    applyRawApiKey(brand, resource, mode, initial);
+    return initial;
+  });
+  const [initialFormSignature] = useState<string>(() => {
+    const initial = buildInitialForm(brand, resource, mode);
+    applyRawApiKey(brand, resource, mode, initial);
+    return JSON.stringify(initial);
+  });
   const [error, setError] = useState<string | null>(null);
+  const [showPasswords, setShowPasswords] = useState<Set<number>>(new Set());
+  const [showSingleApiKey, setShowSingleApiKey] = useState(false);
+
+  // Reset password visibility when the sheet closes or resource changes
+  useEffect(() => {
+    setShowPasswords(new Set());
+    setShowSingleApiKey(false);
+  }, [resource?.id, mode]);
+
+  const togglePasswordVisibility = (idx: number) => {
+    setShowPasswords((prev) => {
+      const next = new Set(prev);
+      if (next.has(idx)) {
+        next.delete(idx);
+      } else {
+        next.add(idx);
+      }
+      return next;
+    });
+  };
 
   const isDirty = useMemo(
     () => JSON.stringify(form) !== initialFormSignature,
@@ -454,19 +493,43 @@ export function BaseProviderForm({
             <label className={styles.label} htmlFor={`${fid}-apiKey`}>
               {t('providersPage.form.apiKey')}
             </label>
-            <input
-              id={`${fid}-apiKey`}
-              className={styles.input}
-              type="password"
-              value={form.apiKey}
-              onChange={(e) => updateField('apiKey', e.target.value)}
-              placeholder={
-                mode === 'edit'
-                  ? t('providersPage.form.apiKeyEditPlaceholder')
-                  : t('providersPage.form.apiKeyCreatePlaceholder')
-              }
-              disabled={mutating}
-            />
+            <div className={styles.passwordField}>
+              <input
+                id={`${fid}-apiKey`}
+                className={styles.passwordInput}
+                type={showSingleApiKey ? 'text' : 'password'}
+                value={form.apiKey}
+                onChange={(e) => updateField('apiKey', e.target.value)}
+                placeholder={
+                  mode === 'edit'
+                    ? t('providersPage.form.apiKeyEditPlaceholder')
+                    : t('providersPage.form.apiKeyCreatePlaceholder')
+                }
+                disabled={mutating}
+              />
+              <button
+                type="button"
+                className={styles.passwordToggle}
+                onClick={() => setShowSingleApiKey((v) => !v)}
+                disabled={mutating}
+                aria-label={
+                  showSingleApiKey
+                    ? t('providersPage.form.hideApiKey')
+                    : t('providersPage.form.showApiKey')
+                }
+                title={
+                  showSingleApiKey
+                    ? t('providersPage.form.hideApiKey')
+                    : t('providersPage.form.showApiKey')
+                }
+              >
+                {showSingleApiKey ? (
+                  <IconEyeOff size={16} />
+                ) : (
+                  <IconEye size={16} />
+                )}
+              </button>
+            </div>
           </div>
         ) : null}
 
@@ -695,21 +758,45 @@ export function BaseProviderForm({
                     <label className={styles.label}>
                       {t('providersPage.form.apiKey')}
                     </label>
-                    <input
-                      className={styles.input}
-                      type="password"
-                      value={entry.apiKey}
-                      onChange={(e) =>
-                        updateField(
-                          'apiKeyEntries',
-                          apiKeyEntries.map((it, i) =>
-                            i === idx ? { ...it, apiKey: e.target.value } : it
+                    <div className={styles.passwordField}>
+                      <input
+                        className={styles.passwordInput}
+                        type={showPasswords.has(idx) ? 'text' : 'password'}
+                        value={entry.apiKey}
+                        onChange={(e) =>
+                          updateField(
+                            'apiKeyEntries',
+                            apiKeyEntries.map((it, i) =>
+                              i === idx ? { ...it, apiKey: e.target.value } : it
+                            )
                           )
-                        )
-                      }
-                      disabled={mutating}
-                      placeholder={t('providersPage.form.apiKeyCreatePlaceholder')}
-                    />
+                        }
+                        disabled={mutating}
+                        placeholder={t('providersPage.form.apiKeyCreatePlaceholder')}
+                      />
+                      <button
+                        type="button"
+                        className={styles.passwordToggle}
+                        onClick={() => togglePasswordVisibility(idx)}
+                        disabled={mutating}
+                        aria-label={
+                          showPasswords.has(idx)
+                            ? t('providersPage.form.hideApiKey')
+                            : t('providersPage.form.showApiKey')
+                        }
+                        title={
+                          showPasswords.has(idx)
+                            ? t('providersPage.form.hideApiKey')
+                            : t('providersPage.form.showApiKey')
+                        }
+                      >
+                        {showPasswords.has(idx) ? (
+                          <IconEyeOff size={16} />
+                        ) : (
+                          <IconEye size={16} />
+                        )}
+                      </button>
+                    </div>
                   </div>
                   <div className={styles.field}>
                     <label className={styles.label}>
diff --git a/src/features/providers/sheets/forms/sharedForm.module.scss b/src/features/providers/sheets/forms/sharedForm.module.scss
index 1e5773f..210b865 100644
--- a/src/features/providers/sheets/forms/sharedForm.module.scss
+++ b/src/features/providers/sheets/forms/sharedForm.module.scss
@@ -490,6 +490,64 @@
   }
 }
 
+.passwordField {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.passwordInput {
+  width: 100%;
+  height: 36px;
+  padding: 8px 36px 8px 12px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-color);
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  font-size: 13px;
+  font-family: inherit;
+  box-sizing: border-box;
+
+  &::placeholder {
+    color: var(--text-tertiary);
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px var(--primary-10);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+.passwordToggle {
+  position: absolute;
+  right: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  border: none;
+  background: transparent;
+  color: var(--text-tertiary);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  transition: color $transition-fast;
+
+  &:hover:not(:disabled) {
+    color: var(--text-primary);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
 .entriesList {
   display: flex;
   flex-direction: column;
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 9774c6a..c64667c 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -1313,6 +1313,8 @@
       "apiKeyEntriesSection": "API key entries",
       "apiKeyEntry": "Key #{{index}}",
       "addApiKeyEntry": "Add key entry",
+      "showApiKey": "Show API key",
+      "hideApiKey": "Hide API key",
       "validation": {
         "nameRequired": "Name is required",
         "apiKeyRequired": "At least one API key is required",
diff --git a/src/i18n/locales/ru.json b/src/i18n/locales/ru.json
index 5639027..668ba6e 100644
--- a/src/i18n/locales/ru.json
+++ b/src/i18n/locales/ru.json
@@ -1310,6 +1310,8 @@
       "apiKeyEntriesSection": "API-ключи",
       "apiKeyEntry": "Ключ #{{index}}",
       "addApiKeyEntry": "Добавить ключ",
+      "showApiKey": "Показать ключ API",
+      "hideApiKey": "Скрыть ключ API",
       "validation": {
         "nameRequired": "Название обязательно",
         "apiKeyRequired": "Нужен хотя бы один API-ключ",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index af945c8..439d5c6 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -1313,6 +1313,8 @@
       "apiKeyEntriesSection": "API 密钥条目",
       "apiKeyEntry": "密钥 #{{index}}",
       "addApiKeyEntry": "添加密钥条目",
+      "showApiKey": "显示密钥",
+      "hideApiKey": "隐藏密钥",
       "validation": {
         "nameRequired": "名称必填",
         "apiKeyRequired": "至少填写一个 API 密钥",
diff --git a/src/i18n/locales/zh-TW.json b/src/i18n/locales/zh-TW.json
index 2a96ccc..b67890d 100644
--- a/src/i18n/locales/zh-TW.json
+++ b/src/i18n/locales/zh-TW.json
@@ -1339,6 +1339,8 @@
       "apiKeyEntriesSection": "API 金鑰條目",
       "apiKeyEntry": "金鑰 #{{index}}",
       "addApiKeyEntry": "新增金鑰條目",
+      "showApiKey": "顯示金鑰",
+      "hideApiKey": "隱藏金鑰",
       "validation": {
         "nameRequired": "名稱必填",
         "apiKeyRequired": "至少填寫一個 API 金鑰",