From 4a7fd3a3803b229f6ecaeea03a0589017130470c Mon Sep 17 00:00:00 2001
From: code-october <148516338+code-october@users.noreply.github.com>
Date: Fri, 11 Oct 2024 10:36:11 +0000
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=A6=96=E9=A1=B5=20api=20?=
 =?UTF-8?q?=E8=BE=93=E5=85=A5=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/auth.tsx | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/app/components/auth.tsx b/app/components/auth.tsx
index 6c5e75d79..539a52eec 100644
--- a/app/components/auth.tsx
+++ b/app/components/auth.tsx
@@ -78,22 +78,26 @@ export function AuthPage() {
       {!accessStore.hideUserApiKey ? (
         <>
           <div className={styles["auth-tips"]}>{Locale.Auth.SubTips}</div>
-          <input
-            className={styles["auth-input"]}
-            type="password"
-            placeholder={Locale.Settings.Access.OpenAI.ApiKey.Placeholder}
+          <PasswordInput
+            style={{ marginTop: "3vh", marginBottom: "3vh" }}
+            aria={Locale.Settings.ShowPassword}
+            aria-label={Locale.Settings.Access.OpenAI.ApiKey.Placeholder}
             value={accessStore.openaiApiKey}
+            type="text"
+            placeholder={Locale.Settings.Access.OpenAI.ApiKey.Placeholder}
             onChange={(e) => {
               accessStore.update(
                 (access) => (access.openaiApiKey = e.currentTarget.value),
               );
             }}
           />
-          <input
-            className={styles["auth-input-second"]}
-            type="password"
-            placeholder={Locale.Settings.Access.Google.ApiKey.Placeholder}
+          <PasswordInput
+            style={{ marginTop: "3vh", marginBottom: "3vh" }}
+            aria={Locale.Settings.ShowPassword}
+            aria-label={Locale.Settings.Access.Google.ApiKey.Placeholder}
             value={accessStore.googleApiKey}
+            type="text"
+            placeholder={Locale.Settings.Access.Google.ApiKey.Placeholder}
             onChange={(e) => {
               accessStore.update(
                 (access) => (access.googleApiKey = e.currentTarget.value),