{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "my-organization/sso-provider-edit", "type": "registry:block", "title": "SSO provider edit container component.", "description": "A block component for sso provider edit.", "dependencies": [ "@auth0/universal-components-core@2.1.0", "@auth0/auth0-react@^2.15.1", "@hookform/resolvers@^5.1.0", "@radix-ui/react-accordion@^1.2.0", "@radix-ui/react-checkbox@^1.1.1", "@radix-ui/react-dialog@^1.1.14", "@radix-ui/react-label@^2.1.7", "@radix-ui/react-radio-group@^1.2.0", "@radix-ui/react-select@^2.2.5", "@radix-ui/react-slot@^1.2.3", "@radix-ui/react-switch@^1.1.0", "@radix-ui/react-tabs@^1.1.12", "@radix-ui/react-tooltip@^1.2.7", "@tanstack/react-query@^5.56.2", "@tanstack/react-table@^8.21.3", "class-variance-authority@^0.7.1", "clsx@^2.1.1", "lucide-react@^1.16.0", "react-hook-form@^7.57.0", "sonner@^2.0.5", "tailwind-merge@^3.3.0" ], "files": [ { "path": "src/components/auth0/my-organization/sso-provider-edit.tsx", "content": "/** @module sso-provider-edit */\n\n'use client';\n\nimport { getComponentStyles } from '@auth0/universal-components-core';\nimport { useState, useMemo } from 'react';\n\nimport { SsoDomainTab } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-domain-tab';\nimport { SsoProviderTab } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provider-tab';\nimport { SsoProvisioningTab } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-tab';\nimport { GateKeeper } from '@/components/auth0/shared/gate-keeper/gate-keeper';\nimport { Header } from '@/components/auth0/shared/header';\nimport { StyledScope } from '@/components/auth0/shared/styled-scope';\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';\nimport { useSsoProviderEdit } from '@/hooks/my-organization/use-sso-provider-edit';\nimport { useSsoProviderEditLogic } from '@/hooks/my-organization/use-sso-provider-edit-logic';\nimport { useTheme } from '@/hooks/shared/use-theme';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { cn } from '@/lib/utils';\nimport type {\n SsoProviderEditHandlerProps,\n SsoProviderEditLogicProps,\n SsoProviderEditProps,\n SsoProviderEditViewProps,\n} from '@/types/my-organization/idp-management/sso-provider/sso-provider-edit-types';\n\n/**\n * SSO provider edit container component.\n * @param props - Component props\n * @param props.providerId - ID of the SSO provider\n * @param props.backButton - Configuration for the back button\n * @param props.sso - SSO configuration\n * @param props.provisioning - Provisioning configuration\n * @param props.domains - Array of domains\n * @param props.hideHeader - Whether to hide the header\n * @param props.customMessages - Custom translation messages to override defaults\n * @param props.styling - Custom styling configuration with variables and classes\n * @param props.schema - Zod validation schema\n * @param props.readOnly - Whether the component is in read-only mode\n * @internal\n * @returns JSX element\n */\nfunction SsoProviderEdit(props: SsoProviderEditProps) {\n const {\n providerId,\n backButton,\n sso,\n provisioning,\n domains,\n hideHeader = false,\n customMessages = {},\n styling = {\n variables: { common: {}, light: {}, dark: {} },\n classes: {},\n },\n schema,\n readOnly = false,\n } = props;\n\n const ssoProviderEdit = useSsoProviderEdit(providerId, {\n sso,\n provisioning,\n domains,\n customMessages,\n });\n\n const ssoProviderEditLogic = useSsoProviderEditLogic(ssoProviderEdit);\n\n const ssoProviderCreateLogicProps: Omit = {\n ...ssoProviderEdit,\n shouldAllowDeletion: ssoProviderEditLogic.shouldAllowDeletion,\n idpConfig: ssoProviderEditLogic.idpConfig,\n showProvisioningTab: ssoProviderEditLogic.showProvisioningTab,\n styling,\n customMessages,\n backButton,\n schema,\n readOnly,\n providerId,\n domains,\n hideHeader,\n };\n\n const ssoProviderCreateHandlerProps: SsoProviderEditHandlerProps = {\n handleToggleProvider: ssoProviderEditLogic.handleToggleProvider,\n updateProvider: ssoProviderEdit.updateProvider,\n listScimTokens: ssoProviderEdit.listScimTokens,\n syncSsoAttributes: ssoProviderEdit.syncSsoAttributes,\n onDeleteConfirm: ssoProviderEdit.onDeleteConfirm,\n onRemoveConfirm: ssoProviderEdit.onRemoveConfirm,\n createScimTokenAction: ssoProviderEdit.createScimToken,\n deleteScimTokenAction: ssoProviderEdit.deleteScimToken,\n createProvisioningAction: ssoProviderEdit.createProvisioning,\n deleteProvisioningAction: ssoProviderEdit.deleteProvisioning,\n syncProvisioningAttributes: ssoProviderEdit.syncProvisioningAttributes,\n };\n\n const isLoading =\n ssoProviderEdit.isLoading ||\n ssoProviderEditLogic.isLoadingConfig ||\n ssoProviderEditLogic.isLoadingIdpConfig;\n\n return (\n \n \n \n );\n}\n\n/**\n * Internal SSO provider edition view component\n * @param props - Component props\n * @param props.logic - Component logic props\n * @param props.handlers - Component handler props\n * @internal\n * @returns JSX element\n */\nfunction SsoProviderEditView({ logic, handlers }: SsoProviderEditViewProps) {\n const {\n styling,\n schema,\n readOnly,\n providerId,\n domains,\n hideHeader,\n provider,\n organization,\n isLoading,\n isUpdating,\n isDeleting,\n isRemoving,\n idpConfig,\n customMessages,\n backButton,\n shouldAllowDeletion,\n showProvisioningTab,\n isProvisioningUpdating,\n isProvisioningDeleting,\n isScimTokensLoading,\n isScimTokenCreating,\n isScimTokenDeleting,\n isSsoAttributesSyncing,\n isProvisioningAttributesSyncing,\n hasSsoAttributeSyncWarning,\n hasProvisioningAttributeSyncWarning,\n } = logic;\n\n const {\n updateProvider,\n listScimTokens,\n syncSsoAttributes,\n onDeleteConfirm,\n onRemoveConfirm,\n handleToggleProvider,\n createProvisioningAction,\n deleteProvisioningAction,\n createScimTokenAction,\n deleteScimTokenAction,\n syncProvisioningAttributes,\n } = handlers;\n\n const { isDarkMode } = useTheme();\n const [activeTab, setActiveTab] = useState('sso');\n const { t } = useTranslator('idp_management.edit_sso_provider', customMessages);\n const currentStyles = useMemo(\n () => getComponentStyles(styling, isDarkMode),\n [styling, isDarkMode],\n );\n\n return (\n \n
\n {!hideHeader && (\n \n )}\n\n \n \n \n {t('tabs.sso.name')}\n \n {showProvisioningTab && (\n \n {t('tabs.provisioning.name')}\n \n )}\n \n {t('tabs.domains.name')}\n \n \n\n \n \n \n\n {showProvisioningTab && (\n \n \n \n )}\n\n \n \n \n \n
\n \n );\n}\n\n/**\n * SSO provider edit interface with tabbed navigation.\n *\n * Provides a complete interface for editing SSO provider settings including:\n * - SSO tab: Provider configuration, attribute mappings, delete/remove actions\n * - Provisioning tab: SCIM configuration and token management\n * - Domains tab: Domain association and verification\n *\n * @param props - {@link SsoProviderEditProps}\n * @param props.providerId - Identity provider ID to edit\n * @param props.backButton - Back button configuration\n * @param props.sso - SSO tab lifecycle hooks (save, delete, remove actions)\n * @param props.provisioning - Provisioning tab lifecycle hooks\n * @param props.domains - Domains tab configuration\n * @param props.hideHeader - Hide the header section\n * @param props.customMessages - Custom i18n message overrides\n * @param props.styling - CSS variables and class overrides\n * @param props.schema - Validation schema overrides\n * @param props.readOnly - Render in read-only mode\n * @returns SSO provider edit component\n *\n * @see {@link SsoProviderEditProps} for full props documentation\n *\n * @example\n * ```tsx\n * console.log('Saved:', provider) },\n * deleteAction: { onAfter: () => navigate('/providers') },\n * }}\n * backButton={{\n * onClick: () => navigate('/providers'),\n * }}\n * />\n * ```\n */\nexport { SsoProviderEdit, SsoProviderEditView };\n", "type": "registry:block", "target": "components/auth0/my-organization/sso-provider-edit.tsx" }, { "path": "src/components/auth0/my-organization/shared/domain-management/domain-create/domain-create-modal.tsx", "content": "/**\n * Domain creation modal.\n * @module domain-create-modal\n * @internal\n */\n\nimport {\n createDomainCreateSchema,\n type InternalDomainCreateFormValues,\n} from '@auth0/universal-components-core';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport * as React from 'react';\nimport { useForm } from 'react-hook-form';\n\nimport {\n Form,\n FormControl,\n FormField,\n FormItem,\n FormMessage,\n FormLabel,\n} from '@/components/ui/form';\nimport { Modal } from '@/components/ui/modal';\nimport { TextField } from '@/components/ui/text-field';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';\nimport { cn } from '@/lib/utils';\nimport type { DomainCreateModalProps } from '@/types/my-organization/domain-management/domain-create-types';\n\n/**\n *\n * @param props - Component props.\n * @param props.translatorKey - Translation namespace key\n * @param props.className - Optional CSS class name for styling\n * @param props.customMessages - Custom translation messages to override defaults\n * @param props.isOpen - Whether the modal/dialog is open\n * @param props.isLoading - Whether the component is in a loading state\n * @param props.schema - Zod validation schema\n * @param props.onClose - Callback fired when the component should close\n * @param props.onCreate - Callback fired when create action is triggered\n * @returns JSX element\n */\nexport function DomainCreateModal({\n translatorKey = 'domain_management.domain_create.modal',\n className,\n customMessages,\n isOpen,\n isLoading,\n schema,\n onClose,\n onCreate,\n}: DomainCreateModalProps) {\n const { t } = useTranslator(translatorKey, customMessages);\n\n const domainCreateSchema = React.useMemo(\n () => createDomainCreateSchema(schema, t('field.error')),\n [schema, t],\n );\n\n const form = useForm({\n resolver: zodResolver(domainCreateSchema),\n defaultValues: {\n domain_url: '',\n },\n mode: FORM_VALIDATION_MODE,\n });\n\n const handleCreate = React.useCallback(\n async (values: InternalDomainCreateFormValues) => {\n if (!values.domain_url) return;\n await onCreate(values.domain_url);\n form.reset();\n },\n [form, onCreate],\n );\n\n const handleClose = React.useCallback(() => {\n form.reset();\n onClose();\n }, [form, onClose]);\n\n const onSubmit = React.useCallback(\n (e: React.FormEvent) => {\n e.preventDefault();\n form.handleSubmit(handleCreate)();\n },\n [form, handleCreate],\n );\n\n return (\n !open && handleClose()}\n className={cn('p-10', className)}\n title={t('title')}\n content={\n
\n
\n \n (\n \n \n {t('field.label')}\n \n \n \n \n \n \n )}\n />\n \n \n
\n }\n modalActions={{\n isLoading,\n nextAction: {\n type: 'button',\n label: t('actions.create_button_text'),\n variant: 'primary',\n disabled: isLoading,\n onClick: (e) => {\n e.preventDefault();\n form.handleSubmit(handleCreate)();\n },\n },\n previousAction: {\n label: t('actions.cancel_button_text'),\n onClick: handleClose,\n },\n }}\n />\n );\n}\n", "type": "registry:component", "target": "components/auth0/my-organization/shared/domain-management/domain-create/domain-create-modal.tsx" }, { "path": "src/components/auth0/my-organization/shared/domain-management/domain-delete/domain-delete-modal.tsx", "content": "/**\n * Domain deletion confirmation modal.\n * @module domain-delete-modal\n * @internal\n */\n\nimport type { Domain } from '@auth0/universal-components-core';\nimport React from 'react';\n\nimport { Modal } from '@/components/ui/modal';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { cn } from '@/lib/utils';\nimport type { DomainDeleteModalProps } from '@/types/my-organization/domain-management/domain-delete-types';\n\nconst getDescriptionKey = (domain: Domain | null) => {\n return domain?.status === 'pending' ? 'description.pending' : 'description.verified';\n};\n\n/**\n *\n * @param props - Component props.\n * @param props.translatorKey - Translation namespace key\n * @param props.className - Optional CSS class name for styling\n * @param props.customMessages - Custom translation messages to override defaults\n * @param props.domain - Domain object or domain name\n * @param props.isOpen - Whether the modal/dialog is open\n * @param props.isLoading - Whether the component is in a loading state\n * @param props.onClose - Callback fired when the component should close\n * @param props.onDelete - Callback fired when delete action is triggered\n * @returns JSX element\n */\nexport function DomainDeleteModal({\n translatorKey = 'domain_management.domain_delete.modal',\n className,\n customMessages,\n domain,\n isOpen,\n isLoading,\n onClose,\n onDelete,\n}: DomainDeleteModalProps) {\n const { t } = useTranslator(translatorKey, customMessages);\n\n const handleDelete = React.useCallback(() => {\n if (domain) {\n onDelete(domain);\n }\n }, [onDelete, domain]);\n\n return (\n !open && onClose()}\n className={cn('p-10', className)}\n title={t('title')}\n content={\n
\n

\n {t(getDescriptionKey(domain), { domainName: domain?.domain })}\n

\n
\n }\n modalActions={{\n isLoading,\n nextAction: {\n type: 'button',\n label: t('actions.delete_button_text'),\n variant: 'destructive',\n disabled: isLoading,\n onClick: handleDelete,\n },\n previousAction: {\n label: t('actions.cancel_button_text'),\n onClick: onClose,\n },\n }}\n />\n );\n}\n", "type": "registry:component", "target": "components/auth0/my-organization/shared/domain-management/domain-delete/domain-delete-modal.tsx" }, { "path": "src/components/auth0/my-organization/shared/domain-management/domain-verify/domain-verify-modal.tsx", "content": "/**\n * Domain verification modal.\n * @module domain-verify-modal\n * @internal\n */\n\nimport { MessageSquare } from 'lucide-react';\nimport React from 'react';\n\nimport { CopyableTextField } from '@/components/auth0/shared/copyable-text-field';\nimport { Alert, AlertDescription } from '@/components/ui/alert';\nimport { Badge } from '@/components/ui/badge';\nimport { Button } from '@/components/ui/button';\nimport { Label } from '@/components/ui/label';\nimport { Modal } from '@/components/ui/modal';\nimport { Spinner } from '@/components/ui/spinner';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { cn } from '@/lib/utils';\nimport type { DomainVerifyModalProps } from '@/types/my-organization/domain-management/domain-verify-types';\n\n/**\n *\n * @param props - Component props.\n * @param props.translatorKey - Translation namespace key\n * @param props.className - Optional CSS class name for styling\n * @param props.customMessages - Custom translation messages to override defaults\n * @param props.isOpen - Whether the modal/dialog is open\n * @param props.isLoading - Whether the component is in a loading state\n * @param props.domain - Domain object or domain name\n * @param props.error - Error message or error object to display\n * @param props.onClose - Callback fired when the component should close\n * @param props.onVerify - Callback fired when verify action is triggered\n * @param props.onDelete - Callback fired when delete action is triggered\n * @returns JSX element\n */\nexport function DomainVerifyModal({\n translatorKey = 'domain_management.domain_verify.modal',\n className,\n customMessages,\n isOpen,\n isLoading,\n domain,\n error,\n onClose,\n onVerify,\n onDelete,\n}: DomainVerifyModalProps) {\n const { t } = useTranslator(translatorKey, customMessages);\n\n const handleVerify = React.useCallback(() => {\n if (domain) {\n onVerify(domain);\n }\n }, [onVerify, domain]);\n\n const handleDelete = React.useCallback(() => {\n if (domain) {\n onDelete(domain);\n }\n }, [onDelete, domain]);\n\n return (\n !open && onClose()}\n className=\"p-10 break-all\"\n title={t('title', { domainName: domain?.domain })}\n content={\n
\n {error && (\n \n \n {error}\n \n )}\n\n
\n \n \n
\n\n
\n \n \n
\n\n
\n
\n \n {t('verification_status.label')}\n \n {t('verification_status.pending')}\n
\n

\n {t('verification_status.description')}\n

\n
\n\n
\n \n \n
\n
\n }\n modalActions={{\n showNext: false,\n previousAction: {\n label: t('actions.done_button_text'),\n onClick: onClose,\n variant: 'primary',\n },\n }}\n />\n );\n}\n", "type": "registry:component", "target": "components/auth0/my-organization/shared/domain-management/domain-verify/domain-verify-modal.tsx" }, { "path": "src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/adfs-sso-configure-form.tsx", "content": "/**\n * ADFS SSO provider configuration form.\n * @module adfs-sso-configure-form\n * @internal\n */\n\nimport {\n createProviderConfigureSchema,\n type AdfsConfigureFormValues,\n} from '@auth0/universal-components-core';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport * as React from 'react';\nimport { useState } from 'react';\nimport { useForm } from 'react-hook-form';\n\nimport { CommonConfigureFields } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/common-configure-fields';\nimport { CopyableTextField } from '@/components/auth0/shared/copyable-text-field';\nimport { FileUpload } from '@/components/ui/file-upload';\nimport {\n Form,\n FormField,\n FormItem,\n FormLabel,\n FormControl,\n FormMessage,\n FormDescription,\n} from '@/components/ui/form';\nimport { Label } from '@/components/ui/label';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\nimport { TextField } from '@/components/ui/text-field';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';\nimport { cn } from '@/lib/utils';\nimport type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types';\n\nexport interface AdfsConfigureFormHandle {\n validate: () => Promise;\n getData: () => AdfsConfigureFormValues;\n isDirty: () => boolean;\n reset: (data?: AdfsConfigureFormValues) => void;\n}\n\ninterface AdfsConfigureFormProps extends Omit {}\n\nexport const AdfsProviderForm = React.forwardRef(\n function AdfsProviderForm(\n { initialData, readOnly = false, customMessages = {}, className, onFormDirty, idpConfig },\n ref,\n ) {\n const { t } = useTranslator(\n 'idp_management.create_sso_provider.provider_configure',\n customMessages,\n );\n\n const [uploadedFiles, setUploadedFiles] = useState([]);\n\n const adfsData = initialData as AdfsConfigureFormValues | undefined;\n\n const form = useForm({\n resolver: zodResolver(createProviderConfigureSchema('adfs')),\n mode: FORM_VALIDATION_MODE,\n reValidateMode: FORM_REVALIDATE_MODE,\n defaultValues: {\n meta_data_source: adfsData?.meta_data_source || 'meta_data_url',\n meta_data_location_url: adfsData?.meta_data_location_url || '',\n adfs_server: adfsData?.adfs_server || '',\n fedMetadataXml: adfsData?.fedMetadataXml || '',\n show_as_button: adfsData?.show_as_button ?? false,\n assign_membership_on_login: adfsData?.assign_membership_on_login ?? false,\n },\n });\n\n const { isDirty } = form.formState;\n\n React.useEffect(() => {\n onFormDirty?.(isDirty);\n }, [isDirty, onFormDirty]);\n\n React.useImperativeHandle(ref, () => ({\n validate: async () => {\n return await form.trigger();\n },\n getData: () => form.getValues(),\n isDirty: () => form.formState.isDirty,\n reset: (data) => {\n if (data) {\n form.reset(data);\n } else {\n form.reset();\n }\n },\n }));\n\n const typeValue = form.watch('meta_data_source');\n const showFederationMetadataFile = typeValue === 'meta_data_file';\n\n const handleFileUpload = async (files: File[]) => {\n setUploadedFiles(files);\n\n const file = files[0];\n if (file) {\n try {\n const content = await file.text();\n form.setValue('fedMetadataXml', content);\n } catch (error) {\n console.error('Error reading file:', error);\n }\n }\n };\n\n return (\n
\n
\n (\n \n \n {t('fields.adfs.meta_data_source.label')}\n \n \n \n
\n \n \n
\n
\n \n \n {t('fields.adfs.meta_data_source.options.meta_data_file.label')}\n \n
\n \n \n \n \n )}\n />\n\n {typeValue === 'meta_data_url' && (\n <>\n (\n \n \n {t('fields.adfs.meta_data_url.label')}\n \n \n \n \n \n \n {t('fields.adfs.meta_data_url.helper_text')}\n \n \n )}\n />\n\n (\n \n \n {t('fields.adfs.meta_data_location_url.label')}\n \n \n \n \n \n \n {t('fields.adfs.meta_data_location_url.helper_text')}\n \n \n )}\n />\n \n )}\n\n {showFederationMetadataFile && (\n (\n \n \n {t('fields.adfs.federation_metadata_file.label')}\n \n \n
\n \n
\n \n \n \n {t('fields.adfs.federation_metadata_file.helper_text')}\n \n \n )}\n />\n )}\n\n \n
\n
\n );\n },\n);\n", "type": "registry:component", "target": "components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/adfs-sso-configure-form.tsx" }, { "path": "src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/common-configure-fields.tsx", "content": "/**\n * Common SSO provider configuration fields.\n * @module common-configure-fields\n * @internal\n */\n\nimport type { GetIdpConfigurationResponseContent } from '@auth0/universal-components-core';\nimport { useFormContext } from 'react-hook-form';\n\nimport { Checkbox } from '@/components/ui/checkbox';\nimport { FormField, FormItem, FormLabel, FormControl, FormDescription } from '@/components/ui/form';\nimport { useTranslator } from '@/hooks/shared/use-translator';\n\ninterface CommonConfigureFieldsProps {\n idpConfig: GetIdpConfigurationResponseContent | null;\n readOnly?: boolean;\n customMessages?: Partial>;\n}\n\n/**\n * CommonConfigureFields Component\n * Renders common fields (show_as_button, assign_membership_on_login) that are shared across all SSO provider strategies\n * @param props - Component props.\n * @param props.idpConfig - Identity provider configuration\n * @param props.readOnly - Whether the component is in read-only mode\n * @param props.customMessages - Custom translation messages to override defaults\n * @returns JSX element\n */\nexport function CommonConfigureFields({\n idpConfig,\n readOnly = false,\n customMessages = {},\n}: CommonConfigureFieldsProps) {\n const { t } = useTranslator(\n 'idp_management.create_sso_provider.provider_configure',\n customMessages,\n );\n\n const form = useFormContext();\n\n // Only show these fields if the config allows them\n const showAsButtonEnabled = idpConfig?.organization?.can_set_show_as_button;\n const assignMembershipEnabled = idpConfig?.organization?.can_set_assign_membership_on_login;\n\n // If neither field is enabled, don't render anything\n if (!showAsButtonEnabled && !assignMembershipEnabled) {\n return null;\n }\n\n return (\n
\n {showAsButtonEnabled && (\n (\n \n \n \n \n
\n \n {t('fields.common.show_as_button.label')}\n \n \n {t('fields.common.show_as_button.helper_text')}\n \n
\n \n )}\n />\n )}\n\n {assignMembershipEnabled && (\n (\n \n \n \n \n
\n \n {t('fields.common.assign_membership_on_login.label')}\n \n \n {t('fields.common.assign_membership_on_login.helper_text')}\n \n
\n \n )}\n />\n )}\n
\n );\n}\n", "type": "registry:component", "target": "components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/common-configure-fields.tsx" }, { "path": "src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/google-apps-sso-configure-form.tsx", "content": "/**\n * Google Apps SSO provider configuration form.\n * @module google-apps-sso-configure-form\n * @internal\n */\n\nimport {\n createProviderConfigureSchema,\n type GoogleAppsConfigureFormValues,\n} from '@auth0/universal-components-core';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport * as React from 'react';\nimport { useForm } from 'react-hook-form';\n\nimport { CommonConfigureFields } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/common-configure-fields';\nimport { CopyableTextField } from '@/components/auth0/shared/copyable-text-field';\nimport {\n Form,\n FormField,\n FormItem,\n FormLabel,\n FormControl,\n FormMessage,\n FormDescription,\n} from '@/components/ui/form';\nimport { TextField } from '@/components/ui/text-field';\nimport { useProviderFormMode } from '@/hooks/my-organization/use-provider-form-mode';\nimport { useCoreClient } from '@/hooks/shared/use-core-client';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';\nimport { cn } from '@/lib/utils';\nimport type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types';\n\nexport interface GoogleAppsConfigureFormHandle {\n validate: () => Promise;\n getData: () => GoogleAppsConfigureFormValues;\n isDirty: () => boolean;\n reset: (data?: GoogleAppsConfigureFormValues) => void;\n}\n\ninterface GoogleAppsConfigureFormProps extends Omit {}\n\nexport const GoogleAppsProviderForm = React.forwardRef<\n GoogleAppsConfigureFormHandle,\n GoogleAppsConfigureFormProps\n>(function GoogleAppsProviderForm(\n {\n initialData,\n readOnly = false,\n customMessages = {},\n className,\n onFormDirty,\n idpConfig,\n mode = 'create',\n },\n ref,\n) {\n const { t } = useTranslator(\n 'idp_management.create_sso_provider.provider_configure',\n customMessages,\n );\n\n const { coreClient } = useCoreClient();\n const { showCopyButtons } = useProviderFormMode(mode);\n\n const callbackUrl = React.useMemo(() => {\n const domain = coreClient?.getDomain() || 'YOUR_DOMAIN';\n return `https://${domain}/login/callback`;\n }, [coreClient]);\n\n const googleAppsData = initialData as GoogleAppsConfigureFormValues | undefined;\n\n const form = useForm({\n resolver: zodResolver(createProviderConfigureSchema('google-apps')),\n mode: FORM_VALIDATION_MODE,\n reValidateMode: FORM_REVALIDATE_MODE,\n defaultValues: {\n domain: googleAppsData?.domain || '',\n client_id: googleAppsData?.client_id || '',\n client_secret: googleAppsData?.client_secret || '',\n callback_url: callbackUrl || '',\n show_as_button: googleAppsData?.show_as_button ?? false,\n assign_membership_on_login: googleAppsData?.assign_membership_on_login ?? false,\n },\n });\n\n const { isDirty } = form.formState;\n\n React.useEffect(() => {\n onFormDirty?.(isDirty);\n }, [isDirty, onFormDirty]);\n\n React.useImperativeHandle(ref, () => ({\n validate: async () => {\n return await form.trigger();\n },\n getData: () => form.getValues(),\n isDirty: () => form.formState.isDirty,\n reset: (data) => {\n if (data) {\n form.reset(data);\n } else {\n form.reset();\n }\n },\n }));\n\n return (\n
\n
\n (\n \n \n {t('fields.google-apps.domain.label')}\n \n \n \n \n \n \n )}\n />\n\n (\n \n \n {t('fields.google-apps.client_id.label')}\n \n \n \n \n \n \n {t('fields.google-apps.client_id.helper_text')}\n \n \n )}\n />\n\n (\n \n \n {t('fields.google-apps.client_secret.label')}\n \n \n \n \n \n \n {t('fields.google-apps.client_secret.helper_text')}\n \n \n )}\n />\n\n (\n \n \n {t('fields.google-apps.callback_url.label')}\n \n \n \n \n \n \n {t('fields.google-apps.callback_url.helper_text')}\n \n \n )}\n />\n\n \n
\n
\n );\n});\n", "type": "registry:component", "target": "components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/google-apps-sso-configure-form.tsx" }, { "path": "src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/oidc-sso-configure-form.tsx", "content": "/**\n * OIDC SSO provider configuration form.\n * @module oidc-sso-configure-form\n * @internal\n */\n\nimport {\n createProviderConfigureSchema,\n type OidcConfigureFormValues,\n} from '@auth0/universal-components-core';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport * as React from 'react';\nimport { useForm } from 'react-hook-form';\n\nimport { CommonConfigureFields } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/common-configure-fields';\nimport { CopyableTextField } from '@/components/auth0/shared/copyable-text-field';\nimport {\n Form,\n FormField,\n FormItem,\n FormLabel,\n FormControl,\n FormMessage,\n FormDescription,\n} from '@/components/ui/form';\nimport { Label } from '@/components/ui/label';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\nimport { TextField } from '@/components/ui/text-field';\nimport { useProviderFormMode } from '@/hooks/my-organization/use-provider-form-mode';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';\nimport { cn } from '@/lib/utils';\nimport type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types';\n\nexport interface OidcConfigureFormHandle {\n validate: () => Promise;\n getData: () => OidcConfigureFormValues;\n isDirty: () => boolean;\n reset: (data?: OidcConfigureFormValues) => void;\n}\n\ninterface OidcConfigureFormProps extends Omit {}\n\nexport const OidcProviderForm = React.forwardRef(\n function OidcProviderForm(\n {\n initialData,\n readOnly = false,\n customMessages = {},\n className,\n onFormDirty,\n idpConfig,\n mode = 'create',\n },\n ref,\n ) {\n const { t } = useTranslator(\n 'idp_management.create_sso_provider.provider_configure',\n customMessages,\n );\n\n const { showCopyButtons } = useProviderFormMode(mode);\n\n const oidcData = initialData as OidcConfigureFormValues | undefined;\n\n const form = useForm({\n resolver: zodResolver(createProviderConfigureSchema('oidc')),\n mode: FORM_VALIDATION_MODE,\n reValidateMode: FORM_REVALIDATE_MODE,\n defaultValues: {\n discovery_url: oidcData?.discovery_url || '',\n type: oidcData?.type || 'back_channel',\n client_id: oidcData?.client_id || '',\n client_secret: oidcData?.client_secret || '',\n show_as_button: oidcData?.show_as_button ?? false,\n assign_membership_on_login: oidcData?.assign_membership_on_login ?? false,\n },\n });\n\n const { isDirty } = form.formState;\n\n React.useEffect(() => {\n onFormDirty?.(isDirty);\n }, [isDirty, onFormDirty]);\n\n React.useImperativeHandle(ref, () => ({\n validate: async () => {\n return await form.trigger();\n },\n getData: () => form.getValues(),\n isDirty: () => form.formState.isDirty,\n reset: (data) => {\n if (data) {\n form.reset(data);\n } else {\n form.reset();\n }\n },\n }));\n\n const typeValue = form.watch('type');\n const showClientSecret = typeValue === 'back_channel';\n\n // Clear client_secret error and value when switching to front channel\n React.useEffect(() => {\n if (typeValue === 'front_channel') {\n form.clearErrors('client_secret');\n form.setValue('client_secret', '', { shouldValidate: false });\n }\n }, [typeValue, form]);\n\n return (\n
\n
\n (\n \n \n {t('fields.oidc.discovery_url.label')}\n \n \n \n \n \n \n {t('fields.oidc.discovery_url.helper_text')}\n \n \n )}\n />\n\n (\n \n \n {t('fields.oidc.type.label')}\n \n \n \n
\n \n \n
\n
\n \n \n
\n \n \n \n \n {t('fields.oidc.type.helper_text')}\n \n \n )}\n />\n\n (\n \n \n {t('fields.oidc.client_id.label')}\n \n \n \n \n \n \n {t('fields.oidc.client_id.helper_text')}\n \n \n )}\n />\n\n {showClientSecret && (\n (\n \n \n {t('fields.oidc.client_secret.label')}\n \n \n \n \n \n \n {t('fields.oidc.client_secret.helper_text')}\n \n \n )}\n />\n )}\n\n \n
\n
\n );\n },\n);\n", "type": "registry:component", "target": "components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/oidc-sso-configure-form.tsx" }, { "path": "src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/okta-sso-configure-form.tsx", "content": "/**\n * Okta SSO provider configuration form.\n * @module okta-sso-configure-form\n * @internal\n */\n\nimport {\n createProviderConfigureSchema,\n type OktaConfigureFormValues,\n} from '@auth0/universal-components-core';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport * as React from 'react';\nimport { useForm } from 'react-hook-form';\n\nimport { CommonConfigureFields } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/common-configure-fields';\nimport { CopyableTextField } from '@/components/auth0/shared/copyable-text-field';\nimport {\n Form,\n FormField,\n FormItem,\n FormLabel,\n FormControl,\n FormMessage,\n FormDescription,\n} from '@/components/ui/form';\nimport { Link } from '@/components/ui/link';\nimport { TextField } from '@/components/ui/text-field';\nimport { useProviderFormMode } from '@/hooks/my-organization/use-provider-form-mode';\nimport { useCoreClient } from '@/hooks/shared/use-core-client';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';\nimport { cn } from '@/lib/utils';\nimport type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types';\n\nconst OKTA_HELP_LINKS = {\n domain: 'https://developer.okta.com/docs/guides/find-your-domain/main/',\n client_id: 'https://developer.okta.com/docs/guides/find-your-app-credentials/main',\n client_secret: 'https://developer.okta.com/docs/guides/find-your-app-credentials/main',\n} as const;\n\nexport interface OktaConfigureFormHandle {\n validate: () => Promise;\n getData: () => OktaConfigureFormValues;\n isDirty: () => boolean;\n reset: (data?: OktaConfigureFormValues) => void;\n}\n\ninterface OktaConfigureFormProps extends Omit {}\n\nexport const OktaProviderForm = React.forwardRef(\n function OktaProviderForm(\n {\n initialData,\n readOnly = false,\n customMessages = {},\n className,\n onFormDirty,\n idpConfig,\n mode = 'create',\n },\n ref,\n ) {\n const { t } = useTranslator(\n 'idp_management.create_sso_provider.provider_configure',\n customMessages,\n );\n\n const { coreClient } = useCoreClient();\n const { showCopyButtons } = useProviderFormMode(mode);\n\n const callbackUrl = React.useMemo(() => {\n const domain = coreClient?.getDomain() || 'YOUR_DOMAIN';\n return `https://${domain}/login/callback`;\n }, [coreClient]);\n\n const oktaData = initialData as OktaConfigureFormValues | undefined;\n\n const form = useForm({\n resolver: zodResolver(createProviderConfigureSchema('okta')),\n mode: FORM_VALIDATION_MODE,\n reValidateMode: FORM_REVALIDATE_MODE,\n defaultValues: {\n domain: oktaData?.domain || '',\n client_id: oktaData?.client_id || '',\n client_secret: oktaData?.client_secret || '',\n icon_url: oktaData?.icon_url || '',\n callback_url: oktaData?.callback_url || callbackUrl,\n show_as_button: oktaData?.show_as_button ?? false,\n assign_membership_on_login: oktaData?.assign_membership_on_login ?? false,\n },\n });\n\n const { isDirty } = form.formState;\n\n React.useEffect(() => {\n onFormDirty?.(isDirty);\n }, [isDirty, onFormDirty]);\n\n React.useImperativeHandle(ref, () => ({\n validate: async () => {\n return await form.trigger();\n },\n getData: () => form.getValues(),\n isDirty: () => form.formState.isDirty,\n reset: (data) => {\n if (data) {\n form.reset(data);\n } else {\n form.reset();\n }\n },\n }));\n\n return (\n
\n
\n (\n \n \n {t('fields.okta.domain.label')}\n \n \n \n \n \n \n <>\n {t.trans('fields.okta.domain.helper_text', {\n components: {\n link: (children: string) => (\n \n {children}\n \n ),\n },\n })}\n \n \n \n )}\n />\n\n (\n \n \n {t('fields.okta.client_id.label')}\n \n \n \n \n \n \n <>\n {t.trans('fields.okta.client_id.helper_text', {\n components: {\n link: (children: string) => (\n \n {children}\n \n ),\n },\n })}\n \n \n \n )}\n />\n\n (\n \n \n {t('fields.okta.client_secret.label')}\n \n \n \n \n \n \n <>\n {t.trans('fields.okta.client_secret.helper_text', {\n components: {\n link: (children: string) => (\n \n {children}\n \n ),\n },\n })}\n \n \n \n )}\n />\n\n (\n \n \n {t('fields.okta.callback_url.label')}\n \n \n \n \n \n \n {t('fields.okta.callback_url.helper_text')}\n \n \n )}\n />\n\n \n
\n
\n );\n },\n);\n", "type": "registry:component", "target": "components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/okta-sso-configure-form.tsx" }, { "path": "src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/ping-federate-sso-configure-form.tsx", "content": "/**\n * PingFederate SSO provider configuration form.\n * @module ping-federate-sso-configure-form\n * @internal\n */\n\nimport {\n createProviderConfigureSchema,\n type PingFederateConfigureFormValues,\n} from '@auth0/universal-components-core';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport * as React from 'react';\nimport { useState } from 'react';\nimport { useForm } from 'react-hook-form';\n\nimport { CommonConfigureFields } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/common-configure-fields';\nimport {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from '@/components/ui/accordion';\nimport { Checkbox } from '@/components/ui/checkbox';\nimport { FileUpload } from '@/components/ui/file-upload';\nimport {\n Form,\n FormField,\n FormItem,\n FormLabel,\n FormControl,\n FormMessage,\n FormDescription,\n} from '@/components/ui/form';\nimport { Link } from '@/components/ui/link';\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from '@/components/ui/select';\nimport { TextField } from '@/components/ui/text-field';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';\nimport { cn } from '@/lib/utils';\nimport type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types';\n\nconst PING_FEDERATE_HELP_LINKS = {\n sign_request: 'domain/pem?cert=connection',\n} as const;\n\nconst SIGNATURE_ALGORITHMS = [\n { value: 'rsa-sha1', label: 'RSA-SHA1' },\n { value: 'rsa-sha256', label: 'RSA-SHA256' },\n] as const;\n\nconst DIGEST_ALGORITHMS = [\n { value: 'sha1', label: 'SHA1' },\n { value: 'sha256', label: 'SHA256' },\n] as const;\n\nconst ALLOWED_CERT_EXTENSIONS = ['.pem', '.cer', '.crt'] as const;\n\nexport interface PingFederateConfigureFormHandle {\n validate: () => Promise;\n getData: () => PingFederateConfigureFormValues;\n isDirty: () => boolean;\n reset: (data?: PingFederateConfigureFormValues) => void;\n}\n\ninterface PingFederateConfigureFormProps extends Omit {}\n\nexport const PingFederateProviderForm = React.forwardRef<\n PingFederateConfigureFormHandle,\n PingFederateConfigureFormProps\n>(function PingFederateProviderForm(\n { initialData, readOnly = false, customMessages = {}, className, onFormDirty, idpConfig },\n ref,\n) {\n const { t } = useTranslator(\n 'idp_management.create_sso_provider.provider_configure',\n customMessages,\n );\n\n const [uploadedFiles, setUploadedFiles] = useState([]);\n\n const pingFederateData = initialData as PingFederateConfigureFormValues | undefined;\n\n const form = useForm({\n resolver: zodResolver(createProviderConfigureSchema('pingfederate')),\n mode: FORM_VALIDATION_MODE,\n reValidateMode: FORM_REVALIDATE_MODE,\n defaultValues: {\n pingFederateBaseUrl: pingFederateData?.pingFederateBaseUrl || '',\n signingCert: pingFederateData?.signingCert || '',\n signSAMLRequest: pingFederateData?.signSAMLRequest || false,\n signatureAlgorithm: pingFederateData?.signatureAlgorithm || 'rsa-sha256',\n digestAlgorithm: pingFederateData?.digestAlgorithm || 'sha256',\n show_as_button: pingFederateData?.show_as_button ?? false,\n assign_membership_on_login: pingFederateData?.assign_membership_on_login ?? false,\n },\n });\n\n const { isDirty } = form.formState;\n\n React.useEffect(() => {\n onFormDirty?.(isDirty);\n }, [isDirty, onFormDirty]);\n\n React.useImperativeHandle(ref, () => ({\n validate: async () => {\n return await form.trigger();\n },\n getData: () => form.getValues(),\n isDirty: () => form.formState.isDirty,\n reset: (data) => {\n if (data) {\n form.reset(data);\n } else {\n form.reset();\n }\n },\n }));\n\n const signRequestEnabled = form.watch('signSAMLRequest');\n\n const isAllowedCertificateFile = React.useCallback((file: File) => {\n const fileName = file.name.toLowerCase();\n return ALLOWED_CERT_EXTENSIONS.some((extension) => fileName.endsWith(extension));\n }, []);\n\n const handleFileUpload = async (files: File[]) => {\n setUploadedFiles(files);\n\n const file = files[0];\n if (file) {\n try {\n const content = await file.text();\n form.setValue('signingCert', content, { shouldDirty: true, shouldValidate: true });\n form.clearErrors('signingCert');\n } catch (error) {\n console.error('Error reading file:', error);\n }\n }\n };\n\n const handleInvalidFiles = (files: File[]) => {\n if (files.some((file) => !isAllowedCertificateFile(file))) {\n form.setError('signingCert', {\n type: 'manual',\n message: t('fields.ping-federate.sign_cert.error'),\n });\n }\n };\n\n return (\n
\n
\n (\n \n \n {t('fields.ping-federate.ping_federate_baseurl.label')}\n \n \n \n \n \n \n {t('fields.ping-federate.ping_federate_baseurl.helper_text')}\n \n \n )}\n />\n\n (\n \n \n {t('fields.ping-federate.sign_cert.label')}\n \n \n
\n \n
\n \n \n \n {t('fields.ping-federate.sign_cert.helper_text')}\n \n \n )}\n />\n\n \n \n \n {t('fields.ping-federate.advanced_settings.title')}\n \n \n (\n \n \n \n \n
\n \n {t('fields.ping-federate.advanced_settings.sign_request.label')}\n \n \n <>\n {t.trans(\n 'fields.ping-federate.advanced_settings.sign_request.helper_text',\n {\n components: {\n link: (children: string) => (\n \n {children}\n \n ),\n },\n },\n )}\n \n \n
\n \n )}\n />\n\n {signRequestEnabled && (\n <>\n (\n \n \n {t('fields.ping-federate.advanced_settings.sign_request_algorithm.label')}\n \n \n \n \n )}\n />\n\n (\n \n \n {t(\n 'fields.ping-federate.advanced_settings.sign_request_algorithm_digest.label',\n )}\n \n \n \n \n )}\n />\n \n )}\n \n \n \n\n \n
\n
\n );\n});\n", "type": "registry:component", "target": "components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/ping-federate-sso-configure-form.tsx" }, { "path": "src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/provider-configure-fields.tsx", "content": "/**\n * Provider-specific configuration field router.\n * @module provider-configure-fields\n * @internal\n */\n\nimport { STRATEGIES } from '@auth0/universal-components-core';\nimport * as React from 'react';\n\nimport {\n AdfsProviderForm,\n type AdfsConfigureFormHandle,\n} from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/adfs-sso-configure-form';\nimport {\n GoogleAppsProviderForm,\n type GoogleAppsConfigureFormHandle,\n} from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/google-apps-sso-configure-form';\nimport {\n OidcProviderForm,\n type OidcConfigureFormHandle,\n} from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/oidc-sso-configure-form';\nimport {\n OktaProviderForm,\n type OktaConfigureFormHandle,\n} from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/okta-sso-configure-form';\nimport {\n PingFederateProviderForm,\n type PingFederateConfigureFormHandle,\n} from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/ping-federate-sso-configure-form';\nimport {\n SamlpProviderForm,\n type SamlpConfigureFormHandle,\n} from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/samlp-sso-configure-form';\nimport {\n WaadProviderForm,\n type WaadConfigureFormHandle,\n} from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/waad-sso-configure-form';\nimport { cn } from '@/lib/utils';\nimport type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types';\n\nexport type ProviderConfigureFormHandle =\n | OktaConfigureFormHandle\n | GoogleAppsConfigureFormHandle\n | WaadConfigureFormHandle\n | PingFederateConfigureFormHandle\n | AdfsConfigureFormHandle\n | SamlpConfigureFormHandle\n | OidcConfigureFormHandle;\n\nexport const ProviderConfigureFields = React.forwardRef<\n ProviderConfigureFormHandle,\n ProviderConfigureFieldsProps\n>(function ProviderConfigureFields({ strategy, className, ...props }, ref) {\n const renderProviderForm = () => {\n switch (strategy) {\n case STRATEGIES.OKTA:\n return (\n } {...props} />\n );\n case STRATEGIES.GOOGLE_APPS:\n return (\n }\n {...props}\n />\n );\n case STRATEGIES.WAAD:\n return (\n } {...props} />\n );\n case STRATEGIES.PINGFEDERATE:\n return (\n }\n {...props}\n />\n );\n case STRATEGIES.ADFS:\n return (\n } {...props} />\n );\n case STRATEGIES.SAMLP:\n return (\n } {...props} />\n );\n case STRATEGIES.OIDC:\n return (\n } {...props} />\n );\n default:\n return null;\n }\n };\n\n return
{renderProviderForm()}
;\n});\n", "type": "registry:component", "target": "components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/provider-configure-fields.tsx" }, { "path": "src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/samlp-sso-configure-form.tsx", "content": "/**\n * SAML-P SSO provider configuration form.\n * @module samlp-sso-configure-form\n * @internal\n */\n\nimport {\n createProviderConfigureSchema,\n type SamlpConfigureFormValues,\n} from '@auth0/universal-components-core';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport * as React from 'react';\nimport { useState } from 'react';\nimport { useForm } from 'react-hook-form';\n\nimport { CommonConfigureFields } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/common-configure-fields';\nimport {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from '@/components/ui/accordion';\nimport { Checkbox } from '@/components/ui/checkbox';\nimport { FileUpload } from '@/components/ui/file-upload';\nimport {\n Form,\n FormField,\n FormItem,\n FormLabel,\n FormControl,\n FormMessage,\n FormDescription,\n} from '@/components/ui/form';\nimport { Label } from '@/components/ui/label';\nimport { Link } from '@/components/ui/link';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from '@/components/ui/select';\nimport { TextField } from '@/components/ui/text-field';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';\nimport { cn } from '@/lib/utils';\nimport type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types';\n\nconst SAMLP_HELP_LINKS = {\n sign_request: 'domain/pem?cert=connection',\n} as const;\n\nconst SIGNATURE_ALGORITHMS = [\n { value: 'rsa-sha1', label: 'RSA-SHA1' },\n { value: 'rsa-sha256', label: 'RSA-SHA256' },\n] as const;\n\nconst DIGEST_ALGORITHMS = [\n { value: 'sha1', label: 'SHA1' },\n { value: 'sha256', label: 'SHA256' },\n] as const;\n\nconst BINDING_METHODS = [\n { value: 'urn:oasis:names:tc:SAML:2.0:bindings:HTTP-Redirect', label: 'HTTP-Redirect' },\n { value: 'urn:oasis:names:tc:SAML:2.0:bindings:HTTP-POST', label: 'HTTP-POST' },\n] as const;\n\nexport interface SamlpConfigureFormHandle {\n validate: () => Promise;\n getData: () => SamlpConfigureFormValues;\n isDirty: () => boolean;\n reset: (data?: SamlpConfigureFormValues) => void;\n}\n\ninterface SamlpConfigureFormProps extends Omit {}\n\nexport const SamlpProviderForm = React.forwardRef<\n SamlpConfigureFormHandle,\n SamlpConfigureFormProps\n>(function SamlpProviderForm(\n { initialData, readOnly = false, customMessages = {}, className, onFormDirty, idpConfig },\n ref,\n) {\n const { t } = useTranslator(\n 'idp_management.create_sso_provider.provider_configure',\n customMessages,\n );\n\n const [uploadedFiles, setUploadedFiles] = useState([]);\n\n const samlpData = initialData as SamlpConfigureFormValues | undefined;\n\n const form = useForm({\n resolver: zodResolver(createProviderConfigureSchema('samlp')),\n mode: FORM_VALIDATION_MODE,\n reValidateMode: FORM_REVALIDATE_MODE,\n defaultValues: {\n meta_data_source: samlpData?.meta_data_source || 'meta_data_url',\n metadataUrl: samlpData?.metadataUrl || '',\n single_sign_on_login_url: samlpData?.single_sign_on_login_url || '',\n cert: samlpData?.cert || '',\n signSAMLRequest: samlpData?.signSAMLRequest || false,\n signatureAlgorithm: samlpData?.signatureAlgorithm || 'rsa-sha256',\n digestAlgorithm: samlpData?.digestAlgorithm || 'sha256',\n bindingMethod: samlpData?.bindingMethod || 'urn:oasis:names:tc:SAML:2.0:bindings:HTTP-POST',\n show_as_button: samlpData?.show_as_button ?? false,\n assign_membership_on_login: samlpData?.assign_membership_on_login ?? false,\n },\n });\n\n const { isDirty } = form.formState;\n\n React.useEffect(() => {\n onFormDirty?.(isDirty);\n }, [isDirty, onFormDirty]);\n\n React.useImperativeHandle(ref, () => ({\n validate: async () => {\n return await form.trigger();\n },\n getData: () => form.getValues(),\n isDirty: () => form.formState.isDirty,\n reset: (data) => {\n if (data) {\n form.reset(data);\n } else {\n form.reset();\n }\n },\n }));\n\n const typeValue = form.watch('meta_data_source');\n const showMetadataFileField = typeValue === 'meta_data_file';\n\n const signRequestEnabled = form.watch('signSAMLRequest');\n\n const handleFileUpload = async (files: File[]) => {\n setUploadedFiles(files);\n\n const file = files[0];\n if (file) {\n try {\n const content = await file.text();\n form.setValue('cert', content);\n } catch (error) {\n console.error('Error reading file:', error);\n }\n }\n };\n\n return (\n
\n
\n (\n \n \n {t('fields.samlp.meta_data_source.label')}\n \n \n \n
\n \n \n
\n
\n \n \n
\n \n \n \n \n )}\n />\n\n (\n \n \n {t('fields.samlp.meta_data_url.label')}\n \n \n \n \n \n \n {t('fields.samlp.meta_data_url.helper_text')}\n \n \n )}\n />\n\n {showMetadataFileField && (\n <>\n (\n \n \n {t('fields.samlp.single_sign_on_login_url.label')}\n \n \n \n \n \n \n {t('fields.samlp.single_sign_on_login_url.helper_text')}\n \n \n )}\n />\n (\n \n \n {t('fields.samlp.cert.label')}\n \n \n
\n \n
\n \n \n \n {t('fields.samlp.cert.helper_text')}\n \n \n )}\n />\n \n )}\n\n \n \n \n {t('fields.samlp.advanced_settings.title')}\n \n \n (\n \n \n \n \n
\n \n {t('fields.samlp.advanced_settings.sign_request.label')}\n \n \n <>\n {t.trans(\n typeValue === 'meta_data_url'\n ? 'fields.samlp.advanced_settings.sign_request.helper_text_metadata_url'\n : 'fields.samlp.advanced_settings.sign_request.helper_text_metadata_file',\n {\n components: {\n link: (children: string) => (\n \n {children}\n \n ),\n },\n },\n )}\n \n \n
\n \n )}\n />\n\n {signRequestEnabled && (\n <>\n (\n \n \n {t('fields.samlp.advanced_settings.sign_request_algorithm.label')}\n \n \n \n \n )}\n />\n\n (\n \n \n {t('fields.samlp.advanced_settings.sign_request_algorithm_digest.label')}\n \n \n \n \n )}\n />\n \n )}\n (\n \n \n {t('fields.samlp.advanced_settings.request_protocol_binding.label')}\n \n \n \n \n )}\n />\n \n \n \n\n \n
\n
\n );\n});\n", "type": "registry:component", "target": "components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/samlp-sso-configure-form.tsx" }, { "path": "src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/waad-sso-configure-form.tsx", "content": "/**\n * Azure AD (WAAD) SSO provider configuration form.\n * @module waad-sso-configure-form\n * @internal\n */\n\nimport {\n createProviderConfigureSchema,\n type WaadConfigureFormValues,\n} from '@auth0/universal-components-core';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport * as React from 'react';\nimport { useForm } from 'react-hook-form';\n\nimport { CommonConfigureFields } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/common-configure-fields';\nimport { CopyableTextField } from '@/components/auth0/shared/copyable-text-field';\nimport {\n Form,\n FormField,\n FormItem,\n FormLabel,\n FormControl,\n FormMessage,\n FormDescription,\n} from '@/components/ui/form';\nimport { TextField } from '@/components/ui/text-field';\nimport { useProviderFormMode } from '@/hooks/my-organization/use-provider-form-mode';\nimport { useCoreClient } from '@/hooks/shared/use-core-client';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';\nimport { cn } from '@/lib/utils';\nimport type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types';\n\nexport interface WaadConfigureFormHandle {\n validate: () => Promise;\n getData: () => WaadConfigureFormValues;\n isDirty: () => boolean;\n reset: (data?: WaadConfigureFormValues) => void;\n}\n\ninterface WaadConfigureFormProps extends Omit {}\n\nexport const WaadProviderForm = React.forwardRef(\n function WaadProviderForm(\n {\n initialData,\n readOnly = false,\n customMessages = {},\n className,\n onFormDirty,\n idpConfig,\n mode = 'create',\n },\n ref,\n ) {\n const { t } = useTranslator(\n 'idp_management.create_sso_provider.provider_configure',\n customMessages,\n );\n\n const { coreClient } = useCoreClient();\n const { showCopyButtons } = useProviderFormMode(mode);\n\n const callbackUrl = React.useMemo(() => {\n const domain = coreClient?.getDomain() || 'YOUR_DOMAIN';\n return `https://${domain}/login/callback`;\n }, [coreClient]);\n\n const waadData = initialData as WaadConfigureFormValues | undefined;\n\n const form = useForm({\n resolver: zodResolver(createProviderConfigureSchema('waad')),\n mode: FORM_VALIDATION_MODE,\n reValidateMode: FORM_REVALIDATE_MODE,\n defaultValues: {\n tenant_domain: waadData?.tenant_domain || '',\n client_id: waadData?.client_id || '',\n client_secret: waadData?.client_secret || '',\n callback_url: waadData?.callback_url || callbackUrl,\n show_as_button: waadData?.show_as_button ?? false,\n assign_membership_on_login: waadData?.assign_membership_on_login ?? false,\n },\n });\n\n const { isDirty } = form.formState;\n\n React.useEffect(() => {\n onFormDirty?.(isDirty);\n }, [isDirty, onFormDirty]);\n\n React.useImperativeHandle(ref, () => ({\n validate: async () => {\n return await form.trigger();\n },\n getData: () => form.getValues(),\n isDirty: () => form.formState.isDirty,\n reset: (data) => {\n if (data) {\n form.reset(data);\n } else {\n form.reset();\n }\n },\n }));\n\n return (\n
\n
\n (\n \n \n {t('fields.waad.tenant_domain.label')}\n \n \n \n \n \n \n )}\n />\n\n (\n \n \n {t('fields.waad.client_id.label')}\n \n \n \n \n \n \n {t('fields.waad.client_id.helper_text')}\n \n \n )}\n />\n\n (\n \n \n {t('fields.waad.client_secret.label')}\n \n \n \n \n \n \n {t('fields.waad.client_secret.helper_text')}\n \n \n )}\n />\n\n (\n \n \n {t('fields.waad.callback_url.label')}\n \n \n \n \n \n \n {t('fields.waad.callback_url.helper_text')}\n \n \n )}\n />\n\n \n
\n
\n );\n },\n);\n", "type": "registry:component", "target": "components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/waad-sso-configure-form.tsx" }, { "path": "src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-details.tsx", "content": "/**\n * SSO provider details form step.\n * @module provider-details\n * @internal\n */\n\nimport {\n createProviderDetailsSchema,\n type ProviderDetailsFormValues,\n} from '@auth0/universal-components-core';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport * as React from 'react';\nimport { useForm } from 'react-hook-form';\n\nimport { Section } from '@/components/auth0/shared/section';\nimport {\n Form,\n FormControl,\n FormDescription,\n FormField,\n FormItem,\n FormLabel,\n FormMessage,\n} from '@/components/ui/form';\nimport { TextField } from '@/components/ui/text-field';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';\nimport type {\n ProviderDetailsFormHandle,\n ProviderDetailsProps,\n} from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types';\n\nexport const ProviderDetails = React.forwardRef(\n function ProviderDetails(\n { initialData, mode, readOnly = false, customMessages = {}, className, onFormDirty },\n ref,\n ) {\n const { t } = useTranslator(\n 'idp_management.create_sso_provider.provider_details',\n customMessages,\n );\n\n const form = useForm({\n resolver: zodResolver(createProviderDetailsSchema()),\n mode: FORM_VALIDATION_MODE,\n reValidateMode: FORM_REVALIDATE_MODE,\n defaultValues: {\n name: initialData?.name || '',\n display_name: initialData?.display_name || '',\n },\n });\n\n const { isDirty } = form.formState;\n\n React.useEffect(() => {\n onFormDirty?.(isDirty);\n }, [isDirty, onFormDirty]);\n\n React.useImperativeHandle(ref, () => ({\n validate: async () => {\n return await form.trigger();\n },\n getData: () => form.getValues(),\n isDirty: () => form.formState.isDirty,\n reset: (data) => {\n if (data) {\n form.reset(data);\n } else {\n form.reset();\n }\n },\n }));\n\n return (\n
\n
\n
\n (\n \n \n {t('fields.name.label')}\n \n \n \n \n \n \n {t('fields.name.helper_text')}\n \n \n )}\n />\n\n (\n \n \n {t('fields.display_name.label')}\n \n \n \n \n \n \n {t('fields.display_name.helper_text')}\n \n \n )}\n />\n
\n
\n
\n );\n },\n);\n", "type": "registry:component", "target": "components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-details.tsx" }, { "path": "src/components/auth0/my-organization/shared/idp-management/sso-provider-delete/provider-delete-modal-content.tsx", "content": "/**\n * SSO provider deletion modal content.\n * @module provider-delete-modal-content\n * @internal\n */\n\nimport React from 'react';\n\nimport { Label } from '@/components/ui/label';\nimport { TextField } from '@/components/ui/text-field';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { cn } from '@/lib/utils';\nimport type { SsoProviderDeleteModalContentProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-delete-types';\n\n/**\n *\n * @param props - Component props.\n * @param props.onChange - Callback fired when the value changes\n * @param props.customMessages - Custom translation messages to override defaults\n * @param props.className - Optional CSS class name for styling\n * @returns JSX element\n */\nexport function SsoProviderDeleteModalContent({\n onChange,\n customMessages = {},\n className,\n}: SsoProviderDeleteModalContentProps) {\n const handleInputChange = (event: React.ChangeEvent) => {\n onChange(event.target.value);\n };\n\n const { t } = useTranslator('idp_management.delete_sso_provider.modal.content', customMessages);\n\n return (\n
\n \n {t('description')}\n

\n \n {t('field.label')}\n \n \n
\n );\n}\n", "type": "registry:component", "target": "components/auth0/my-organization/shared/idp-management/sso-provider-delete/provider-delete-modal-content.tsx" }, { "path": "src/components/auth0/my-organization/shared/idp-management/sso-provider-delete/provider-delete-modal.tsx", "content": "/**\n * SSO provider deletion modal.\n * @module provider-delete-modal\n * @internal\n */\n\nimport * as React from 'react';\n\nimport { SsoProviderDeleteModalContent } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-delete/provider-delete-modal-content';\nimport { Modal } from '@/components/ui/modal';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { cn } from '@/lib/utils';\nimport type { SsoProviderDeleteModalProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-delete-types';\n\n/**\n *\n * @param props - Component props.\n * @param props.className - Optional CSS class name for styling\n * @param props.isOpen - Whether the modal/dialog is open\n * @param props.onClose - Callback fired when the component should close\n * @param props.provider - SSO provider object\n * @param props.onDelete - Callback fired when delete action is triggered\n * @param props.isLoading - Whether the component is in a loading state\n * @param props.customMessages - Custom translation messages to override defaults\n * @returns JSX element\n */\nexport function SsoProviderDeleteModal({\n className,\n isOpen,\n onClose,\n provider,\n onDelete,\n isLoading = false,\n customMessages = {},\n}: SsoProviderDeleteModalProps) {\n const { t } = useTranslator('idp_management.delete_sso_provider', customMessages);\n const [confirmationText, setConfirmationText] = React.useState('');\n\n const handleModalContentChange = React.useCallback((value: string) => {\n setConfirmationText(value);\n }, []);\n\n const handleDelete = React.useCallback(async () => {\n if (provider) {\n await onDelete(provider);\n onClose();\n }\n }, [onDelete, provider, onClose]);\n\n const handleOpenChange = React.useCallback(\n (open: boolean) => {\n if (!open) {\n onClose();\n }\n },\n [onClose],\n );\n\n React.useEffect(() => {\n if (isOpen) {\n setConfirmationText('');\n }\n }, [isOpen]);\n\n return (\n \n

\n {t('modal.description', { providerName: provider.name })}\n

\n\n \n \n }\n modalActions={{\n isLoading,\n nextAction: {\n type: 'button',\n label: t('modal.actions.delete_button_label'),\n onClick: handleDelete,\n variant: 'destructive',\n disabled: isLoading || confirmationText !== provider.name,\n },\n previousAction: {\n label: t('modal.actions.cancel_button_label'),\n onClick: onClose,\n },\n }}\n />\n );\n}\n", "type": "registry:component", "target": "components/auth0/my-organization/shared/idp-management/sso-provider-delete/provider-delete-modal.tsx" }, { "path": "src/components/auth0/my-organization/shared/idp-management/sso-provider-delete/provider-delete.tsx", "content": "/**\n * SSO provider delete section component.\n * @module provider-delete\n * @internal\n */\n\nimport * as React from 'react';\n\nimport { SsoProviderDeleteModal } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-delete/provider-delete-modal';\nimport { Button } from '@/components/ui/button';\nimport { Card, CardContent } from '@/components/ui/card';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { cn } from '@/lib/utils';\nimport type { SsoProviderDeleteProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-delete-types';\n\n/**\n *\n * @param props - Component props.\n * @param props.provider - SSO provider object\n * @param props.onDelete - Callback fired when delete action is triggered\n * @param props.customMessages - Custom translation messages to override defaults\n * @param props.isLoading - Whether the component is in a loading state\n * @param props.readOnly - Whether the component is in read-only mode\n * @returns JSX element\n */\nexport function SsoProviderDelete({\n provider,\n onDelete,\n customMessages = {},\n isLoading,\n readOnly,\n}: SsoProviderDeleteProps) {\n const { t } = useTranslator('idp_management.delete_sso_provider', customMessages);\n const [isModalOpen, setIsModalOpen] = React.useState(false);\n\n const openModal = React.useCallback(() => {\n setIsModalOpen(true);\n }, []);\n\n const closeModal = React.useCallback(() => {\n setIsModalOpen(false);\n }, []);\n\n return (\n <>\n
\n \n \n
\n \n {t('title', { providerName: provider.name })}\n \n \n {t('description')}\n

\n
\n\n \n {t('delete_button_label')}\n \n \n \n
\n\n \n \n );\n}\n", "type": "registry:component", "target": "components/auth0/my-organization/shared/idp-management/sso-provider-delete/provider-delete.tsx" }, { "path": "src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-domain-tab-action-column.tsx", "content": "/**\n * SSO domain tab table action column.\n * @module sso-domain-tab-action-column\n * @internal\n */\n\nimport { Button } from '@/components/ui/button';\nimport { Spinner } from '@/components/ui/spinner';\nimport { Switch } from '@/components/ui/switch';\nimport { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport type { SsoDomainTabActionColumn } from '@/types/my-organization/idp-management/sso-domain/sso-domain-tab-types';\n\n/**\n * SsoDomainTabActionsColumn component\n * Handles the actions column for SSO provider edit on domain tab table\n * with enable/disable toggle and verify button\n * @param props - Component props.\n * @param props.translatorKey - Translation namespace key\n * @param props.customMessages - Custom translation messages to override defaults\n * @param props.readOnly - Whether the component is in read-only mode\n * @param props.idpDomains - Identity provider domains\n * @param props.domain - Domain object or domain name\n * @param props.handleVerify - Handler function for domain verification\n * @param props.isUpdating - Whether an update operation is in progress\n * @param props.isUpdatingId - ID of the item currently being updated\n * @param props.onToggle - Callback fired when toggle state changes\n * @returns JSX element\n */\nexport function SsoDomainTabActionsColumn({\n translatorKey = 'idp_management.edit_sso_provider.tabs.domains',\n customMessages = {},\n readOnly,\n idpDomains,\n domain,\n handleVerify,\n isUpdating,\n isUpdatingId,\n onToggle,\n}: SsoDomainTabActionColumn) {\n const { t } = useTranslator(translatorKey, customMessages);\n\n const providerHasDomain = idpDomains.includes(domain.id);\n\n if (isUpdating && isUpdatingId === domain.id) {\n return (\n
\n \n
\n );\n }\n return (\n
\n {domain.status === 'verified' ? (\n \n \n \n onToggle(domain, checked)}\n disabled={readOnly || isUpdating}\n />\n \n \n \n {providerHasDomain\n ? t('table.actions.disable_domain_tooltip')\n : t('table.actions.enable_domain_tooltip')}\n \n \n ) : (\n \n )}\n
\n );\n}\n", "type": "registry:component", "target": "components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-domain-tab-action-column.tsx" }, { "path": "src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-domain-tab.tsx", "content": "/**\n * SSO provider domains tab component.\n * @module sso-domain-tab\n * @internal\n */\n\nimport type { Domain } from '@auth0/universal-components-core';\nimport { getComponentStyles } from '@auth0/universal-components-core';\nimport { Plus } from 'lucide-react';\nimport React from 'react';\n\nimport { DomainCreateModal } from '@/components/auth0/my-organization/shared/domain-management/domain-create/domain-create-modal';\nimport { DomainDeleteModal } from '@/components/auth0/my-organization/shared/domain-management/domain-delete/domain-delete-modal';\nimport { DomainVerifyModal } from '@/components/auth0/my-organization/shared/domain-management/domain-verify/domain-verify-modal';\nimport { SsoDomainTabActionsColumn } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-domain-tab-action-column';\nimport { DataTable, type Column } from '@/components/auth0/shared/data-table';\nimport { Header } from '@/components/auth0/shared/header';\nimport { Badge } from '@/components/ui/badge';\nimport { useSsoDomainTab } from '@/hooks/my-organization/use-sso-domain-tab';\nimport { useTheme } from '@/hooks/shared/use-theme';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { getStatusBadgeVariant } from '@/lib/utils/my-organization/domain-management/domain-management-utils';\nimport type { SsoDomainsTabProps } from '@/types/my-organization/idp-management/sso-domain/sso-domain-tab-types';\n\n/**\n * SsoDomainTab Component\n * @param props - Component props.\n * @param props.customMessages - Custom translation messages to override defaults\n * @param props.styling - Custom styling configuration with variables and classes\n * @param props.readOnly - Whether the component is in read-only mode\n * @param props.schema - Zod validation schema\n * @param props.idpId - Identity provider ID\n * @param props.domains - Array of domains\n * @param props.provider - SSO provider object\n * @returns JSX element\n */\nexport function SsoDomainTab({\n customMessages = {},\n styling = {\n variables: { common: {}, light: {}, dark: {} },\n classes: {},\n },\n readOnly = false,\n schema,\n idpId,\n domains,\n provider,\n}: SsoDomainsTabProps) {\n const { t } = useTranslator(\n 'idp_management.edit_sso_provider.tabs.domains.content',\n customMessages,\n );\n\n const { isDarkMode } = useTheme();\n const currentStyles = React.useMemo(\n () => getComponentStyles(styling, isDarkMode),\n [styling, isDarkMode],\n );\n\n const {\n domainsList,\n isCreating,\n selectedDomain,\n showVerifyModal,\n isVerifying,\n showDeleteModal,\n verifyError,\n handleCloseVerifyModal,\n handleVerify,\n handleDeleteClick,\n isLoading,\n isDeleting,\n setShowDeleteModal,\n handleDelete,\n setShowCreateModal,\n showCreateModal,\n handleCreate,\n idpDomains,\n handleVerifyActionColumn,\n isUpdating,\n isUpdatingId,\n handleToggleSwitch,\n } = useSsoDomainTab(idpId, {\n customMessages,\n domains,\n provider,\n });\n\n const columns: Column[] = React.useMemo(\n () => [\n {\n type: 'text',\n accessorKey: 'domain',\n title: t('table.columns.name'),\n render: (domain) => (\n
{domain.domain}
\n ),\n },\n {\n type: 'text',\n accessorKey: 'status',\n title: t('table.columns.status'),\n render: (domain) => (\n \n {t(`table.domain_statuses.${domain.status}`)}\n \n ),\n },\n {\n type: 'actions',\n title: '',\n render: (domain) => (\n \n ),\n },\n ],\n [t],\n );\n\n return (\n
\n
\n setShowCreateModal(true),\n icon: Plus,\n disabled: domains?.createAction?.disabled || readOnly,\n },\n ]}\n />\n
\n \n\n setShowCreateModal(false)}\n onCreate={handleCreate}\n customMessages={customMessages.domain_create}\n />\n\n \n\n setShowDeleteModal(false)}\n onDelete={handleDelete}\n customMessages={customMessages.domain_delete}\n />\n
\n );\n}\n", "type": "registry:component", "target": "components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-domain-tab.tsx" }, { "path": "src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provider-attribute-mappings.tsx", "content": "/**\n * SSO provider attribute mappings display.\n * @module sso-provider-attribute-mappings\n * @internal\n */\n\nimport {\n STRATEGY_DISPLAY_NAMES,\n type BaseUserAttributeMapItem,\n} from '@auth0/universal-components-core';\nimport { Info } from 'lucide-react';\nimport * as React from 'react';\n\nimport { CopyableTextField } from '@/components/auth0/shared/copyable-text-field';\nimport type { Column } from '@/components/auth0/shared/data-table';\nimport { Mapping } from '@/components/auth0/shared/mapping';\nimport { Badge } from '@/components/ui/badge';\nimport { Label } from '@/components/ui/label';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport type { SsoProviderAttributeMappingsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-edit-types';\n\ntype AttributeItem = BaseUserAttributeMapItem & {\n provisioning_field?: string;\n sso_field?: string[];\n};\n\nconst SCIM_NAMESPACE = 'urn:ietf:params:scim:schemas:core:2.0:User';\n\nconst CHANGE_STATUS = {\n UPDATED: 'updated',\n REMOVED: 'removed',\n NEW: 'new',\n} as const;\n\ntype ChangeStatus = (typeof CHANGE_STATUS)[keyof typeof CHANGE_STATUS];\n\nconst STATUS_VARIANTS: Record = {\n [CHANGE_STATUS.UPDATED]: 'info',\n [CHANGE_STATUS.REMOVED]: 'warning',\n [CHANGE_STATUS.NEW]: 'default',\n};\n\nconst getChangeStatus = (item: BaseUserAttributeMapItem): ChangeStatus | null => {\n const { is_extra: isRemoved, is_missing: isNew } = item;\n\n if (isRemoved && isNew) return CHANGE_STATUS.UPDATED;\n if (isRemoved) return CHANGE_STATUS.REMOVED;\n if (isNew) return CHANGE_STATUS.NEW;\n\n return null;\n};\n\nconst AttributeNameCell = ({\n item,\n section,\n t,\n}: {\n item: BaseUserAttributeMapItem;\n section: 'required' | 'optional';\n t: (key: string) => string;\n}) => {\n const status = getChangeStatus(item);\n\n return (\n
\n {item.label}\n\n {item.description && (\n \n \n \n \n \n {item.description}\n \n \n )}\n\n {status && (\n \n \n \n {t(`mappings.${section}.table.tags.${status}.label`)}\n \n \n \n {t(`mappings.${section}.table.tags.${status}.tooltip`)}\n \n \n )}\n
\n );\n};\n\n/**\n * Displays SSO provider attribute mappings configuration.\n *\n * @param props - Component props.\n * @param props.userAttributeMap - User attribute mapping configuration.\n * @param props.strategy - SSO strategy type.\n * @param props.isProvisioning - Whether provisioning is enabled.\n * @param props.customMessages - Custom i18n message overrides.\n * @param props.className - Additional CSS class names.\n * @returns Attribute mappings component.\n * @internal\n */\nexport function SsoProviderAttributeMappings({\n userAttributeMap = [],\n strategy,\n isProvisioning = false,\n customMessages,\n className,\n}: SsoProviderAttributeMappingsProps) {\n const { t } = useTranslator('idp_management.edit_sso_provider', customMessages);\n\n const strategyLabel = React.useMemo(() => {\n if (!strategy) return '';\n const knownStrategy = (STRATEGY_DISPLAY_NAMES as Record)[strategy];\n return knownStrategy || strategy;\n }, [strategy]);\n\n const { requiredItems, optionalItems } = React.useMemo(() => {\n const required: AttributeItem[] = [];\n const optional: AttributeItem[] = [];\n\n userAttributeMap?.forEach((item) => {\n if (item.is_required) required.push(item);\n else optional.push(item);\n });\n\n return { requiredItems: required, optionalItems: optional };\n }, [userAttributeMap]);\n\n const getColumns = React.useCallback(\n (section: 'required' | 'optional'): Column[] => [\n {\n accessorKey: 'label',\n type: 'text',\n width: '30%',\n title: t(`mappings.${section}.table.columns.attribute_name_label`),\n render: (item) => ,\n },\n {\n accessorKey: isProvisioning ? 'provisioning_field' : 'sso_field',\n type: 'custom',\n width: '70%',\n title: t(`mappings.${section}.table.columns.external_field_label`),\n render: (item: AttributeItem) => {\n const value = isProvisioning ? item.provisioning_field : item.sso_field?.join(', ');\n return ;\n },\n },\n ],\n [t, isProvisioning],\n );\n\n return (\n
\n \n \n \n
\n ) : null\n }\n />\n\n {optionalItems.length > 0 && (\n \n )}\n \n );\n}\n", "type": "registry:component", "target": "components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provider-attribute-mappings.tsx" }, { "path": "src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provider-attribute-sync-alert.tsx", "content": "/**\n * SSO provider attribute sync confirmation alert.\n * @module sso-provider-attribute-sync-alert\n * @internal\n */\n\nimport { AlertTriangle } from 'lucide-react';\nimport * as React from 'react';\n\nimport { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';\nimport { Button } from '@/components/ui/button';\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from '@/components/ui/dialog';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { cn } from '@/lib/utils';\nimport type { SsoProviderAttributeSyncAlertProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-edit-types';\n\n/**\n * Alert component for SSO provider attribute sync.\n *\n * @param props - Component props.\n * @param props.translatorKey - i18n translation key namespace.\n * @param props.className - Additional CSS class names.\n * @param props.customMessages - Custom i18n message overrides.\n * @param props.onSync - Callback when sync is triggered.\n * @param props.isSyncing - Whether sync is in progress.\n * @returns Attribute sync alert component.\n * @internal\n */\nexport function SsoProviderAttributeSyncAlert({\n translatorKey = 'idp_management.edit_sso_provider.tabs.sso.content.attribute_sync_alert',\n className,\n customMessages,\n onSync,\n isSyncing = false,\n}: SsoProviderAttributeSyncAlertProps) {\n const [isSyncModalOpen, setIsSyncModalOpen] = React.useState(false);\n\n const { t } = useTranslator(translatorKey, customMessages);\n\n const handleSyncClick = () => {\n setIsSyncModalOpen(true);\n };\n\n const handleConfirmSync = async () => {\n if (onSync) {\n await onSync();\n }\n setIsSyncModalOpen(false);\n };\n\n return (\n <>\n \n
\n \n
\n {t('title')}\n {t('description')}\n
\n
\n {\n \n }\n \n\n \n \n \n {t('sync_modal.title')}\n {t('sync_modal.description')}\n \n \n setIsSyncModalOpen(false)}\n disabled={isSyncing}\n >\n {t('sync_modal.actions.cancel_button_label')}\n \n \n \n \n \n \n );\n}\n", "type": "registry:component", "target": "components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provider-attribute-sync-alert.tsx" }, { "path": "src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provider-details.tsx", "content": "/**\n * SSO provider details form section.\n * @module sso-provider-details\n * @internal\n */\n\nimport { getComponentStyles } from '@auth0/universal-components-core';\nimport React from 'react';\n\nimport {\n ProviderConfigureFields,\n type ProviderConfigureFormHandle,\n} from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/provider-configure-fields';\nimport { ProviderDetails } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-details';\nimport { SsoProviderAttributeMappings } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provider-attribute-mappings';\nimport { FormActions } from '@/components/auth0/shared/form-actions';\nimport { Separator } from '@/components/ui/separator';\nimport { useTheme } from '@/hooks/shared/use-theme';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { cn } from '@/lib/utils';\nimport type { ProviderDetailsFormHandle } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types';\nimport type { SsoProviderDetailsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-tab-types';\n\n/**\n * SSO provider details editing form.\n * Combines provider details and configuration fields for editing SSO provider.\n *\n * @param props - Component props.\n * @param props.provider - The SSO provider being edited.\n * @param props.readOnly - Render in read-only mode.\n * @param props.idpConfig - Identity provider configuration.\n * @param props.formActions - Form action handlers.\n * @param props.customMessages - Custom i18n message overrides.\n * @param props.styling - CSS variables and class overrides.\n * @returns SSO provider details component.\n * @internal\n */\nexport function SsoProviderDetails({\n provider,\n readOnly = false,\n idpConfig,\n formActions,\n customMessages = {},\n styling = {\n variables: { common: {}, light: {}, dark: {} },\n classes: {},\n },\n}: SsoProviderDetailsProps) {\n const { t } = useTranslator('idp_management.sso_provider_details', customMessages);\n const { isDarkMode } = useTheme();\n const providerDetailsRef = React.useRef(null);\n const providerConfigureRef = React.useRef(null);\n const [isDetailsDirty, setIsDetailsDirty] = React.useState(false);\n const [isConfigureDirty, setIsConfigureDirty] = React.useState(false);\n\n const currentStyles = React.useMemo(\n () => getComponentStyles(styling, isDarkMode),\n [styling, isDarkMode],\n );\n\n const providerDetailsData = React.useMemo(() => {\n if (!provider) return undefined;\n\n return {\n name: provider.name ?? undefined,\n display_name: provider.display_name ?? undefined,\n };\n }, [provider]);\n\n const attributes = React.useMemo(() => {\n if (!provider) return null;\n return 'attributes' in provider ? (provider.attributes ?? null) : null;\n }, [provider]);\n\n const hasUnsavedChanges = isDetailsDirty || isConfigureDirty;\n const handleSave = async () => {\n if (!formActions?.nextAction?.onClick || !provider?.strategy) return;\n\n const isDetailsValid = await providerDetailsRef.current?.validate();\n const isConfigureValid = await providerConfigureRef.current?.validate();\n\n if (!isDetailsValid || !isConfigureValid) {\n return;\n }\n\n const detailsData = providerDetailsRef.current?.getData();\n const configureData = providerConfigureRef.current?.getData();\n const updateData = {\n strategy: provider.strategy,\n ...detailsData,\n ...configureData,\n };\n\n await formActions.nextAction.onClick(updateData);\n\n // Reset forms to mark current values as the new baseline\n providerDetailsRef.current?.reset(detailsData);\n providerConfigureRef.current?.reset(configureData as never);\n\n setIsDetailsDirty(false);\n setIsConfigureDirty(false);\n };\n\n if (!provider) {\n return null;\n }\n\n return (\n
\n
\n \n
\n\n
\n \n
\n\n \n
\n \n
\n\n {formActions && (\n \n )}\n
\n );\n}\n", "type": "registry:component", "target": "components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provider-details.tsx" }, { "path": "src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provider-tab.tsx", "content": "/**\n * SSO provider edit tab component.\n * @module sso-provider-tab\n * @internal\n */\n\nimport { getComponentStyles } from '@auth0/universal-components-core';\nimport React from 'react';\n\nimport { SsoProviderDelete } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-delete/provider-delete';\nimport { SsoProviderAttributeSyncAlert } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provider-attribute-sync-alert';\nimport { SsoProviderDetails } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provider-details';\nimport { SsoProviderRemoveFromOrganization } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-remove/provider-remove';\nimport { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';\nimport { useTheme } from '@/hooks/shared/use-theme';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport type { SsoProviderTabProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-tab-types';\n\n/**\n * SSO provider tab content for editing provider configuration.\n *\n * @param props - Component props.\n * @param props.customMessages - Custom i18n message overrides.\n * @param props.styling - CSS variables and class overrides.\n * @param props.readOnly - Render in read-only mode.\n * @param props.provider - The SSO provider being edited.\n * @param props.onDelete - Callback when provider is deleted.\n * @param props.onRemove - Callback when provider is removed from organization.\n * @param props.organization - Current organization context.\n * @param props.isDeleting - Whether deletion is in progress.\n * @param props.isRemoving - Whether removal is in progress.\n * @param props.idpConfig - Identity provider configuration.\n * @param props.shouldAllowDeletion - Whether deletion is allowed.\n * @param props.formActions - Form action handlers.\n * @param props.hasSsoAttributeSyncWarning - Whether to show attribute sync warning.\n * @param props.onAttributeSync - Callback for attribute sync.\n * @param props.isSyncingAttributes - Whether attribute sync is in progress.\n * @returns SSO provider tab content.\n * @internal\n */\nexport function SsoProviderTab({\n customMessages = {},\n styling = {\n variables: { common: {}, light: {}, dark: {} },\n classes: {},\n },\n readOnly = false,\n provider,\n onDelete,\n onRemove,\n organization,\n isDeleting,\n isRemoving,\n idpConfig,\n shouldAllowDeletion,\n formActions,\n hasSsoAttributeSyncWarning,\n onAttributeSync,\n isSyncingAttributes = false,\n}: SsoProviderTabProps) {\n const { t } = useTranslator('idp_management.edit_sso_provider.tabs.sso', customMessages);\n\n const { isDarkMode } = useTheme();\n const currentStyles = React.useMemo(\n () => getComponentStyles(styling, isDarkMode),\n [styling, isDarkMode],\n );\n\n return (\n
\n {hasSsoAttributeSyncWarning && (\n \n )}\n\n \n \n
\n {t('content.title')}\n \n {t('content.description')}\n \n
\n \n \n {provider && (\n \n )}\n \n \n\n
\n {provider && organization && (\n \n )}\n\n {provider && shouldAllowDeletion && (\n \n )}\n
\n
\n );\n}\n", "type": "registry:component", "target": "components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provider-tab.tsx" }, { "path": "src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/provisioning-manage-token.tsx", "content": "/**\n * SCIM token management section.\n * @module provisioning-manage-token\n * @internal\n */\n\n'use client';\n\nimport {\n getComponentStyles,\n type IdpScimTokenBase,\n type CreateIdpProvisioningScimTokenResponseContent,\n} from '@auth0/universal-components-core';\nimport { Trash2, Plus } from 'lucide-react';\nimport * as React from 'react';\n\nimport { ProvisioningCreateTokenModal } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-create-token/provisioning-create-token-modal';\nimport { ProvisioningDeleteTokenModal } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-delete-token/provisioning-delete-token-modal';\nimport { Badge } from '@/components/ui/badge';\nimport { Button } from '@/components/ui/button';\nimport {\n Card,\n CardAction,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from '@/components/ui/card';\nimport { Spinner } from '@/components/ui/spinner';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\nimport { useTheme } from '@/hooks/shared/use-theme';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { cn } from '@/lib/utils';\nimport type { ProvisioningManageTokenProps } from '@/types/my-organization/idp-management/sso-provisioning/provisioning-manage-token-types';\n\nconst MAX_TOKENS = 2;\nconst TOKEN_STATUS = {\n ACTIVE: 'active',\n EXPIRED: 'expired',\n} as const;\n\n/**\n *\n * @param props - Component props.\n * @param props.isScimTokensLoading - Whether SCIM tokens are loading\n * @param props.isScimTokenCreating - Whether a SCIM token is being created\n * @param props.isScimTokenDeleting - Whether a SCIM token is being deleted\n * @param props.onListScimTokens - Callback to list SCIM tokens\n * @param props.onCreateScimToken - Callback to create a SCIM token\n * @param props.onDeleteScimToken - Callback to delete a SCIM token\n * @param props.styling - Custom styling configuration with variables and classes\n * @param props.customMessages - Custom translation messages to override defaults\n * @returns JSX element\n */\nexport function ProvisioningManageToken({\n isScimTokensLoading,\n isScimTokenCreating,\n isScimTokenDeleting,\n onListScimTokens,\n onCreateScimToken,\n onDeleteScimToken,\n styling = {\n variables: {\n common: {},\n light: {},\n dark: {},\n },\n classes: {},\n },\n customMessages = {},\n}: ProvisioningManageTokenProps): React.JSX.Element {\n const { t } = useTranslator(\n 'idp_management.edit_sso_provider.tabs.provisioning.content.details.manage_tokens',\n customMessages,\n );\n const { isDarkMode } = useTheme();\n const [deleteTokenId, setDeleteTokenId] = React.useState(null);\n const [isCreateModalOpen, setIsCreateModalOpen] = React.useState(false);\n const [scimTokens, setScimTokens] = React.useState([]);\n const [createdToken, setCreatedToken] =\n React.useState(null);\n\n React.useEffect(() => {\n const loadTokens = async () => {\n const tokens = await onListScimTokens();\n if (tokens?.scim_tokens) {\n setScimTokens(tokens.scim_tokens);\n }\n };\n loadTokens();\n }, []);\n\n const currentStyles = React.useMemo(\n () => getComponentStyles(styling, isDarkMode),\n [styling, isDarkMode],\n );\n\n const canGenerateToken = scimTokens.length < MAX_TOKENS;\n\n const getTokenStatus = (\n token: IdpScimTokenBase,\n ): {\n labelKey: string;\n variant: 'secondary' | 'destructive';\n } => {\n if (!token.valid_until) {\n return { labelKey: TOKEN_STATUS.ACTIVE, variant: 'secondary' };\n }\n\n const expiryDate = new Date(token.valid_until);\n const now = new Date();\n const isExpired = expiryDate < now;\n\n return {\n labelKey: isExpired ? TOKEN_STATUS.EXPIRED : TOKEN_STATUS.ACTIVE,\n variant: isExpired ? 'destructive' : 'secondary',\n };\n };\n\n const handleGenerateToken = async () => {\n const result = await onCreateScimToken({ token_lifetime: 3600 });\n if (result) {\n setCreatedToken(result);\n setIsCreateModalOpen(true);\n const tokens = await onListScimTokens();\n if (tokens?.scim_tokens) {\n setScimTokens(tokens.scim_tokens);\n }\n }\n };\n\n const handleDeleteClick = (tokenId: string) => {\n setDeleteTokenId(tokenId);\n };\n\n const handleDeleteConfirm = async () => {\n if (deleteTokenId) {\n await onDeleteScimToken(deleteTokenId);\n setDeleteTokenId(null);\n const tokens = await onListScimTokens();\n if (tokens?.scim_tokens) {\n setScimTokens(tokens.scim_tokens);\n }\n }\n };\n\n const handleCloseCreateModal = () => {\n setCreatedToken(null);\n setIsCreateModalOpen(false);\n };\n\n return (\n \n \n \n \n {t('title')}\n \n \n {t('description')}\n \n \n \n \n \n \n {isScimTokenCreating ? (\n \n ) : (\n \n )}\n {t('generate_button_label')}\n \n \n \n {!canGenerateToken && {t('max_tokens_tooltip')}}\n \n \n \n\n {isScimTokensLoading ? (\n \n \n \n ) : scimTokens.length > 0 ? (\n \n {scimTokens.map((token) => {\n const status = getTokenStatus(token);\n const showExpiry = !token.valid_until;\n\n return (\n
\n
\n

\n {t('token_item.token_prefix')} {token.token_id}\n

\n {showExpiry && (\n

\n {t('token_item.never_expire')}\n

\n )}\n

{t('token_item.last_used')}

\n
\n
\n \n {t(`token_item.status_${status.labelKey}`)}\n \n handleDeleteClick(token.token_id)}\n disabled={isScimTokenDeleting}\n aria-label={`${t('token_item.delete_button_label')} ${token.token_id}`}\n className=\"shrink-0\"\n >\n {isScimTokenDeleting ? (\n \n ) : (\n \n )}\n {t('token_item.delete_button_label')}\n \n
\n
\n );\n })}\n \n ) : null}\n \n\n {\n setIsCreateModalOpen(open);\n if (!open) {\n handleCloseCreateModal();\n }\n }}\n createdToken={createdToken}\n customMessages={customMessages}\n styling={styling}\n />\n\n {\n if (!open) {\n setDeleteTokenId(null);\n }\n }}\n tokenId={deleteTokenId}\n onConfirm={handleDeleteConfirm}\n customMessages={customMessages}\n styling={styling}\n />\n \n );\n}\n", "type": "registry:component", "target": "components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/provisioning-manage-token.tsx" }, { "path": "src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-create-token/provisioning-create-token-modal-content.tsx", "content": "/**\n * SCIM token creation modal content.\n * @module provisioning-create-token-modal-content\n * @internal\n */\n\nimport { CopyableTextField } from '@/components/auth0/shared/copyable-text-field';\nimport { Label } from '@/components/ui/label';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { cn } from '@/lib/utils';\nimport type { ProvisioningCreateTokenModalContentProps } from '@/types/my-organization/idp-management/sso-provisioning/provisioning-token-types';\n\n/**\n *\n * @param props - Component props.\n * @param props.token - Token string\n * @param props.tokenId - Token identifier\n * @param props.customMessages - Custom translation messages to override defaults\n * @param props.className - Optional CSS class name for styling\n * @returns JSX element\n */\nexport function ProvisioningCreateTokenModalContent({\n token,\n tokenId,\n customMessages = {},\n className,\n}: ProvisioningCreateTokenModalContentProps) {\n const { t } = useTranslator(\n 'idp_management.edit_sso_provider.tabs.provisioning.content.details.manage_tokens.create_modal.content',\n customMessages,\n );\n\n return (\n
\n

\n {t('description')}\n

\n
\n \n \n
\n
\n );\n}\n", "type": "registry:component", "target": "components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-create-token/provisioning-create-token-modal-content.tsx" }, { "path": "src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-create-token/provisioning-create-token-modal.tsx", "content": "/**\n * SCIM token creation modal.\n * @module provisioning-create-token-modal\n * @internal\n */\n\nimport { Copy } from 'lucide-react';\nimport * as React from 'react';\n\nimport { ProvisioningCreateTokenModalContent } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-create-token/provisioning-create-token-modal-content';\nimport { Modal } from '@/components/ui/modal';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport type { ProvisioningCreateTokenModalProps } from '@/types/my-organization/idp-management/sso-provisioning/provisioning-manage-token-types';\n\n/**\n *\n * @param props - Component props.\n * @param props.open - Whether the component is open/visible\n * @param props.onOpenChange - Callback fired when open state changes\n * @param props.createdToken - Newly created token data\n * @param props.isLoading - Whether the component is in a loading state\n * @param props.customMessages - Custom translation messages to override defaults\n * @returns JSX element\n */\nexport function ProvisioningCreateTokenModal({\n open,\n onOpenChange,\n createdToken,\n isLoading,\n customMessages = {},\n}: ProvisioningCreateTokenModalProps): React.JSX.Element {\n const { t } = useTranslator(\n 'idp_management.edit_sso_provider.tabs.provisioning.content.details.manage_tokens',\n customMessages,\n );\n\n return (\n \n )\n }\n modalActions={{\n isLoading,\n showPrevious: false,\n showUnsavedChanges: false,\n nextAction: {\n type: 'button',\n label: t('create_modal.copy_and_close_button_label'),\n variant: 'primary',\n icon: ,\n disabled: isLoading,\n onClick: () => {\n if (createdToken) {\n navigator.clipboard.writeText(createdToken.token!);\n }\n onOpenChange(false);\n },\n },\n }}\n />\n );\n}\n", "type": "registry:component", "target": "components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-create-token/provisioning-create-token-modal.tsx" }, { "path": "src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-delete-modal.tsx", "content": "/**\n * SSO provisioning delete confirmation modal.\n * @module sso-provisioning-delete-modal\n * @internal\n */\n\nimport React from 'react';\n\nimport { Modal } from '@/components/ui/modal';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { cn } from '@/lib/utils';\nimport type { SsoProvisioningDeleteModalProps } from '@/types/my-organization/idp-management/sso-provisioning/sso-provisioning-tab-types';\n\n/**\n *\n * @param props - Component props.\n * @param props.open - Whether the component is open/visible\n * @param props.onOpenChange - Callback fired when open state changes\n * @param props.onConfirm - Callback fired when the action is confirmed\n * @param props.isLoading - Whether the component is in a loading state\n * @param props.customMessages - Custom translation messages to override defaults\n * @returns JSX element\n */\nexport function SsoProvisioningDeleteModal({\n open,\n onOpenChange,\n onConfirm,\n isLoading,\n customMessages,\n}: SsoProvisioningDeleteModalProps): React.JSX.Element {\n const { t } = useTranslator(\n 'idp_management.edit_sso_provider.tabs.provisioning.content.delete',\n customMessages,\n );\n\n return (\n \n

\n {t('modal.content.description')}\n

\n \n }\n modalActions={{\n isLoading,\n showUnsavedChanges: false,\n previousAction: {\n type: 'button',\n label: t('modal.actions.cancel_button_label'),\n variant: 'outline',\n disabled: isLoading,\n onClick: () => onOpenChange(false),\n },\n nextAction: {\n type: 'button',\n label: t('modal.actions.delete_button_label'),\n variant: 'destructive',\n disabled: isLoading,\n onClick: onConfirm,\n },\n }}\n />\n );\n}\n", "type": "registry:component", "target": "components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-delete-modal.tsx" }, { "path": "src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-delete-token/provisioning-delete-token-modal-content.tsx", "content": "/**\n * SCIM token deletion modal content.\n * @module provisioning-delete-token-modal-content\n * @internal\n */\n\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { cn } from '@/lib/utils';\nimport type { ProvisioningDeleteTokenModalContentProps } from '@/types/my-organization/idp-management/sso-provisioning/provisioning-token-types';\n\n/**\n *\n * @param props - Component props.\n * @param props.customMessages - Custom translation messages to override defaults\n * @param props.className - Optional CSS class name for styling\n * @param props.tokenId - Token identifier\n * @returns JSX element\n */\nexport function ProvisioningDeleteTokenModalContent({\n customMessages = {},\n className,\n tokenId,\n}: ProvisioningDeleteTokenModalContentProps) {\n const { t } = useTranslator(\n 'idp_management.edit_sso_provider.tabs.provisioning.content.details.manage_tokens.delete_modal.content',\n customMessages,\n );\n\n return (\n
\n

\n {t('confirmation', { tokenId })}\n

\n

\n {t('description')}\n

\n
\n );\n}\n", "type": "registry:component", "target": "components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-delete-token/provisioning-delete-token-modal-content.tsx" }, { "path": "src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-delete-token/provisioning-delete-token-modal.tsx", "content": "/**\n * SCIM token deletion modal.\n * @module provisioning-delete-token-modal\n * @internal\n */\n\nimport React from 'react';\n\nimport { ProvisioningDeleteTokenModalContent } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-delete-token/provisioning-delete-token-modal-content';\nimport { Modal } from '@/components/ui/modal';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport type { ProvisioningDeleteTokenModalProps } from '@/types/my-organization/idp-management/sso-provisioning/provisioning-manage-token-types';\n\n/**\n *\n * @param props - Component props.\n * @param props.open - Whether the component is open/visible\n * @param props.onOpenChange - Callback fired when open state changes\n * @param props.tokenId - Token identifier\n * @param props.onConfirm - Callback fired when the action is confirmed\n * @param props.isLoading - Whether the component is in a loading state\n * @param props.customMessages - Custom translation messages to override defaults\n * @returns JSX element\n */\nexport function ProvisioningDeleteTokenModal({\n open,\n onOpenChange,\n tokenId,\n onConfirm,\n isLoading,\n customMessages,\n}: ProvisioningDeleteTokenModalProps): React.JSX.Element {\n const { t } = useTranslator(\n 'idp_management.edit_sso_provider.tabs.provisioning.content.details.manage_tokens',\n customMessages,\n );\n\n return (\n \n }\n modalActions={{\n isLoading,\n showUnsavedChanges: false,\n previousAction: {\n type: 'button',\n label: t('delete_modal.cancel_button_label'),\n variant: 'outline',\n disabled: isLoading,\n onClick: () => onOpenChange(false),\n },\n nextAction: {\n type: 'button',\n label: t('delete_modal.delete_button_label'),\n variant: 'destructive',\n disabled: isLoading,\n onClick: onConfirm,\n },\n }}\n />\n );\n}\n", "type": "registry:component", "target": "components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-delete-token/provisioning-delete-token-modal.tsx" }, { "path": "src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-details.tsx", "content": "/**\n * SSO provisioning details form.\n * @module sso-provisioning-details\n * @internal\n */\n\n'use client';\n\nimport {\n getComponentStyles,\n type ProvisioningDetailsFormValues,\n ssoProvisioningSchema,\n} from '@auth0/universal-components-core';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { useMemo } from 'react';\nimport { useForm } from 'react-hook-form';\n\nimport { SsoProviderAttributeMappings } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provider-attribute-mappings';\nimport { ProvisioningManageToken } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/provisioning-manage-token';\nimport { CopyableTextField } from '@/components/auth0/shared/copyable-text-field';\nimport {\n Form,\n FormControl,\n FormDescription,\n FormField,\n FormItem,\n FormLabel,\n FormMessage,\n} from '@/components/ui/form';\nimport { Separator } from '@/components/ui/separator';\nimport { TextField } from '@/components/ui/text-field';\nimport { useCoreClient } from '@/hooks/shared/use-core-client';\nimport { useTheme } from '@/hooks/shared/use-theme';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { FORM_VALIDATION_MODE } from '@/lib/constants/form-constants';\nimport { cn } from '@/lib/utils';\nimport type { SsoProvisioningDetailsProps } from '@/types/my-organization/idp-management/sso-provisioning/sso-provisioning-tab-types';\n\n/**\n * SSO provisioning details for SCIM token management.\n *\n * @param props - Component props.\n * @param props.provider - The SSO provider being configured.\n * @param props.provisioningConfig - Provisioning configuration settings.\n * @param props.isScimTokensLoading - Whether SCIM tokens are loading.\n * @param props.isScimTokenCreating - Whether a SCIM token is being created.\n * @param props.isScimTokenDeleting - Whether a SCIM token is being deleted.\n * @param props.onListScimTokens - Callback to list SCIM tokens.\n * @param props.onCreateScimToken - Callback to create a SCIM token.\n * @param props.onDeleteScimToken - Callback to delete a SCIM token.\n * @param props.customMessages - Custom i18n message overrides.\n * @param props.styling - CSS variables and class overrides.\n * @returns SSO provisioning details component.\n * @internal\n */\nexport function SsoProvisioningDetails({\n provider,\n provisioningConfig,\n isScimTokensLoading,\n isScimTokenCreating,\n isScimTokenDeleting,\n onListScimTokens,\n onCreateScimToken,\n onDeleteScimToken,\n customMessages = {},\n styling = {\n variables: { common: {}, light: {}, dark: {} },\n classes: {},\n },\n}: SsoProvisioningDetailsProps) {\n const { t } = useTranslator(\n 'idp_management.edit_sso_provider.tabs.provisioning.content.details',\n customMessages,\n );\n const { isDarkMode } = useTheme();\n\n const currentStyles = useMemo(\n () => getComponentStyles(styling, isDarkMode),\n [styling, isDarkMode],\n );\n\n const { coreClient } = useCoreClient();\n\n const scimEndpointUrl = useMemo(() => {\n const domain = coreClient?.getDomain() || 'your-domain';\n return `https://${domain}/scim/v2/connections/${provider.id}/`;\n }, [coreClient, provider.id]);\n\n const form = useForm({\n resolver: zodResolver(ssoProvisioningSchema),\n mode: FORM_VALIDATION_MODE,\n defaultValues: {\n userIdAttribute: provisioningConfig?.user_id_attribute || '',\n scimEndpointUrl: scimEndpointUrl || '',\n },\n });\n\n return (\n \n
\n \n (\n \n \n {t('fields.user_id_attribute.label')}\n \n \n \n \n \n \n {t('fields.user_id_attribute.helper_text')}\n \n \n )}\n />\n\n \n\n (\n \n \n {t('fields.scim_endpoint_url.label')}\n \n \n \n \n \n \n )}\n />\n \n \n \n \n \n );\n}\n", "type": "registry:component", "target": "components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-details.tsx" }, { "path": "src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-tab.tsx", "content": "/**\n * SSO provisioning tab component.\n * @module sso-provisioning-tab\n * @internal\n */\n\nimport { getComponentStyles } from '@auth0/universal-components-core';\nimport * as React from 'react';\n\nimport { SsoProviderAttributeSyncAlert } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provider-attribute-sync-alert';\nimport { SsoProvisioningDeleteModal } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-delete-modal';\nimport { SsoProvisioningDetails } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-details';\nimport {\n Card,\n CardAction,\n CardDescription,\n CardHeader,\n CardTitle,\n CardContent,\n} from '@/components/ui/card';\nimport { Spinner } from '@/components/ui/spinner';\nimport { Switch } from '@/components/ui/switch';\nimport { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';\nimport { useSsoProviderEdit } from '@/hooks/my-organization/use-sso-provider-edit';\nimport { useTheme } from '@/hooks/shared/use-theme';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { cn } from '@/lib/utils';\nimport type { SsoProvisioningTabProps } from '@/types/my-organization/idp-management/sso-provisioning/sso-provisioning-tab-types';\n\n/**\n * SSO provisioning tab content for managing provisioning configuration.\n *\n * @param props - Component props.\n * @param props.provider - The SSO provider being configured.\n * @param props.styling - CSS variables and class overrides.\n * @param props.customMessages - Custom i18n message overrides.\n * @param props.hasProvisioningAttributeSyncWarning - Whether to show attribute sync warning.\n * @param props.onAttributeSync - Callback for attribute sync.\n * @param props.isSyncingAttributes - Whether attribute sync is in progress.\n * @returns SSO provisioning tab content.\n * @internal\n */\nexport function SsoProvisioningTab({\n provider,\n styling = { variables: { common: {}, light: {}, dark: {} }, classes: {} },\n customMessages = {},\n hasProvisioningAttributeSyncWarning,\n onAttributeSync,\n isSyncingAttributes = false,\n}: SsoProvisioningTabProps): React.JSX.Element {\n const { t } = useTranslator(\n 'idp_management.edit_sso_provider.tabs.provisioning.content',\n customMessages,\n );\n\n const {\n provisioningConfig,\n isProvisioningLoading,\n isProvisioningUpdating,\n isProvisioningDeleting,\n isScimTokensLoading,\n isScimTokenCreating,\n isScimTokenDeleting,\n fetchProvisioning,\n createProvisioning,\n deleteProvisioning,\n listScimTokens,\n createScimToken,\n deleteScimToken,\n } = useSsoProviderEdit(provider?.id || '');\n\n const { isDarkMode } = useTheme();\n const currentStyles = React.useMemo(\n () => getComponentStyles(styling, isDarkMode),\n [styling, isDarkMode],\n );\n\n const [isDeleteModalOpen, setDeleteModalOpen] = React.useState(false);\n\n React.useEffect(() => {\n if (provider?.id) {\n fetchProvisioning();\n }\n }, [provider?.id]);\n\n const handleProvisioningToggle = async (enabled: boolean) => {\n if (!provider?.id) return;\n\n if (enabled) {\n await createProvisioning();\n await fetchProvisioning();\n } else {\n setDeleteModalOpen(true);\n }\n };\n\n const handleDeleteProvisioningConfirm = async () => {\n await deleteProvisioning();\n setDeleteModalOpen(false);\n };\n\n const isLoading = isProvisioningLoading || isProvisioningUpdating || isProvisioningDeleting;\n const isProvisioningEnabled = !!provisioningConfig;\n const enableProvisioningToggle = isLoading || !provider?.id || !provider.is_enabled;\n\n return (\n \n {hasProvisioningAttributeSyncWarning && (\n \n )}\n\n \n \n \n {t('header.title')}\n \n \n {t('header.description')}\n \n \n
\n
\n {isLoading ? (\n \n ) : (\n \n \n \n \n \n \n \n {!provider.is_enabled\n ? t('header.provider_disabled_tooltip')\n : isProvisioningEnabled\n ? t('header.disable_provisioning_tooltip')\n : t('header.enable_provisioning_tooltip')}\n \n \n )}\n
\n
\n \n \n \n {isProvisioningEnabled && (\n \n )}\n \n \n\n \n \n );\n}\n", "type": "registry:component", "target": "components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-tab.tsx" }, { "path": "src/components/auth0/my-organization/shared/idp-management/sso-provider-remove/provider-remove-modal.tsx", "content": "/**\n * SSO provider remove from organization modal.\n * @module provider-remove-modal\n * @internal\n */\n\nimport * as React from 'react';\n\nimport { SsoProviderDeleteModalContent } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-delete/provider-delete-modal-content';\nimport { Modal } from '@/components/ui/modal';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { cn } from '@/lib/utils';\nimport type { SsoProviderRemoveFromOrganizationModalProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-delete-types';\n\n/**\n *\n * @param props - Component props.\n * @param props.className - Optional CSS class name for styling\n * @param props.isOpen - Whether the modal/dialog is open\n * @param props.onClose - Callback fired when the component should close\n * @param props.provider - SSO provider object\n * @param props.organizationName - Name of the organization\n * @param props.onRemove - Callback fired when remove action is triggered\n * @param props.isLoading - Whether the component is in a loading state\n * @param props.customMessages - Custom translation messages to override defaults\n * @returns JSX element\n */\nexport function SsoProviderRemoveFromOrganizationModal({\n className,\n isOpen,\n onClose,\n provider,\n organizationName,\n onRemove,\n isLoading = false,\n customMessages = {},\n}: SsoProviderRemoveFromOrganizationModalProps) {\n const { t } = useTranslator('idp_management.remove_sso_provider', customMessages);\n const [confirmationText, setConfirmationText] = React.useState('');\n\n const handleModalContentChange = React.useCallback((value: string) => {\n setConfirmationText(value);\n }, []);\n\n const handleRemove = React.useCallback(async () => {\n if (provider) {\n await onRemove(provider);\n onClose();\n }\n }, [onRemove, provider, onClose]);\n\n const handleOpenChange = React.useCallback(\n (open: boolean) => {\n if (!open) {\n onClose();\n }\n },\n [onClose],\n );\n\n React.useEffect(() => {\n if (isOpen) {\n setConfirmationText('');\n }\n }, [isOpen]);\n\n return (\n \n

\n <>\n {t.trans('modal.description', {\n components: {\n bold: (children: string) => {children},\n },\n vars: { providerName: provider.name },\n })}\n \n

\n\n \n \n }\n modalActions={{\n isLoading,\n nextAction: {\n type: 'button',\n label: t('modal.actions.remove_button_text'),\n onClick: handleRemove,\n variant: 'destructive',\n disabled: isLoading || confirmationText !== provider.name,\n },\n previousAction: {\n label: t('modal.actions.cancel_button_text'),\n onClick: onClose,\n },\n }}\n />\n );\n}\n", "type": "registry:component", "target": "components/auth0/my-organization/shared/idp-management/sso-provider-remove/provider-remove-modal.tsx" }, { "path": "src/components/auth0/my-organization/shared/idp-management/sso-provider-remove/provider-remove.tsx", "content": "/**\n * SSO provider remove from organization section.\n * @module provider-remove\n * @internal\n */\n\nimport * as React from 'react';\n\nimport { SsoProviderRemoveFromOrganizationModal } from '@/components/auth0/my-organization/shared/idp-management/sso-provider-remove/provider-remove-modal';\nimport { Button } from '@/components/ui/button';\nimport { Card, CardContent } from '@/components/ui/card';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { cn } from '@/lib/utils';\nimport type { SsoProviderRemoveFromOrganizationProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-delete-types';\n\n/**\n *\n * @param props - Component props.\n * @param props.provider - SSO provider object\n * @param props.organizationName - Name of the organization\n * @param props.onRemove - Callback fired when remove action is triggered\n * @param props.customMessages - Custom translation messages to override defaults\n * @param props.isLoading - Whether the component is in a loading state\n * @param props.readOnly - Whether the component is in read-only mode\n * @returns JSX element\n */\nexport function SsoProviderRemoveFromOrganization({\n provider,\n organizationName,\n onRemove,\n customMessages = {},\n isLoading,\n readOnly,\n}: SsoProviderRemoveFromOrganizationProps) {\n const { t } = useTranslator('idp_management.remove_sso_provider', customMessages);\n const [isModalOpen, setIsModalOpen] = React.useState(false);\n\n const openModal = React.useCallback(() => {\n setIsModalOpen(true);\n }, []);\n\n const closeModal = React.useCallback(() => {\n setIsModalOpen(false);\n }, []);\n\n return (\n <>\n
\n \n \n
\n \n {t('title', {\n providerName: provider.name,\n organizationName: organizationName,\n })}\n \n \n {t('description', { providerName: provider.name })}\n

\n
\n\n \n {t('remove_button_label')}\n \n \n \n
\n\n \n \n );\n}\n", "type": "registry:component", "target": "components/auth0/my-organization/shared/idp-management/sso-provider-remove/provider-remove.tsx" }, { "path": "src/components/auth0/shared/copyable-text-field.tsx", "content": "/**\n * Text field with copy-to-clipboard button.\n * @module copyable-text-field\n * @internal\n */\n\nimport { Copy } from 'lucide-react';\nimport * as React from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport { TextField, type TextFieldProps } from '@/components/ui/text-field';\nimport { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { cn } from '@/lib/utils';\n\nexport interface CopyableTextFieldProps extends TextFieldProps {\n onCopy?: () => void;\n copyButtonClassName?: string;\n tooltipSide?: 'top' | 'bottom' | 'left' | 'right';\n tooltipAlign?: 'start' | 'center' | 'end';\n showCopyButton?: boolean;\n}\n\nconst CopyableTextField = React.forwardRef(\n (\n {\n onCopy,\n copyButtonClassName,\n tooltipSide = 'top',\n tooltipAlign = 'end',\n readOnly = true,\n endAdornment,\n showCopyButton = true,\n ...props\n },\n ref,\n ) => {\n const { t } = useTranslator('common');\n const [tooltipText, setTooltipText] = React.useState(t('copy'));\n const [tooltipOpen, setTooltipOpen] = React.useState(false);\n\n const handleCopy = async () => {\n if (props.value) {\n await navigator.clipboard.writeText(String(props.value));\n setTooltipText(t('copied'));\n setTooltipOpen(true);\n setTimeout(() => {\n setTooltipText(t('copy'));\n setTooltipOpen(false);\n }, 1000);\n onCopy?.();\n }\n };\n\n const copyButton = (\n \n \n \n \n \n \n \n {tooltipText}\n \n \n );\n\n return (\n \n {endAdornment}\n {copyButton}\n \n ) : (\n copyButton\n )\n ) : (\n endAdornment\n )\n }\n />\n );\n },\n);\n\nCopyableTextField.displayName = 'CopyableTextField';\n\nexport { CopyableTextField };\n", "type": "registry:component", "target": "components/auth0/shared/copyable-text-field.tsx" }, { "path": "src/components/auth0/shared/data-table.tsx", "content": "/**\n * Data table with sorting and actions.\n * @module data-table\n * @internal\n */\n\nimport type { ActionButton as CoreActionButton } from '@auth0/universal-components-core';\nimport {\n useReactTable,\n getCoreRowModel,\n getSortedRowModel,\n flexRender,\n} from '@tanstack/react-table';\nimport type { SortingState, ColumnDef, RowSelectionState } from '@tanstack/react-table';\nimport { Copy } from 'lucide-react';\nimport React, { useState, useMemo } from 'react';\n\nimport { MiddleEllipsisText } from '@/components/auth0/shared/middle-ellipsis-text';\nimport { Badge } from '@/components/ui/badge';\nimport { Button } from '@/components/ui/button';\nimport { Checkbox } from '@/components/ui/checkbox';\nimport { InlineCode } from '@/components/ui/inline-code';\nimport { Spinner } from '@/components/ui/spinner';\nimport { Switch } from '@/components/ui/switch';\nimport {\n Table,\n TableHeader,\n TableBody,\n TableRow,\n TableHead,\n TableCell,\n} from '@/components/ui/table';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\nimport { cn } from '@/lib/utils';\n\ninterface ActionButton extends Omit {\n onClick: (event: React.MouseEvent) => void;\n}\n\ntype AlignmentType = 'left' | 'center' | 'right';\n\nexport interface BaseColumn {\n title: string | React.ReactNode;\n accessorKey: keyof Item;\n width?: string;\n enableSorting?: boolean;\n headerAlign?: AlignmentType;\n}\n\nexport interface TextColumn extends BaseColumn {\n type: 'text';\n render?: (item: Item, value: unknown) => React.ReactNode;\n}\n\nexport interface DateColumn extends BaseColumn {\n type: 'date';\n format?: 'short' | 'medium' | 'long' | 'relative';\n render?: (item: Item, value: Date | string | number) => React.ReactNode;\n}\n\nexport interface SwitchColumn extends BaseColumn {\n type: 'switch';\n onToggle?: (checked: boolean, item: Item) => void;\n}\n\nexport interface ButtonColumn extends BaseColumn {\n type: 'button';\n buttonText: string;\n variant?: 'primary' | 'destructive' | 'outline' | 'ghost' | 'link';\n onClick: (item: Item) => void;\n}\n\nexport interface CopyColumnLabels {\n copyTooltip?: string;\n copiedTooltip?: string;\n}\n\nexport interface DataTableSelectionLabels {\n selectAll: string;\n selectRow: (index: number) => string;\n}\n\nexport interface CopyColumn extends BaseColumn {\n type: 'copy';\n}\n\nexport interface BadgeColumn extends BaseColumn {\n type: 'badge';\n variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'success';\n}\n\nexport interface ActionsColumn extends Omit, 'accessorKey'> {\n type: 'actions';\n accessorKey?: keyof Item;\n render: (item: Item) => React.ReactNode;\n}\n\nexport interface CustomColumn extends BaseColumn {\n type: 'custom';\n render: (item: Item, value: unknown) => React.ReactNode;\n}\n\nexport type Column =\n | TextColumn\n | DateColumn\n | SwitchColumn\n | ButtonColumn\n | CopyColumn\n | BadgeColumn\n | ActionsColumn\n | CustomColumn;\n\nexport interface EmptyStateProps {\n title: string;\n subtitle?: string;\n action?: ActionButton;\n}\n\nexport interface DataTableSortConfig {\n key: string | null;\n direction: 'asc' | 'desc';\n}\n\nexport interface DataTableProps {\n data: Item[];\n columns: Column[];\n loading?: boolean;\n loader?: React.ReactNode;\n emptyState?: EmptyStateProps;\n onRowClick?: (rowData: Item) => void;\n className?: string;\n headerAlign?: AlignmentType;\n /** When provided, sorting is delegated to the parent (server-side). */\n onSortChange?: (sortConfig: DataTableSortConfig) => void;\n /** Controlled sort state. Used with onSortChange for server-side sorting. */\n sortConfig?: DataTableSortConfig;\n /** Enable row selection with checkboxes. */\n selectable?: boolean;\n /** Controlled selected rows. */\n selectedRows?: Item[];\n /** Called when selection changes. */\n onSelectedRowsChange?: (rows: Item[]) => void;\n /** Derive a stable string ID from a row for selection tracking. */\n getRowId?: (row: Item) => string;\n /** Accessible labels for selection checkboxes. */\n selectionLabels?: DataTableSelectionLabels;\n}\n\nconst ALIGNMENT_CLASSES = {\n text: {\n left: 'text-left',\n center: 'text-center',\n right: 'text-right',\n },\n flex: {\n left: 'justify-start',\n center: 'justify-center',\n right: 'justify-end',\n },\n} as const;\n\nconst isEmpty = (value: unknown): boolean => {\n return value === null || value === undefined || value === '';\n};\n\nconst formatDate = (value: Date | string | number, format: string = 'medium'): string => {\n const date = new Date(value);\n if (isNaN(date.getTime())) return 'Invalid Date';\n\n switch (format) {\n case 'short':\n return date.toLocaleDateString();\n case 'long':\n return date.toLocaleDateString(undefined, {\n weekday: 'long',\n year: 'numeric',\n month: 'long',\n day: 'numeric',\n });\n case 'relative': {\n const now = new Date();\n const diffTime = date.getTime() - now.getTime();\n const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));\n\n if (Math.abs(diffDays) === 0) return 'Today';\n if (diffDays === 1) return 'Tomorrow';\n if (diffDays === -1) return 'Yesterday';\n if (diffDays > 0) return `In ${diffDays} days`;\n return `${Math.abs(diffDays)} days ago`;\n }\n case 'medium':\n default:\n return date.toLocaleDateString(undefined, {\n year: 'numeric',\n month: 'short',\n day: 'numeric',\n });\n }\n};\n\nconst DEFAULT_COPY_LABELS: Required = {\n copyTooltip: 'Copy to clipboard',\n copiedTooltip: 'Copied!',\n};\n\nconst DEFAULT_SELECTION_LABELS: DataTableSelectionLabels = {\n selectAll: 'Select all rows',\n selectRow: (index: number) => `Select row ${index + 1}`,\n};\n\n/**\n * Copy button with clipboard functionality.\n * @param props - Component props.\n * @param props.value - Value to copy\n * @param props.labels - Tooltip labels\n * @returns JSX element\n */\nfunction CopyButton({\n value,\n labels = DEFAULT_COPY_LABELS,\n}: {\n value: unknown;\n labels?: CopyColumnLabels;\n}) {\n const [copied, setCopied] = useState(false);\n const [copyTooltipOpen, setCopyTooltipOpen] = useState(false);\n const stringValue = String(value);\n\n const handleCopy = async (e: React.MouseEvent) => {\n e.stopPropagation();\n if (!value) return;\n\n try {\n await navigator.clipboard.writeText(stringValue);\n setCopied(true);\n setCopyTooltipOpen(true);\n\n setTimeout(() => {\n setCopied(false);\n setCopyTooltipOpen(false);\n }, 2000);\n } catch (error) {\n console.error('Failed to copy text:', error);\n }\n };\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n

{copied ? labels.copiedTooltip : labels.copyTooltip}

\n \n \n \n );\n}\n\n/**\n * Renders a text column cell.\n * @param item - Data item.\n * @param value - Cell value.\n * @param column - Column configuration.\n * @returns React node\n */\nfunction renderTextColumn(\n item: Item,\n value: unknown,\n column: TextColumn,\n): React.ReactNode {\n if (column.render) {\n return column.render(item, value);\n }\n\n return {String(value)};\n}\n\n/**\n * Renders a date column cell.\n * @param item - Data item.\n * @param value - Cell value.\n * @param column - Column configuration.\n * @returns React node\n */\nfunction renderDateColumn(\n item: Item,\n value: Date | string | number,\n column: DateColumn,\n): React.ReactNode {\n if (column.render) {\n return column.render(item, value);\n }\n const formattedDate = formatDate(value, column.format);\n\n return (\n \n {formattedDate}\n \n );\n}\n\n/**\n * Renders a switch column cell.\n * @param item - Data item.\n * @param value - Cell value.\n * @param column - Column configuration.\n * @returns React node\n */\nfunction renderSwitchColumn(\n item: Item,\n value: boolean,\n column: SwitchColumn,\n): React.ReactNode {\n const handleToggle = (checked: boolean) => {\n column.onToggle?.(checked, item);\n };\n\n return (\n
e.stopPropagation()}>\n \n
\n );\n}\n\n/**\n * Renders a button column cell.\n * @param item - Data item.\n * @param column - Column configuration.\n * @returns React node\n */\nfunction renderButtonColumn(item: Item, column: ButtonColumn): React.ReactNode {\n const handleClick = (e: React.MouseEvent) => {\n e.stopPropagation();\n column.onClick(item);\n };\n\n return (\n \n );\n}\n\n/**\n * Renders a badge column cell.\n * @param value - Cell value.\n * @param column - Column configuration.\n * @returns React node\n */\nfunction renderBadgeColumn(value: unknown, column: BadgeColumn): React.ReactNode {\n return {String(value)};\n}\n\n/**\n * Renders a copy column cell.\n * @param value - Cell value.\n * @returns React node\n */\nfunction renderCopyColumn(value: unknown): React.ReactNode {\n return ;\n}\n\n/**\n * Empty state component for data table.\n * @param props - Component props.\n * @param props.title - Empty state title.\n * @param props.subtitle - Empty state subtitle.\n * @param props.action - Optional action button config.\n * @returns JSX element\n */\nfunction EmptyState({ title, subtitle, action }: EmptyStateProps) {\n return (\n
\n

{title}

\n {subtitle &&

{subtitle}

}\n {action && (\n \n )}\n
\n );\n}\n\n/**\n * Generic data table component.\n * @param props - Component props.\n * @param props.data - Table data items.\n * @param props.columns - Column configurations.\n * @param props.loading - Loading state.\n * @param props.loader - Custom loader component.\n * @param props.emptyState - Empty state configuration.\n * @param props.onRowClick - Row click handler.\n * @param props.className - Additional CSS classes.\n * @param props.headerAlign - Default header alignment.\n * @returns JSX element\n */\nexport function DataTable({\n data,\n columns,\n loading = false,\n loader,\n emptyState,\n onRowClick,\n className,\n headerAlign = 'left',\n onSortChange,\n sortConfig,\n selectable = false,\n selectedRows,\n onSelectedRowsChange,\n getRowId,\n selectionLabels,\n}: DataTableProps) {\n const isServerSideSort = !!onSortChange;\n const isControlledSelection = selectedRows !== undefined;\n\n const [internalSorting, setInternalSorting] = useState([]);\n const [internalRowSelection, setInternalRowSelection] = useState({});\n\n // Convert controlled sortConfig to TanStack SortingState for header display\n const sorting: SortingState = useMemo(() => {\n if (isServerSideSort && sortConfig?.key) {\n return [{ id: sortConfig.key, desc: sortConfig.direction === 'desc' }];\n }\n return internalSorting;\n }, [isServerSideSort, sortConfig, internalSorting]);\n\n const rowSelection = useMemo(() => {\n if (!selectable) return {};\n if (isControlledSelection && selectedRows) {\n if (getRowId) {\n return Object.fromEntries(selectedRows.map((row) => [getRowId(row), true]));\n }\n return Object.fromEntries(\n data.reduce<[string, boolean][]>((acc, item, idx) => {\n if (selectedRows.includes(item)) acc.push([String(idx), true]);\n return acc;\n }, []),\n );\n }\n return internalRowSelection;\n }, [selectable, isControlledSelection, selectedRows, getRowId, data, internalRowSelection]);\n\n const handleSortingChange = React.useCallback(\n (updater: SortingState | ((old: SortingState) => SortingState)) => {\n const newSorting = typeof updater === 'function' ? updater(sorting) : updater;\n\n if (isServerSideSort) {\n const sort = newSorting[0];\n if (sort) {\n onSortChange({ key: sort.id, direction: sort.desc ? 'desc' : 'asc' });\n } else {\n onSortChange({ key: null, direction: 'asc' });\n }\n } else {\n setInternalSorting(newSorting);\n }\n },\n [isServerSideSort, onSortChange, sorting],\n );\n\n const handleRowSelectionChange = React.useCallback(\n (updater: RowSelectionState | ((old: RowSelectionState) => RowSelectionState)) => {\n const newSelection = typeof updater === 'function' ? updater(rowSelection) : updater;\n if (!isControlledSelection) setInternalRowSelection(newSelection);\n if (onSelectedRowsChange) {\n const items = getRowId\n ? data.filter((item) => newSelection[getRowId(item)])\n : data.filter((_, idx) => newSelection[String(idx)]);\n onSelectedRowsChange(items);\n }\n },\n [rowSelection, isControlledSelection, onSelectedRowsChange, getRowId, data],\n );\n\n const selectionColumn = useMemo>(\n () => ({\n id: '__selection__',\n enableSorting: false,\n size: 48,\n meta: {\n headerAlign: 'left' as AlignmentType,\n column: {\n type: 'actions',\n title: '',\n width: '48px',\n enableSorting: false,\n render: () => null,\n } as unknown as Column,\n },\n header: ({ table: t }) => (\n t.toggleAllPageRowsSelected(!!checked)}\n aria-label={selectionLabels?.selectAll ?? DEFAULT_SELECTION_LABELS.selectAll}\n onClick={(e: React.MouseEvent) => e.stopPropagation()}\n />\n ),\n cell: ({ row }) => (\n row.toggleSelected(!!checked)}\n aria-label={\n selectionLabels?.selectRow(row.index) ?? DEFAULT_SELECTION_LABELS.selectRow(row.index)\n }\n onClick={(e: React.MouseEvent) => e.stopPropagation()}\n />\n ),\n }),\n [selectionLabels],\n );\n\n const tableColumns = useMemo[]>(() => {\n const dataCols: ColumnDef[] = columns.map((column, index) => {\n return {\n id: column.accessorKey ? String(column.accessorKey) : `column-${index}`,\n accessorKey: column.accessorKey as string,\n header:\n typeof column.title === 'string' ? column.title : () => column.title as React.ReactNode,\n size: column.width\n ? isNaN(Number(column.width))\n ? undefined\n : Number(column.width)\n : undefined,\n enableSorting: column.enableSorting !== false && !!column.accessorKey,\n meta: {\n headerAlign: column.headerAlign || headerAlign || 'left',\n column: column,\n },\n\n cell: ({ getValue, row }) => {\n const value = getValue();\n const item = row.original;\n\n if (column.type === 'actions') {\n return
e.stopPropagation()}>{column.render(item)}
;\n }\n\n if (column.type === 'custom') {\n return <>{column.render(item, value)};\n }\n\n if (column.type === 'switch') {\n return renderSwitchColumn(item, value as boolean, column);\n }\n\n if (column.type === 'button') {\n return renderButtonColumn(item, column);\n }\n\n if (isEmpty(value)) {\n return null;\n }\n\n switch (column.type) {\n case 'text':\n return renderTextColumn(item, value, column);\n case 'date':\n return renderDateColumn(item, value as Date | string | number, column);\n case 'copy':\n return renderCopyColumn(value);\n case 'badge':\n return renderBadgeColumn(value, column);\n default:\n return {String(value)};\n }\n },\n };\n });\n return selectable ? [selectionColumn, ...dataCols] : dataCols;\n }, [columns, headerAlign, selectable, selectionColumn]);\n\n const table = useReactTable({\n data,\n columns: tableColumns,\n state: {\n sorting,\n ...(selectable && { rowSelection }),\n },\n getRowId: getRowId,\n onSortingChange: handleSortingChange,\n ...(selectable && { onRowSelectionChange: handleRowSelectionChange }),\n enableRowSelection: selectable,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: isServerSideSort ? undefined : getSortedRowModel(),\n manualSorting: isServerSideSort,\n manualPagination: true,\n });\n\n if (loading) {\n return (\n
\n {loader || }\n
\n );\n }\n\n return (\n
\n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n const canSort = header.column.getCanSort();\n const sortDirection = header.column.getIsSorted();\n const meta = header.column.columnDef.meta as {\n headerAlign: AlignmentType;\n column: Column;\n };\n\n return (\n \n {flexRender(header.column.columnDef.header, header.getContext())}\n \n );\n })}\n \n ))}\n \n \n {table.getRowModel().rows.length === 0 ? (\n \n \n \n \n \n ) : (\n table.getRowModel().rows.map((row) => (\n onRowClick?.(row.original)}\n >\n {row.getVisibleCells().map((cell) => {\n const meta = cell.column.columnDef.meta as {\n column: Column;\n };\n return (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n );\n })}\n \n ))\n )}\n \n
\n
\n );\n}\n", "type": "registry:component", "target": "components/auth0/shared/data-table.tsx" }, { "path": "src/components/auth0/shared/form-actions.tsx", "content": "/**\n * Form action buttons component.\n * @module form-actions\n * @internal\n */\n\nimport type { ActionButton } from '@auth0/universal-components-core';\nimport * as React from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport { Spinner } from '@/components/ui/spinner';\nimport { cn } from '@/lib/utils';\n\nexport interface FormActionsProps {\n hasUnsavedChanges?: boolean;\n isLoading?: boolean;\n nextAction?: Partial>;\n previousAction?: Partial>;\n showPrevious?: boolean;\n showNext?: boolean;\n showUnsavedChanges?: boolean;\n align?: 'left' | 'right';\n className?: string;\n unsavedChangesText?: string;\n}\n\nconst DEFAULT_NEXT_ACTION: ActionButton = {\n type: 'submit',\n label: 'Save',\n variant: 'primary',\n onClick: () => {},\n};\n\nconst DEFAULT_PREVIOUS_ACTION: ActionButton = {\n label: 'Cancel',\n variant: 'outline',\n onClick: () => {},\n};\n\nexport const FormActions: React.FC = ({\n hasUnsavedChanges = false,\n isLoading = false,\n nextAction,\n previousAction,\n className,\n showPrevious = true,\n showNext = true,\n showUnsavedChanges = true,\n align = 'right',\n unsavedChangesText = 'Unsaved changes',\n}) => {\n const nextButtonProps = React.useMemo(\n () => ({ ...DEFAULT_NEXT_ACTION, ...nextAction }),\n [nextAction],\n );\n\n const previousButtonProps = React.useMemo(\n () => ({ ...DEFAULT_PREVIOUS_ACTION, ...previousAction }),\n [previousAction],\n );\n\n const handleNextClick = React.useCallback(\n (e: React.MouseEvent) => {\n nextButtonProps.onClick(e.nativeEvent);\n },\n [nextButtonProps.onClick],\n );\n\n const handlePreviousClick = React.useCallback(\n (e: React.MouseEvent) => {\n previousButtonProps.onClick(e.nativeEvent);\n },\n [previousButtonProps.onClick],\n );\n\n const showUnsavedIndicator = showUnsavedChanges && hasUnsavedChanges;\n const isPreviousVisible = showUnsavedChanges ? showPrevious && hasUnsavedChanges : showPrevious;\n\n return (\n \n {showUnsavedIndicator && (\n {unsavedChangesText}\n )}\n\n {showPrevious && (\n \n {previousButtonProps.label}\n \n )}\n\n {showNext && (\n \n {isLoading ? (\n \n ) : (\n <>\n {nextButtonProps.icon && (\n \n {nextButtonProps.icon as React.ReactNode}\n \n )}\n {nextButtonProps.label}\n \n )}\n \n )}\n \n );\n};\n", "type": "registry:component", "target": "components/auth0/shared/form-actions.tsx" }, { "path": "src/components/auth0/shared/gate-keeper/gate-keeper.tsx", "content": "/**\n * GateKeeper component for guarding content during loading, MFA step-up, and 5xx error states.\n * @module gate-keeper\n * @internal\n */\n\nimport {\n type ComponentStyling,\n getComponentStyles,\n getStatusCode,\n isMfaRequiredError,\n} from '@auth0/universal-components-core';\nimport { RefreshCcw } from 'lucide-react';\nimport React, { useCallback, useMemo, useState, useEffect } from 'react';\n\nimport { StyledScope } from '@/components/auth0/shared/styled-scope';\nimport { Button } from '@/components/ui/button';\nimport { Card, CardContent, CardDescription, CardFooter, CardTitle } from '@/components/ui/card';\nimport { Spinner } from '@/components/ui/spinner';\nimport { useCoreClient } from '@/hooks/shared/use-core-client';\nimport { useTheme } from '@/hooks/shared/use-theme';\nimport { useTranslator } from '@/hooks/shared/use-translator';\nimport { useGateKeeperContext } from '@/providers/gate-keeper-context';\n\ninterface GateKeeperProps {\n styling?: ComponentStyling>;\n isLoading?: boolean;\n children: React.ReactNode;\n}\n\n/**\n * Blocking error fallback with retry button.\n * Shown for 5xx errors and dismissed MFA errors.\n *\n * @param props - Component props.\n * @param props.onRetry - Retry handler.\n * @returns Error fallback element.\n * @internal\n */\nfunction ErrorFallback({ onRetry, isMfa }: { onRetry: () => void; isMfa?: boolean }) {\n const { t } = useTranslator('gate_keeper');\n const key = isMfa ? 'mfa_error' : 'fallback';\n\n return (\n \n \n {t(`${key}.title`)}\n {t(`${key}.description`)}\n \n {!isMfa && (\n \n \n \n )}\n \n );\n}\n\n/**\n * Guards children from rendering during loading/error states. MFA step-up overlays\n * children without unmounting them, preserving any in-progress form state.\n * - Loading → spinner (blocks children)\n * - MFA required error → MFA step-up dialog overlaid on children\n * - 5xx error or dismissed MFA → blocking error fallback with retry\n * - No error → children\n *\n * @param props - Component props.\n * @param props.styling - Styling configuration forwarded to the styled scope.\n * @param props.isLoading - Whether content is loading.\n * @param props.children - Child elements to render on success.\n * @returns GateKeeper element.\n */\nexport function GateKeeper({ styling, isLoading, children }: GateKeeperProps) {\n const { error, onRetry } = useGateKeeperContext();\n const { coreClient } = useCoreClient();\n const { isDarkMode } = useTheme();\n const [isRetrying, setIsRetrying] = useState(false);\n\n const styles = useMemo(() => getComponentStyles(styling, isDarkMode), [styling, isDarkMode]);\n\n const handleRetry = useCallback(async () => {\n setIsRetrying(true);\n try {\n await onRetry?.();\n } finally {\n setIsRetrying(false);\n }\n }, [onRetry]);\n\n const isMfaStepUp = isMfaRequiredError(error);\n const statusCode = getStatusCode(error);\n const isSystemError = !!error && !!statusCode && statusCode >= 500;\n\n useEffect(() => {\n if (isMfaStepUp && coreClient && !coreClient.isProxyMode()) {\n console.warn(\n `🚨 [Auth0 Components Warning]: A step-up authentication (MFA) was triggered, but the interactiveErrorHandler is not configured.\\n\\nTo enable Universal Login redirects for MFA step-up, login required, or consent errors, please update your configuration:\\n\\n\\n\\nFor more details, refer to the Auth0 Documentation.`,\n );\n }\n }, [isMfaStepUp, coreClient]);\n\n if (isLoading || isRetrying) {\n return (\n \n
\n \n
\n \n );\n }\n\n if (isSystemError || isMfaStepUp) {\n return (\n \n \n \n );\n }\n\n return {children};\n}\n", "type": "registry:component", "target": "components/auth0/shared/gate-keeper/gate-keeper.tsx" }, { "path": "src/components/auth0/shared/header.tsx", "content": "/**\n * Section header with actions.\n * @module header\n * @internal\n */\n\nimport type { ActionButton as CoreActionButton } from '@auth0/universal-components-core';\nimport type { LucideIcon } from 'lucide-react';\nimport { ArrowLeft } from 'lucide-react';\nimport * as React from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport { Spinner } from '@/components/ui/spinner';\nimport { Switch } from '@/components/ui/switch';\nimport { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';\nimport { cn } from '@/lib/utils';\n\nexport interface TooltipProps {\n content: React.ReactNode | string;\n}\n\nexport interface WithTooltipProps {\n trigger: React.ReactNode | string;\n tooltip: TooltipProps;\n}\n\nexport interface BaseActionProps extends Omit {\n icon?: LucideIcon;\n className?: string;\n hidden?: boolean;\n tooltip?: TooltipProps;\n}\n\nexport interface ButtonActionProps extends BaseActionProps {\n type: 'button';\n onClick: (e: React.MouseEvent) => void;\n}\n\nexport interface SwitchActionProps extends Omit {\n type: 'switch';\n checked?: boolean;\n onCheckedChange: (checked: boolean) => void;\n 'aria-label'?: string;\n}\n\nexport type ActionProps = ButtonActionProps | SwitchActionProps;\n\nexport interface HeaderProps {\n title?: string;\n description?: string;\n backButton?: {\n text?: string;\n icon?: LucideIcon;\n onClick: (e: React.MouseEvent) => void;\n };\n actions?: ActionProps[];\n isLoading?: boolean;\n className?: string;\n}\n\nconst WithTooltip: React.FC = ({ trigger, tooltip }) => (\n <>\n \n \n
{trigger}
\n \n {tooltip.content}\n \n \n);\n\nconst ButtonAction: React.FC = ({\n icon: Icon,\n className,\n label,\n onClick,\n disabled,\n variant,\n size,\n}) => (\n \n {Icon && }\n {label}\n \n);\n\nconst SwitchAction: React.FC = ({\n className,\n 'aria-label': ariaLabel,\n checked,\n onCheckedChange,\n disabled,\n}) => (\n
\n \n
\n);\n\nexport const Header = React.forwardRef<\n HTMLDivElement,\n HeaderProps & React.HTMLAttributes\n>(({ title, description, backButton, actions, isLoading, className, ...props }, ref) => {\n const BackIcon = backButton?.icon || ArrowLeft;\n\n const renderAction = (action: ActionProps, index: number) => {\n const key = `action-${index}`;\n if (isLoading) {\n return ;\n }\n if (action.hidden) {\n return null;\n }\n const actionElement =\n action.type === 'switch' ? (\n \n ) : (\n \n );\n if (action.tooltip) {\n return (\n \n );\n }\n return actionElement;\n };\n\n return (\n \n {backButton && (\n \n \n {backButton.text && {backButton.text}}\n \n )}\n\n
\n
\n {title && (\n \n {title}\n \n )}\n {description && (\n \n {description}\n

\n )}\n
\n\n {actions && actions.length > 0 && (\n
\n {actions.map(renderAction)}\n
\n )}\n
\n \n );\n});\n\nHeader.displayName = 'Header';\n", "type": "registry:component", "target": "components/auth0/shared/header.tsx" }, { "path": "src/components/auth0/shared/mapping.tsx", "content": "/**\n * Attribute mapping display component.\n * @module mapping\n * @internal\n */\n\nimport React from 'react';\n\nimport { DataTable, type Column } from '@/components/auth0/shared/data-table';\nimport { Section } from '@/components/auth0/shared/section';\nimport {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from '@/components/ui/accordion';\nimport { CardTitle, CardDescription } from '@/components/ui/card';\nimport { cn } from '@/lib/utils';\n\nexport interface MappingProps {\n title?: string;\n description?: string;\n content: React.ReactNode;\n card: {\n title: string;\n description: string;\n table: {\n items: Item[];\n columns: Column[];\n };\n };\n className?: string;\n expanded?: boolean;\n}\n\n/**\n *\n * @param props - Component props.\n * @param props.title - Section title.\n * @param props.description - Section description.\n * @param props.card - Card configuration.\n * @param props.content - Main content.\n * @param props.className - Additional CSS classes.\n * @param props.expanded - Whether accordion is expanded.\n * @returns JSX element\n */\nexport function Mapping({\n title,\n description,\n card,\n content,\n className,\n expanded = true,\n}: MappingProps) {\n return (\n
\n
\n {content}\n \n \n \n
\n {card.title}\n \n {card.description}\n \n
\n \n \n \n \n \n \n
\n
\n );\n}\n", "type": "registry:component", "target": "components/auth0/shared/mapping.tsx" }, { "path": "src/components/auth0/shared/middle-ellipsis-text.tsx", "content": "import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n/**\n * Props for the `MiddleEllipsisText` component.\n */\nexport interface MiddleEllipsisTextProps {\n /**\n * Full text value to render and truncate from the middle when needed.\n */\n text: string;\n /**\n * Optional class names applied to the text container.\n */\n className?: string;\n}\n\n/**\n * Truncates text by preserving both the start and end segments and inserting\n * an ellipsis in the middle when the measured width exceeds the available width.\n *\n * @param text Full source text.\n * @param availableWidth Maximum width available for rendering in pixels.\n * @param font Canvas font shorthand used for text measurement.\n * @returns The display string and whether truncation was applied.\n */\nfunction calculateTruncatedText(\n text: string,\n availableWidth: number,\n font: string,\n): { truncated: string; isTruncated: boolean } {\n if (!text || availableWidth <= 0) {\n return { truncated: text, isTruncated: false };\n }\n\n // Create a canvas element for text measurement\n const canvas = document.createElement('canvas');\n const context = canvas.getContext('2d');\n if (!context) {\n return { truncated: text, isTruncated: false };\n }\n\n context.font = font;\n const ellipsis = '...';\n const fullWidth = context.measureText(text).width;\n\n // If text fits, return as-is\n if (fullWidth <= availableWidth) {\n return { truncated: text, isTruncated: false };\n }\n\n const ellipsisWidth = context.measureText(ellipsis).width;\n const targetWidth = availableWidth - ellipsisWidth;\n\n if (targetWidth <= 0) {\n return { truncated: ellipsis, isTruncated: true };\n }\n\n // Binary search for optimal split point\n let start = 0;\n let end = text.length;\n let bestStart = 0;\n let bestEnd = text.length;\n\n while (start <= end) {\n const mid = Math.floor((start + end) / 2);\n const leftPart = text.substring(0, mid);\n const rightPart = text.substring(text.length - mid);\n const combinedWidth =\n context.measureText(leftPart).width + context.measureText(rightPart).width;\n\n if (combinedWidth <= targetWidth) {\n bestStart = mid;\n bestEnd = text.length - mid;\n start = mid + 1;\n } else {\n end = mid - 1;\n }\n }\n\n const truncated = text.substring(0, bestStart) + ellipsis + text.substring(bestEnd);\n return { truncated, isTruncated: true };\n}\n\n/**\n * Renders text that truncates in the middle (`abc...xyz`) based on the\n * container width while preserving both the prefix and suffix.\n *\n * A tooltip with the original text is provided when truncation occurs.\n */\nexport const MiddleEllipsisText = React.memo(\n React.forwardRef(({ text, className }, ref) => {\n const [displayText, setDisplayText] = React.useState(text);\n const [isTruncated, setIsTruncated] = React.useState(false);\n const containerRef = React.useRef(null);\n const rafIdRef = React.useRef(null);\n\n React.useImperativeHandle(ref, () => containerRef.current!);\n\n const updateTruncation = React.useCallback(() => {\n const container = containerRef.current;\n if (!container) return;\n\n const computedStyle = window.getComputedStyle(container);\n const font = `${computedStyle.fontSize} ${computedStyle.fontFamily}`;\n const availableWidth = container.offsetWidth;\n\n const { truncated, isTruncated: truncated_flag } = calculateTruncatedText(\n text,\n availableWidth,\n font,\n );\n\n setDisplayText(truncated);\n setIsTruncated(truncated_flag);\n }, [text]);\n\n // Update truncation on mount/text change and observe resize\n React.useEffect(() => {\n updateTruncation();\n\n const container = containerRef.current;\n let resizeObserver: ResizeObserver | null = null;\n\n if (container) {\n resizeObserver = new ResizeObserver(() => {\n if (rafIdRef.current !== null) {\n cancelAnimationFrame(rafIdRef.current);\n }\n rafIdRef.current = requestAnimationFrame(() => {\n updateTruncation();\n });\n });\n\n resizeObserver.observe(container);\n }\n\n return () => {\n if (rafIdRef.current !== null) {\n cancelAnimationFrame(rafIdRef.current);\n rafIdRef.current = null;\n }\n resizeObserver?.disconnect();\n };\n }, [updateTruncation]);\n\n return (\n \n {displayText}\n \n );\n }),\n);\n", "type": "registry:component", "target": "components/auth0/shared/middle-ellipsis-text.tsx" }, { "path": "src/components/auth0/shared/section.tsx", "content": "/**\n * Section layout with title and actions.\n * @module section\n * @internal\n */\n\nimport type { ActionButton as CoreActionButton } from '@auth0/universal-components-core';\nimport type { LucideIcon } from 'lucide-react';\nimport * as React from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport { Toggle } from '@/components/ui/toggle';\nimport { cn } from '@/lib/utils';\n\nexport interface BaseActionProps extends Omit {\n icon?: LucideIcon;\n className?: string;\n}\n\nexport interface ButtonActionProps extends BaseActionProps {\n type: 'button';\n onClick: (e: React.MouseEvent) => void;\n}\n\nexport interface ToggleActionProps extends Omit {\n type: 'toggle';\n pressed?: boolean;\n onPressedChange: (pressed: boolean) => void;\n 'aria-label': string;\n}\n\nexport type ActionProps = ButtonActionProps | ToggleActionProps;\n\ninterface SectionProps {\n title?: string;\n description?: string;\n children: React.ReactNode;\n actions?: ActionProps[];\n className?: string;\n}\n\nconst ButtonAction: React.FC = ({\n icon: Icon,\n className,\n label,\n onClick,\n disabled,\n variant,\n size,\n}) => (\n \n {Icon && }\n {label}\n \n);\n\nconst ToggleAction: React.FC = ({\n icon: Icon,\n className,\n label,\n 'aria-label': ariaLabel,\n pressed,\n onPressedChange,\n disabled,\n variant,\n size,\n}) => (\n \n {Icon && }\n {label && {label}}\n \n);\n\n/**\n *\n * @param props - Component props.\n * @param props.title - The title text\n * @param props.description - The description text\n * @param props.children - Child elements to render\n * @param props.actions - Action buttons or elements\n * @param props.className - Optional CSS class name for styling\n * @returns JSX element\n */\nexport function Section({\n title,\n description,\n children,\n actions,\n className,\n}: SectionProps): React.JSX.Element {\n const renderAction = (action: ActionProps, index: number) => {\n const key = `action-${index}`;\n return action.type === 'toggle' ? (\n \n ) : (\n \n );\n };\n\n return (\n
\n
\n
\n {title && (\n \n {title}\n \n )}\n {description && (\n \n {description}\n

\n )}\n
\n\n {actions && actions.length > 0 && (\n
\n {actions.map(renderAction)}\n
\n )}\n
\n\n
{children}
\n
\n );\n}\n", "type": "registry:component", "target": "components/auth0/shared/section.tsx" }, { "path": "src/components/auth0/shared/sonner.tsx", "content": "/**\n * Sonner toast provider wrapper.\n * @module sonner\n * @internal\n */\n\n'use client';\n\nimport type { ToasterProps } from 'sonner';\nimport { Toaster as Sonner } from 'sonner';\n\nimport { useTheme } from '@/hooks/shared/use-theme';\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n const { isDarkMode } = useTheme();\n const theme = isDarkMode ? 'dark' : 'light';\n\n return (\n \n );\n};\n\nexport { Toaster };\n", "type": "registry:component", "target": "components/auth0/shared/sonner.tsx" }, { "path": "src/components/auth0/shared/styled-scope.tsx", "content": "/**\n * Auth0Scope component — CSS scope root and portal container for lib components.\n * @module auth0-scope\n * @internal\n */\n\n'use client';\n\nimport { getCoreStyles } from '@auth0/universal-components-core';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport { ThemeContext } from '@/providers/theme-provider';\n\nexport interface StyledScopeProps {\n children: React.ReactNode;\n style?: React.CSSProperties;\n}\n\n/**\n * CSS scope root for lib components. Handles dark-mode class and theme attribute.\n *\n * @param props - Component props.\n * @param props.children - Content to render inside the scope root.\n * @param props.style - Optional inline CSS styles\n * @returns A scoped wrapper div with dark-mode and theme attributes applied.\n * @internal\n */\nexport const StyledScope: React.FC = ({ children, style }) => {\n const { theme = 'default', isDarkMode, variables } = React.useContext(ThemeContext);\n\n const mergedStyle = React.useMemo(() => {\n const providerVars = getCoreStyles(variables, isDarkMode).variables;\n return { ...providerVars, ...style };\n }, [variables, isDarkMode, style]);\n\n return (\n \n {children}\n \n );\n};\n", "type": "registry:component", "target": "components/auth0/shared/styled-scope.tsx" }, { "path": "src/components/auth0/shared/toast.tsx", "content": "/**\n * Toast notification utilities.\n * @module toast\n * @internal\n */\n\nimport { Flag } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { toast, type ExternalToast } from 'sonner';\n\nimport { DEFAULT_TOAST_SETTINGS } from '@/types/toast-types';\nimport type { ToastOptions, ToastSettings, ToastType } from '@/types/toast-types';\n\nconst TOAST_COLOR_CLASSES: Record = {\n success: 'text-success-foreground',\n error: 'text-destructive-foreground',\n warning: 'text-warning-foreground',\n info: 'text-info-foreground',\n} as const;\n\nconst VALID_TOAST_TYPES: ToastType[] = ['success', 'error', 'warning', 'info'] as const;\n\nconst BASE_TOAST_Z_INDEX = 1000;\nlet toastZIndexCounter = 0;\nconst MAX_Z_INDEX_COUNTER = 1000;\nconst activeToastIds = new Set();\n\n/**\n * Resets the z-index counter if no active toasts remain\n */\nconst resetCounterIfEmpty = (): void => {\n if (activeToastIds.size === 0) {\n toastZIndexCounter = 0;\n }\n};\n\n/**\n * Removes a toast from tracking and resets counter if needed\n * @param toastId - The toast ID to remove, or undefined to clear all\n */\nconst removeToastFromTracking = (toastId?: string | number | unknown): void => {\n if (toastId !== undefined && toastId !== null) {\n activeToastIds.delete(toastId);\n } else {\n activeToastIds.clear();\n }\n resetCounterIfEmpty();\n};\n\nlet globalToastSettings: ToastSettings = {\n ...DEFAULT_TOAST_SETTINGS,\n};\n\n/**\n * Sets global toast configuration. Called by Auth0ComponentProvider.\n * @param settings - Settings configuration\n * @internal\n */\nexport const setGlobalToastSettings = (settings?: ToastSettings): void => {\n if (!settings) {\n globalToastSettings = {\n ...DEFAULT_TOAST_SETTINGS,\n };\n return;\n }\n\n globalToastSettings = {\n ...settings,\n };\n\n if (settings.provider === 'custom') {\n const { methods } = settings;\n const availableMethods = Object.keys(methods);\n\n if (availableMethods.length === 0) {\n console.warn(\n 'Auth0ComponentProvider: Custom toast provider specified but no custom methods provided',\n );\n }\n\n availableMethods.forEach((method) => {\n if (typeof methods[method as keyof typeof methods] !== 'function') {\n console.warn(`Auth0ComponentProvider: Custom toast method '${method}' is not a function`);\n }\n });\n }\n};\n\n/**\n * Gets the current global toast configuration.\n * @returns The current toast settings\n */\nexport const getGlobalToastSettings = (): ToastSettings => globalToastSettings;\n\n/**\n * Creates a styled message element with appropriate color classes.\n * @param type - The toast type for styling\n * @param message - The message text to style\n * @returns A React element with styled text\n */\nconst createStyledMessage = (type: ToastType, message: string): ReactNode => {\n const colorClass = TOAST_COLOR_CLASSES[type];\n return {message};\n};\n\n/**\n * Creates a default icon for the toast based on its type.\n * @param type - The toast type to create an icon for\n * @returns A React element with a styled Flag icon\n */\nconst createDefaultIcon = (type: ToastType): ReactNode => {\n const colorClass = TOAST_COLOR_CLASSES[type];\n return ;\n};\n\n/**\n * Shows a toast notification using the configured provider.\n *\n * @param options - The toast configuration options\n * @param options.type - The type of toast ('success', 'error', 'info', 'warning', 'loading')\n * @param options.message - The message to display in the toast\n * @param options.className - Optional CSS class name for custom styling\n * @param options.icon - Optional custom icon to display\n * @param options.data - Additional options passed to the toast provider\n * @returns The toast instance ID or result from custom method\n */\nexport const showToast = ({\n type,\n message,\n className,\n icon,\n data = {},\n}: ToastOptions): string | number | void => {\n if (!message?.trim()) {\n console.warn('showToast: Empty message provided');\n return;\n }\n\n if (!VALID_TOAST_TYPES.includes(type)) {\n console.error(\n `showToast: Invalid toast type '${type}'. Must be one of: ${VALID_TOAST_TYPES.join(', ')}`,\n );\n return;\n }\n\n if (globalToastSettings.provider === 'custom' && globalToastSettings.methods[type]) {\n try {\n // Custom methods only receive the message - they handle their own configuration\n return globalToastSettings.methods[type]!(message);\n } catch (error) {\n console.error(`showToast: Error in custom ${type} method:`, error);\n }\n }\n\n const styledMessage = createStyledMessage(type, message);\n const defaultIcon = icon || createDefaultIcon(type);\n\n const currentZIndex = BASE_TOAST_Z_INDEX + toastZIndexCounter;\n toastZIndexCounter += 1;\n\n if (toastZIndexCounter >= MAX_Z_INDEX_COUNTER) {\n toastZIndexCounter = 0;\n }\n\n const toastOptions: ExternalToast = {\n className,\n icon: defaultIcon,\n style: {\n zIndex: currentZIndex,\n },\n onDismiss: (toastId) => {\n removeToastFromTracking(toastId);\n },\n ...data,\n };\n\n try {\n const toastId = toast[type](styledMessage, toastOptions);\n if (toastId) {\n activeToastIds.add(toastId);\n }\n return toastId;\n } catch (error) {\n console.error(`showToast: Error showing ${type} toast:`, error);\n return toast(message);\n }\n};\n\n/**\n * Dismisses a toast notification by ID, or dismisses all toasts if no ID is provided.\n *\n * @param toastId - Optional toast ID to dismiss. If not provided, dismisses all toasts.\n */\nexport const dismissToast = (toastId?: string | number): void => {\n if (globalToastSettings.provider === 'custom' && globalToastSettings.methods.dismiss) {\n try {\n globalToastSettings.methods.dismiss(toastId?.toString());\n } catch (error) {\n console.error('dismissToast: Error in custom dismiss method:', error);\n }\n return;\n }\n\n toast.dismiss(toastId);\n\n removeToastFromTracking(toastId);\n};\n", "type": "registry:component", "target": "components/auth0/shared/toast.tsx" }, { "path": "src/components/ui/accordion.tsx", "content": "/**\n * Accordion component using Radix primitives.\n * @module accordion\n * @internal\n */\n\n'use client';\n\nimport * as AccordionPrimitive from '@radix-ui/react-accordion';\nimport { ChevronDown } from 'lucide-react';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nfunction Accordion({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction AccordionItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction AccordionTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n svg]:rotate-180',\n className,\n )}\n {...props}\n >\n {children}\n \n \n \n );\n}\n\nfunction AccordionContent({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n {children}\n \n \n );\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\n", "type": "registry:component", "target": "components/ui/accordion.tsx" }, { "path": "src/components/ui/alert.tsx", "content": "/**\n * Alert component with status variants.\n * @module alert\n * @internal\n */\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst alertVariants = cva(\n 'shadow-input-hover bg-input relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 overflow-clip rounded-3xl p-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',\n {\n variants: {\n variant: {\n default: 'text-foreground border-b-2 border-transparent',\n info: 'text-info-foreground [&>svg]:text-info-foreground',\n success: 'text-success-foreground [&>svg]:text-success-foreground',\n warning: 'text-warning-foreground [&>svg]:text-warning-foreground',\n destructive: 'text-destructive-foreground [&>svg]:text-destructive-foreground',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n);\n\nfunction Alert({\n className,\n variant,\n ...props\n}: React.ComponentProps<'div'> & VariantProps) {\n return (\n \n );\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n \n );\n}\nfunction AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n \n );\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n \n );\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction };\n", "type": "registry:component", "target": "components/ui/alert.tsx" }, { "path": "src/components/ui/badge.tsx", "content": "/**\n * Badge component with variants.\n * @module badge\n * @internal\n */\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst badgeVariants = cva(\n 'theme-default:shadow-xs box-border inline-flex items-center overflow-clip rounded-2xl border border-transparent font-medium',\n {\n variants: {\n variant: {\n default: 'bg-primary text-primary-foreground theme-default:border-primary',\n secondary: 'bg-muted text-muted-foreground theme-default:border-muted-foreground/25',\n outline: 'border-border',\n info: 'bg-info text-info-foreground theme-default:border-info-foreground/25',\n success: 'bg-success theme-default:border-success-foreground/25 text-success-foreground',\n warning: 'bg-warning theme-default:border-warning-foreground/25 text-warning-foreground',\n destructive:\n 'bg-destructive theme-default:border-destructive-foreground/25 text-destructive-foreground',\n },\n size: {\n sm: 'px-1.5 py-0.5 text-xs',\n md: 'px-2 py-1 text-sm',\n lg: 'px-2.5 py-1.5 text-sm',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'md',\n },\n },\n);\n\nfunction Badge({\n className,\n variant,\n size,\n asChild = false,\n ...props\n}: React.ComponentProps<'span'> & VariantProps & { asChild?: boolean }) {\n const Comp = asChild ? Slot : 'span';\n\n return (\n \n );\n}\n\nexport { Badge, badgeVariants };\n", "type": "registry:component", "target": "components/ui/badge.tsx" }, { "path": "src/components/ui/button.tsx", "content": "/**\n * Button component with variants.\n * @module button\n * @internal\n */\n\n'use client';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst buttonVariants = cva(\n \"focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive theme-default:active:scale-[0.99] relative box-border inline-flex shrink-0 items-center justify-center gap-2 overflow-hidden text-sm font-medium whitespace-nowrap transition-all duration-150 ease-in-out outline-none focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n {\n variants: {\n variant: {\n primary:\n \"shadow-button-resting hover:shadow-button-hover hover:border-primary/50 border-primary bg-primary text-primary-foreground hover:bg-primary/90 theme-default:before:from-primary-foreground/0 theme-default:before:to-primary-foreground/15 theme-default:before:absolute theme-default:before:top-0 theme-default:before:left-0 theme-default:before:block theme-default:before:h-full theme-default:before:w-full theme-default:before:bg-gradient-to-t theme-default:before:content-[''] border\",\n outline:\n \"dark:bg-muted/50 hover:text-accent-foreground shadow-button-outlined-resting hover:shadow-button-outlined-hover hover:border-accent bg-background hover:bg-muted text-primary border-primary/35 theme-default:before:from-primary/5 theme-default:before:to-primary/0 theme-default:before:absolute theme-default:before:top-0 theme-default:before:left-0 theme-default:before:block theme-default:before:h-full theme-default:before:w-full theme-default:before:bg-gradient-to-t theme-default:before:content-[''] border\",\n ghost: 'hover:bg-muted text-primary bg-transparent',\n destructive:\n \"bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-button-destructive-resting hover:shadow-button-destructive-hover border-destructive-border/25 hover:border-destructive-border/50 theme-default:before:to-primary-foreground/50 theme-default:before:absolute theme-default:before:top-0 theme-default:before:left-0 theme-default:before:block theme-default:before:h-full theme-default:before:w-full theme-default:before:bg-gradient-to-t theme-default:before:content-[''] theme-default:border\",\n link: 'text-foreground underline-offset-4 hover:underline',\n },\n size: {\n default: 'h-10 rounded-2xl px-4 py-2.5 has-[>svg]:px-3',\n xs: 'h-7 rounded-md px-2 py-1.5 text-xs has-[>svg]:px-2',\n sm: 'h-8 gap-1.5 rounded-xl px-3 py-2 text-xs has-[>svg]:px-2.5',\n lg: 'h-12 rounded-3xl px-6 py-3 text-base has-[>svg]:px-4',\n icon: 'size-7 rounded-xl',\n },\n },\n defaultVariants: {\n variant: 'primary',\n size: 'default',\n },\n },\n);\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes,\n VariantProps {\n as?: boolean;\n}\n\nfunction Button({\n className,\n variant,\n size,\n as,\n ...props\n}: React.ComponentProps<'button'> & ButtonProps) {\n const Comp = as ? Slot : 'button';\n\n return ;\n}\n\nexport { Button, buttonVariants };\n", "type": "registry:component", "target": "components/ui/button.tsx" }, { "path": "src/components/ui/card.tsx", "content": "/**\n * Card layout component.\n * @module card\n * @internal\n */\n\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nfunction Card({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n \n );\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n \n );\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n \n );\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n \n );\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n \n );\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<'div'>) {\n return
;\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n \n );\n}\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };\n", "type": "registry:component", "target": "components/ui/card.tsx" }, { "path": "src/components/ui/checkbox.tsx", "content": "/**\n * Checkbox component using Radix primitives.\n * @module checkbox\n * @internal\n */\n\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { CheckIcon, MinusIcon } from 'lucide-react';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nfunction Checkbox({ className, ...props }: React.ComponentProps) {\n return (\n \n \n {props.checked === 'indeterminate' ? (\n \n ) : (\n \n )}\n \n \n );\n}\n\nexport { Checkbox };\n", "type": "registry:component", "target": "components/ui/checkbox.tsx" }, { "path": "src/components/ui/dialog.tsx", "content": "/**\n * Dialog component using Radix primitives.\n * @module dialog\n * @internal\n */\n\n'use client';\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { XIcon } from 'lucide-react';\nimport * as React from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/providers/portal-context';\n\nfunction Dialog({ ...props }: React.ComponentProps) {\n return ;\n}\n\nfunction DialogTrigger({ ...props }: React.ComponentProps) {\n const { children, asChild = false, ...elementProps } = props;\n\n if (asChild && React.isValidElement(children)) {\n return React.cloneElement(children, {\n ...(typeof children.props === 'object' ? children.props : {}),\n ...elementProps,\n });\n }\n\n return (\n \n \n \n );\n}\n\nfunction DialogPortal({ ...props }: React.ComponentProps) {\n const portalContainer = usePortalContainer();\n return (\n \n );\n}\n\nfunction DialogClose({ ...props }: React.ComponentProps) {\n const { children } = props;\n\n return (\n \n \n \n );\n}\n\nfunction DialogOverlay({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction DialogContent({\n className,\n children,\n showCloseButton = true,\n ...props\n}: React.ComponentProps & {\n showCloseButton?: boolean;\n}) {\n return (\n \n \n \n {children}\n {showCloseButton && (\n \n \n \n )}\n \n \n );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n \n );\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n \n );\n}\n\nfunction DialogTitle({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction DialogDescription({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nexport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n DialogTrigger,\n};\n", "type": "registry:component", "target": "components/ui/dialog.tsx" }, { "path": "src/components/ui/file-upload.tsx", "content": "/**\n * File upload component with drag-drop support.\n * @module file-upload\n * @internal\n */\n\nimport { Upload, X } from 'lucide-react';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface FileUploadProps\n extends Omit, 'value' | 'onChange'> {\n value?: File[];\n onChange?: (files: File[]) => void;\n onInvalidFiles?: (files: File[]) => void;\n onRemove?: (file: File) => void;\n maxSize?: number;\n accept?: string;\n maxFiles?: number;\n preview?: boolean;\n className?: string;\n}\n\nexport function FileUpload({\n value = [],\n onChange,\n onInvalidFiles,\n onRemove,\n maxSize,\n accept,\n maxFiles = 1,\n preview = true,\n className,\n disabled,\n ...props\n}: FileUploadProps) {\n const inputRef = React.useRef(null);\n const [dragActive, setDragActive] = React.useState(false);\n\n const handleDrag = React.useCallback((e: React.DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n if (e.type === 'dragenter' || e.type === 'dragover') {\n setDragActive(true);\n } else if (e.type === 'dragleave') {\n setDragActive(false);\n }\n }, []);\n\n const handleDrop = React.useCallback((e: React.DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n setDragActive(false);\n\n const files = Array.from(e.dataTransfer.files);\n handleFiles(files);\n }, []);\n\n const handleChange = React.useCallback((e: React.ChangeEvent) => {\n const files = Array.from(e.target.files || []);\n handleFiles(files);\n }, []);\n\n const handleFiles = React.useCallback(\n (files: File[]) => {\n if (disabled) return;\n const validFiles: File[] = [];\n const invalidFiles: File[] = [];\n\n files.forEach((file) => {\n if (maxSize && file.size > maxSize) {\n invalidFiles.push(file);\n return;\n }\n\n if (\n accept &&\n !accept.split(',').some((type) => {\n const fileType = type.trim().toLowerCase();\n const fileName = file.name.toLowerCase();\n const fileMimeType = file.type.toLowerCase();\n if (fileType.startsWith('.')) {\n return fileName.endsWith(fileType);\n }\n\n if (fileType === fileMimeType) {\n return true;\n }\n\n if (fileType.endsWith('/*')) {\n const baseType = fileType.slice(0, -2);\n return fileMimeType.startsWith(`${baseType}/`);\n }\n\n return false;\n })\n ) {\n invalidFiles.push(file);\n return;\n }\n\n validFiles.push(file);\n });\n\n if (invalidFiles.length > 0) {\n onInvalidFiles?.(invalidFiles);\n }\n\n if (maxFiles === 1) {\n onChange?.(validFiles.slice(0, 1));\n } else {\n onChange?.([...value, ...validFiles].slice(0, maxFiles));\n }\n\n if (inputRef.current) inputRef.current.value = '';\n },\n [disabled, maxSize, accept, maxFiles, onChange, onInvalidFiles, value],\n );\n\n const removeFile = React.useCallback(\n (file: File) => {\n onRemove?.(file);\n onChange?.(value.filter((f) => f !== file));\n },\n [onChange, onRemove, value],\n );\n\n return (\n
\n \n \n
\n \n

\n Drag & drop files here, or click to select files\n

\n {accept &&

Allowed files: {accept}

}\n {maxSize && (\n

\n Max size: {(maxSize / 1024 / 1024).toFixed(2)}MB\n

\n )}\n
\n
\n\n {preview && value.length > 0 && (\n
\n {value.map((file, i) => (\n
\n
\n

{file.name}

\n

{(file.size / 1024).toFixed(2)}KB

\n
\n removeFile(file)}\n className=\"hover:bg-muted shrink-0 rounded-md p-1 transition-colors\"\n disabled={disabled}\n >\n \n \n
\n ))}\n
\n )}\n
\n );\n}\n", "type": "registry:component", "target": "components/ui/file-upload.tsx" }, { "path": "src/components/ui/form.tsx", "content": "/**\n * Form components with react-hook-form integration.\n * @module form\n * @internal\n */\n\n'use client';\n\nimport type * as LabelPrimitive from '@radix-ui/react-label';\nimport { Slot } from '@radix-ui/react-slot';\nimport * as React from 'react';\nimport {\n Controller,\n FormProvider,\n useFormContext,\n useFormState,\n type ControllerProps,\n type FieldPath,\n type FieldValues,\n} from 'react-hook-form';\n\nimport { Label } from '@/components/ui/label';\nimport { cn } from '@/lib/utils';\n\nconst Form: typeof FormProvider = FormProvider;\n\ntype FormFieldContextValue<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath = FieldPath,\n> = {\n name: TName;\n};\n\nconst FormFieldContext = React.createContext({} as FormFieldContextValue);\n\nconst FormField = <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath = FieldPath,\n>({\n ...props\n}: ControllerProps) => {\n return (\n \n {\n const { onChange, onBlur, ...rest } = field;\n return props.render({\n field: {\n ...rest,\n onChange: (...args: unknown[]) => {\n onChange(...(args as Parameters));\n },\n onBlur: (...args: unknown[]) => {\n onBlur(...(args as Parameters));\n },\n },\n fieldState,\n formState,\n });\n }}\n />\n \n );\n};\n\nconst useFormField = () => {\n const fieldContext = React.useContext(FormFieldContext);\n const itemContext = React.useContext(FormItemContext);\n const { getFieldState } = useFormContext();\n const formState = useFormState({ name: fieldContext.name });\n const fieldState = getFieldState(fieldContext.name, formState);\n\n if (!fieldContext) {\n throw new Error('useFormField should be used within ');\n }\n\n const { id } = itemContext;\n\n return {\n id,\n name: fieldContext.name,\n formItemId: `${id}-form-item`,\n formDescriptionId: `${id}-form-item-description`,\n formMessageId: `${id}-form-item-message`,\n ...fieldState,\n };\n};\n\ntype FormItemContextValue = {\n id: string;\n};\n\nconst FormItemContext = React.createContext({} as FormItemContextValue);\n\nfunction FormItem({ className, ...props }: React.ComponentProps<'div'>) {\n const id = React.useId();\n\n return (\n \n
\n \n );\n}\n\nfunction FormLabel({ className, ...props }: React.ComponentProps) {\n const { error, formItemId } = useFormField();\n\n return (\n \n );\n}\n\nfunction FormControl({ ...props }: React.ComponentProps) {\n const { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n\n return (\n \n );\n}\n\nfunction FormDescription({ className, ...props }: React.ComponentProps<'p'>) {\n const { formDescriptionId } = useFormField();\n\n return (\n \n );\n}\n\nfunction FormMessage({ className, ...props }: React.ComponentProps<'p'>) {\n const { error, formMessageId } = useFormField();\n const body = error ? String(error?.message ?? '') : props.children;\n\n if (!body) {\n return null;\n }\n\n return (\n \n {body}\n

\n );\n}\n\nexport {\n useFormField,\n Form,\n FormItem,\n FormLabel,\n FormControl,\n FormDescription,\n FormMessage,\n FormField,\n};\n", "type": "registry:component", "target": "components/ui/form.tsx" }, { "path": "src/components/ui/inline-code.tsx", "content": "/**\n * Inline code display component.\n * @module inline-code\n * @internal\n */\n\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface InlineCodeProps {\n children: React.ReactNode;\n className?: string;\n}\n\nexport function InlineCode({ children, className }: InlineCodeProps) {\n return (\n \n {children}\n \n );\n}\n", "type": "registry:component", "target": "components/ui/inline-code.tsx" }, { "path": "src/components/ui/label.tsx", "content": "/**\n * Form label component.\n * @module label\n * @internal\n */\n\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport function Label({ children, className, ...props }: React.ComponentPropsWithoutRef<'label'>) {\n return (\n \n {children}\n \n );\n}\n", "type": "registry:component", "target": "components/ui/label.tsx" }, { "path": "src/components/ui/link.tsx", "content": "/**\n * Link component with variants.\n * @module link\n * @internal\n */\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst linkVariants = cva(\n 'focus-within:ring-ring inline-flex items-center gap-2 rounded-md py-0.5 underline-offset-4 transition-colors focus:ring-3 focus-visible:outline-hidden',\n {\n variants: {\n variant: {\n destructive: 'text-destructive hover:text-destructive/90',\n muted: 'text-muted hover:text-muted/80',\n primary: 'text-primary hover:text-primary/90',\n },\n underline: {\n none: 'no-underline',\n hover: 'no-underline hover:underline',\n always: 'underline',\n },\n },\n defaultVariants: {\n variant: 'primary',\n underline: 'always',\n },\n },\n);\n\nexport interface LinkProps\n extends React.AnchorHTMLAttributes,\n VariantProps {\n /**\n * Optional ref for the link element.\n */\n ref?: React.Ref;\n}\n\nfunction Link({ ref, className, children, variant, underline, ...props }: LinkProps) {\n return (\n \n {children}\n \n );\n}\n\nexport { Link };\n", "type": "registry:component", "target": "components/ui/link.tsx" }, { "path": "src/components/ui/modal.tsx", "content": "/**\n * Modal dialog wrapper component.\n * @module modal\n * @internal\n */\n\nimport * as React from 'react';\n\nimport { FormActions, type FormActionsProps } from '@/components/auth0/shared/form-actions';\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n DialogFooter,\n} from '@/components/ui/dialog';\n\ninterface ModalProps {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n title?: string;\n description?: string;\n content?: React.ReactNode;\n modalActions?: FormActionsProps;\n className?: string;\n showCloseButton?: boolean;\n}\n\nexport const Modal: React.FC = ({\n open,\n onOpenChange,\n title,\n description,\n content,\n modalActions,\n className,\n showCloseButton,\n}) => {\n const hasHeader = title || description;\n\n const actions: FormActionsProps = {\n hasUnsavedChanges: true,\n showPrevious: true,\n showUnsavedChanges: false,\n previousAction: {\n label: 'Cancel',\n variant: 'outline',\n onClick: () => onOpenChange(false),\n },\n nextAction: {\n label: 'Confirm',\n variant: 'primary',\n onClick: () => onOpenChange(false),\n },\n ...modalActions,\n };\n\n return (\n \n \n {hasHeader && (\n \n {title && {title}}\n {description && {description}}\n \n )}\n\n {content &&
{content}
}\n\n \n \n \n \n \n );\n};\n\nModal.displayName = 'Modal';\n", "type": "registry:component", "target": "components/ui/modal.tsx" }, { "path": "src/components/ui/radio-group.tsx", "content": "/**\n * Radio group using Radix primitives.\n * @module radio-group\n * @internal\n */\n\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nfunction RadioGroup({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction RadioGroupItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n