|
import React, { useState } from 'react'; |
|
import { Eye, EyeOff } from 'lucide-react'; |
|
|
|
const PasswordInput = ({onChange}) => { |
|
const [showPassword, setShowPassword] = useState(false); |
|
const [password, setPassword] = useState(''); |
|
|
|
const togglePasswordVisibility = () => { |
|
setShowPassword(!showPassword); |
|
}; |
|
|
|
const changeEvent = (e) => { |
|
setPassword(e.target.value); |
|
onChange(e); |
|
} |
|
|
|
return ( |
|
<div className="relative w-full max-w-sm"> |
|
<input |
|
type={showPassword ? 'text' : 'password'} |
|
value={password} |
|
onChange={changeEvent} |
|
className="w-full px-3 py-2 border rounded-md pr-10 text-sm" |
|
placeholder="Enter password" |
|
/> |
|
<button |
|
type="button" |
|
style={{ // Explicit styles to override any external CSS |
|
width: '20px', |
|
height: '20px', |
|
padding: '0', |
|
display: 'flex', |
|
alignItems: 'center', |
|
justifyContent: 'center', |
|
background: 'transparent', |
|
border: 'none', |
|
position: 'absolute', |
|
right: '8px', |
|
top: '10%', |
|
transform: 'translateY(-50%)', |
|
cursor: 'pointer' |
|
}} |
|
onClick={togglePasswordVisibility} |
|
aria-label={showPassword ? "Hide password" : "Show password"} |
|
> |
|
{showPassword ? ( |
|
<Eye |
|
className="text-gray-500" |
|
size={16} // Explicit size for the icon |
|
/> |
|
) : ( |
|
<EyeOff |
|
className="text-gray-500" |
|
size={16} // Explicit size for the icon |
|
/> |
|
)} |
|
</button> |
|
</div> |
|
); |
|
}; |
|
|
|
export default PasswordInput; |