From 7f8ad88c0680fe9f3bf83334d6bb0e21601fe1d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=87=AA=E7=94=B1=E7=9A=84=E4=B8=96=E7=95=8C=E4=BA=BA?=
 <3196812536@qq.com>
Date: Sun, 6 Jul 2025 21:37:17 +0800
Subject: [PATCH] feat: add show/hide toggle for API keys in settings (#7883)

* feat: add show/hide toggle for API keys in settings

Introduces an eye icon button to toggle visibility of API keys and tokens in Joplin, Notion, Siyuan, and Yuque settings pages. Refactors input fields to allow users to view or hide sensitive credentials, improving usability and security. Also updates translation keys in AgentsSubscribeUrlSettings for consistency.

* refactor: settings pages to use Input.Password for tokens

Replaced custom password visibility toggles and related styled-components with Ant Design's Input.Password component in Joplin, Notion, Siyuan, and Yuque settings pages. This simplifies the codebase and improves consistency in handling sensitive input fields.

* fix: Improve layout of token input fields in settings

Wrapped token/password input and check button pairs in Joplin, Notion, and Siyuan settings with Ant Design's Space.Compact for better alignment and consistent UI.

* fix: trigger token change handler on blur in settings

Added onBlur event handlers to the Joplin and Siyuan token input fields to ensure token changes are handled when the input loses focus, improving reliability of token updates.
---
 .../settings/DataSettings/AgentsSubscribeUrlSettings.tsx   | 6 +++---
 .../src/pages/settings/DataSettings/JoplinSettings.tsx     | 7 ++++---
 .../src/pages/settings/DataSettings/NotionSettings.tsx     | 6 +++---
 .../src/pages/settings/DataSettings/SiyuanSettings.tsx     | 7 ++++---
 .../src/pages/settings/DataSettings/YuqueSettings.tsx      | 7 ++++---
 5 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/renderer/src/pages/settings/DataSettings/AgentsSubscribeUrlSettings.tsx b/src/renderer/src/pages/settings/DataSettings/AgentsSubscribeUrlSettings.tsx
index f4e76fadd9..0e40f26501 100755
--- a/src/renderer/src/pages/settings/DataSettings/AgentsSubscribeUrlSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/AgentsSubscribeUrlSettings.tsx
@@ -24,18 +24,18 @@ const AgentsSubscribeUrlSettings: FC = () => {
     <SettingGroup theme={theme}>
       <SettingTitle>
         {t('agents.tag.agent')}
-        {t('settings.websearch.subscribe_add')}
+        {t('settings.tool.websearch.subscribe_add')}
       </SettingTitle>
       <SettingDivider />
       <SettingRow>
-        <SettingRowTitle>{t('settings.websearch.subscribe_url')}</SettingRowTitle>
+        <SettingRowTitle>{t('settings.tool.websearch.subscribe_url')}</SettingRowTitle>
         <HStack alignItems="center" gap="5px" style={{ width: 315 }}>
           <Input
             type="text"
             value={agentssubscribeUrl || ''}
             onChange={handleAgentChange}
             style={{ width: 315 }}
-            placeholder={t('settings.websearch.subscribe_name.placeholder')}
+            placeholder={t('settings.tool.websearch.subscribe_name.placeholder')}
           />
         </HStack>
       </SettingRow>
diff --git a/src/renderer/src/pages/settings/DataSettings/JoplinSettings.tsx b/src/renderer/src/pages/settings/DataSettings/JoplinSettings.tsx
index 32b3148541..664b65a60c 100644
--- a/src/renderer/src/pages/settings/DataSettings/JoplinSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/JoplinSettings.tsx
@@ -5,7 +5,7 @@ import { useMinappPopup } from '@renderer/hooks/useMinappPopup'
 import { RootState, useAppDispatch } from '@renderer/store'
 import { setJoplinExportReasoning, setJoplinToken, setJoplinUrl } from '@renderer/store/settings'
 import { Button, Space, Switch, Tooltip } from 'antd'
-import Input from 'antd/es/input/Input'
+import { Input } from 'antd'
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
@@ -107,11 +107,12 @@ const JoplinSettings: FC = () => {
         </SettingRowTitle>
         <HStack alignItems="center" gap="5px" style={{ width: 315 }}>
           <Space.Compact style={{ width: '100%' }}>
-            <Input
-              type="password"
+            <Input.Password
               value={joplinToken || ''}
               onChange={handleJoplinTokenChange}
+              onBlur={handleJoplinTokenChange}
               placeholder={t('settings.data.joplin.token_placeholder')}
+              style={{ width: '100%' }}
             />
             <Button onClick={handleJoplinConnectionCheck}>{t('settings.data.joplin.check.button')}</Button>
           </Space.Compact>
diff --git a/src/renderer/src/pages/settings/DataSettings/NotionSettings.tsx b/src/renderer/src/pages/settings/DataSettings/NotionSettings.tsx
index 26e8d0872a..3b97b5cbcc 100644
--- a/src/renderer/src/pages/settings/DataSettings/NotionSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/NotionSettings.tsx
@@ -11,7 +11,7 @@ import {
   setNotionPageNameKey
 } from '@renderer/store/settings'
 import { Button, Space, Switch, Tooltip } from 'antd'
-import Input from 'antd/es/input/Input'
+import { Input } from 'antd'
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
@@ -122,12 +122,12 @@ const NotionSettings: FC = () => {
         <SettingRowTitle>{t('settings.data.notion.api_key')}</SettingRowTitle>
         <HStack alignItems="center" gap="5px" style={{ width: 315 }}>
           <Space.Compact style={{ width: '100%' }}>
-            <Input
-              type="password"
+            <Input.Password
               value={notionApiKey || ''}
               onChange={handleNotionTokenChange}
               onBlur={handleNotionTokenChange}
               placeholder={t('settings.data.notion.api_key_placeholder')}
+              style={{ width: '100%' }}
             />
             <Button onClick={handleNotionConnectionCheck}>{t('settings.data.notion.check.button')}</Button>
           </Space.Compact>
diff --git a/src/renderer/src/pages/settings/DataSettings/SiyuanSettings.tsx b/src/renderer/src/pages/settings/DataSettings/SiyuanSettings.tsx
index 2681f13053..7a51edc70f 100644
--- a/src/renderer/src/pages/settings/DataSettings/SiyuanSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/SiyuanSettings.tsx
@@ -5,7 +5,7 @@ import { useMinappPopup } from '@renderer/hooks/useMinappPopup'
 import { RootState, useAppDispatch } from '@renderer/store'
 import { setSiyuanApiUrl, setSiyuanBoxId, setSiyuanRootPath, setSiyuanToken } from '@renderer/store/settings'
 import { Button, Space, Tooltip } from 'antd'
-import Input from 'antd/es/input/Input'
+import { Input } from 'antd'
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
@@ -109,11 +109,12 @@ const SiyuanSettings: FC = () => {
         </SettingRowTitle>
         <HStack alignItems="center" gap="5px" style={{ width: 315 }}>
           <Space.Compact style={{ width: '100%' }}>
-            <Input
-              type="password"
+            <Input.Password
               value={siyuanToken || ''}
               onChange={handleTokenChange}
+              onBlur={handleTokenChange}
               placeholder={t('settings.data.siyuan.token_placeholder')}
+              style={{ width: '100%' }}
             />
             <Button onClick={handleCheckConnection}>{t('settings.data.siyuan.check.button')}</Button>
           </Space.Compact>
diff --git a/src/renderer/src/pages/settings/DataSettings/YuqueSettings.tsx b/src/renderer/src/pages/settings/DataSettings/YuqueSettings.tsx
index 60a8d6ef7c..1f013130c1 100644
--- a/src/renderer/src/pages/settings/DataSettings/YuqueSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/YuqueSettings.tsx
@@ -5,7 +5,7 @@ import { useMinappPopup } from '@renderer/hooks/useMinappPopup'
 import { RootState, useAppDispatch } from '@renderer/store'
 import { setYuqueRepoId, setYuqueToken, setYuqueUrl } from '@renderer/store/settings'
 import { Button, Space, Tooltip } from 'antd'
-import Input from 'antd/es/input/Input'
+import { Input } from 'antd'
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
@@ -101,11 +101,12 @@ const YuqueSettings: FC = () => {
         </SettingRowTitle>
         <HStack alignItems="center" gap="5px" style={{ width: 315 }}>
           <Space.Compact style={{ width: '100%' }}>
-            <Input
-              type="password"
+            <Input.Password
               value={yuqueToken || ''}
               onChange={handleYuqueTokenChange}
+              onBlur={handleYuqueTokenChange}
               placeholder={t('settings.data.yuque.token_placeholder')}
+              style={{ width: '100%' }}
             />
             <Button onClick={handleYuqueConnectionCheck}>{t('settings.data.yuque.check.button')}</Button>
           </Space.Compact>