From 84d09b8b8a85900a12f9f6df1f2041b411628c72 Mon Sep 17 00:00:00 2001
From: Atif <39148554+atif09@users.noreply.github.com>
Date: Tue, 2 Sep 2025 07:07:24 +0530
Subject: [PATCH] fix: API key input uses password type and no autocomplete
 (#24864)

Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 .../model-modal/Input.test.tsx                | 16 +++++++++++++
 .../model-provider-page/model-modal/Input.tsx | 21 ++++++++--------
 .../__snapshots__/Input.test.tsx.snap         | 24 +++++++++++++++++++
 3 files changed, 50 insertions(+), 11 deletions(-)
 create mode 100644 web/app/components/header/account-setting/model-provider-page/model-modal/Input.test.tsx
 create mode 100644 web/app/components/header/account-setting/model-provider-page/model-modal/__snapshots__/Input.test.tsx.snap

diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/Input.test.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/Input.test.tsx
new file mode 100644
index 0000000000..98e5c8c792
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/Input.test.tsx
@@ -0,0 +1,16 @@
+import { render } from '@testing-library/react'
+import Input from './Input'
+
+test('Input renders correctly as password type with no autocomplete', () => {
+  const { asFragment, getByPlaceholderText } = render(
+    <Input
+      type="password"
+      placeholder="API Key"
+      onChange={jest.fn()}
+    />,
+  )
+  const input = getByPlaceholderText('API Key')
+  expect(input).toHaveAttribute('type', 'password')
+  expect(input).not.toHaveAttribute('autocomplete')
+  expect(asFragment()).toMatchSnapshot()
+})
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/Input.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/Input.tsx
index a19e330315..8340faa0c3 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/Input.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/Input.tsx
@@ -13,6 +13,7 @@ type InputProps = {
   min?: number
   max?: number
 }
+
 const Input: FC<InputProps> = ({
   value,
   onChange,
@@ -32,23 +33,23 @@ const Input: FC<InputProps> = ({
       onChange(`${min}`)
       return
     }
-
     if (!isNaN(maxNum) && Number.parseFloat(v) > maxNum)
       onChange(`${max}`)
   }
+
   return (
     <div className='relative'>
       <input
-        autoComplete="new-password"
         tabIndex={0}
+        // Do not set autoComplete for security - prevents browser from storing sensitive API keys
         className={`
           block h-8 w-full appearance-none rounded-lg border border-transparent bg-components-input-bg-normal px-3 text-sm
           text-components-input-text-filled caret-primary-600 outline-none
           placeholder:text-sm placeholder:text-text-tertiary
           hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active
           focus:bg-components-input-bg-active focus:shadow-xs
-          ${validated && 'pr-[30px]'}
-          ${className}
+          ${validated ? 'pr-[30px]' : ''}
+          ${className || ''}
         `}
         placeholder={placeholder || ''}
         onChange={e => onChange(e.target.value)}
@@ -60,13 +61,11 @@ const Input: FC<InputProps> = ({
         min={min}
         max={max}
       />
-      {
-        validated && (
-          <div className='absolute right-2.5 top-2.5'>
-            <CheckCircle className='h-4 w-4 text-[#039855]' />
-          </div>
-        )
-      }
+      {validated && (
+        <div className='absolute right-2.5 top-2.5'>
+          <CheckCircle className='h-4 w-4 text-[#039855]' />
+        </div>
+      )}
     </div>
   )
 }
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/__snapshots__/Input.test.tsx.snap b/web/app/components/header/account-setting/model-provider-page/model-modal/__snapshots__/Input.test.tsx.snap
new file mode 100644
index 0000000000..9a5fe8dd29
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/__snapshots__/Input.test.tsx.snap
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Input renders correctly as password type with no autocomplete 1`] = `
+<DocumentFragment>
+  <div
+    class="relative"
+  >
+    <input
+      class="
+          block h-8 w-full appearance-none rounded-lg border border-transparent bg-components-input-bg-normal px-3 text-sm
+          text-components-input-text-filled caret-primary-600 outline-none
+          placeholder:text-sm placeholder:text-text-tertiary
+          hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active
+          focus:bg-components-input-bg-active focus:shadow-xs
+          
+          
+        "
+      placeholder="API Key"
+      tabindex="0"
+      type="password"
+    />
+  </div>
+</DocumentFragment>
+`;