estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: API key input uses password type and no autocomplete (#24864)

Browse Source 
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Atif
2025-09-02 07:07:24 +05:30
committed by GitHub
parent 2c462154f7
commit 84d09b8b8a
3 changed files with 50 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/app/components/header/account-setting/model-provider-page/model-modal/Input.test.tsx Normal file
View File

@@ -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()
})

21
web/app/components/header/account-setting/model-provider-page/model-modal/Input.tsx
View File

@@ -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>
)
}

24
web/app/components/header/account-setting/model-provider-page/model-modal/__snapshots__/Input.test.tsx.snap Normal file
View File

@@ -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>
`;