File size: 1,672 Bytes
902845d |
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 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
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; |