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

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

View File

@ -17,6 +17,7 @@ const InstallForm = () => {
const [email, setEmail] = React.useState('')
const [name, setName] = React.useState('')
const [password, setPassword] = React.useState('')
const [showPassword, setShowPassword] = React.useState(false)
const showErrorMessage = (message: string) => {
Toast.notify({
type: 'error',
@ -108,12 +109,21 @@ const InstallForm = () => {
<div className="mt-1 relative rounded-md shadow-sm">
<input
id="password"
type='password'
type={showPassword ? 'text' : 'password'}
value={password}
onChange={e => setPassword(e.target.value)}
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'}
/>
<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 className='mt-1 text-xs text-gray-500'>{t('login.error.passwordInvalid')}</div>