From 8dda45bf99bbedfe7f5ae73751b87eac1c1c7658 Mon Sep 17 00:00:00 2001
From: Robert Brennan <accounts@rbren.io>
Date: Sat, 22 Mar 2025 16:30:54 -0700
Subject: [PATCH] Change API key placeholder to <hidden> when key is set
 (#7427)

Co-authored-by: openhands <openhands@all-hands.dev>
---
 frontend/__tests__/routes/settings.test.tsx               | 8 ++++----
 .../components/shared/modals/settings/settings-form.tsx   | 1 +
 frontend/src/routes/account-settings.tsx                  | 6 +++---
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/frontend/__tests__/routes/settings.test.tsx b/frontend/__tests__/routes/settings.test.tsx
index aa14bc6141..e05b8cf4d3 100644
--- a/frontend/__tests__/routes/settings.test.tsx
+++ b/frontend/__tests__/routes/settings.test.tsx
@@ -112,7 +112,7 @@ describe("Settings Screen", () => {
       });
     });
 
-    it("should set asterik placeholder if the GitHub token is set", async () => {
+    it("should set '<hidden>' placeholder if the GitHub token is set", async () => {
       getSettingsSpy.mockResolvedValue({
         ...MOCK_DEFAULT_USER_SETTINGS,
         github_token_is_set: true,
@@ -122,7 +122,7 @@ describe("Settings Screen", () => {
 
       await waitFor(() => {
         const input = screen.getByTestId("github-token-input");
-        expect(input).toHaveProperty("placeholder", "**********");
+        expect(input).toHaveProperty("placeholder", "<hidden>");
       });
     });
 
@@ -410,7 +410,7 @@ describe("Settings Screen", () => {
       });
     });
 
-    it("should set asterik placeholder if the LLM API key is set", async () => {
+    it("should set '<hidden>' placeholder if the LLM API key is set", async () => {
       getSettingsSpy.mockResolvedValueOnce({
         ...MOCK_DEFAULT_USER_SETTINGS,
         llm_api_key: "**********",
@@ -420,7 +420,7 @@ describe("Settings Screen", () => {
 
       await waitFor(() => {
         const input = screen.getByTestId("llm-api-key-input");
-        expect(input).toHaveProperty("placeholder", "**********");
+        expect(input).toHaveProperty("placeholder", "<hidden>");
       });
     });
 
diff --git a/frontend/src/components/shared/modals/settings/settings-form.tsx b/frontend/src/components/shared/modals/settings/settings-form.tsx
index 14aa112193..56147280fd 100644
--- a/frontend/src/components/shared/modals/settings/settings-form.tsx
+++ b/frontend/src/components/shared/modals/settings/settings-form.tsx
@@ -96,6 +96,7 @@ export function SettingsForm({ settings, models, onClose }: SettingsFormProps) {
             label="API Key"
             type="password"
             className="w-[680px]"
+            placeholder={isLLMKeySet ? "<hidden>" : ""}
             startContent={isLLMKeySet && <KeyStatusIcon isSet={isLLMKeySet} />}
           />
 
diff --git a/frontend/src/routes/account-settings.tsx b/frontend/src/routes/account-settings.tsx
index 5dfeca6336..550bb5e96c 100644
--- a/frontend/src/routes/account-settings.tsx
+++ b/frontend/src/routes/account-settings.tsx
@@ -288,7 +288,7 @@ function AccountSettings() {
                   startContent={
                     isLLMKeySet && <KeyStatusIcon isSet={isLLMKeySet} />
                   }
-                  placeholder={isLLMKeySet ? "**********" : ""}
+                  placeholder={isLLMKeySet ? "<hidden>" : ""}
                 />
               )}
 
@@ -407,9 +407,9 @@ function AccountSettings() {
                       <KeyStatusIcon isSet={!!isGitHubTokenSet} />
                     )
                   }
-                  placeholder={isGitHubTokenSet ? "**********" : ""}
+                  placeholder={isGitHubTokenSet ? "<hidden>" : ""}
                 />
-                <p data-testId="github-token-help-anchor" className="text-xs">
+                <p data-testid="github-token-help-anchor" className="text-xs">
                   {" "}
                   Generate a token on{" "}
                   <b>