27 lines
1.0 KiB
TypeScript
27 lines
1.0 KiB
TypeScript
import { forwardRef, useState } from 'react'
|
|
import { IconButton, Input, InputGroup, InputRightElement, type InputProps } from '@chakra-ui/react'
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons'
|
|
|
|
// Input mot de passe avec bascule affichage clair/masqué (icône Font Awesome).
|
|
export const PasswordInput = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
|
|
const [visible, setVisible] = useState(false)
|
|
|
|
return (
|
|
<InputGroup>
|
|
<Input ref={ref} type={visible ? 'text' : 'password'} {...props} />
|
|
<InputRightElement>
|
|
<IconButton
|
|
aria-label={visible ? 'Masquer le mot de passe' : 'Afficher le mot de passe'}
|
|
icon={<FontAwesomeIcon icon={visible ? faEyeSlash : faEye} />}
|
|
size="sm"
|
|
variant="ghost"
|
|
tabIndex={-1}
|
|
onClick={() => setVisible((v) => !v)}
|
|
/>
|
|
</InputRightElement>
|
|
</InputGroup>
|
|
)
|
|
})
|
|
PasswordInput.displayName = 'PasswordInput'
|