> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

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

> Modifiez les détails de l’organisation, notamment son nom, son nom d’affichage, les couleurs de son image de marque et son logo.

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "bêta",
    "ea": "Accès anticipé"
  };
  const stageText = stageTextMap[stage] || "une phase de lancement du produit";
  const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages";
  const linkify = (text, url) => {
    return <a href={url} target="_blank" rel="noreferrer" class="link">{text}</a>;
  };
  const includeDetails = (plans, contact, terms) => {
    const hasDetails = terms || plans || contact;
    if (!hasDetails) return null;
    return <span data-as="p">
            {plans && <>Cette fonctionnalité est offerte avec les forfaits {linkify(`${plans}`, "https://auth0.com/pricing")}. </>}
            {contact && "Pour y participer, communiquez avec " + contact + ". "}
            {terms && <>En utilisant cette fonctionnalité, vous acceptez les conditions applicables de l’essai gratuit énoncées dans le {linkify("Master Subscription Agreement", "https://www.okta.com/legal")} d’Okta.</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>La fonctionnalité {feature} est en {linkify(stageText, prsLink)}.</strong>
            </span>

            {includeDetails(plans, contact, terms)}
        </Warning>;
};

export const ComponentLoader = props => {
  const themePref = window?.localStorage?.getItem?.("isDarkMode");
  const theme = themePref === "dark" || themePref === "light" ? themePref : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
  const lang = {
    i18n: {
      currentLanguage: props.lang || "en-US"
    }
  };
  return <div style={{
    minHeight: "400px",
    marginTop: "40px",
    background: theme === "light" ? "rgb(var(--gray-950)/.03)" : "rgb(255 255 255/.1)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
    backgroundSize: "16px 16px",
    borderRadius: "10px",
    boxShadow: "0 1px 4px 0 rgba(16,30,54,0.04)",
    display: "flex",
    flexDirection: "column"
  }}>
      <div style={{
    minWidth: "320px",
    width: "96.5%",
    maxWidth: "1200px",
    margin: "12px 12px 0",
    background: theme === "light" ? "#ffffff" : "#101011",
    borderRadius: "10px",
    boxShadow: "0 2px 8px 0 rgba(16,30,54,0.04)",
    padding: "24px",
    minHeight: "400px"
  }} data-uc-component={props.componentSelector} data-uc-props={JSON.stringify(lang)}>
        <Spinner size={40} color="#8A94A6" style={{
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    zIndex: 1
  }} />
      </div>
      <div style={{
    width: "100%",
    textAlign: "center",
    color: theme === "light" ? "#6B7280" : "ffffff",
    fontSize: "12px",
    marginTop: "8px",
    marginBottom: "8px",
    letterSpacing: "0.01em",
    fontWeight: 400
  }}>
        {props.componentPreviewText}
      </div>
    </div>;
};

export const Spinner = ({size = 40, color = "#8A94A6", style = {}}) => <div style={{
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  ...style
}} aria-label="Chargement" role="status">
    <svg width={size} height={size} viewBox="0 0 50 50" style={{
  display: "block"
}}>
      <circle cx="25" cy="25" r="20" fill="none" stroke={color} strokeWidth="5" strokeDasharray="90 150" strokeLinecap="round">
        <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite" />
      </circle>
    </svg>
  </div>;

<ReleaseStageNotice feature="Auth0 Universal Components" stage="ea" terms="true" contact="Auth0 Support" />

Le composant `OrganizationDetailsEdit` offre une interface unifiée pour modifier les détails de votre [organisation](/docs/fr-ca/manage-users/organizations).

<ComponentLoader componentSelector="organization-details-edit" componentPreviewText="Aperçu du composant de modification des détails de l’organisation" />

<Tabs>
  <Tab title="React">
    ## Exigences de configuration

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Configuration d’Auth0 requise**—Assurez-vous que votre tenant est configuré avec l’API
      My Organization. [Consulter le guide de configuration
      →](/docs/fr-ca/get-started/universal-components/web/components/build-delegated-admin#enable-the-my-organization-api)
    </Callout>

    ## Installation

    <CodeGroup>
      ```bash pnpm  wrap lines theme={null}
      pnpm add @auth0/universal-components-react
      ```

      ```bash npm wrap lines theme={null}
      npm install @auth0/universal-components-react
      ```
    </CodeGroup>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      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.
    </Callout>

    ## Pour commencer

    ```tsx wrap lines theme={null}
    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"),
          }}
        />
      );
    }
    ```

    <Accordion title="Exemple d’intégration complet">
      ```tsx wrap lines theme={null}
      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={{
                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" // Requis pour traiter les challenges d'authentification renforcée via le popup Universal Login
          >
            <Auth0ComponentProvider domain={domain}>
              <OrganizationSettingsPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>

    ## 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.

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>readOnly</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            Désactive tous les champs du formulaire. Par défaut : <code>false</code>
          </td>
        </tr>

        <tr>
          <td>
            <code>hideHeader</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            Masque la section d’en-tête. Par défaut : <code>false</code>
          </td>
        </tr>
      </tbody>
    </table>

    ***

    ### 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 de cycle de vie (`onBefore`, `onAfter`) pour faire le lien avec le routage et les analyses de votre application.

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>saveAction</code>
          </td>

          <td>
            <code>ComponentAction\<OrganizationPrivate></code>
          </td>

          <td>
            Action d’enregistrement des modifications.
          </td>
        </tr>

        <tr>
          <td>
            <code>cancelAction</code>
          </td>

          <td>
            <code>ComponentAction\<OrganizationPrivate></code>
          </td>

          <td>
            Action d’annulation ou d’abandon des modifications.
          </td>
        </tr>

        <tr>
          <td>
            <code>backButton</code>
          </td>

          <td>
            <code>Object</code>
          </td>

          <td>
            Configuration du bouton Retour.
          </td>
        </tr>
      </tbody>
    </table>

    **saveAction**

    **Type :** `ComponentAction<OrganizationPrivate>`

    Contrôle le flow d'enregistrement lorsque les utilisateurs soumettent des modifications à une organization. Utilisez `onAfter` pour quitter la page après un enregistrement réussi.

    **Propriétés :**

    * `disabled`—Désactive le bouton Save (par exemple, lorsqu’une autre opération est en cours)
    * `onBefore(data)`—S’exécute avant l’enregistrement. Retournez `false` pour empêcher l’enregistrement (par exemple, pour afficher d’abord une boîte de dialogue de confirmation).
    * `onAfter(data)`—S’exécute une fois que l’organization a été enregistrée. Utilisez cette fonction pour naviguer vers une autre page ou effectuer le suivi de l’événement.

    **Exemple :**

    ```tsx wrap lines theme={null}
    // 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");
      },
    }}
    ```

    ***

    **cancelAction**

    **Type :** `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
    * `onBefore(data)`—S’exécute avant l’action d’annulation. Retournez `false` pour empêcher l’annulation (par exemple, pour confirmer l’abandon de modifications non enregistrées).
    * `onAfter(data)`—S’exécute une fois l’annulation confirmée. Utilisez cette fonction pour quitter le formulaire.

    **Exemple :**

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

    ***

    **backButton**

    **Type :** `{ 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 :**

    ```tsx wrap lines theme={null}
    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 avoir à modifier le code source.

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>schema</code>
          </td>

          <td>
            <code>OrganizationDetailsEditSchemas</code>
          </td>

          <td>
            Règles de validation des champs.
          </td>
        </tr>

        <tr>
          <td>
            <code>customMessages</code>
          </td>

          <td>
            <code>Partial\<OrganizationDetailsEditMessages></code>
          </td>

          <td>
            Remplacements de texte pour l’internationalisation.
          </td>
        </tr>

        <tr>
          <td>
            <code>styling</code>
          </td>

          <td>
            <code>ComponentStyling\<OrganizationEditClasses></code>
          </td>

          <td>
            Variables CSS et remplacements de classes.
          </td>
        </tr>
      </tbody>
    </table>

    **schema**

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

    <Accordion title="Champs de schéma disponibles">
      Tous les champs du schéma prennent en charge : `regex`, `errorMessage`, `minLength`, `maxLength`, `required`

      **details.name**—Nom interne de l’organisation
      **details.displayName**—Nom d’affichage de l’organisation
      **details.color**—Couleur de l’image de marque (format hexadécimal)
      **details.logoURL**—URL du logo
    </Accordion>

    ```tsx wrap lines theme={null}
    <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**

    Personnalisez 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.

    <Accordion title="Messages disponibles">
      **en-tête**—En-tête du composant

      * `title`, `description`, `back_button_text`

      **formulaire**—Champs du formulaire

      * `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**—Libellés des boutons

      * `save_button_text`, `cancel_button_text`

      **notifications**—Réponses de l’API

      * `save_success`, `save_error`, `general_error`
    </Accordion>

    ```tsx wrap lines theme={null}
    <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**

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

    <Accordion title="Options de mise en forme disponibles">
      **Variables**—propriétés CSS personnalisées

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

      **Classes**—surcharges de classes de composants

      * `OrganizationDetailsEdit-header`
      * `OrganizationDetailsEdit-form`
      * `OrganizationDetailsEdit-actions`
    </Accordion>

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

    ***

    ## Personnalisation avancée

    Le composant `OrganizationDetailsEdit` est constitué de plus petits sous-composants et hooks. Vous pouvez les importer individuellement pour créer des flux de travail personnalisés de modification d'organisation si vous utilisez shadcn.

    ### Sous-composants disponibles

    Pour des cas d'utilisation avancés, vous pouvez importer les sous-composants individuellement afin de créer des interfaces personnalisées de modification d'organization.

    <table class="table">
      <thead>
        <tr>
          <th>Composant</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>OrganizationForm</code>
          </td>

          <td>Composant principal du formulaire comprenant tous les champs</td>
        </tr>

        <tr>
          <td>
            <code>ColorPickerField</code>
          </td>

          <td>Champ de sélection de la couleur de l’image de marque</td>
        </tr>

        <tr>
          <td>
            <code>LogoUploadField</code>
          </td>

          <td>Champ de saisie de l’URL du logo avec aperçu</td>
        </tr>
      </tbody>
    </table>

    ### 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.

    <table class="table">
      <thead>
        <tr>
          <th>Hook</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>useOrganizationDetailsEdit</code>
          </td>

          <td>Logique de modification de l’organisation et intégration au niveau de l’API</td>
        </tr>
      </tbody>
    </table>
  </Tab>

  <Tab title="Next.js">
    ## Exigences de configuration

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Configuration d’Auth0 requise** — Assurez-vous que l’API
      My Organization est configurée dans votre tenant. [Voir le guide de configuration
      →](/docs/fr-ca/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    ## Installation

    <CodeGroup>
      ```bash npm (Recommended) wrap lines theme={null}
      npm install @auth0/universal-components-react
      ```

      ```bash pnpm wrap lines theme={null}
      pnpm add @auth0/universal-components-react
      ```
    </CodeGroup>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      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.
    </Callout>

    ## Pour commencer

    ```tsx page.tsx wrap lines theme={null}
    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"),
          }}
        />
      );
    }
    ```

    <Accordion title="Exemple complet d’intégration">
      ```tsx wrap lines theme={null}
      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={{
                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;
      ```
    </Accordion>

    ## 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.

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>readOnly</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            Désactive tous les champs du formulaire. Valeur par défaut : <code>false</code>
          </td>
        </tr>

        <tr>
          <td>
            <code>hideHeader</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            Masque la section d’en-tête. Valeur par défaut : <code>false</code>
          </td>
        </tr>
      </tbody>
    </table>

    ***

    ### Props de l'Action

    Les Props d'Action gèrent les interactions des utilisateurs et déterminent ce qui se passe lorsque ceux-ci enregistrent ou annulent des modifications. Utilisez les Hooks de cycle de vie (`onBefore`, `onAfter`) pour effectuer l'intégration au routage et aux analyses de votre application.

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>saveAction</code>
          </td>

          <td>
            <code>ComponentAction\<OrganizationPrivate></code>
          </td>

          <td>
            Action d’enregistrement des modifications.
          </td>
        </tr>

        <tr>
          <td>
            <code>cancelAction</code>
          </td>

          <td>
            <code>ComponentAction\<OrganizationPrivate></code>
          </td>

          <td>
            Action d’annulation ou d’abandon des modifications.
          </td>
        </tr>

        <tr>
          <td>
            <code>backButton</code>
          </td>

          <td>
            <code>Object</code>
          </td>

          <td>
            Configuration du bouton Retour.
          </td>
        </tr>
      </tbody>
    </table>

    **saveAction**

    **Type :** `ComponentAction<OrganizationPrivate>`

    Contrôle le flow d'enregistrement lorsque les utilisateurs soumettent des modifications à l'organization. Utilisez `onAfter` pour rediriger l'utilisateur une fois l'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 l’organisation enregistrée. Utilisez-le pour quitter la page ou suivre l’événement.

    **Modèles courants :**

    ```tsx wrap lines theme={null}
    // 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");
      },
    }}
    ```

    ***

    **cancelAction**

    **Type :** `ComponentAction<OrganizationPrivate>`

    Contrôle le flow d'annulation/abandon. Utilisez cette action pour gérer les modifications abandonnées.

    **Propriétés :**

    * `disabled`—Désactive le bouton Annuler
    * `onBefore(data)`—S’exécute avant l’action d’annulation. Retournez `false` pour empêcher l’annulation (par exemple, pour confirmer l’abandon de modifications non enregistrées).
    * `onAfter(data)`—S’exécute une fois l’annulation confirmée. Utilisez cette fonction pour quitter le formulaire.

    **Exemple :**

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

    ***

    **backButton**

    **Type :** `{ 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 :**

    ```tsx wrap lines theme={null}
    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.

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>schema</code>
          </td>

          <td>
            <code>OrganizationDetailsEditSchemas</code>
          </td>

          <td>
            Règles de validation des champs.
          </td>
        </tr>

        <tr>
          <td>
            <code>customMessages</code>
          </td>

          <td>
            <code>Partial\<OrganizationDetailsEditMessages></code>
          </td>

          <td>
            Substitutions de texte i18n.
          </td>
        </tr>

        <tr>
          <td>
            <code>styling</code>
          </td>

          <td>
            <code>ComponentStyling\<OrganizationEditClasses></code>
          </td>

          <td>
            Variables CSS et substitutions de classes.
          </td>
        </tr>
      </tbody>
    </table>

    **schema**

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

    <Accordion title="Champs disponibles du schéma">
      Tous les champs du schéma prennent en charge : `regex`, `errorMessage`, `minLength`, `maxLength`, `required`

      **details.name**—Nom interne de l’organisation
      **details.displayName**—Nom d’affichage de l’organisation
      **details.color**—Couleur de l’image de marque (format hexadécimal)
      **details.logoURL**—URL du logo
    </Accordion>

    ```tsx wrap lines theme={null}
    <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**

    Personnalisez l'ensemble du texte et des traductions. Tous les champs sont facultatifs; s'ils ne sont pas fournis, les valeurs par défaut s'appliquent.

    <Accordion title="Messages disponibles">
      **en-tête**—En-tête du composant

      * `title`, `description`, `back_button_text`

      **formulaire**—Champs du formulaire

      * `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**—Libellés des boutons

      * `save_button_text`, `cancel_button_text`

      **notifications**—Réponses de l’API

      * `save_success`, `save_error`, `general_error`
    </Accordion>

    ```tsx wrap lines theme={null}
    <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**

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

    <Accordion title="Options de style disponibles">
      **Variables**—propriétés CSS personnalisées

      * `common`—Appliquées à tous les thèmes
      * `light`—Thème clair seulement
      * `dark`—Thème sombre seulement

      **Classes**—remplacements de classes de composant

      * `OrganizationDetailsEdit-header`
      * `OrganizationDetailsEdit-form`
      * `OrganizationDetailsEdit-actions`
    </Accordion>

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

    ***

    ## Personnalisation avancée

    Le composant `OrganizationDetailsEdit` se compose de sous-composants et de hooks plus petits. Vous pouvez les importer individuellement pour créer des workflows personnalisés de modification d'organization.

    ### Sous-composants disponibles

    Pour les cas d'utilisation avancés, vous pouvez importer des sous-composants individuels afin de créer des interfaces personnalisées de modification d'organization.

    <table class="table">
      <thead>
        <tr>
          <th>Composant</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>OrganizationForm</code>
          </td>

          <td>Composant de formulaire principal contenant tous les champs</td>
        </tr>

        <tr>
          <td>
            <code>ColorPickerField</code>
          </td>

          <td>Champ de sélection de la couleur de l’image de marque</td>
        </tr>

        <tr>
          <td>
            <code>LogoUploadField</code>
          </td>

          <td>Champ de saisie de l’URL du logo avec aperçu</td>
        </tr>
      </tbody>
    </table>

    ### 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.

    <table class="table">
      <thead>
        <tr>
          <th>Hook</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>useOrganizationDetailsEdit</code>
          </td>

          <td>Logique de modification de l’organisation et intégration au niveau de l’API</td>
        </tr>
      </tbody>
    </table>
  </Tab>

  <Tab title="shadcn">
    ## Exigences de configuration

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Configuration d’Auth0 requise**—Assurez-vous que votre tenant est configuré avec l’API
      My Organization. [Consulter le guide de configuration
      →](/docs/fr-ca/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    ## Installation

    ```bash wrap lines theme={null}
    npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-organization/organization-details-edit.json
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      L’exécution de la commande shadcn installe également la dépendance @auth0/universal-components-core
      qui fournit des utilitaires partagés et l’intégration à Auth0.
    </Callout>

    ## Pour commencer

    ```tsx wrap lines theme={null}
    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"),
          }}
        />
      );
    }
    ```

    <Accordion title="Exemple complet d’intégration">
      ```tsx wrap lines theme={null}
      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" // Requis pour traiter les défis d'authentification renforcée via la fenêtre contextuelle Universal Login
          >
            <Auth0ComponentProvider domain={domain}>
              <OrganizationSettingsPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>

    ## 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 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.

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>readOnly</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            Désactive tous les champs du formulaire. Par défaut : <code>false</code>
          </td>
        </tr>

        <tr>
          <td>
            <code>hideHeader</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            Masque la section d’en-tête. Par défaut : <code>false</code>
          </td>
        </tr>
      </tbody>
    </table>

    ***

    ### 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 de cycle de vie (`onBefore`, `onAfter`) pour faire le lien avec le routage et l'analytique de votre application.

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>saveAction</code>
          </td>

          <td>
            <code>ComponentAction\<OrganizationPrivate></code>
          </td>

          <td>
            Action d’enregistrement des modifications.
          </td>
        </tr>

        <tr>
          <td>
            <code>cancelAction</code>
          </td>

          <td>
            <code>ComponentAction\<OrganizationPrivate></code>
          </td>

          <td>
            Action d’annulation ou d’abandon des modifications.
          </td>
        </tr>

        <tr>
          <td>
            <code>backButton</code>
          </td>

          <td>
            <code>Object</code>
          </td>

          <td>
            Configuration du bouton Retour.
          </td>
        </tr>
      </tbody>
    </table>

    **saveAction**

    **Type :** `ComponentAction<OrganizationPrivate>`

    Contrôle le flow d'enregistrement lorsque les utilisateurs soumettent des modifications à l'organization. Utilisez `onAfter` pour quitter la page une fois l'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.

    **Modèles courants :**

    ```tsx wrap lines theme={null}
    // 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");
      },
    }}
    ```

    ***

    **cancelAction**

    **Type :** `ComponentAction<OrganizationPrivate>`

    Contrôle le flow d'annulation/abandon. Utilisez cette action pour gérer les modifications abandonnées.

    **Propriétés :**

    * `disabled`—Désactive le bouton d’annulation
    * `onBefore(data)`—S’exécute avant l’action d’annulation. Retournez `false` pour empêcher l’annulation (par exemple, pour confirmer l’abandon de modifications non enregistrées).
    * `onAfter(data)`—S’exécute une fois l’annulation confirmée. Utilisez cette fonction pour quitter le formulaire.

    **Exemple :**

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

    ***

    **backButton**

    **Type :** `{ 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 :**

    ```tsx wrap lines theme={null}
    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 avoir à modifier le code source.

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>schema</code>
          </td>

          <td>
            <code>OrganizationDetailsEditSchemas</code>
          </td>

          <td>
            Règles de validation des champs.
          </td>
        </tr>

        <tr>
          <td>
            <code>customMessages</code>
          </td>

          <td>
            <code>Partial\<OrganizationDetailsEditMessages></code>
          </td>

          <td>
            Remplacements de texte pour l’internationalisation.
          </td>
        </tr>

        <tr>
          <td>
            <code>styling</code>
          </td>

          <td>
            <code>ComponentStyling\<OrganizationEditClasses></code>
          </td>

          <td>
            Variables CSS et remplacements de classes.
          </td>
        </tr>
      </tbody>
    </table>

    **schema**

    Définissez des règles de validation personnalisées pour les champs de détails de l'organization.

    <Accordion title="Champs de schéma disponibles">
      Tous les champs du schéma prennent en charge : `regex`, `errorMessage`, `minLength`, `maxLength`, `required`

      **details.name**—Nom interne de l’organisation
      **details.displayName**—Nom d’affichage de l’organisation
      **details.color**—Couleur de l’image de marque (format hexadécimal)
      **details.logoURL**—URL du logo
    </Accordion>

    ```tsx wrap lines theme={null}
    <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**

    Personnalisez tous les textes et toutes les traductions. Tous les champs sont facultatifs; s'ils ne sont pas fournis, les valeurs par défaut sont utilisées.

    <Accordion title="Messages disponibles">
      **header**—En-tête du composant

      * `title`, `description`, `back_button_text`

      **form**—Champs du formulaire

      * `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**—Libellés des boutons

      * `save_button_text`, `cancel_button_text`

      **notifications**—Réponses de l’API

      * `save_success`, `save_error`, `general_error`
    </Accordion>

    ```tsx wrap lines theme={null}
    <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**

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

    <Accordion title="Options de style offertes">
      **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

      * `OrganizationDetailsEdit-header`
      * `OrganizationDetailsEdit-form`
      * `OrganizationDetailsEdit-actions`
    </Accordion>

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

    ***

    ## Personnalisation avancée

    Le composant `OrganizationDetailsEdit` se compose de sous-composants et de hooks plus petits. Vous pouvez les importer individuellement pour créer des workflows personnalisés de modification d'organization si vous utilisez shadcn.

    ### Sous-composants disponibles

    Pour les cas d'utilisation avancés, vous pouvez importer des sous-composants individuels afin de créer des interfaces personnalisées de modification d'organization.

    <table class="table">
      <thead>
        <tr>
          <th>Composant</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>OrganizationForm</code>
          </td>

          <td>Composant de formulaire principal regroupant tous les champs</td>
        </tr>

        <tr>
          <td>
            <code>ColorPickerField</code>
          </td>

          <td>Sélecteur de couleur pour l’image de marque</td>
        </tr>

        <tr>
          <td>
            <code>LogoUploadField</code>
          </td>

          <td>Champ permettant de téléverser et de gérer le logo</td>
        </tr>
      </tbody>
    </table>

    ### 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.

    <table class="table">
      <thead>
        <tr>
          <th>Hook</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>useOrganizationDetailsEdit</code>
          </td>

          <td>Logique de récupération et de modification des données de l’organisation</td>
        </tr>

        <tr>
          <td>
            <code>useOrganizationDetailsEditLogic</code>
          </td>

          <td>État du formulaire et gestionnaires d’actions</td>
        </tr>
      </tbody>
    </table>
  </Tab>
</Tabs>