Modifier les détails de l’organization

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: « Saisir une couleur hexadécimale valide »,
            },
          },
        }}
        saveAction={{
          onBefore: (org) => {
            return confirm(`Save changes to "${org.display_name}"?`);
          },
          onAfter: handleSaveSuccess,
        }}
        cancelAction={{
          onBefore: () => confirm(« Abandonner les modifications non enregistrées? »),
          onAfter: () => navigate("/organization"),
        }}
        backButton={{
          onClick: () => navigate("/organization"),
        }}
        customMessages={{
          header: {
            title: « Paramètres de l'organization »,
          },
          notifications: {
            save_success: « Paramètres enregistrés avec succès! »,
          },
        }}
        styling={{
          variables: {
            common: {
              "--color-primary": "#059669",
            },
          },
          classes: {
            "OrganizationDetailsEdit-form": "shadow-xl rounded-lg",
          },
        }}
      />
    </div>
  );
}

export default function App() {
  const authDetails = {
    domain: "your-domain.auth0.com",
    clientId: "your-client-id",
  };
  return (
    <Auth0Provider
      {...authDetails}
      redirectUri={window.location.origin}
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
    >
      <Auth0ComponentProvider>
        <OrganizationSettingsPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}