Decoder2704/python-chatbot-jay

1import { useState } from "react";2import "./PasswordField.css";3 4export default function PasswordField({5  id,6  label,7  value,8  onChange,9  placeholder = "••••••••",10  autoComplete = "current-password",11  disabled,12}) {13  const [visible, setVisible] = useState(false);14 15  return (16    <div className="password-field">17      <label className="password-field__label" htmlFor={id}>18        {label}19      </label>20      <div className="password-field__wrap">21        <input22          id={id}23          type={visible ? "text" : "password"}24          className="password-field__input"25          value={value}26          onChange={onChange}27          placeholder={placeholder}28          autoComplete={autoComplete}29          disabled={disabled}30        />31        <button32          type="button"33          className="password-field__toggle"34          onClick={() => setVisible((v) => !v)}35          aria-label={visible ? "Hide password" : "Show password"}36          tabIndex={-1}37        >38          {visible ? (39            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>40              <path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24M1 1l22 22" />41            </svg>42          ) : (43            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>44              <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />45              <circle cx="12" cy="12" r="3" />46            </svg>47          )}48        </button>49      </div>50    </div>51  );52}53