All files / components/Form/PasswordInput PasswordInput.tsx

100% Statements 4/4
100% Branches 8/8
100% Functions 2/2
100% Lines 4/4

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