richlai's picture
working on docker
902845d
raw
history blame
1.67 kB
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;