From a46e62631978153af411052163b39a8b84afe4a0 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Fri, 8 Mar 2024 10:15:56 +0800
Subject: [PATCH] :art: fix https://github.com/siyuan-note/siyuan/issues/10536

---
 app/src/config/ai.ts | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/app/src/config/ai.ts b/app/src/config/ai.ts
index 322716751..2c8d7e1d8 100644
--- a/app/src/config/ai.ts
+++ b/app/src/config/ai.ts
@@ -38,7 +38,10 @@ export const ai = {
 <div class="b3-label">
     ${window.siyuan.languages.apiKey}
     <div class="fn__hr"></div>
-    <input class="b3-text-field fn__block" id="apiKey" value="${window.siyuan.config.ai.openAI.apiKey}"/>
+    <div class="b3-form__icona fn__block">
+        <input id="apiKey" type="password" class="b3-text-field b3-form__icona-input" value="${window.siyuan.config.ai.openAI.apiKey}">
+        <svg class="b3-form__icona-icon" data-action="togglePassword"><use xlink:href="#iconEye"></use></svg>
+    </div>
     <div class="b3-label__text">${window.siyuan.languages.apiKeyTip}</div>
 </div>
 <div class="b3-label">
@@ -106,7 +109,10 @@ export const ai = {
         ${window.siyuan.languages.apiKey}
         <div class="b3-label__text">${window.siyuan.languages.apiKeyTip}</div>
         <div class="fn__hr"></div>
-        <input class="b3-text-field fn__block" id="apiKey" value="${window.siyuan.config.ai.openAI.apiKey}"/>
+        <div class="b3-form__icona fn__block">
+            <input id="apiKey" type="password" class="b3-text-field b3-form__icona-input" value="${window.siyuan.config.ai.openAI.apiKey}">
+            <svg class="b3-form__icona-icon" data-action="togglePassword"><use xlink:href="#iconEye"></use></svg>
+        </div>
     </div>
 </div>
 <div class="fn__flex b3-label">
@@ -154,7 +160,13 @@ export const ai = {
 </div>`;
     },
     bindEvent: () => {
-        ai.element.querySelectorAll("input,select").forEach((item) => {
+        const togglePassword = ai.element.querySelector('.b3-form__icona-icon[data-action="togglePassword"]')
+        togglePassword.addEventListener("click", () => {
+            const isEye = togglePassword.firstElementChild.getAttribute("xlink:href") === "#iconEye";
+            togglePassword.firstElementChild.setAttribute("xlink:href", isEye ? "#iconEyeoff" : "#iconEye");
+            togglePassword.previousElementSibling.setAttribute("type", isEye ? "text" : "password");
+        })
+        ai.element.querySelectorAll("input, select").forEach((item) => {
             item.addEventListener("change", () => {
                 fetchPost("/api/setting/setAI", {
                     openAI: {