Password FieldPassword Field

"use client";

import * as React from "react";
import { PasswordField } from "@/components/ui/notchset/password-field";

export function SignInPassword({ signIn }: { signIn: (password: string) => Promise<boolean> }) {
  const [password, setPassword] = React.useState("");
  const [error, setError] = React.useState<string | undefined>();
  const [attempts, setAttempts] = React.useState(0);
  const [pending, setPending] = React.useState(false);
  // Only the latest attempt may report: a slow failure can't land after a later success.
  const attempt = React.useRef(0);
  return (
    <form
      onSubmit={async (e) => {
        e.preventDefault();
        if (pending) return;
        const id = ++attempt.current;
        setPending(true);
        setError(undefined);
        try {
          const ok = await signIn(password);
          if (id !== attempt.current || ok) return;
          setError("That password doesn't match.");
          setAttempts((a) => a + 1);
        } catch {
          if (id === attempt.current) setError("Couldn't reach sign-in. Try again.");
        } finally {
          if (id === attempt.current) setPending(false);
        }
      }}
    >
      <PasswordField
        value={password}
        onValueChange={(v) => {
          setPassword(v);
          setError(undefined);
        }}
        error={error}
        shake={attempts}
        forgotHref="/reset"
      />
      <button type="submit" disabled={pending}>
        {pending ? "Signing in…" : "Sign in"}
      </button>
    </form>
  );
}