Registro de cuenta.

<form class="ui-sample ui-auth-fragment" data-auth-source="cis-auth-authentik" data-registration-form="true" action="/auth/register" method="post"><h3>Crear cuenta</h3><p>Con la misma cuenta entras a los demás servicios de la Compañía.</p><label for="registration-form-0-name">Nombre</label><input class="input" id="registration-form-0-name" autoComplete="name" required="" name="name"/><label for="registration-form-0-email">Correo electrónico</label><input class="input" id="registration-form-0-email" type="email" autoComplete="email" required="" name="email"/><label class="ui-choice"><input type="checkbox" required=""/><span>Acepto los términos y la política de privacidad</span></label><button class="btn btn--primary" type="submit">Crear cuenta</button><a class="btn btn--quiet" href="#login">Ya tengo una cuenta</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-registration-form="true" action="/auth/register" method="post"><h3>Crear cuenta</h3><p>Con la misma cuenta entras a los demás servicios de la Compañía.</p><label for="registration-form-0-name">Nombre</label><input class="input border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" id="registration-form-0-name" autoComplete="name" required="" name="name"/><label for="registration-form-0-email">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="registration-form-0-email" type="email" autoComplete="email" required="" name="email"/><label class="ui-choice"><input class="border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" type="checkbox" required=""/><span>Acepto los términos y la política de privacidad</span></label><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">Crear cuenta</button><a class="btn btn--quiet underline underline-offset-4" href="#login">Ya tengo una cuenta</a></form>

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

export interface RegistrationFormProps {
  title?: string;
  /** Para qué sirve la cuenta. */
  description?: string;
  /** Ruta que recibe el formulario de registro. */
  action?: string;
  method?: "post" | "get";
  onSubmit?: FormEventHandler<HTMLFormElement>;
  /** Prefijo de ids: los campos usan `${id}-name` y `${id}-email`. Usa uno distinto por formulario en la página. */
  id?: string;
  /** Etiqueta del campo de nombre. */
  nameLabel?: string;
  /** Etiqueta del campo de correo. */
  emailLabel?: string;
  /** Texto de la casilla obligatoria; admite enlaces a los términos y a la política. */
  termsLabel?: ReactNode;
  /** Nombre de la casilla en el envío; sin él, el servidor no recibe la aceptación. */
  termsName?: string;
  /** Texto del botón que envía el formulario. */
  submitLabel?: string;
  /** Texto del enlace para quien ya tiene cuenta; se muestra como acción terciaria (`btn--quiet`). */
  loginLabel?: string;
  loginHref?: string;
  className?: string;
}

/**
 * Formulario de registro con nombre, correo y aceptación de términos, para crear la cuenta que comparten los servicios de la Compañía.
 *
 * Funciona sin JavaScript: envía por `POST` a `action`. Los tres campos son obligatorios.
 *
 * @example <RegistrationForm id="registro" termsName="terms" loginHref="/auth/login" />
 * @example <RegistrationForm id="registro" termsLabel={<>Acepto los <a href="/terminos">términos</a> y la <a href="/privacidad">política de privacidad</a></>} />
 */
export function RegistrationForm({
  title = "Crear cuenta",
  description = "Con la misma cuenta entras a los demás servicios de la Compañía.",
  action = "/auth/register",
  method = "post",
  onSubmit,
  id = "registration-form-0",
  nameLabel = "Nombre",
  emailLabel = "Correo electrónico",
  termsLabel = "Acepto los términos y la política de privacidad",
  termsName,
  submitLabel = "Crear cuenta",
  loginLabel = "Ya tengo una cuenta",
  loginHref = "#login",
  className,
}: RegistrationFormProps) {
  return (
    <form
      className={["ui-auth-fragment", className].filter(Boolean).join(" ")}
      data-auth-source="cis-auth-authentik"
      data-registration-form
      action={action}
      method={method}
      onSubmit={onSubmit}
    >
      <h3>{title}</h3>
      {description ? <p>{description}</p> : null}
      <label htmlFor={`${id}-name`}>{nameLabel}</label>
      <input className="input" id={`${id}-name`} name="name" autoComplete="name" required />
      <label htmlFor={`${id}-email`}>{emailLabel}</label>
      <input className="input" id={`${id}-email`} name="email" type="email" autoComplete="email" required />
      <label className="ui-choice">
        <input type="checkbox" name={termsName} required />
        <span>{termsLabel}</span>
      </label>
      <button className="btn btn--primary" type="submit">{submitLabel}</button>
      {loginLabel ? <a className="btn btn--quiet" href={loginHref}>{loginLabel}</a> : null}
    </form>
  );
}