AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-11 01:18:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Perf: Support for password display and hiding (#636)

Browse Source 
Co-authored-by: Selenium39 <selenium39@qq.com>
This commit is contained in:
Selenium39 2023-07-24 14:48:00 +08:00 committed by GitHub
parent 67d326a558
commit dd1172b57e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/app/install/installForm.tsx
View File

@ -17,6 +17,7 @@ const InstallForm = () => {
const [email, setEmail] = React.useState('') const [email, setEmail] = React.useState('')
const [name, setName] = React.useState('') const [name, setName] = React.useState('')
const [password, setPassword] = React.useState('') const [password, setPassword] = React.useState('')
const [showPassword, setShowPassword] = React.useState(false)
const showErrorMessage = (message: string) => { const showErrorMessage = (message: string) => {
Toast.notify({ Toast.notify({
type: 'error', type: 'error',
@ -108,12 +109,21 @@ const InstallForm = () => {
<div className="mt-1 relative rounded-md shadow-sm"> <div className="mt-1 relative rounded-md shadow-sm">
<input <input
id="password" id="password"
type='password' type={showPassword ? 'text' : 'password'}
value={password} value={password}
onChange={e => setPassword(e.target.value)} onChange={e => setPassword(e.target.value)}
placeholder={t('login.passwordPlaceholder') || ''} placeholder={t('login.passwordPlaceholder') || ''}
className={'appearance-none block w-full rounded-lg pl-[14px] px-3 py-2 border border-gray-200 hover:border-gray-300 hover:shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 placeholder-gray-400 caret-primary-600 sm:text-sm pr-10'} className={'appearance-none block w-full rounded-lg pl-[14px] px-3 py-2 border border-gray-200 hover:border-gray-300 hover:shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 placeholder-gray-400 caret-primary-600 sm:text-sm pr-10'}
/> />
<div className="absolute inset-y-0 right-0 flex items-center pr-3">
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="text-gray-400 hover:text-gray-500 focus:outline-none focus:text-gray-500"
>
{showPassword ? '👀' : '😝'}
</button>
</div>
</div> </div>
<div className='mt-1 text-xs text-gray-500'>{t('login.error.passwordInvalid')}</div> <div className='mt-1 text-xs text-gray-500'>{t('login.error.passwordInvalid')}</div>