Acceso por correo.

<form class="ui-sample ui-auth-fragment" data-auth-source="cis-auth-authentik" data-auth-email-step="true" action="/auth/login" method="post"><a class="btn btn--quiet" href="#metodos">Volver a otros métodos</a><h3>Continuar con correo</h3><label for="auth-email-step-0">Correo electrónico</label><input class="input" id="auth-email-step-0" type="email" autoComplete="email" required="" name="email"/><button class="btn btn--primary" type="submit">Continuar</button></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-auth-email-step="true" action="/auth/login" method="post"><a class="btn btn--quiet underline underline-offset-4" href="#metodos">Volver a otros métodos</a><h3>Continuar con correo</h3><label for="auth-email-step-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="auth-email-step-0" type="email" autoComplete="email" required="" name="email"/><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></form>

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

export interface AuthEmailStepProps {
  /** Muestra la confirmación de envío del enlace en vez del campo de correo. */
  sent?: boolean;
  /** Texto del enlace para volver a los otros métodos de acceso. */
  backLabel?: string;
  backHref?: string;
  /** Título mientras se pide el correo. */
  title?: 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;
  name?: string;
  /** Correo inicial de un campo no controlado; tras el envío, se muestra en el mensaje. */
  defaultValue?: string;
  /** Correo de un campo controlado; va junto con `onChange`. */
  value?: string;
  onChange?: ChangeEventHandler<HTMLInputElement>;
  /** Texto del botón que envía el correo. */
  submitLabel?: string;
  /** Destino del formulario; sin JavaScript, el envío va ahí. */
  action?: string;
  method?: "get" | "post";
  onSubmit?: FormEventHandler<HTMLFormElement>;
  /** Título tras enviar el enlace. */
  sentTitle?: string;
  /** Párrafo bajo `sentTitle` tras enviar el enlace; por defecto nombra el correo ingresado. */
  sentDescription?: string;
  /** Texto del botón que pide otro enlace. */
  resendLabel?: string;
  onResend?: MouseEventHandler<HTMLButtonElement>;
  className?: string;
}

/**
 * Paso de acceso con correo de cis-auth: pide el correo y luego confirma que se envió un enlace de acceso; se usa cuando la persona elige entrar con correo en vez de un proveedor.
 *
 * Con `sent`, el campo se reemplaza por el mensaje de confirmación y un botón para enviar otro enlace. El enlace para volver usa el botón discreto del kit.
 *
 * @example <AuthEmailStep id="correo" action="/auth/login" method="post" backHref="/auth" />
 * @example <AuthEmailStep sent defaultValue="martin@example.cl" onResend={reenviar} />
 */
export function AuthEmailStep({
  sent = false,
  backLabel = "Volver a otros métodos",
  backHref = "#metodos",
  title = "Continuar con correo",
  label = "Correo electrónico",
  id = "auth-email-step-0",
  name = "email",
  defaultValue,
  value,
  onChange,
  submitLabel = "Continuar",
  action = "/auth/login",
  method = "post",
  onSubmit,
  sentTitle = "Revisa tu correo",
  sentDescription,
  resendLabel = "Enviar otra vez",
  onResend,
  className,
}: AuthEmailStepProps) {
  const controlado = value !== undefined && onChange !== undefined;
  const correo = value ?? defaultValue;
  return (
    <form
      className={["ui-auth-fragment", className].filter(Boolean).join(" ")}
      data-auth-source="cis-auth-authentik"
      data-auth-email-step
      action={action}
      method={method}
      onSubmit={onSubmit}
    >
      {backLabel ? <a className="btn btn--quiet" href={backHref}>{backLabel}</a> : null}
      {sent ? (
        <>
          {sentTitle ? <h3>{sentTitle}</h3> : null}
          <p>{sentDescription ?? `Enviamos un enlace de acceso a ${correo || "tu correo"}.`}</p>
          <button className="btn btn--secondary" type="button" onClick={onResend}>{resendLabel}</button>
        </>
      ) : (
        <>
          {title ? <h3>{title}</h3> : null}
          <label htmlFor={id}>{label}</label>
          <input
            className="input"
            id={id}
            name={name}
            type="email"
            autoComplete="email"
            required
            {...(controlado ? { value, onChange } : { defaultValue: correo })}
          />
          <button className="btn btn--primary" type="submit">{submitLabel}</button>
        </>
      )}
    </form>
  );
}