Modifier les renseignements de l’organisation

Modifiez les renseignements de l’organisation, y compris le nom, le nom affiché, les couleurs de la marque et le logo.

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

React

​

Exigences de configuration

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

​

Installation

pnpm

pnpm add @auth0/universal-components-react

L’exécution de l’une ou l’autre de ces commandes installe aussi la dépendance @auth0/universal-components-core, qui fournit des utilitaires partagés et l’intégration à Auth0.

​

Mise en route

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

Exemple d’intégration complète

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" // Requis pour gérer les défis d'authentification progressive via la fenêtre contextuelle Universal Login
    >
      <Auth0ComponentProvider domain={domain}>
        <OrganizationSettingsPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

​

Propriétés

​

Propriétés requises

Les props obligatoires sont fondamentales au bon fonctionnement du composant. OrganizationDetailsEdit n’a aucune prop obligatoire — il charge automatiquement les détails de l’organisation actuelle depuis l’API My Organization.

---

​

Propriétés d’affichage

Les propriétés d’affichage contrôlent la façon dont le composant s’affiche 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

---

​

Propriétés d’action

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

Propriété	Type	Description
saveAction	ComponentAction<OrganizationPrivate>	Action pour enregistrer les modifications.
cancelAction	ComponentAction<OrganizationPrivate>	Action pour annuler ou abandonner les modifications.
backButton	Object	Configuration du bouton de retour.

saveAction

Type: ComponentAction<OrganizationPrivate>

Contrôle le flux de sauvegarde lorsque les utilisateurs soumettent des modifications à l’organisation. Utilisez onAfter pour rediriger l’utilisateur après une sauvegarde réussie.

Propriétés :

• disabled - Désactive le bouton Enregistrer (p. ex., lorsqu’une autre opération est en cours)
• onBefore(data) - S’exécute avant l’enregistrement. Renvoyez false pour empêcher l’enregistrement (p. ex., 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 ceci 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 lors 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/suppression. Utilisez cette action pour gérer les modifications supprimées.

Propriétés :

• disabled - Désactive le bouton Annuler
• onBefore(data) - S’exécute avant l’annulation. Retournez false pour empêcher l’annulation (p. ex., pour confirmer l’abandon des modifications non enregistrées).
• onAfter(data) - S’exécute après la confirmation de l’annulation. Utilisez ceci pour quitter le formulaire.

Exemple :

<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 du clic pour la navigation

Exemple :

import { ChevronLeft } from "lucide-react";

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

---

​

Propriétés de personnalisation

Les propriétés de personnalisation vous permettent d’adapter le composant à votre marque, à vos paramètres régionaux 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>	Surcharges de texte i18n.
styling	ComponentStyling<OrganizationEditClasses>	Variables CSS et surcharges de classes.

schema

Définir 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, required

details.name - Nom interne de l’organisation details.displayName - Nom affiché de l’organisation details.color - Couleur de la marque (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,
      },
      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 les traductions. Tous les champs sont facultatifs et utilisent les valeurs par défaut si rien n’est fourni.

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

<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 avec des variables CSS et des substitutions de classes. Prend en charge le style adapté aux thèmes.

Options de style offertes

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 - Remplacement des classes du composant

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

---

​

Personnalisation avancée

Le composant OrganizationDetailsEdit est composé de sous-composants et de hooks plus granulaires. Vous pouvez les importer individuellement pour créer des flux de travail personnalisés de gestion d’organisation si vous utilisez shadcn.

​

Sous-composants disponibles

Pour les cas d’utilisation avancés, vous pouvez importer des sous-composants individuels pour créer des interfaces d’édition d’organisation personnalisées.

Composant	Description
OrganizationForm	Composant principal du formulaire comprenant tous les champs
ColorPickerField	Champ de sélection de la couleur de la marque
LogoUploadField	Champ de saisie de l’URL du logo avec aperçu

​

Hooks disponibles

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

Hook	Description
useOrganizationDetailsEdit	Logique de modification de l’organisation et intégration à l’API

Next.js

​

Exigences de configuration

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

​

Installation

npm (Recommended)

npm install @auth0/universal-components-react

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

​

Premiers pas

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

Exemple d’intégration complète

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;

​

Propriétés

​

Propriétés de base

Les propriétés de base sont essentielles au fonctionnement du composant. OrganizationDetailsEdit n’a aucune propriété obligatoire — il charge automatiquement les détails de l’organisation courante depuis l’API My Organization.

---

​

Propriétés d’affichage

Les propriétés d’affichage contrôlent la façon dont le composant s’affiche 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

---

​

Propriétés d’action

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

Propriété	Type	Description
saveAction	ComponentAction<OrganizationPrivate>	Action pour enregistrer les modifications.
cancelAction	ComponentAction<OrganizationPrivate>	Action pour annuler ou abandonner les modifications.
backButton	Object	Configuration du bouton Retour.

saveAction

Type: ComponentAction<OrganizationPrivate>

Contrôle le flux de sauvegarde lorsque les utilisateurs soumettent des modifications à l’organisation. Utilisez onAfter pour quitter la page après une sauvegarde réussie.

Propriétés :

• disabled - Désactive le bouton Enregistrer (p. ex., lorsqu’une autre opération est en cours)
• onBefore(data) - S’exécute avant l’enregistrement. Retournez false pour l’empêcher (p. ex., pour afficher d’abord une boîte de dialogue de confirmation).
• onAfter(data) - S’exécute une fois l’organisation enregistrée avec succès. Utilisez ceci pour naviguer ailleurs 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 lors 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 flux d’annulation/suppression. Utilisez cette action pour gérer les modifications supprimées.

Propriétés :

• disabled - Désactive le bouton d’annulation
• onBefore(data) - S’exécute avant l’annulation. Retournez false pour l’empêcher (p. ex., pour confirmer l’abandon de modifications non enregistrées).
• onAfter(data) - S’exécute une fois l’annulation confirmée. Utilisez ceci pour quitter le formulaire.

Exemple :

<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, valeur par défaut : ArrowLeft)
• onClick - Gestionnaire de clic pour la navigation

Exemple :

import { ChevronLeft } from "lucide-react";

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

---

​

Propriétés de personnalisation

Les propriétés de personnalisation vous permettent d’adapter le composant à votre marque, à vos paramètres régionaux 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>	Personnalisation des textes i18n.
styling	ComponentStyling<OrganizationEditClasses>	Variables CSS et substitution de classes.

schema

Définir 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, required

details.name - Nom interne de l’organisation details.displayName - Nom affiché de l’organisation details.color - Couleur de la marque (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,
      },
      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 les traductions. Tous les champs sont facultatifs et utilisent les valeurs par défaut si rien n’est fourni.

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

<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 avec des variables CSS et des substitutions de classes. Prend en charge le style adapté aux thèmes.

Options de style disponibles

Variables - propriétés CSS personnalisées

• common - Appliqué à tous les thèmes
• light - Thème clair uniquement
• dark - Thème sombre uniquement

Classes - remplacements des classes du composant

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

---

​

Personnalisation avancée

Le composant OrganizationDetailsEdit est composé de sous-composants et de hooks plus petits. Vous pouvez les importer individuellement pour créer des flux de travail de modification d’organisation personnalisés.

​

Sous-composants disponibles

Pour les cas d’utilisation avancés, vous pouvez importer des sous-composants individuels pour créer des interfaces d’édition d’organisation personnalisées.

Composant	Description
OrganizationForm	Composant principal du formulaire avec tous les champs
ColorPickerField	Champ de sélection de la couleur de marque
LogoUploadField	Champ de saisie de l’URL du logo avec aperçu

​

Hooks disponibles

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

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

shadcn

​

Exigences de configuration

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

​

Installation

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

L’exécution de la commande shadcn installe également la dépendance @auth0/universal-components-core pour les utilitaires communs et l’intégration à Auth0.

​

Premiers pas

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 d’intégration complète

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 gérer les défis d'authentification par élévation de privilèges via la fenêtre contextuelle Universal Login
    >
      <Auth0ComponentProvider domain={domain}>
        <OrganizationSettingsPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

​

Propriétés

​

Propriétés de base

Les propriétés de base sont essentielles au fonctionnement du composant. OrganizationDetailsEdit n’a aucune propriété obligatoire — il charge automatiquement les détails de l’organisation courante à partir de l’API My Organization.

---

​

Propriétés d’affichage

Les propriétés d’affichage contrôlent la façon dont le composant s’affiche 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

---

​

Propriétés d’action

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

Propriété	Type	Description
saveAction	ComponentAction<OrganizationPrivate>	Action pour enregistrer les modifications.
cancelAction	ComponentAction<OrganizationPrivate>	Action pour annuler ou abandonner les modifications.
backButton	Object	Configuration du bouton Retour.

saveAction

Type: ComponentAction<OrganizationPrivate>

Contrôle le flux de sauvegarde lorsque les utilisateurs soumettent des modifications à l’organisation. Utilisez onAfter pour rediriger l’utilisateur après une sauvegarde réussie.

Propriétés :

• disabled - Désactive le bouton Enregistrer (p. ex., lorsqu’une autre opération est en cours)
• onBefore(data) - S’exécute avant l’opération d’enregistrement. Renvoyez false pour empêcher l’enregistrement (p. ex., pour afficher d’abord une boîte de dialogue de confirmation).
• onAfter(data) - S’exécute une fois l’organisation enregistrée avec succès. Utilisez cette fonction pour quitter la page ou faire le suivi de 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 lors 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/suppression. Utilisez cette action pour gérer les modifications supprimé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 (p. ex., pour confirmer l’abandon de modifications non enregistrées).
• onAfter(data) - S’exécute une fois l’annulation confirmée. Utilisez cette option pour quitter le formulaire.

Exemple :

<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é (optionnel, par défaut : ArrowLeft)
• onClick - Gestionnaire de clic pour la navigation

Exemple :

import { ChevronLeft } from "lucide-react";

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

---

​

Propriétés de personnalisation

Les propriétés de personnalisation vous permettent d’adapter le composant à votre marque, à vos paramètres régionaux et à vos exigences de validation sans modifier le code source.

Prop	Type	Description
schema	OrganizationDetailsEditSchemas	Règles de validation des champs.
customMessages	Partial<OrganizationDetailsEditMessages>	Surcharges de texte i18n.
styling	ComponentStyling<OrganizationEditClasses>	Variables CSS et surcharges de classes.

schema

Définir 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 les éléments suivants : regex, errorMessage, minLength, maxLength, required

details.name - Nom interne de l’organisation details.displayName - Nom d’affichage de l’organisation details.color - Couleur de la marque (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,
      },
      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 les traductions. Tous les champs sont facultatifs et utilisent les valeurs par défaut si rien n’est fourni.

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

<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 avec des variables CSS et des substitutions de classes. Prend en charge le style adapté aux thèmes.

Styles offerts

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 - substitutions de classes du composant

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

---

​

Personnalisation avancée

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

​

Sous-composants disponibles

Pour les cas d’utilisation avancés, vous pouvez importer des sous-composants individuels pour créer des interfaces d’édition d’organisation personnalisées.

Composant	Description
OrganizationForm	Composant principal du formulaire contenant tous les champs
ColorPickerField	Sélecteur de couleur pour choisir la couleur de la marque
LogoUploadField	Champ de téléversement et de gestion du logo

​

Hooks disponibles

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

Hook	Description
useOrganizationDetailsEdit	Logique de récupération et de modification des données de l’organisation
useOrganizationDetailsEditLogic	État du formulaire et gestion des actions