Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | 39x 1435x 1435x 7x | 'use client'
import { useState } from 'react'
import { TextInput } from '../TextInput/TextInput'
type PasswordInputProps = {
name?: string
labelText?: string
placeholder?: string
minLength?: number
}
/**
* Textinput for password with password hide/show eye.
*/
export const PasswordInput: React.FC<PasswordInputProps> = ({
name = 'password',
labelText = 'Password',
placeholder = 'Password',
minLength = 8,
}) => {
const [isPasswordEyeOpen, setIsPasswordEyeOpen] = useState(false)
return (
<TextInput
autoComplete="current-password"
type={isPasswordEyeOpen ? 'text' : 'password'}
name={name}
labelText={labelText}
placeholder={placeholder}
min={minLength}
icon={isPasswordEyeOpen ? 'visibility' : 'visibility_off'}
iconOnClick={() => setIsPasswordEyeOpen(!isPasswordEyeOpen)}
/>
)
}
|