dont return asterisks for api key (#7654)

Co-authored-by: openhands <openhands@all-hands.dev>

frontend/__tests__/hooks/mutation/use-save-settings.test.tsx

@@ -18,7 +18,7 @@ describe("useSaveSettings", () => {
       ),
     });
 
-    result.current.mutate({ LLM_API_KEY: "" });
+    result.current.mutate({ llm_api_key: "" });
     await waitFor(() => {
       expect(saveSettingsSpy).toHaveBeenCalledWith(
         expect.objectContaining({
@@ -27,7 +27,7 @@ describe("useSaveSettings", () => {
       );
     });
 
-    result.current.mutate({ LLM_API_KEY: null });
+    result.current.mutate({ llm_api_key: null });
     await waitFor(() => {
       expect(saveSettingsSpy).toHaveBeenCalledWith(
         expect.objectContaining({

frontend/__tests__/routes/settings.test.tsx

@@ -395,7 +395,7 @@ describe("Settings Screen", () => {
     it("should render an indicator if the LLM API key is set", async () => {
       getSettingsSpy.mockResolvedValueOnce({
         ...MOCK_DEFAULT_USER_SETTINGS,
-        llm_api_key: "**********",
+        llm_api_key_set: true,
       });
 
       renderSettingsScreen();
@@ -416,7 +416,7 @@ describe("Settings Screen", () => {
     it("should set '<hidden>' placeholder if the LLM API key is set", async () => {
       getSettingsSpy.mockResolvedValueOnce({
         ...MOCK_DEFAULT_USER_SETTINGS,
-        llm_api_key: "**********",
+        llm_api_key_set: true,
       });
 
       renderSettingsScreen();
@@ -971,7 +971,7 @@ describe("Settings Screen", () => {
       const user = userEvent.setup();
       getSettingsSpy.mockResolvedValue({
         ...MOCK_DEFAULT_USER_SETTINGS,
-        llm_api_key: "**********",
+        llm_api_key_set: true,
       });
 
       renderSettingsScreen();

frontend/src/components/shared/modals/settings/settings-form.tsx

@@ -50,7 +50,7 @@ export function SettingsForm({ settings, models, onClose }: SettingsFormProps) {
 
         posthog.capture("settings_saved", {
           LLM_MODEL: newSettings.LLM_MODEL,
-          LLM_API_KEY: newSettings.LLM_API_KEY ? "SET" : "UNSET",
+          LLM_API_KEY_SET: newSettings.LLM_API_KEY_SET ? "SET" : "UNSET",
           REMOTE_RUNTIME_RESOURCE_FACTOR:
             newSettings.REMOTE_RUNTIME_RESOURCE_FACTOR,
         });
@@ -74,7 +74,7 @@ export function SettingsForm({ settings, models, onClose }: SettingsFormProps) {
     }
   };
 
-  const isLLMKeySet = settings.LLM_API_KEY === "**********";
+  const isLLMKeySet = settings.LLM_API_KEY_SET;
 
   return (
     <div>

frontend/src/hooks/mutation/use-save-settings.ts

@@ -13,6 +13,7 @@ const saveSettingsMutationFn = async (
     return;
   }
 
+  console.log("Save settings", settings);
   const apiSettings: Partial<PostApiSettings> = {
     llm_model: settings.LLM_MODEL,
     llm_base_url: settings.LLM_BASE_URL,
@@ -21,9 +22,9 @@ const saveSettingsMutationFn = async (
     confirmation_mode: settings.CONFIRMATION_MODE,
     security_analyzer: settings.SECURITY_ANALYZER,
     llm_api_key:
-      settings.LLM_API_KEY === ""
+      settings.llm_api_key === ""
         ? ""
-        : settings.LLM_API_KEY?.trim() || undefined,
+        : settings.llm_api_key?.trim() || undefined,
     remote_runtime_resource_factor: settings.REMOTE_RUNTIME_RESOURCE_FACTOR,
     enable_default_condenser: settings.ENABLE_DEFAULT_CONDENSER,
     enable_sound_notifications: settings.ENABLE_SOUND_NOTIFICATIONS,

frontend/src/hooks/query/use-settings.ts

@@ -15,7 +15,7 @@ const getSettingsQueryFn = async () => {
     LANGUAGE: apiSettings.language,
     CONFIRMATION_MODE: apiSettings.confirmation_mode,
     SECURITY_ANALYZER: apiSettings.security_analyzer,
-    LLM_API_KEY: apiSettings.llm_api_key,
+    LLM_API_KEY_SET: apiSettings.llm_api_key_set,
     REMOTE_RUNTIME_RESOURCE_FACTOR: apiSettings.remote_runtime_resource_factor,
     PROVIDER_TOKENS_SET: apiSettings.provider_tokens_set,
     ENABLE_DEFAULT_CONDENSER: apiSettings.enable_default_condenser,
@@ -45,10 +45,10 @@ export const useSettings = () => {
   });
 
   React.useEffect(() => {
-    if (query.isFetched && query.data?.LLM_API_KEY) {
+    if (query.isFetched && query.data?.LLM_API_KEY_SET) {
       posthog.capture("user_activated");
     }
-  }, [query.data?.LLM_API_KEY, query.isFetched]);
+  }, [query.data?.LLM_API_KEY_SET, query.isFetched]);
 
   React.useEffect(() => {
     if (query.data?.PROVIDER_TOKENS_SET) {

frontend/src/mocks/handlers.ts

@@ -12,7 +12,8 @@ import { GitUser } from "#/types/git";
 export const MOCK_DEFAULT_USER_SETTINGS: ApiSettings | PostApiSettings = {
   llm_model: DEFAULT_SETTINGS.LLM_MODEL,
   llm_base_url: DEFAULT_SETTINGS.LLM_BASE_URL,
-  llm_api_key: DEFAULT_SETTINGS.LLM_API_KEY,
+  llm_api_key: null,
+  llm_api_key_set: DEFAULT_SETTINGS.LLM_API_KEY_SET,
   agent: DEFAULT_SETTINGS.AGENT,
   language: DEFAULT_SETTINGS.LANGUAGE,
   confirmation_mode: DEFAULT_SETTINGS.CONFIRMATION_MODE,

frontend/src/routes/account-settings.tsx

@@ -77,7 +77,7 @@ function AccountSettings() {
     providerTokensSet.includes(ProviderOptions.github) || false;
   const isGitLabTokenSet =
     providerTokensSet.includes(ProviderOptions.gitlab) || false;
-  const isLLMKeySet = settings?.LLM_API_KEY === "**********";
+  const isLLMKeySet = settings?.LLM_API_KEY_SET;
   const isAnalyticsEnabled = settings?.USER_CONSENTS_TO_ANALYTICS;
   const isAdvancedSettingsSet = determineWhetherToToggleAdvancedSettings();
 
@@ -120,11 +120,11 @@ function AccountSettings() {
     const enableSoundNotifications =
       formData.get("enable-sound-notifications-switch")?.toString() === "on";
     const llmBaseUrl = formData.get("base-url-input")?.toString() || "";
+    const inputApiKey = formData.get("llm-api-key-input")?.toString() || "";
     const llmApiKey =
-      formData.get("llm-api-key-input")?.toString() ||
-      (isLLMKeySet
-        ? undefined // don't update if it's already set
-        : ""); // reset if it's first time save to avoid 500 error
+      inputApiKey === "" && isLLMKeySet
+        ? undefined // don't update if it's already set and input is empty
+        : inputApiKey; // otherwise use the input value
 
     const githubToken = formData.get("github-token-input")?.toString();
     const gitlabToken = formData.get("gitlab-token-input")?.toString();
@@ -151,7 +151,7 @@ function AccountSettings() {
       ENABLE_SOUND_NOTIFICATIONS: enableSoundNotifications,
       LLM_MODEL: finalLlmModel,
       LLM_BASE_URL: finalLlmBaseUrl,
-      LLM_API_KEY: finalLlmApiKey,
+      llm_api_key: finalLlmApiKey,
       AGENT: formData.get("agent-input")?.toString(),
       SECURITY_ANALYZER:
         formData.get("security-analyzer-input")?.toString() || "",
@@ -277,10 +277,10 @@ function AccountSettings() {
                   label="API Key"
                   type="password"
                   className="w-[680px]"
+                  placeholder={isLLMKeySet ? "<hidden>" : ""}
                   startContent={
                     isLLMKeySet && <KeyStatusIcon isSet={isLLMKeySet} />
                   }
-                  placeholder={isLLMKeySet ? "<hidden>" : ""}
                 />
               )}
 

frontend/src/services/settings.ts

@@ -7,7 +7,7 @@ export const DEFAULT_SETTINGS: Settings = {
   LLM_BASE_URL: "",
   AGENT: "CodeActAgent",
   LANGUAGE: "en",
-  LLM_API_KEY: null,
+  LLM_API_KEY_SET: false,
   CONFIRMATION_MODE: false,
   SECURITY_ANALYZER: "",
   REMOTE_RUNTIME_RESOURCE_FACTOR: 1,

frontend/src/types/config-type.tsx

@@ -2,14 +2,14 @@ enum ArgConfigType {
   LLM_MODEL = "LLM_MODEL",
   AGENT = "AGENT",
   LANGUAGE = "LANGUAGE",
-  LLM_API_KEY = "LLM_API_KEY",
+  LLM_API_KEY_SET = "LLM_API_KEY_SET",
 }
 
 const SupportedSettings: string[] = [
   ArgConfigType.LLM_MODEL,
   ArgConfigType.AGENT,
   ArgConfigType.LANGUAGE,
-  ArgConfigType.LLM_API_KEY,
+  ArgConfigType.LLM_API_KEY_SET,
 ];
 
 export { ArgConfigType, SupportedSettings };

frontend/src/types/core/variances.ts

@@ -17,7 +17,7 @@ export interface InitConfig {
     AGENT: string;
     CONFIRMATION_MODE: boolean;
     LANGUAGE: string;
-    LLM_API_KEY: string;
+    LLM_API_KEY_SET: boolean;
     LLM_MODEL: string;
   };
   token?: string;

frontend/src/types/settings.ts

@@ -10,7 +10,7 @@ export type Settings = {
   LLM_BASE_URL: string;
   AGENT: string;
   LANGUAGE: string;
-  LLM_API_KEY: string | null;
+  LLM_API_KEY_SET: boolean;
   CONFIRMATION_MODE: boolean;
   SECURITY_ANALYZER: string;
   REMOTE_RUNTIME_RESOURCE_FACTOR: number | null;
@@ -28,6 +28,7 @@ export type ApiSettings = {
   agent: string;
   language: string;
   llm_api_key: string | null;
+  llm_api_key_set: boolean;
   confirmation_mode: boolean;
   security_analyzer: string;
   remote_runtime_resource_factor: number | null;
@@ -41,6 +42,7 @@ export type ApiSettings = {
 export type PostSettings = Settings & {
   provider_tokens: Record<Provider, string>;
   user_consents_to_analytics: boolean | null;
+  llm_api_key?: string | null;
 };
 
 export type PostApiSettings = ApiSettings & {

frontend/src/utils/settings-utils.ts

@@ -47,7 +47,9 @@ const extractAdvancedFormData = (formData: FormData) => {
   };
 };
 
-export const extractSettings = (formData: FormData): Partial<Settings> => {
+export const extractSettings = (
+  formData: FormData,
+): Partial<Settings> & { llm_api_key?: string | null } => {
   const { LLM_MODEL, LLM_API_KEY, AGENT, LANGUAGE } =
     extractBasicFormData(formData);
 
@@ -73,7 +75,7 @@ export const extractSettings = (formData: FormData): Partial<Settings> => {
 
   return {
     LLM_MODEL: CUSTOM_LLM_MODEL || LLM_MODEL,
-    LLM_API_KEY,
+    LLM_API_KEY_SET: !!LLM_API_KEY,
     AGENT,
     LANGUAGE,
     LLM_BASE_URL,
@@ -81,5 +83,6 @@ export const extractSettings = (formData: FormData): Partial<Settings> => {
     SECURITY_ANALYZER,
     ENABLE_DEFAULT_CONDENSER,
     PROVIDER_TOKENS: providerTokens,
+    llm_api_key: LLM_API_KEY,
   };
 };

openhands/server/routes/settings.py

@@ -10,7 +10,6 @@ from openhands.server.settings import GETSettingsModel, POSTSettingsModel, Setti
 from openhands.server.shared import SettingsStoreImpl, config, server_config
 from openhands.server.types import AppMode
 
-
 app = APIRouter(prefix='/api')
 
 
@@ -27,10 +26,10 @@ async def load_settings(request: Request) -> GETSettingsModel | JSONResponse:
             )
 
         provider_tokens_set = {}
-        
+
         if bool(user_id):
             provider_tokens_set[ProviderType.GITHUB.value] = True
-        
+
         provider_tokens = get_provider_tokens(request)
         if provider_tokens:
             all_provider_types = [provider.value for provider in ProviderType]
@@ -43,10 +42,10 @@ async def load_settings(request: Request) -> GETSettingsModel | JSONResponse:
 
         settings_with_token_data = GETSettingsModel(
             **settings.model_dump(exclude='secrets_store'),
+            llm_api_key_set=settings.llm_api_key is not None,
             provider_tokens_set=provider_tokens_set,
         )
-
-        settings_with_token_data.llm_api_key = settings.llm_api_key
+        settings_with_token_data.llm_api_key = None
         return settings_with_token_data
     except Exception as e:
         logger.warning(f'Invalid token: {e}')

openhands/server/settings.py

@@ -121,3 +121,4 @@ class GETSettingsModel(Settings):
     """
 
     provider_tokens_set: dict[str, bool] | None = None
+    llm_api_key_set: bool