Consentimiento de acceso.

<section class="ui-sample ui-form ui-consent" data-oauth-consent="true"><header class="ui-consent-app"><span aria-hidden="true"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 5h14v10H9l-4 4V5Z"></path><path d="M9 9h6M9 12h4"></path></svg></span><div><h3>Comentario solicita acceso</h3><p>Conectará con tu cuenta de la Compañía.</p></div></header><p>La aplicación podrá:</p><ul class="ui-permission-list"><li><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="3"></circle><path d="M6 20c0-3 2-6 6-6s6 3 6 6"></path></svg><span><strong>Leer tu identidad básica</strong><small>Nombre, correo y organización activa.</small></span></li><li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 4h14v16H5zM8 8h8M8 12h6"></path></svg><span><strong>Mantener una sesión en este dispositivo</strong><small>La sesión seguirá abierta hasta que la cierres.</small></span></li></ul><p class="ui-consent__limit">No podrá enviar ni publicar sin una aprobación separada.</p><p class="ui-consent__consequence" data-rejection-consequence="true">Si cancelas, volverás a Comentario sin conectar esta cuenta.</p><div class="ui-actions"><button class="btn btn--primary" type="button">Permitir acceso</button><button class="btn btn--quiet" type="button">Cancelar</button></div></section>

<section class="ui-sample ui-form ui-consent border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-oauth-consent="true"><header class="ui-consent-app flex flex-wrap items-center justify-between gap-3"><span aria-hidden="true"><svg class="h-auto w-full" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 5h14v10H9l-4 4V5Z"></path><path d="M9 9h6M9 12h4"></path></svg></span><div><h3>Comentario solicita acceso</h3><p>Conectará con tu cuenta de la Compañía.</p></div></header><p>La aplicación podrá:</p><ul class="ui-permission-list grid gap-2"><li><svg class="h-auto w-full" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="3"></circle><path d="M6 20c0-3 2-6 6-6s6 3 6 6"></path></svg><span><strong>Leer tu identidad básica</strong><small class="text-sm text-slate-600">Nombre, correo y organización activa.</small></span></li><li><svg class="h-auto w-full" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 4h14v16H5zM8 8h8M8 12h6"></path></svg><span><strong>Mantener una sesión en este dispositivo</strong><small class="text-sm text-slate-600">La sesión seguirá abierta hasta que la cierres.</small></span></li></ul><p class="ui-consent__limit">No podrá enviar ni publicar sin una aprobación separada.</p><p class="ui-consent__consequence" data-rejection-consequence="true">Si cancelas, volverás a Comentario sin conectar esta cuenta.</p><div class="ui-actions"><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="button">Permitir acceso</button><button class="btn btn--quiet border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Cancelar</button></div></section>

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

export interface OauthConsentPermission {
  /** Qué podrá hacer la aplicación, en una frase corta. */
  label: string;
  /** Alcance o límite del permiso. */
  description?: string;
  /** `person` para datos de identidad; `document` para contenido y sesiones. */
  icon?: "person" | "document";
}

export interface OauthConsentProps {
  /** Encabezado con el nombre de la aplicación que pide acceso. */
  title?: string;
  /** Ícono de la aplicación en el encabezado, un `<svg viewBox="0 0 24 24">` de trazo; por defecto, la burbuja de Comentario. Cámbialo junto con `title` y `consequence`. */
  appIcon?: ReactNode;
  /** Con qué cuenta se conectará la aplicación. */
  description?: string;
  /** Texto que presenta la lista de permisos. */
  permissionsLabel?: string;
  permissions?: OauthConsentPermission[];
  /** Lo que la aplicación no podrá hacer con este acceso. */
  limit?: string;
  /** Qué pasa si la persona cancela. */
  consequence?: string;
  allowLabel?: string;
  onAllow?: MouseEventHandler<HTMLButtonElement>;
  cancelLabel?: string;
  onCancel?: MouseEventHandler<HTMLButtonElement>;
  className?: string;
}

const OAUTH_CONSENT_PERMISSIONS: OauthConsentPermission[] = [
  { label: "Leer tu identidad básica", description: "Nombre, correo y organización activa.", icon: "person" },
  { label: "Mantener una sesión en este dispositivo", description: "La sesión seguirá abierta hasta que la cierres.", icon: "document" },
];

/**
 * Pantalla de consentimiento OAuth, para cuando una aplicación pide acceso a la cuenta de la persona.
 *
 * Lista los permisos, el límite del acceso y la consecuencia de cancelar antes de las acciones.
 *
 * @example <OauthConsent title="Datos solicita acceso" appIcon={<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 19V9M12 19V5M19 19v-7" /></svg>} permissions={[{ label: "Leer tu identidad básica", description: "Nombre y correo.", icon: "person" }]} consequence="Si cancelas, volverás a Datos sin conectar esta cuenta." onAllow={permitir} onCancel={cancelar} />
 */
export function OauthConsent({
  title = "Comentario solicita acceso",
  appIcon,
  description = "Conectará con tu cuenta de la Compañía.",
  permissionsLabel = "La aplicación podrá:",
  permissions = OAUTH_CONSENT_PERMISSIONS,
  limit = "No podrá enviar ni publicar sin una aprobación separada.",
  consequence = "Si cancelas, volverás a Comentario sin conectar esta cuenta.",
  allowLabel = "Permitir acceso",
  onAllow,
  cancelLabel = "Cancelar",
  onCancel,
  className,
}: OauthConsentProps) {
  return (
    <section className={["ui-form ui-consent", className].filter(Boolean).join(" ")} data-oauth-consent>
      <header className="ui-consent-app">
        <span aria-hidden="true">
          {appIcon ?? <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 5h14v10H9l-4 4V5Z"></path><path d="M9 9h6M9 12h4"></path></svg>}
        </span>
        <div>
          <h3>{title}</h3>
          {description ? <p>{description}</p> : null}
        </div>
      </header>
      {permissions.length ? (
        <>
          {permissionsLabel ? <p>{permissionsLabel}</p> : null}
          <ul className="ui-permission-list">
            {permissions.map((permission, i) => (
              <li key={i}>
                {permission.icon === "person" ? (
                  <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="3"></circle><path d="M6 20c0-3 2-6 6-6s6 3 6 6"></path></svg>
                ) : (
                  <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 4h14v16H5zM8 8h8M8 12h6"></path></svg>
                )}
                <span>
                  <strong>{permission.label}</strong>
                  {permission.description ? <small>{permission.description}</small> : null}
                </span>
              </li>
            ))}
          </ul>
        </>
      ) : null}
      {limit ? <p className="ui-consent__limit">{limit}</p> : null}
      {consequence ? <p className="ui-consent__consequence" data-rejection-consequence>{consequence}</p> : null}
      <div className="ui-actions">
        <button className="btn btn--primary" type="button" onClick={onAllow}>{allowLabel}</button>
        <button className="btn btn--quiet" type="button" onClick={onCancel}>{cancelLabel}</button>
      </div>
    </section>
  );
}