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.

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 d’intégration complet

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>
  );
}

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

// 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 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 :

<OrganizationDetailsEdit
  cancelAction={{
    onBefore: (org) => {
      return confirm("Discard unsaved changes?");
    },
    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 avoir à modifier le code source.

Propriété	Type	Description
`schema`	`OrganizationDetailsEditSchemas`	Règles de validation des champs.
`customMessages`	`Partial<OrganizationDetailsEditMessages>`	Remplacements de texte pour l’internationalisation.
`styling`	`ComponentStyling<OrganizationEditClasses>`	Variables CSS et remplacements 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.color—Couleur de l’image de 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",
      },
    },
  }}
/>

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

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

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

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

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

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

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 l’API My Organization est configurée dans votre tenant. Voir 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={{
          onBefore: () => confirm("Discard unsaved changes?"),
          onAfter: () => router.push("/organization"),
        }}
        backButton={{
          onClick: () => router.push("/organization"),
        }}
        customMessages={{
          header: {
            title: "Organization Settings",
          },
          notifications: {
            save_success: "Settings saved successfully!",
          },
        }}
        styling={{
          variables: {
            common: {
              "--color-primary": "#059669",
            },
          },
          classes: {
            "OrganizationDetailsEdit-form": "shadow-xl rounded-lg",
          },
        }}
      />
    </div>
  );
}

export default OrganizationSettingsPage;

Props

Props 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. Valeur par défaut : `false`
`hideHeader`	`boolean`	Masque la section d’en-tête. Valeur par défaut : `false`

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.

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 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 :

// 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 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 :

<OrganizationDetailsEdit
  cancelAction={{
    onBefore: (org) => {
      return confirm("Discard unsaved changes?");
    },
    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 disponibles du schéma

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

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

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

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—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

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

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

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

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 qui fournit des utilitaires partagés et l’intégration à Auth0.

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={{
          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>
  );
}

Props

Props principaux

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 de cycle de vie (onBefore, onAfter) pour faire le lien avec 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 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 :

// 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 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 :

<OrganizationDetailsEdit
  cancelAction={{
    onBefore: (org) => {
      return confirm("Discard unsaved changes?");
    },
    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 avoir à modifier le code source.

Propriété	Type	Description
`schema`	`OrganizationDetailsEditSchemas`	Règles de validation des champs.
`customMessages`	`Partial<OrganizationDetailsEditMessages>`	Remplacements de texte pour l’internationalisation.
`styling`	`ComponentStyling<OrganizationEditClasses>`	Variables CSS et remplacements de classes.

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

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

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

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

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

<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

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.

Composant	Description
`OrganizationForm`	Composant de formulaire principal regroupant tous les champs
`ColorPickerField`	Sélecteur de couleur pour l’image de marque
`LogoUploadField`	Champ permettant de téléverser et de gérer le logo

Hooks disponibles

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

Composants Web

Composants iOS

Composants Android

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

Exigences de configuration

Installation

Pour commencer

Props

Props obligatoires

Props d’affichage

Props de l’Action

Props de personnalisation

Personnalisation avancée

Sous-composants disponibles

Hooks disponibles

Exigences de configuration

Installation

Pour commencer

Props

Props principaux

Props d’affichage

Props de l’Action

Props de personnalisation

Personnalisation avancée

Sous-composants disponibles

Hooks disponibles

Exigences de configuration

Installation

Pour commencer

Props

Props principaux

Props d’affichage

Props de l’Action

Props de personnalisation

Personnalisation avancée

Sous-composants disponibles

Hooks disponibles

​Exigences de configuration

​Installation

​Pour commencer

​Props

​Props obligatoires

​Props d’affichage

​Props de l’Action

​Props de personnalisation

​Personnalisation avancée

​Sous-composants disponibles

​Hooks disponibles

​Exigences de configuration

​Installation

​Pour commencer

​Props

​Props principaux

​Props d’affichage

​Props de l’Action

​Props de personnalisation

​Personnalisation avancée

​Sous-composants disponibles

​Hooks disponibles

​Exigences de configuration

​Installation

​Pour commencer

​Props

​Props principaux

​Props d’affichage

​Props de l’Action

​Props de personnalisation

​Personnalisation avancée

​Sous-composants disponibles

​Hooks disponibles

Exigences de configuration

Installation

Pour commencer

Props

Props obligatoires

Props d’affichage

Props de l’Action

Props de personnalisation

Personnalisation avancée

Sous-composants disponibles

Hooks disponibles

Exigences de configuration

Installation

Pour commencer

Props

Props principaux

Props d’affichage

Props de l’Action

Props de personnalisation

Personnalisation avancée

Sous-composants disponibles

Hooks disponibles

Exigences de configuration

Installation

Pour commencer

Props

Props principaux

Props d’affichage

Props de l’Action

Props de personnalisation

Personnalisation avancée

Sous-composants disponibles

Hooks disponibles