Recuperación de acceso.

<form class="ui-sample ui-auth-fragment" data-auth-source="cis-auth-authentik" data-recovery-form="true"><h3>Recuperar acceso</h3><p>Si el correo corresponde a una cuenta, enviaremos instrucciones. No confirmamos si la cuenta existe.</p><label for="recovery-form-0">Correo electrónico</label><input class="input" id="recovery-form-0" type="email" autoComplete="email" value=""/><button class="btn btn--primary" type="submit">Enviar instrucciones</button><a class="btn btn--quiet" href="#login">Volver a iniciar sesión</a></form>

<form class="ui-sample ui-auth-fragment border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-auth-source="cis-auth-authentik" data-recovery-form="true"><h3>Recuperar acceso</h3><p>Si el correo corresponde a una cuenta, enviaremos instrucciones. No confirmamos si la cuenta existe.</p><label for="recovery-form-0">Correo electrónico</label><input class="input border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" id="recovery-form-0" type="email" autoComplete="email" value=""/><button class="btn btn--primary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="submit">Enviar instrucciones</button><a class="btn btn--quiet underline underline-offset-4" href="#login">Volver a iniciar sesión</a></form>

import type { ChangeEventHandler, FormEventHandler } from "react";

export interface RecoveryFormProps {
  title?: string;
  /** Explicación bajo el título; no debe confirmar si la cuenta existe. */
  description?: string;
  /** Etiqueta visible del campo de correo. */
  label?: string;
  /** Id del campo de correo. Usa uno distinto por formulario en la página. */
  id?: string;
  /** Nombre del campo en el envío; sin él, un formulario con `action` no manda el correo. */
  name?: string;
  /** Correo inicial de un campo no controlado. */
  defaultValue?: string;
  /** Correo de un campo controlado; va junto con `onChange`. */
  value?: string;
  onChange?: ChangeEventHandler<HTMLInputElement>;
  /** Texto del botón que envía el formulario. */
  submitLabel?: string;
  /** Texto del enlace para volver al acceso; se muestra como acción terciaria (`btn--quiet`). */
  backLabel?: string;
  backHref?: string;
  /** Destino del formulario; sin JavaScript, el envío va ahí. */
  action?: string;
  method?: "get" | "post";
  onSubmit?: FormEventHandler<HTMLFormElement>;
  className?: string;
}

/**
 * Formulario para pedir instrucciones de recuperación de acceso a partir de un correo, con enlace de vuelta al inicio de sesión; se abre desde «¿Problemas con tu cuenta?» de la tarjeta de acceso.
 *
 * La respuesta es la misma exista o no la cuenta: el texto no confirma si el correo está registrado.
 *
 * @example <RecoveryForm id="recuperar" action="/auth/recuperar" method="post" backHref="/auth/login" />
 * @example <RecoveryForm id="recuperar" defaultValue="martin@example.cl" />
 */
export function RecoveryForm({
  title = "Recuperar acceso",
  description = "Si el correo corresponde a una cuenta, enviaremos instrucciones. No confirmamos si la cuenta existe.",
  label = "Correo electrónico",
  id = "recovery-form-0",
  name,
  defaultValue = "",
  value,
  onChange,
  submitLabel = "Enviar instrucciones",
  backLabel = "Volver a iniciar sesión",
  backHref = "#login",
  action,
  method,
  onSubmit,
  className,
}: RecoveryFormProps) {
  const controlado = value !== undefined && onChange !== undefined;
  return (
    <form
      className={["ui-auth-fragment", className].filter(Boolean).join(" ")}
      data-auth-source="cis-auth-authentik"
      data-recovery-form
      action={action}
      method={method}
      onSubmit={onSubmit}
    >
      {title ? <h3>{title}</h3> : null}
      {description ? <p>{description}</p> : null}
      <label htmlFor={id}>{label}</label>
      <input
        className="input"
        id={id}
        name={name}
        type="email"
        autoComplete="email"
        {...(controlado ? { value, onChange } : { defaultValue: value ?? defaultValue })}
      />
      <button className="btn btn--primary" type="submit">{submitLabel}</button>
      {backLabel ? <a className="btn btn--quiet" href={backHref}>{backLabel}</a> : null}
    </form>
  );
}