Modifier les détails de l’organisation sur le Web

Le composant OrganizationDetailsEdit offre une interface unifiée pour modifier les détails de votre organisation.

Accès des applications tierces

third_party_client_access est un paramètre au niveau de l’Organization qui détermine si les applications tierces peuvent authentifier les utilisateurs au moyen des fournisseurs SSO de l’Organization. Ses valeurs possibles sont "allow" et "block", la valeur par défaut étant "block". Le composant lit GET /my-org/config pour déterminer les valeurs permises par le locataire. Lorsque third_party_client_access.allowed_values ne contient que "block", le groupe de boutons radio s’affiche, mais en lecture seule — l’administrateur de l’Organization ne peut pas le modifier. Lorsque les deux valeurs sont permises, le champ devient modifiable et son contenu est enregistré dans la ressource des détails de l’Organization. Ce paramètre agit comme un verrou à l’échelle de l’Organization. Il ne configure pas le Cross App Access (XAA), qui constitue un chemin d’autorisation distinct, contrôlé au niveau du fournisseur SSO.

React
Next.js
shadcn

Exigences de configuration

Configuration d’Auth0 requise—Assurez-vous que votre tenant est configuré avec l’API My Organization. Consulter le guide de configuration →

Installation

pnpm add @auth0/universal-components-react

npm install @auth0/universal-components-react

L’exécution de l’une ou l’autre de ces commandes installe également la dépendance @auth0/universal-components-core pour les utilitaires partagés et l’intégration avec Auth0.

Pour commencer

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

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

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

Exemple complet d’intégration

import React from "react";
import { OrganizationDetailsEdit } from "@auth0/universal-components-react";
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={{
          onAfter: () => navigate("/organization"),
        }}
        backButton={{
          onClick: () => navigate("/organization"),
        }}
        customMessages={{
          header: {
            title: "Organization Settings",
          },
          save_organization_changes_message: "Settings saved successfully!",
        }}
        styling={{
          variables: {
            common: {
              "--color-primary": "#059669",
            },
          },
          classes: {
            "OrganizationDetails_Card": "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" // Requis pour gérer les défis d’authentification renforcée via la fenêtre contextuelle Universal Login
    >
      <Auth0ComponentProvider>
        <OrganizationSettingsPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

Props

Props obligatoires

Les props obligatoires sont essentiels au fonctionnement du composant. OrganizationDetailsEdit n’a aucun prop obligatoire : il charge automatiquement les détails de l’organization actuelle depuis My Organization API.

Props d’affichage

Les props d’affichage déterminent la façon dont le composant est rendu, sans modifier son comportement. Utilisez-les pour masquer des sections ou activer le mode lecture seule.

Propriété	Type	Description
`readOnly`	`boolean`	Désactive tous les champs du formulaire. Par défaut : `false`
`hideHeader`	`boolean`	Masque la section d’en-tête. Par défaut : `false`

Props de l’Action

Les props d’action gèrent les interactions des utilisateurs et définissent ce qui se passe lorsque ceux-ci enregistrent ou annulent des modifications. Utilisez les hooks du cycle de vie (onBefore, onAfter) pour intégrer le routage et l’analytique de votre application.

Propriété	Type	Description
`saveAction`	`ComponentAction<OrganizationPrivate>`	Action d’enregistrement des modifications.
`cancelAction`	`ComponentAction<OrganizationPrivate>`	Action d’annulation ou d’abandon des modifications.
`backButton`	`Object`	Configuration du bouton Retour.

saveActionType : ComponentAction<OrganizationPrivate>Contrôle le flux d’enregistrement lorsque les utilisateurs soumettent des modifications à une organisation. Utilisez onAfter pour quitter la page après un enregistrement réussi.Propriétés :

disabled—Désactive le bouton Enregistrer (par exemple, pendant qu’une autre opération est en cours)
onBefore(data)—S’exécute avant l’opération d’enregistrement. Retournez false pour empêcher l’enregistrement (par exemple, afin d’afficher d’abord une boîte de dialogue de confirmation).
onAfter(data)—S’exécute une fois que l’organisation a été enregistrée avec succès. Utilisez cette fonction pour quitter la page ou suivre l’événement.

Exemple :

// Revenir en arrière après l'enregistrement
saveAction={{
  onAfter: () => navigate("/organization"),
}}

// Ajouter une confirmation avant l'enregistrement
saveAction={{
  onBefore: (org) => {
    return confirm(`Save changes to "${org.display_name}"?`);
  },
  onAfter: () => navigate("/organization"),
}}

// Suivre les données analytiques au moment de l'enregistrement
saveAction={{
  onAfter: (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    navigate("/organization");
  },
}}

cancelActionType : ComponentAction<OrganizationPrivate>Contrôle le flux d’annulation/abandon. Utilisez cette action pour gérer les modifications abandonnées.Propriétés :

disabled—Désactive le bouton Annuler
onAfter(data)—S’exécute une fois l’annulation confirmée. Utilisez cette fonction pour quitter le formulaire.

Exemple :

<OrganizationDetailsEdit
  cancelAction={{
    onAfter: () => navigate("/organization"),
  }}
/>

backButtonType : { icon?: LucideIcon; onClick: (e: MouseEvent) => void }Configure le bouton de retour dans l’en-tête du composant. Utilisez-le pour revenir à l’aperçu de votre organisation ou à la page précédente.Propriétés :

icon—Composant d’icône Lucide personnalisé (facultatif; ArrowLeft par défaut)
onClick—Gestionnaire de clic pour la navigation

Exemple :

import { ChevronLeft } from "lucide-react";

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

Props de personnalisation

Les props de personnalisation vous permettent d’adapter le composant à votre image de marque, à votre locale et à vos exigences de validation, sans modifier le code source.

Propriété	Type	Description
`schema`	`OrganizationDetailsEditSchemas`	Règles de validation des champs.
`customMessages`	`Partial<OrganizationDetailsEditMessages>`	Substitutions de texte i18n.
`styling`	`ComponentStyling<OrganizationEditClasses>`	Variables CSS et substitutions de classes.

schemaDéfinissez des règles de validation personnalisées pour les champs de détails de l’organisation.

Champs de schéma disponibles

Tous les champs du schéma prennent en charge : regex, errorMessage, minLength, maxLength, requireddetails.name—Nom interne de l’organisation details.displayName—Nom d’affichage de l’organisation details.primaryColor—Couleur principale de l’image de marque (format hexadécimal) details.backgroundColor—Couleur d’arrière-plan de la page (format hexadécimal) details.logoURL—URL du logo

<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,
      },
      primaryColor: {
        regex: /^#[0-9A-Fa-f]{6}$/,
        errorMessage: "Enter a valid hex color (e.g., #FF5500)",
      },
      backgroundColor: {
        regex: /^#[0-9A-Fa-f]{6}$/,
        errorMessage: "Enter a valid hex color (e.g., #FFFFFF)",
      },
      logoURL: {
        regex: /^https:\/\/.+/,
        errorMessage: "Logo URL must use HTTPS",
      },
    },
  }}
/>

customMessagesPersonnalisez tous les textes et toutes les traductions. Tous les champs sont facultatifs; s’ils ne sont pas fournis, les valeurs par défaut s’appliquent.

Messages disponibles

header—En-tête du composant

title, back_button_text

details.sections.settings—Section des paramètres

title
fields.name—label, placeholder, helper_text, error
fields.display_name—label, placeholder, helper_text, error
fields.third_party_client_access—label, options.block.label, options.block.helper_text, options.allow.label, options.allow.helper_text

details.sections.branding—Section de l’image de marque

title
fields.logo—label, helper_text, error
fields.primary_color—label, helper_text, error
fields.page_background_color—label, helper_text, error

details—Libellés du formulaire

unsaved_changes_text, submit_button_label, cancel_button_label

notifications—Réponses de l’API

save_organization_changes_message, organization_changes_error_message, organization_changes_error_message_generic

<OrganizationDetailsEdit
  customMessages={{
    header: {
      title: "Edit Organization",
    },
    details: {
      sections: {
        settings: {
          fields: {
            name: {
              label: "Organization ID",
              helper_text: "Internal identifier (cannot be changed after creation)",
            },
            display_name: {
              label: "Organization Name",
              placeholder: "Enter display name",
            },
            third_party_client_access: {
              label: "Third-Party Application Access",
              options: {
                block: {
                  label: "Block Third-Party Access",
                  helper_text: "Users can only authenticate through official apps",
                },
                allow: {
                  label: "Allow Third-Party Access",
                  helper_text: "Users can authenticate through external applications",
                },
              },
            },
          },
        },
      },
    },
    save_organization_changes_message: "Organization updated successfully!",
  }}
/>

stylingPersonnalisez l’apparence à l’aide de variables CSS et de remplacements de classes. Prend en charge un style adapté au thème.

Options de style disponibles

Variables—Propriétés CSS personnalisées

common—S’appliquent à tous les thèmes
light—Thème clair uniquement
dark—Thème sombre uniquement

Classes—Remplacements des classes de composants

OrganizationDetails_Card
OrganizationDetails_FormActions
OrganizationDetails_SettingsDetails
OrganizationDetails_BrandingDetails
OrganizationDetails_ThirdPartyAccess

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

Personnalisation avancée

Hooks disponibles

Ces hooks fournissent la logique sous-jacente, sans aucune UI. Utilisez-les pour créer des interfaces entièrement personnalisées tout en tirant parti de l’intégration au niveau de l’API Auth0.

Hook	Description
`useOrganizationDetailsEdit`	Logique de modification de l’organisation et intégration au niveau de l’API

Exigences de configuration

Configuration d’Auth0 requise—Assurez-vous que votre tenant est configuré avec l’API My Organization. Consulter le guide de configuration →

Installation

npm install @auth0/universal-components-react

pnpm add @auth0/universal-components-react

L’exécution des commandes npm ou pnpm installe la dépendance @auth0/universal-components-core qui fournit des utilitaires partagés et l’intégration à Auth0.

Pour commencer

page.tsx

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

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

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

Exemple complet d’intégration

import React from "react";
import { OrganizationDetailsEdit } from "@auth0/universal-components-react";
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={{
          onAfter: () => router.push("/organization"),
        }}
        backButton={{
          onClick: () => router.push("/organization"),
        }}
        customMessages={{
          header: {
            title: "Organization Settings",
          },
          save_organization_changes_message: "Settings saved successfully!",
        }}
        styling={{
          variables: {
            common: {
              "--color-primary": "#059669",
            },
          },
          classes: {
            "OrganizationDetails_Card": "shadow-xl rounded-lg",
          },
        }}
      />
    </div>
  );
}

export default OrganizationSettingsPage;

Props

Props principaux

Les props de base sont essentielles au fonctionnement du composant. OrganizationDetailsEdit n’exige aucune prop : il charge automatiquement les détails de l’organisation actuelle depuis l’API Mon organisation.

Props d’affichage

Les props d’affichage déterminent la façon dont le composant est rendu, sans modifier son comportement. Utilisez-les pour masquer des sections ou activer le mode lecture seule.

Propriété	Type	Description
`readOnly`	`boolean`	Désactive tous les champs du formulaire. Par défaut : `false`
`hideHeader`	`boolean`	Masque la section d’en-tête. Par défaut : `false`

Props de l’Action

Propriété	Type	Description
`saveAction`	`ComponentAction<OrganizationPrivate>`	Action d’enregistrement des modifications.
`cancelAction`	`ComponentAction<OrganizationPrivate>`	Action d’annulation ou d’abandon des modifications.
`backButton`	`Object`	Configuration du bouton Retour.

disabled—Désactive le bouton Enregistrer (par exemple, pendant qu’une autre opération est en cours)
onBefore(data)—S’exécute avant l’opération d’enregistrement. Retournez false pour empêcher l’enregistrement (par exemple, afin d’afficher d’abord une boîte de dialogue de confirmation).
onAfter(data)—S’exécute une fois que l’organisation a été enregistrée avec succès. Utilisez cette fonction pour quitter la page ou suivre l’événement.

Modèles courants :

// Revenir en arrière après l'enregistrement
saveAction={{
  onAfter: () => router.push("/organization"),
}}

// Ajouter une confirmation avant l'enregistrement
saveAction={{
  onBefore: (org) => {
    return confirm(`Save changes to "${org.display_name}"?`);
  },
  onAfter: () => router.push("/organization"),
}}

// Suivre les données analytiques au moment de l'enregistrement
saveAction={{
  onAfter: (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    router.push("/organization");
  },
}}

cancelActionType : ComponentAction<OrganizationPrivate>Contrôle le flux d’annulation ou d’abandon. Utilisez cette action pour gérer les modifications abandonnées.Propriétés :

disabled—Désactive le bouton Annuler
onAfter(data)—S’exécute une fois l’annulation confirmée. Utilisez cette fonction pour quitter le formulaire.

Exemple :

<OrganizationDetailsEdit
  cancelAction={{
    onAfter: () => router.push("/organization"),
  }}
/>

icon—Composant d’icône Lucide personnalisé (facultatif; ArrowLeft par défaut)
onClick—Gestionnaire de clic pour la navigation

Exemple :

import { ChevronLeft } from "lucide-react";

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

Props de personnalisation

Les props de personnalisation vous permettent d’adapter le composant à votre image de marque, à votre locale et à vos exigences de validation, sans modifier le code source.

Propriété	Type	Description
`schema`	`OrganizationDetailsEditSchemas`	Règles de validation des champs.
`customMessages`	`Partial<OrganizationDetailsEditMessages>`	Substitutions de texte i18n.
`styling`	`ComponentStyling<OrganizationEditClasses>`	Variables CSS et substitutions de classes.

schemaDéfinissez des règles de validation personnalisées pour les champs de détails de l’organisation.

Champs de schéma disponibles

<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,
      },
      primaryColor: {
        regex: /^#[0-9A-Fa-f]{6}$/,
        errorMessage: "Enter a valid hex color (e.g., #FF5500)",
      },
      backgroundColor: {
        regex: /^#[0-9A-Fa-f]{6}$/,
        errorMessage: "Enter a valid hex color (e.g., #FFFFFF)",
      },
      logoURL: {
        regex: /^https:\/\/.+/,
        errorMessage: "Logo URL must use HTTPS",
      },
    },
  }}
/>

customMessagesPersonnalisez tous les textes et toutes les traductions. Tous les champs sont facultatifs; s’ils ne sont pas fournis, les valeurs par défaut s’appliquent.

Messages disponibles

header—En-tête du composant

title, back_button_text

details.sections.settings—Section des paramètres

title
fields.name—label, placeholder, helper_text, error
fields.display_name—label, placeholder, helper_text, error
fields.third_party_client_access—label, options.block.label, options.block.helper_text, options.allow.label, options.allow.helper_text

details.sections.branding—Section de l’image de marque

title
fields.logo—label, helper_text, error
fields.primary_color—label, helper_text, error
fields.page_background_color—label, helper_text, error

details—Libellés du formulaire

unsaved_changes_text, submit_button_label, cancel_button_label

notifications—Réponses de l’API

save_organization_changes_message, organization_changes_error_message, organization_changes_error_message_generic

<OrganizationDetailsEdit
  customMessages={{
    header: {
      title: "Edit Organization",
    },
    details: {
      sections: {
        settings: {
          fields: {
            name: {
              label: "Organization ID",
              helper_text: "Internal identifier (cannot be changed after creation)",
            },
            display_name: {
              label: "Organization Name",
              placeholder: "Enter display name",
            },
            third_party_client_access: {
              label: "Third-Party Application Access",
              options: {
                block: {
                  label: "Block Third-Party Access",
                  helper_text: "Users can only authenticate through official apps",
                },
                allow: {
                  label: "Allow Third-Party Access",
                  helper_text: "Users can authenticate through external applications",
                },
              },
            },
          },
        },
      },
    },
    save_organization_changes_message: "Organization updated successfully!",
  }}
/>

stylingPersonnalisez l’apparence à l’aide de variables CSS et de remplacements de classes. Prend en charge un style adapté au thème.

Options de style disponibles

Variables—Propriétés CSS personnalisées

common—S’appliquent à tous les thèmes
light—Thème clair uniquement
dark—Thème sombre uniquement

Classes—Remplacements des classes de composants

OrganizationDetails_Card
OrganizationDetails_FormActions
OrganizationDetails_SettingsDetails
OrganizationDetails_BrandingDetails
OrganizationDetails_ThirdPartyAccess

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

Personnalisation avancée

Hooks disponibles

Hook	Description
`useOrganizationDetailsEdit`	Logique de modification de l’organisation et intégration au niveau de l’API

Exigences de configuration

Configuration d’Auth0 requise—Assurez-vous que votre tenant est configuré avec l’API My Organization. Consulter le guide de configuration →

Installation

Installez le composant à l’aide de la CLI shadcn depuis le registre GitHub :

npx shadcn@latest add auth0/auth0-ui-components/react/my-organization/organization-details-edit

Le CLI shadcn installe également la dépendance @auth0/universal-components-core pour les utilitaires partagés et l’intégration avec Auth0. Nécessite shadcn CLI v2.5.0+.

Pour commencer

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"),
      }}
    />
  );
}

Exemple complet d’intégration

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={{
          onAfter: () => navigate("/organization"),
        }}
        backButton={{
          onClick: () => navigate("/organization"),
        }}
        customMessages={{
          header: {
            title: "Organization Settings",
          },
          save_organization_changes_message: "Settings saved successfully!",
        }}
        styling={{
          variables: {
            common: {
              "--color-primary": "#059669",
            },
          },
          classes: {
            "OrganizationDetails_Card": "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" // Requis pour gérer les défis d’authentification renforcée au moyen de la fenêtre contextuelle Universal Login
    >
      <Auth0ComponentProvider>
        <OrganizationSettingsPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

Props

Props principaux

Les props de base sont essentielles au fonctionnement du composant. OrganizationDetailsEdit n’exige aucune prop : il charge automatiquement les détails de l’organization actuelle depuis la My Organization API.

Props d’affichage

Les props d’affichage déterminent la façon dont le composant est rendu, sans modifier son comportement. Utilisez-les pour masquer des sections ou activer le mode lecture seule.

Propriété	Type	Description
`readOnly`	`boolean`	Désactive tous les champs du formulaire. Par défaut : `false`
`hideHeader`	`boolean`	Masque la section d’en-tête. Par défaut : `false`

Props de l’Action

Propriété	Type	Description
`saveAction`	`ComponentAction<OrganizationPrivate>`	Action d’enregistrement des modifications.
`cancelAction`	`ComponentAction<OrganizationPrivate>`	Action d’annulation ou d’abandon des modifications.
`backButton`	`Object`	Configuration du bouton Retour.

disabled—Désactive le bouton Enregistrer (par exemple, pendant qu’une autre opération est en cours)
onBefore(data)—S’exécute avant l’opération d’enregistrement. Retournez false pour empêcher l’enregistrement (par exemple, afin d’afficher d’abord une boîte de dialogue de confirmation).
onAfter(data)—S’exécute une fois que l’organisation a été enregistrée avec succès. Utilisez cette fonction pour quitter la page ou suivre l’événement.

Modèles courants :

// Revenir en arrière après l'enregistrement
saveAction={{
  onAfter: () => navigate("/organization"),
}}

// Ajouter une confirmation avant l'enregistrement
saveAction={{
  onBefore: (org) => {
    return confirm(`Save changes to "${org.display_name}"?`);
  },
  onAfter: () => navigate("/organization"),
}}

// Suivre les données analytiques au moment de l'enregistrement
saveAction={{
  onAfter: (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    navigate("/organization");
  },
}}

cancelActionType : ComponentAction<OrganizationPrivate>Contrôle le flux d’annulation/abandon. Utilisez cette action pour gérer les modifications abandonnées.Propriétés :

disabled—Désactive le bouton Annuler
onAfter(data)—S’exécute une fois l’annulation confirmée. Utilisez cette fonction pour quitter le formulaire.

Exemple :

<OrganizationDetailsEdit
  cancelAction={{
    onAfter: () => navigate("/organization"),
  }}
/>

icon—Composant d’icône Lucide personnalisé (facultatif; ArrowLeft par défaut)
onClick—Gestionnaire de clic pour la navigation

Exemple :

import { ChevronLeft } from "lucide-react";

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

Props de personnalisation

Les props de personnalisation vous permettent d’adapter le composant à votre image de marque, à votre locale et à vos exigences de validation, sans modifier le code source.

Propriété	Type	Description
`schema`	`OrganizationDetailsEditSchemas`	Règles de validation des champs.
`customMessages`	`Partial<OrganizationDetailsEditMessages>`	Substitutions de texte i18n.
`styling`	`ComponentStyling<OrganizationEditClasses>`	Variables CSS et substitutions de classes.

schemaDéfinissez des règles de validation personnalisées pour les champs de détails de l’organisation.

Champs de schéma disponibles

<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,
      },
      primaryColor: {
        regex: /^#[0-9A-Fa-f]{6}$/,
        errorMessage: "Enter a valid hex color (e.g., #FF5500)",
      },
      backgroundColor: {
        regex: /^#[0-9A-Fa-f]{6}$/,
        errorMessage: "Enter a valid hex color (e.g., #FFFFFF)",
      },
      logoURL: {
        regex: /^https:\/\/.+/,
        errorMessage: "Logo URL must use HTTPS",
      },
    },
  }}
/>

customMessagesPersonnalisez tous les textes et toutes les traductions. Tous les champs sont facultatifs; s’ils ne sont pas fournis, les valeurs par défaut s’appliquent.

Messages disponibles

header—En-tête du composant

title, back_button_text

details.sections.settings—Section des paramètres

title
fields.name—label, placeholder, helper_text, error
fields.display_name—label, placeholder, helper_text, error
fields.third_party_client_access—label, options.block.label, options.block.helper_text, options.allow.label, options.allow.helper_text

details.sections.branding—Section de l’image de marque

title
fields.logo—label, helper_text, error
fields.primary_color—label, helper_text, error
fields.page_background_color—label, helper_text, error

details—Libellés du formulaire

unsaved_changes_text, submit_button_label, cancel_button_label

notifications—Réponses de l’API

save_organization_changes_message, organization_changes_error_message, organization_changes_error_message_generic

<OrganizationDetailsEdit
  customMessages={{
    header: {
      title: "Edit Organization",
    },
    details: {
      sections: {
        settings: {
          fields: {
            name: {
              label: "Organization ID",
              helper_text: "Internal identifier (cannot be changed after creation)",
            },
            display_name: {
              label: "Organization Name",
              placeholder: "Enter display name",
            },
            third_party_client_access: {
              label: "Third-Party Application Access",
              options: {
                block: {
                  label: "Block Third-Party Access",
                  helper_text: "Users can only authenticate through official apps",
                },
                allow: {
                  label: "Allow Third-Party Access",
                  helper_text: "Users can authenticate through external applications",
                },
              },
            },
          },
        },
      },
    },
    save_organization_changes_message: "Organization updated successfully!",
  }}
/>

stylingPersonnalisez l’apparence à l’aide de variables CSS et de remplacements de classes. Prend en charge un style adapté au thème.

Options de style disponibles

Variables—Propriétés CSS personnalisées

common—S’appliquent à tous les thèmes
light—Thème clair uniquement
dark—Thème sombre uniquement

Classes—Remplacements des classes de composants

OrganizationDetails_Card
OrganizationDetails_FormActions
OrganizationDetails_SettingsDetails
OrganizationDetails_BrandingDetails
OrganizationDetails_ThirdPartyAccess

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

Personnalisation avancée

Hooks disponibles

Hook	Description
`useOrganizationDetailsEdit`	Logique de récupération et de modification des données de l’organisation

Web Components

iOS Components

Android Components

Modifier les détails de l’organisation sur le Web

Accès des applications tierces

Exigences de configuration

Installation

Pour commencer

Props

Props obligatoires

Props d’affichage

Props de l’Action

Props de personnalisation

Personnalisation avancée

Hooks disponibles

Exigences de configuration

Installation

Pour commencer

Props

Props principaux

Props d’affichage

Props de l’Action

Props de personnalisation

Personnalisation avancée

Hooks disponibles

Exigences de configuration

Installation

Pour commencer

Props

Props principaux

Props d’affichage

Props de l’Action

Props de personnalisation

Personnalisation avancée

Hooks disponibles

​Accès des applications tierces

​Exigences de configuration

​Installation

​Pour commencer

​Props

​Props obligatoires

​Props d’affichage

​Props de l’Action

​Props de personnalisation

​Personnalisation avancée

​Hooks disponibles

​Exigences de configuration

​Installation

​Pour commencer

​Props

​Props principaux

​Props d’affichage

​Props de l’Action

​Props de personnalisation

​Personnalisation avancée

​Hooks disponibles

​Exigences de configuration

​Installation

​Pour commencer

​Props

​Props principaux

​Props d’affichage

​Props de l’Action

​Props de personnalisation

​Personnalisation avancée

​Hooks disponibles

Accès des applications tierces

Exigences de configuration

Installation

Pour commencer

Props

Props obligatoires

Props d’affichage

Props de l’Action

Props de personnalisation

Personnalisation avancée

Hooks disponibles

Exigences de configuration

Installation

Pour commencer

Props

Props principaux

Props d’affichage

Props de l’Action

Props de personnalisation

Personnalisation avancée

Hooks disponibles

Exigences de configuration

Installation

Pour commencer

Props

Props principaux

Props d’affichage

Props de l’Action

Props de personnalisation

Personnalisation avancée

Hooks disponibles