Código de recuperación.

<form class="ui-sample ui-auth-fragment" data-auth-source="cis-auth-authentik" data-backup-code="true"><h3>Código de recuperación</h3><p>Cada código se usa una sola vez. No lo compartas.</p><label for="backup-code-0">Código</label><input class="input ui-one-time-code" id="backup-code-0" autoComplete="one-time-code" required="" value=""/><button class="btn btn--primary" type="submit">Continuar</button><a class="btn btn--quiet" href="#mfa">Volver al segundo factor</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-backup-code="true"><h3>Código de recuperación</h3><p>Cada código se usa una sola vez. No lo compartas.</p><label for="backup-code-0">Código</label><input class="input ui-one-time-code border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" id="backup-code-0" autoComplete="one-time-code" required="" 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">Continuar</button><a class="btn btn--quiet underline underline-offset-4" href="#mfa">Volver al segundo factor</a></form>

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

export interface BackupCodeProps {
  title?: string;
  /** Indicación sobre el uso del código. */
  description?: string;
  /** Ruta que recibe el formulario; sin ella, el navegador envía a la URL actual. */
  action?: string;
  /** Pasa `post`: sin `method`, el navegador envía por GET y el código queda en la URL y en el historial. */
  method?: "post" | "get";
  onSubmit?: FormEventHandler<HTMLFormElement>;
  /** Etiqueta visible del campo del código. */
  label?: string;
  /** Id del campo del código. Usa uno distinto por campo en la página. */
  id?: string;
  name?: string;
  /** Valor inicial de un campo no controlado. */
  defaultValue?: string;
  /** Valor de un campo controlado; va junto con `onChange`. */
  value?: string;
  /** Se llama en cada cambio, con o sin `value`. */
  onChange?: ChangeEventHandler<HTMLInputElement>;
  /** Texto del botón que envía el formulario. */
  submitLabel?: string;
  /** Texto del enlace de vuelta al segundo factor. */
  mfaLabel?: string;
  mfaHref?: string;
  className?: string;
}

/**
 * Formulario para ingresar un código de recuperación, cuando la persona no tiene a mano su segundo factor.
 *
 * Cada código sirve una vez; el enlace vuelve a la verificación en dos pasos.
 * Para enviar sin JavaScript, pasa `action` y `method="post"`; así el código no queda en la URL.
 *
 * @example <BackupCode id="recuperacion" name="backup_code" action="/auth/backup" method="post" />
 * @example <BackupCode id="recuperacion" value={codigo} onChange={cambiar} onSubmit={continuar} />
 */
export function BackupCode({
  title = "Código de recuperación",
  description = "Cada código se usa una sola vez. No lo compartas.",
  action,
  method,
  onSubmit,
  label = "Código",
  id = "backup-code-0",
  name,
  defaultValue = "",
  value,
  onChange,
  submitLabel = "Continuar",
  mfaLabel = "Volver al segundo factor",
  mfaHref = "#mfa",
  className,
}: BackupCodeProps) {
  const controlado = value !== undefined && onChange !== undefined;
  return (
    <form
      className={["ui-auth-fragment", className].filter(Boolean).join(" ")}
      data-auth-source="cis-auth-authentik"
      data-backup-code
      action={action}
      method={method}
      onSubmit={onSubmit}
    >
      <h3>{title}</h3>
      {description ? <p>{description}</p> : null}
      <label htmlFor={id}>{label}</label>
      <input
        className="input ui-one-time-code"
        id={id}
        name={name}
        autoComplete="one-time-code"
        required
        {...(controlado ? { value, onChange } : { defaultValue: value ?? defaultValue, onChange })}
      />
      <button className="btn btn--primary" type="submit">{submitLabel}</button>
      {mfaLabel ? <a className="btn btn--quiet" href={mfaHref}>{mfaLabel}</a> : null}
    </form>
  );
}