27 lines
696 B
JavaScript
27 lines
696 B
JavaScript
import { useState } from 'react';
|
|
import Icon from './Icon.jsx';
|
|
|
|
export default function PasswordField({ value, onChange, placeholder }) {
|
|
const [visible, setVisible] = useState(false);
|
|
|
|
return (
|
|
<div className="password-field">
|
|
<input
|
|
type={visible ? 'text' : 'password'}
|
|
placeholder={placeholder}
|
|
value={value}
|
|
onChange={onChange}
|
|
required
|
|
/>
|
|
<button
|
|
type="button"
|
|
className="password-toggle"
|
|
onClick={() => setVisible((v) => !v)}
|
|
aria-label={visible ? 'Ukryj hasło' : 'Pokaż hasło'}
|
|
>
|
|
<Icon name={visible ? 'visibility_off' : 'visibility'} />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|