Password field

"use client";

import { useId, useState } from "react";
import type { ComponentProps, KeyboardEvent, ReactNode } from "react";
import { Field } from "./field";
import "./password-field.css";

export type PasswordRequirement = {
  /** Plain-language rule, e.g. "One number". */
  label: string;
  test: (value: string) => boolean;
};

export type PasswordFieldProps = Omit<ComponentProps<"input">, "type" | "value" | "defaultValue" | "size"> & {
  label: ReactNode;
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  /** Rules listed under the field. Each ticks off as soon as the value meets it. */
  requirements?: PasswordRequirement[];
  /** Shows a four-step meter and a word for the share of requirements met. */
  showStrength?: boolean;
  hint?: ReactNode;
  error?: ReactNode;
};

const words = ["Weak", "Fair", "Good", "Strong"];

export function PasswordField({
  label,
  value,
  defaultValue = "",
  onValueChange,
  requirements = [],
  showStrength = false,
  autoComplete = "current-password",
  hint,
  error,
  id,
  className,
  disabled,
  onChange,
  onKeyDown,
  onKeyUp,
  onBlur,
  "aria-describedby": describedBy,
  ...rest
}: PasswordFieldProps) {
  const autoId = useId();
  const inputId = id ?? autoId;
  const [inner, setInner] = useState(defaultValue);
  const current = value ?? inner;
  const [shown, setShown] = useState(false);
  const [caps, setCaps] = useState(false);

  const met = requirements.map((r) => r.test(current));
  const count = met.filter(Boolean).length;
  const level = count === 0 ? 0 : Math.ceil((count / requirements.length) * 4);
  const reqsId = requirements.length > 0 ? `${inputId}-requirements` : undefined;
  const readCaps = (event: KeyboardEvent<HTMLInputElement>) => setCaps(event.getModifierState("CapsLock"));

  return (
    <div className={["eq-password-field", className].filter(Boolean).join(" ")}>
      <Field
        {...rest}
        id={inputId}
        label={label}
        hint={hint}
        error={error}
        type={shown ? "text" : "password"}
        value={current}
        autoComplete={autoComplete}
        autoCapitalize="off"
        spellCheck={false}
        disabled={disabled}
        trailInset="button"
        aria-describedby={[describedBy, reqsId].filter(Boolean).join(" ") || undefined}
        onChange={(event) => {
          onChange?.(event);
          if (value === undefined) setInner(event.target.value);
          onValueChange?.(event.target.value);
        }}
        onKeyDown={(event) => {
          onKeyDown?.(event);
          readCaps(event);
        }}
        onKeyUp={(event) => {
          onKeyUp?.(event);
          readCaps(event);
        }}
        onBlur={(event) => {
          onBlur?.(event);
          setCaps(false);
        }}
        trail={
          <button
            type="button"
            className="eq-password-field-toggle"
            aria-label="Show password"
            aria-pressed={shown}
            aria-controls={inputId}
            disabled={disabled}
            // Keeps focus, and the caret, in the input when the toggle is clicked.
            onPointerDown={(event) => event.preventDefault()}
            onMouseDown={(event) => event.preventDefault()}
            onClick={() => setShown((s) => !s)}
          >
            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M1.75 8S4 3.75 8 3.75 14.25 8 14.25 8 12 12.25 8 12.25 1.75 8 1.75 8Z" />
              <circle cx="8" cy="8" r="2" />
              <path data-slash="" d="m2.75 2.75 10.5 10.5" pathLength="1" />
            </svg>
          </button>
        }
      />
      <p className="eq-password-field-caps" role="status">
        {caps && (
          <>
            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M8 2.75 3 8h2.75v2.5h4.5V8H13L8 2.75ZM5.75 13.25h4.5" />
            </svg>
            Caps Lock is on
          </>
        )}
      </p>
      {showStrength && requirements.length > 0 && (
        <div className="eq-password-field-meter" data-level={level}>
          <span className="eq-password-field-bar" aria-hidden="true">
            {[1, 2, 3, 4].map((n) => (
              <span key={n} className="eq-password-field-segment" data-on={n <= level || undefined} />
            ))}
          </span>
          <span className="eq-password-field-word" aria-live="polite">
            <span className="eq-password-field-sr">Strength: </span>
            {level === 0 ? "None" : words[level - 1]}
          </span>
        </div>
      )}
      {requirements.length > 0 && (
        <ul className="eq-password-field-requirements" id={reqsId}>
          {requirements.map((r, i) => (
            <li key={r.label} className="eq-password-field-requirement" data-met={met[i] || undefined}>
              <svg className="eq-password-field-tick" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <circle cx="8" cy="8" r="1.5" fill="currentColor" stroke="none" />
                <path d="m4.5 8.25 2.25 2.25 4.75-5" pathLength="1" />
              </svg>
              {r.label}
              <span className="eq-password-field-sr">{met[i] ? ", met" : ", not met"}</span>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}