Editar los detalles de la organización

Edita los detalles de la organización, incluidos el nombre, el nombre para mostrar, los colores de marca y el logotipo.

El componente OrganizationDetailsEdit proporciona una interfaz unificada para editar los datos de su organización.

React

​

Requisitos de configuración

Configuración de Auth0 requerida - Asegúrese de que su inquilino tenga configurada la API My Organization. Ver la guía de configuración →

​

Instalación

pnpm

pnpm add @auth0/universal-components-react

Al ejecutar cualquiera de los dos comandos, también se instala la dependencia @auth0/universal-components-core para utilidades compartidas y la integración de Auth0.

​

Primeros pasos

import { OrganizationDetailsEdit } from "@auth0/universal-components-react/spa";
import { useNavigate } from "react-router-dom";

export function OrganizationSettingsPage() {
  const navigate = useNavigate();

  return (
    <OrganizationDetailsEdit
      saveAction={{
        onAfter: () => navigate("/organization"),
      }}
      backButton={{
        onClick: () => navigate("/organization"),
      }}
    />
  );
}

Ejemplo completo de integración

import React from "react";
import { OrganizationDetailsEdit } from "@auth0/universal-components-react/spa";
import { Auth0Provider } from "@auth0/auth0-react";
import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
import { useNavigate } from "react-router-dom";
import { analytics } from "./lib/analytics";

function OrganizationSettingsPage() {
  const navigate = useNavigate();

  const handleSaveSuccess = (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    navigate("/organization");
  };

  return (
    <div className="max-w-2xl mx-auto p-6">
      <OrganizationDetailsEdit
        schema={{
          details: {
            displayName: {
              required: true,
              maxLength: 100,
            },
            color: {
              regex: /^#[0-9A-Fa-f]{6}$/,
              errorMessage: "Enter a valid hex color",
            },
          },
        }}
        saveAction={{
          onBefore: (org) => {
            return confirm(`Save changes to "${org.display_name}"?`);
          },
          onAfter: handleSaveSuccess,
        }}
        cancelAction={{
          onBefore: () => confirm("Discard unsaved changes?"),
          onAfter: () => navigate("/organization"),
        }}
        backButton={{
          onClick: () => navigate("/organization"),
        }}
        customMessages={{
          header: {
            title: "Organization Settings",
          },
          notifications: {
            save_success: "Settings saved successfully!",
          },
        }}
        styling={{
          variables: {
            common: {
              "--color-primary": "#059669",
            },
          },
          classes: {
            "OrganizationDetailsEdit-form": "shadow-xl rounded-lg",
          },
        }}
      />
    </div>
  );
}

export default function App() {
  const domain = "your-domain.auth0.com";
  const clientId = "your-client-id";

  return (
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
      interactiveErrorHandler="popup" // Necesario para gestionar los desafíos de autenticación step-up mediante el popup de Universal Login
    >
      <Auth0ComponentProvider domain={domain}>
        <OrganizationSettingsPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

​

Props

​

Props obligatorias

Las props requeridas son fundamentales para el funcionamiento del componente. OrganizationDetailsEdit no tiene props requeridas: carga automáticamente los detalles de la organización actual desde la API My Organization.

---

​

Propiedades de visualización

Las props de visualización controlan cómo se renderiza el componente sin afectar su comportamiento. Úsalas para ocultar secciones o habilitar el modo de solo lectura.

Propiedad	Tipo	Descripción
readOnly	boolean	Deshabilita todos los campos del formulario. Valor predeterminado: false
hideHeader	boolean	Oculta la sección de encabezado. Valor predeterminado: false

---

​

Props de Action

Las props de Action gestionan las interacciones del usuario y definen qué ocurre cuando los usuarios guardan o cancelan cambios. Usa los hooks de ciclo de vida (onBefore, onAfter) para integrarlos con el enrutamiento y los análisis de tu aplicación.

Propiedad	Tipo	Descripción
saveAction	ComponentAction<OrganizationPrivate>	Acción para guardar los cambios.
cancelAction	ComponentAction<OrganizationPrivate>	Acción para cancelar o descartar los cambios.
backButton	Object	Configuración del botón de retroceso.

saveAction

Type: ComponentAction<OrganizationPrivate>

Controla el flujo de guardado cuando los usuarios envían cambios en la organización. Usa onAfter para redirigir al usuario tras un guardado exitoso.

Propiedades:

• disabled - Deshabilita el botón Guardar (p. ej., mientras hay otra operación en curso)
• onBefore(data) - Se ejecuta antes de la operación de guardado. Devuelve false para evitar que se guarde (por ejemplo, para mostrar primero un cuadro de diálogo de confirmación).
• onAfter(data) - Se ejecuta después de que la organización se haya guardado correctamente. Úselo para salir de la página o registrar el evento.

Ejemplo:

// Volver atrás después de guardar
saveAction={{
  onAfter: () => navigate("/organization"),
}}

// Agregar confirmación antes de guardar
saveAction={{
  onBefore: (org) => {
    return confirm(`Save changes to "${org.display_name}"?`);
  },
  onAfter: () => navigate("/organization"),
}}

// Registrar analíticas al guardar
saveAction={{
  onAfter: (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    navigate("/organization");
  },
}}

---

cancelAction

Type: ComponentAction<OrganizationPrivate>

Controla el flujo de cancelación/descarte. Usa esta acción para gestionar los cambios descartados.

Propiedades:

• disabled - Deshabilita el botón Cancelar
• onBefore(data) - Se ejecuta antes de cancelar. Devuelve false para evitar la cancelación (por ejemplo, para confirmar si se deben descartar los cambios sin guardar).
• onAfter(data) - Se ejecuta después de confirmar la cancelación. Úsalo para salir del formulario.

Ejemplo:

<OrganizationDetailsEdit
  cancelAction={{
    onBefore: (org) => {
      return confirm("Discard unsaved changes?");
    },
    onAfter: () => navigate("/organization"),
  }}
/>

---

backButton

Type: { icon?: LucideIcon; onClick: (e: MouseEvent) => void }

Configura el botón de retroceso en el encabezado del componente. Úsalo para volver a la descripción general de tu organización o a la página anterior.

Propiedades:

• icon - componente de icono personalizado de Lucide (opcional; el valor predeterminado es ArrowLeft)
• onClick - Manejador de clic para la navegación

Ejemplo:

import { ChevronLeft } from "lucide-react";

<OrganizationDetailsEdit
  backButton={{
    icon: ChevronLeft,
    onClick: () => navigate("/organization"),
  }}
/>;

---

​

Props de personalización

Las props de personalización te permiten adaptar el componente a tu marca, configuración regional y requisitos de validación sin modificar el código fuente.

Propiedad	Tipo	Descripción
schema	OrganizationDetailsEditSchemas	Reglas de validación de campos.
customMessages	Partial<OrganizationDetailsEditMessages>	Sobrescrituras de textos de i18n.
styling	ComponentStyling<OrganizationEditClasses>	Variables CSS y sobrescrituras de clases.

schema

Establece reglas de validación personalizadas para los campos de detalles de la organización.

Campos del esquema disponibles

Todos los campos del esquema admiten: regex, errorMessage, minLength, maxLength, required

details.name - nombre interno de la organización details.displayName - nombre visible de la organización details.color - color de la marca (formato hexadecimal) details.logoURL - URL del logotipo

<OrganizationDetailsEdit
  schema={{
    details: {
      name: {
        minLength: 3,
        maxLength: 50,
        regex: /^[a-zA-Z0-9-_]+$/,
        errorMessage: "Name must be alphanumeric with hyphens/underscores",
      },
      displayName: {
        required: true,
        maxLength: 100,
      },
      color: {
        regex: /^#[0-9A-Fa-f]{6}$/,
        errorMessage: "Enter a valid hex color (e.g., #FF5500)",
      },
      logoURL: {
        regex: /^https:\/\/.+/,
        errorMessage: "Logo URL must use HTTPS",
      },
    },
  }}
/>

---

customMessages

Personaliza todos los textos y traducciones. Todos los campos son opcionales y, si no se especifican, se usan los valores predeterminados.

Messages disponibles

header - Encabezado del componente

• title, description, back_button_text

form - Campos del formulario

• fields.name - label, placeholder, helper_text, error
• fields.display_name - label, placeholder, helper_text, error
• fields.color - label, placeholder, helper_text, error
• fields.logo_url - label, placeholder, helper_text, error

actions - Etiquetas de los botones

• save_button_text, cancel_button_text

notifications - Respuestas de la API

• save_success, save_error, general_error

<OrganizationDetailsEdit
  customMessages={{
    header: {
      title: "Edit Organization",
      description: "Update your organization's settings",
    },
    form: {
      fields: {
        name: {
          label: "Organization ID",
          helper_text: "Internal identifier (cannot be changed after creation)",
        },
        display_name: {
          label: "Organization Name",
          placeholder: "Enter display name",
        },
      },
    },
    notifications: {
      save_success: "Organization updated successfully!",
    },
  }}
/>

---

styling

Personaliza la apariencia con variables CSS y sobrescrituras de clases. Compatible con estilos adaptados al tema.

Opciones de estilo disponibles

Variables - propiedades personalizadas de CSS

• common - Se aplica a todos los temas
• light - Solo para el tema claro
• dark - Solo para el tema oscuro

Clases - sobrescrituras de clases de componentes

• OrganizationDetailsEdit-header
• OrganizationDetailsEdit-form
• OrganizationDetailsEdit-actions

<OrganizationDetailsEdit
  styling={{
    variables: {
      common: {
        "--font-size-title": "1.5rem",
      },
      light: {
        "--color-primary": "#059669",
      },
    },
    classes: {
      "OrganizationDetailsEdit-form": "shadow-lg rounded-xl p-6",
    },
  }}
/>

---

​

Personalización avanzada

El componente OrganizationDetailsEdit está compuesto por subcomponentes y hooks más pequeños. Puedes importarlos individualmente para crear flujos de trabajo de edición de organizaciones personalizados si usas shadcn.

​

Subcomponentes disponibles

Para casos de uso avanzados, puede importar subcomponentes individuales para crear interfaces personalizadas de edición de organización.

Componente	Descripción
OrganizationForm	Componente principal del formulario con todos los campos
ColorPickerField	Campo de selección del color de la marca
LogoUploadField	Campo de URL del logotipo con vista previa

​

Hooks disponibles

Estos hooks proporcionan la lógica subyacente sin ninguna interfaz de usuario. Úsalos para crear interfaces completamente personalizadas y aprovechar la integración con la API de Auth0.

Hook	Descripción
useOrganizationDetailsEdit	Lógica de edición de organizaciones e integración con la API

Next.js

​

Requisitos de configuración

Se requiere configuración de Auth0 - Asegúrese de que su inquilino tenga configurada la API My Organization. Ver la guía de configuración →

​

Instalación

npm (Recommended)

npm install @auth0/universal-components-react

Al ejecutar los comandos de npm o pnpm, se instala la dependencia @auth0/universal-components-core para las utilidades compartidas y la integración de Auth0.

​

Primeros pasos

page.tsx

import { OrganizationDetailsEdit } from "@auth0/universal-components-react/rwa";
import { useRouter } from "next/navigation";

export function OrganizationSettingsPage() {
  const router = useRouter();

  return (
    <OrganizationDetailsEdit
      saveAction={{
        onAfter: () => router.push("/organization"),
      }}
      backButton={{
        onClick: () => router.push("/organization"),
      }}
    />
  );
}

Ejemplo completo de integración

import React from "react";
import { OrganizationDetailsEdit } from "@auth0/universal-components-react/rwa";
import { useRouter } from "next/navigation";
import { analytics } from "./lib/analytics";

function OrganizationSettingsPage() {
  const router = useRouter();

  const handleSaveSuccess = (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    router.push("/organization");
  };

  return (
    <div className="max-w-2xl mx-auto p-6">
      <OrganizationDetailsEdit
        schema={{
          details: {
            displayName: {
              required: true,
              maxLength: 100,
            },
            color: {
              regex: /^#[0-9A-Fa-f]{6}$/,
              errorMessage: "Enter a valid hex color",
            },
          },
        }}
        saveAction={{
          onBefore: (org) => {
            return confirm(`Save changes to "${org.display_name}"?`);
          },
          onAfter: handleSaveSuccess,
        }}
        cancelAction={{
          onBefore: () => confirm("Discard unsaved changes?"),
          onAfter: () => router.push("/organization"),
        }}
        backButton={{
          onClick: () => router.push("/organization"),
        }}
        customMessages={{
          header: {
            title: "Organization Settings",
          },
          notifications: {
            save_success: "Settings saved successfully!",
          },
        }}
        styling={{
          variables: {
            common: {
              "--color-primary": "#059669",
            },
          },
          classes: {
            "OrganizationDetailsEdit-form": "shadow-xl rounded-lg",
          },
        }}
      />
    </div>
  );
}

export default OrganizationSettingsPage;

​

Props

​

Props principales

Las props principales son fundamentales para el funcionamiento del componente. OrganizationDetailsEdit no tiene props obligatorias: carga automáticamente los detalles de la organización actual desde la API My Organization.

---

​

Propiedades de visualización

Las props de visualización controlan cómo se renderiza el componente sin afectar su comportamiento. Úsalas para ocultar secciones o habilitar el modo de solo lectura.

Propiedad	Tipo	Descripción
readOnly	boolean	Desactiva todos los campos del formulario. Valor predeterminado: false
hideHeader	boolean	Oculta la sección de encabezado. Valor predeterminado: false

---

​

Props de Action

Las props de Action gestionan las interacciones del usuario y definen qué ocurre cuando los usuarios guardan o cancelan cambios. Usa los hooks de ciclo de vida (onBefore, onAfter) para integrarte con el enrutamiento y los análisis de tu aplicación.

Propiedad	Tipo	Descripción
saveAction	ComponentAction<OrganizationPrivate>	Acción para guardar los cambios.
cancelAction	ComponentAction<OrganizationPrivate>	Acción para cancelar o descartar los cambios.
backButton	Object	Configuración del botón de retroceso.

saveAction

Type: ComponentAction<OrganizationPrivate>

Controla el flujo de guardado cuando los usuarios envían cambios en la organización. Usa onAfter para navegar a otra página tras guardar correctamente.

Propiedades:

• disabled - Desactiva el botón Guardar (p. ej., mientras otra operación está en curso)
• onBefore(data) - Se ejecuta antes de guardar. Devuelve false para evitar el guardado (por ejemplo, para mostrar primero un cuadro de diálogo de confirmación).
• onAfter(data) - Se ejecuta después de que la organización se haya guardado correctamente. Úsalo para salir de esta pantalla o registrar el evento.

Patrones comunes:

// Navegar hacia atrás después de guardar
saveAction={{
  onAfter: () => router.push("/organization"),
}}

// Agregar confirmación antes de guardar
saveAction={{
  onBefore: (org) => {
    return confirm(`Save changes to "${org.display_name}"?`);
  },
  onAfter: () => router.push("/organization"),
}}

// Registrar análisis al guardar
saveAction={{
  onAfter: (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    router.push("/organization");
  },
}}

---

cancelAction

Type: ComponentAction<OrganizationPrivate>

Controla el flujo de cancelación/descarte. Usa esta acción para gestionar los cambios descartados.

Propiedades:

• disabled - Deshabilita el botón Cancelar
• onBefore(data) - Se ejecuta antes de la acción de cancelar. Devuelve false para impedir la cancelación (por ejemplo, para confirmar que quieres descartar cambios no guardados).
• onAfter(data) - Se ejecuta después de que se confirme la cancelación. Úselo para salir del formulario.

Ejemplo:

<OrganizationDetailsEdit
  cancelAction={{
    onBefore: (org) => {
      return confirm("Discard unsaved changes?");
    },
    onAfter: () => router.push("/organization"),
  }}
/>

---

backButton

Type: { icon?: LucideIcon; onClick: (e: MouseEvent) => void }

Configura el botón de retroceso en el encabezado del componente. Úsalo para volver a la descripción general de tu organización o a la página anterior.

Propiedades:

• icon - componente de icono personalizado de Lucide (opcional; el valor predeterminado es ArrowLeft)
• onClick - Controlador de clic para la navegación

Ejemplo:

import { ChevronLeft } from "lucide-react";

<OrganizationDetailsEdit
  backButton={{
    icon: ChevronLeft,
    onClick: () => router.push("/organization"),
  }}
/>;

---

​

Props de personalización

Las props de personalización te permiten adaptar el componente a tu marca, configuración regional y requisitos de validación sin modificar el código fuente.

Propiedad	Tipo	Descripción
schema	OrganizationDetailsEditSchemas	Reglas de validación de campos.
customMessages	Partial<OrganizationDetailsEditMessages>	Sobrescrituras de texto para i18n.
styling	ComponentStyling<OrganizationEditClasses>	Variables CSS y sobrescrituras de clases.

schema

Establece reglas de validación personalizadas para los campos de detalles de la organización.

Campos disponibles del esquema

Todos los campos del esquema admiten: regex, errorMessage, minLength, maxLength, required

details.name - Nombre interno de la organización details.displayName - Nombre visible de la organización details.color - Color de la marca (formato hexadecimal) details.logoURL - URL del logotipo

<OrganizationDetailsEdit
  schema={{
    details: {
      name: {
        minLength: 3,
        maxLength: 50,
        regex: /^[a-zA-Z0-9-_]+$/,
        errorMessage: "Name must be alphanumeric with hyphens/underscores",
      },
      displayName: {
        required: true,
        maxLength: 100,
      },
      color: {
        regex: /^#[0-9A-Fa-f]{6}$/,
        errorMessage: "Enter a valid hex color (e.g., #FF5500)",
      },
      logoURL: {
        regex: /^https:\/\/.+/,
        errorMessage: "Logo URL must use HTTPS",
      },
    },
  }}
/>

---

customMessages

Personaliza todos los textos y traducciones. Todos los campos son opcionales y, si no se especifican, se usan los valores predeterminados.

Mensajes disponibles

header - Encabezado del componente

• title, description, back_button_text

form - Campos del formulario

• fields.name - label, placeholder, helper_text, error
• fields.display_name - label, placeholder, helper_text, error
• fields.color - label, placeholder, helper_text, error
• fields.logo_url - label, placeholder, helper_text, error

actions - Texto de los botones

• save_button_text, cancel_button_text

notifications - Respuestas de la API

• save_success, save_error, general_error

<OrganizationDetailsEdit
  customMessages={{
    header: {
      title: "Edit Organization",
      description: "Update your organization's settings",
    },
    form: {
      fields: {
        name: {
          label: "Organization ID",
          helper_text: "Internal identifier (cannot be changed after creation)",
        },
        display_name: {
          label: "Organization Name",
          placeholder: "Enter display name",
        },
      },
    },
    notifications: {
      save_success: "Organization updated successfully!",
    },
  }}
/>

---

styling

Personaliza la apariencia con variables CSS y sobrescrituras de clases. Compatible con estilos adaptados al tema.

Opciones de estilo disponibles

Variables - propiedades personalizadas de CSS

• common - Se aplica a todos los temas
• light - Solo para el tema claro
• dark - Solo para el tema oscuro

Clases - sobrescrituras de clases del componente

• OrganizationDetailsEdit-header
• OrganizationDetailsEdit-form
• OrganizationDetailsEdit-actions

<OrganizationDetailsEdit
  styling={{
    variables: {
      common: {
        "--font-size-title": "1.5rem",
      },
      light: {
        "--color-primary": "#059669",
      },
    },
    classes: {
      "OrganizationDetailsEdit-form": "shadow-lg rounded-xl p-6",
    },
  }}
/>

---

​

Personalización avanzada

El componente OrganizationDetailsEdit está compuesto por subcomponentes y hooks más pequeños. Puedes importarlos individualmente para crear flujos de trabajo de edición de organizaciones personalizados.

​

Subcomponentes disponibles

Para casos de uso avanzados, puede importar subcomponentes individuales para crear interfaces de edición de organización personalizadas.

Componente	Descripción
OrganizationForm	Componente de formulario principal con todos los campos
ColorPickerField	Campo de selección del color de la marca
LogoUploadField	Campo de URL del logotipo con vista previa

​

Hooks disponibles

Estos hooks proporcionan la lógica subyacente sin ninguna interfaz de usuario. Úsalos para crear interfaces completamente personalizadas aprovechando la integración con la API de Auth0.

Hook	Descripción
useOrganizationDetailsEdit	Lógica de edición de organizaciones e integración con la API

shadcn

​

Requisitos de configuración

Se requiere la configuración de Auth0 - Asegúrese de que su inquilino tenga configurada la API My Organization. Ver la guía de configuración →

​

Instalación

npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-organization/organization-details-edit.json

Al ejecutar el comando shadcn, también se instala la dependencia @auth0/universal-components-core para utilidades compartidas y la integración con Auth0.

​

Primeros pasos

import { OrganizationDetailsEdit } from "@/components/auth0/my-organization/organization-details-edit";

export function OrganizationSettingsPage() {
  const navigate = useNavigate();

  return (
    <OrganizationDetailsEdit
      saveAction={{
        onAfter: () => navigate("/organization"),
      }}
      backButton={{
        onClick: () => navigate("/organization"),
      }}
    />
  );
}

Ejemplo completo de integración

import React from "react";
import { OrganizationDetailsEdit } from "@/components/auth0/my-organization/organization-details-edit";
import { Auth0Provider } from "@auth0/auth0-react";
import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
import { useNavigate } from "react-router-dom";
import { analytics } from "./lib/analytics";

function OrganizationSettingsPage() {
  const navigate = useNavigate();

  const handleSaveSuccess = (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    navigate("/organization");
  };

  return (
    <div className="max-w-2xl mx-auto p-6">
      <OrganizationDetailsEdit
        schema={{
          details: {
            displayName: {
              required: true,
              maxLength: 100,
            },
            color: {
              regex: /^#[0-9A-Fa-f]{6}$/,
              errorMessage: "Enter a valid hex color",
            },
          },
        }}
        saveAction={{
          onBefore: (org) => {
            return confirm(`Save changes to "${org.display_name}"?`);
          },
          onAfter: handleSaveSuccess,
        }}
        cancelAction={{
          onBefore: () => confirm("Discard unsaved changes?"),
          onAfter: () => navigate("/organization"),
        }}
        backButton={{
          onClick: () => navigate("/organization"),
        }}
        customMessages={{
          header: {
            title: "Organization Settings",
          },
          notifications: {
            save_success: "Settings saved successfully!",
          },
        }}
        styling={{
          variables: {
            common: {
              "--color-primary": "#059669",
            },
          },
          classes: {
            "OrganizationDetailsEdit-form": "shadow-xl rounded-lg",
          },
        }}
      />
    </div>
  );
}

export default function App() {
  const domain = "your-domain.auth0.com";
  const clientId = "your-client-id";

  return (
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
      interactiveErrorHandler="popup" // Necesario para gestionar los desafíos de autenticación step-up mediante el popup de Universal Login
    >
      <Auth0ComponentProvider domain={domain}>
        <OrganizationSettingsPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

​

Props

​

Props principales

Las props principales son fundamentales para el funcionamiento del componente. OrganizationDetailsEdit no tiene props obligatorias: carga automáticamente los detalles de la organización actual desde la API My Organization.

---

​

Propiedades de visualización

Las props de visualización controlan cómo se renderiza el componente sin afectar su comportamiento. Úsalas para ocultar secciones o habilitar el modo de solo lectura.

Propiedad	Tipo	Descripción
readOnly	boolean	Desactiva todos los campos del formulario. Valor predeterminado: false
hideHeader	boolean	Oculta la sección del encabezado. Valor predeterminado: false

---

​

Props de Action

Las props de Action gestionan las interacciones del usuario y definen qué ocurre cuando los usuarios guardan o cancelan cambios. Usa los hooks de ciclo de vida (onBefore, onAfter) para integrarlos con el enrutamiento y los análisis de tu aplicación.

Propiedad	Tipo	Descripción
saveAction	ComponentAction<OrganizationPrivate>	Acción para guardar los cambios.
cancelAction	ComponentAction<OrganizationPrivate>	Acción para cancelar o descartar los cambios.
backButton	Object	Configuración del botón Atrás.

saveAction

Type: ComponentAction<OrganizationPrivate>

Controla el flujo de guardado cuando los usuarios envían cambios en la organización. Usa onAfter para redirigir al usuario tras un guardado exitoso.

Propiedades:

• disabled - Deshabilita el botón Guardar (por ejemplo, mientras hay otra operación en curso)
• onBefore(data) - Se ejecuta antes de guardar. Devuelve false para impedir el guardado (por ejemplo, para mostrar primero un cuadro de diálogo de confirmación).
• onAfter(data) - Se ejecuta después de que la organización se haya guardado correctamente. Úselo para navegar a otra página o registrar el evento.

Patrones comunes:

// Navegar hacia atrás después de guardar
saveAction={{
  onAfter: () => navigate("/organization"),
}}

// Agregar confirmación antes de guardar
saveAction={{
  onBefore: (org) => {
    return confirm(`Save changes to "${org.display_name}"?`);
  },
  onAfter: () => navigate("/organization"),
}}

// Registrar analíticas al guardar
saveAction={{
  onAfter: (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    navigate("/organization");
  },
}}

---

cancelAction

Type: ComponentAction<OrganizationPrivate>

Controla el flujo de cancelación/descarte. Usa esta acción para gestionar los cambios descartados.

Propiedades:

• disabled - Deshabilita el botón Cancelar
• onBefore(data) - Se ejecuta antes de la acción de cancelar. Devuelve false para evitar la cancelación (por ejemplo, para confirmar si se deben descartar los cambios no guardados).
• onAfter(data) - Se ejecuta después de confirmar la cancelación. Úselo para salir del Form.

Ejemplo:

<OrganizationDetailsEdit
  cancelAction={{
    onBefore: (org) => {
      return confirm("Discard unsaved changes?");
    },
    onAfter: () => navigate("/organization"),
  }}
/>

---

backButton

Type: { icon?: LucideIcon; onClick: (e: MouseEvent) => void }

Configura el botón de retroceso en el encabezado del componente. Úsalo para volver a la descripción general de tu organización o a la página anterior.

Propiedades:

• icon - Componente de icono personalizado de Lucide (opcional; el valor predeterminado es ArrowLeft)
• onClick - Manejador de clic para la navegación

Ejemplo:

import { ChevronLeft } from "lucide-react";

<OrganizationDetailsEdit
  backButton={{
    icon: ChevronLeft,
    onClick: () => navigate("/organization"),
  }}
/>;

---

​

Props de personalización

Las props de personalización te permiten adaptar el componente a tu marca, configuración regional y requisitos de validación sin modificar el código fuente.

Propiedad	Tipo	Descripción
schema	OrganizationDetailsEditSchemas	Reglas de validación de los campos.
customMessages	Partial<OrganizationDetailsEditMessages>	Sobrescrituras de texto para i18n.
styling	ComponentStyling<OrganizationEditClasses>	Variables CSS y sobrescrituras de clases.

schema

Establece reglas de validación personalizadas para los campos de detalles de la organización.

Campos de esquema disponibles

Todos los campos del esquema admiten: regex, errorMessage, minLength, maxLength, required

details.name - nombre interno de la organización details.displayName - nombre visible de la organización details.color - color de la marca (formato hexadecimal) details.logoURL - URL del logotipo

<OrganizationDetailsEdit
  schema={{
    details: {
      name: {
        minLength: 3,
        maxLength: 50,
        regex: /^[a-zA-Z0-9-_]+$/,
        errorMessage: "Name must be alphanumeric with hyphens/underscores",
      },
      displayName: {
        required: true,
        maxLength: 100,
      },
      color: {
        regex: /^#[0-9A-Fa-f]{6}$/,
        errorMessage: "Enter a valid hex color (e.g., #FF5500)",
      },
      logoURL: {
        regex: /^https:\/\/.+/,
        errorMessage: "Logo URL must use HTTPS",
      },
    },
  }}
/>

---

customMessages

Personaliza todos los textos y traducciones. Todos los campos son opcionales y, si no se especifican, se usan los valores predeterminados.

Mensajes disponibles

header - Encabezado del componente

• title, description, back_button_text

form - Campos del formulario

• fields.name - label, placeholder, helper_text, error
• fields.display_name - label, placeholder, helper_text, error
• fields.color - label, placeholder, helper_text, error
• fields.logo_url - label, placeholder, helper_text, error

actions - Texto de los botones

• save_button_text, cancel_button_text

notifications - Respuestas de la API

• save_success, save_error, general_error

<OrganizationDetailsEdit
  customMessages={{
    header: {
      title: "Edit Organization",
      description: "Update your organization's settings",
    },
    form: {
      fields: {
        name: {
          label: "Organization ID",
          helper_text: "Internal identifier (cannot be changed after creation)",
        },
        display_name: {
          label: "Organization Name",
          placeholder: "Enter display name",
        },
      },
    },
    notifications: {
      save_success: "Organization updated successfully!",
    },
  }}
/>

---

styling

Personaliza la apariencia con variables CSS y sobrescrituras de clases. Compatible con estilos adaptados al tema.

Opciones de estilo disponibles

Variables - propiedades personalizadas de CSS

• common - Se aplica a todos los temas
• light - Solo para el tema claro
• dark - Solo para el tema oscuro

Clases - sobrescrituras de clases del componente

• OrganizationDetailsEdit-header
• OrganizationDetailsEdit-form
• OrganizationDetailsEdit-actions

<OrganizationDetailsEdit
  styling={{
    variables: {
      common: {
        "--font-size-title": "1.5rem",
      },
      light: {
        "--color-primary": "#059669",
      },
    },
    classes: {
      "OrganizationDetailsEdit-form": "shadow-lg rounded-xl p-6",
    },
  }}
/>

---

​

Personalización avanzada

El componente OrganizationDetailsEdit está compuesto por subcomponentes y hooks más pequeños. Puedes importarlos individualmente para crear flujos de trabajo de edición de organizaciones personalizados si usas shadcn.

​

Subcomponentes disponibles

Para casos de uso avanzados, puede importar subcomponentes individuales para crear interfaces personalizadas de edición de organización.

Componente	Descripción
OrganizationForm	Componente de formulario principal con todos los campos
ColorPickerField	Selector de color para elegir el color de la marca
LogoUploadField	Campo para cargar y gestionar el logotipo

​

Hooks disponibles

Estos hooks proporcionan la lógica subyacente sin ninguna interfaz de usuario. Úsalos para crear interfaces completamente personalizadas aprovechando la integración con la API de Auth0.

Hook	Descripción
useOrganizationDetailsEdit	Lógica para obtener y editar los datos de la organización
useOrganizationDetailsEditLogic	Estado del formulario y manejadores de acciones