diff --git a/packages/react/src/components/auth0/my-account/shared/mfa/contact-input-form.tsx b/packages/react/src/components/auth0/my-account/shared/mfa/contact-input-form.tsx index 0f07ec367..0ebd7ec1a 100644 --- a/packages/react/src/components/auth0/my-account/shared/mfa/contact-input-form.tsx +++ b/packages/react/src/components/auth0/my-account/shared/mfa/contact-input-form.tsx @@ -32,6 +32,7 @@ import { TextField } from '@/components/ui/text-field'; import { useContactEnrollment } from '@/hooks/my-account/use-contact-enrollment'; import { useTheme } from '@/hooks/shared/use-theme'; import { useTranslator } from '@/hooks/shared/use-translator'; +import { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants'; import { ENTER_CONTACT, ENTER_OTP } from '@/lib/constants/my-account/mfa/mfa-constants'; import { cn } from '@/lib/utils'; import type { ContactInputFormProps } from '@/types/my-account/mfa/mfa-types'; @@ -99,8 +100,8 @@ export function ContactInputForm({ const form = useForm({ resolver: zodResolver(ContactSchema), - mode: 'onTouched', - reValidateMode: 'onChange', + mode: FORM_VALIDATION_MODE, + reValidateMode: FORM_REVALIDATE_MODE, defaultValues: { contact: contactData.contact || '' }, }); diff --git a/packages/react/src/components/auth0/my-account/shared/mfa/otp-verification-form.tsx b/packages/react/src/components/auth0/my-account/shared/mfa/otp-verification-form.tsx index f284f3088..f05ac2389 100644 --- a/packages/react/src/components/auth0/my-account/shared/mfa/otp-verification-form.tsx +++ b/packages/react/src/components/auth0/my-account/shared/mfa/otp-verification-form.tsx @@ -27,6 +27,7 @@ import { OTPField } from '@/components/ui/otp-field'; import { useOtpConfirmation } from '@/hooks/my-account/use-otp-confirmation'; import { useTheme } from '@/hooks/shared/use-theme'; import { useTranslator } from '@/hooks/shared/use-translator'; +import { FORM_VALIDATION_MODE } from '@/lib/constants/form-constants'; import { cn } from '@/lib/utils'; import type { OTPVerificationFormProps } from '@/types/my-account/mfa/mfa-types'; @@ -122,7 +123,7 @@ export function OTPVerificationForm({ onClose, }); - const form = useForm({ mode: 'onChange' }); + const form = useForm({ mode: FORM_VALIDATION_MODE }); const userOtp = form.watch('userOtp'); const otpInputRef = React.useRef(null); diff --git a/packages/react/src/components/auth0/my-organization/shared/domain-management/domain-create/domain-create-modal.tsx b/packages/react/src/components/auth0/my-organization/shared/domain-management/domain-create/domain-create-modal.tsx index 361f0996e..e6058a4de 100644 --- a/packages/react/src/components/auth0/my-organization/shared/domain-management/domain-create/domain-create-modal.tsx +++ b/packages/react/src/components/auth0/my-organization/shared/domain-management/domain-create/domain-create-modal.tsx @@ -23,6 +23,7 @@ import { import { Modal } from '@/components/ui/modal'; import { TextField } from '@/components/ui/text-field'; import { useTranslator } from '@/hooks/shared/use-translator'; +import { FORM_VALIDATION_MODE } from '@/lib/constants/form-constants'; import { cn } from '@/lib/utils'; import type { DomainCreateModalProps } from '@/types/my-organization/domain-management/domain-create-types'; @@ -61,7 +62,7 @@ export function DomainCreateModal({ defaultValues: { domain_url: '', }, - mode: 'onBlur', + mode: FORM_VALIDATION_MODE, }); const handleCreate = React.useCallback( diff --git a/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/adfs-sso-configure-form.tsx b/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/adfs-sso-configure-form.tsx index 6b13a9a43..dc2e6850b 100644 --- a/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/adfs-sso-configure-form.tsx +++ b/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/adfs-sso-configure-form.tsx @@ -29,6 +29,7 @@ import { Label } from '@/components/ui/label'; import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'; import { TextField } from '@/components/ui/text-field'; import { useTranslator } from '@/hooks/shared/use-translator'; +import { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants'; import { cn } from '@/lib/utils'; import type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types'; @@ -57,8 +58,8 @@ export const AdfsProviderForm = React.forwardRef({ resolver: zodResolver(createProviderConfigureSchema('adfs')), - mode: 'onSubmit', - reValidateMode: 'onChange', + mode: FORM_VALIDATION_MODE, + reValidateMode: FORM_REVALIDATE_MODE, defaultValues: { meta_data_source: adfsData?.meta_data_source || 'meta_data_url', meta_data_location_url: adfsData?.meta_data_location_url || '', diff --git a/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/google-apps-sso-configure-form.tsx b/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/google-apps-sso-configure-form.tsx index 16f2f138c..c38a2d1a7 100644 --- a/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/google-apps-sso-configure-form.tsx +++ b/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/google-apps-sso-configure-form.tsx @@ -27,6 +27,7 @@ import { TextField } from '@/components/ui/text-field'; import { useProviderFormMode } from '@/hooks/my-organization/use-provider-form-mode'; import { useCoreClient } from '@/hooks/shared/use-core-client'; import { useTranslator } from '@/hooks/shared/use-translator'; +import { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants'; import { cn } from '@/lib/utils'; import type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types'; @@ -71,8 +72,8 @@ export const GoogleAppsProviderForm = React.forwardRef< const form = useForm({ resolver: zodResolver(createProviderConfigureSchema('google-apps')), - mode: 'onSubmit', - reValidateMode: 'onChange', + mode: FORM_VALIDATION_MODE, + reValidateMode: FORM_REVALIDATE_MODE, defaultValues: { domain: googleAppsData?.domain || '', client_id: googleAppsData?.client_id || '', diff --git a/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/oidc-sso-configure-form.tsx b/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/oidc-sso-configure-form.tsx index 2ac7c3066..22e7fb29d 100644 --- a/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/oidc-sso-configure-form.tsx +++ b/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/oidc-sso-configure-form.tsx @@ -28,6 +28,7 @@ import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'; import { TextField } from '@/components/ui/text-field'; import { useProviderFormMode } from '@/hooks/my-organization/use-provider-form-mode'; import { useTranslator } from '@/hooks/shared/use-translator'; +import { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants'; import { cn } from '@/lib/utils'; import type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types'; @@ -64,8 +65,8 @@ export const OidcProviderForm = React.forwardRef({ resolver: zodResolver(createProviderConfigureSchema('oidc')), - mode: 'onSubmit', - reValidateMode: 'onChange', + mode: FORM_VALIDATION_MODE, + reValidateMode: FORM_REVALIDATE_MODE, defaultValues: { discovery_url: oidcData?.discovery_url || '', type: oidcData?.type || 'back_channel', diff --git a/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/okta-sso-configure-form.tsx b/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/okta-sso-configure-form.tsx index c78a4fa2b..849b9b58c 100644 --- a/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/okta-sso-configure-form.tsx +++ b/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/okta-sso-configure-form.tsx @@ -28,6 +28,7 @@ import { TextField } from '@/components/ui/text-field'; import { useProviderFormMode } from '@/hooks/my-organization/use-provider-form-mode'; import { useCoreClient } from '@/hooks/shared/use-core-client'; import { useTranslator } from '@/hooks/shared/use-translator'; +import { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants'; import { cn } from '@/lib/utils'; import type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types'; @@ -76,8 +77,8 @@ export const OktaProviderForm = React.forwardRef({ resolver: zodResolver(createProviderConfigureSchema('okta')), - mode: 'onSubmit', - reValidateMode: 'onChange', + mode: FORM_VALIDATION_MODE, + reValidateMode: FORM_REVALIDATE_MODE, defaultValues: { domain: oktaData?.domain || '', client_id: oktaData?.client_id || '', diff --git a/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/ping-federate-sso-configure-form.tsx b/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/ping-federate-sso-configure-form.tsx index c4e2745dc..fa3a5c215 100644 --- a/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/ping-federate-sso-configure-form.tsx +++ b/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/ping-federate-sso-configure-form.tsx @@ -41,6 +41,7 @@ import { } from '@/components/ui/select'; import { TextField } from '@/components/ui/text-field'; import { useTranslator } from '@/hooks/shared/use-translator'; +import { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants'; import { cn } from '@/lib/utils'; import type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types'; @@ -87,8 +88,8 @@ export const PingFederateProviderForm = React.forwardRef< const form = useForm({ resolver: zodResolver(createProviderConfigureSchema('pingfederate')), - mode: 'onSubmit', - reValidateMode: 'onChange', + mode: FORM_VALIDATION_MODE, + reValidateMode: FORM_REVALIDATE_MODE, defaultValues: { pingFederateBaseUrl: pingFederateData?.pingFederateBaseUrl || '', signingCert: pingFederateData?.signingCert || '', diff --git a/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/samlp-sso-configure-form.tsx b/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/samlp-sso-configure-form.tsx index 05149f876..67d755f25 100644 --- a/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/samlp-sso-configure-form.tsx +++ b/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/samlp-sso-configure-form.tsx @@ -43,6 +43,7 @@ import { } from '@/components/ui/select'; import { TextField } from '@/components/ui/text-field'; import { useTranslator } from '@/hooks/shared/use-translator'; +import { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants'; import { cn } from '@/lib/utils'; import type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types'; @@ -92,8 +93,8 @@ export const SamlpProviderForm = React.forwardRef< const form = useForm({ resolver: zodResolver(createProviderConfigureSchema('samlp')), - mode: 'onSubmit', - reValidateMode: 'onChange', + mode: FORM_VALIDATION_MODE, + reValidateMode: FORM_REVALIDATE_MODE, defaultValues: { meta_data_source: samlpData?.meta_data_source || 'meta_data_url', metadataUrl: samlpData?.metadataUrl || '', diff --git a/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/waad-sso-configure-form.tsx b/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/waad-sso-configure-form.tsx index 99ab4a215..b558ad7e2 100644 --- a/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/waad-sso-configure-form.tsx +++ b/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-configure/waad-sso-configure-form.tsx @@ -27,6 +27,7 @@ import { TextField } from '@/components/ui/text-field'; import { useProviderFormMode } from '@/hooks/my-organization/use-provider-form-mode'; import { useCoreClient } from '@/hooks/shared/use-core-client'; import { useTranslator } from '@/hooks/shared/use-translator'; +import { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants'; import { cn } from '@/lib/utils'; import type { ProviderConfigureFieldsProps } from '@/types/my-organization/idp-management/sso-provider/sso-provider-create-types'; @@ -69,8 +70,8 @@ export const WaadProviderForm = React.forwardRef({ resolver: zodResolver(createProviderConfigureSchema('waad')), - mode: 'onSubmit', - reValidateMode: 'onChange', + mode: FORM_VALIDATION_MODE, + reValidateMode: FORM_REVALIDATE_MODE, defaultValues: { tenant_domain: waadData?.tenant_domain || '', client_id: waadData?.client_id || '', diff --git a/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-details.tsx b/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-details.tsx index afc5a49da..c4ff064e1 100644 --- a/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-details.tsx +++ b/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-create/provider-details.tsx @@ -24,6 +24,7 @@ import { } from '@/components/ui/form'; import { TextField } from '@/components/ui/text-field'; import { useTranslator } from '@/hooks/shared/use-translator'; +import { FORM_REVALIDATE_MODE, FORM_VALIDATION_MODE } from '@/lib/constants/form-constants'; import type { ProviderDetailsFormHandle, ProviderDetailsProps, @@ -41,8 +42,8 @@ export const ProviderDetails = React.forwardRef({ resolver: zodResolver(createProviderDetailsSchema()), - mode: 'onSubmit', - reValidateMode: 'onChange', + mode: FORM_VALIDATION_MODE, + reValidateMode: FORM_REVALIDATE_MODE, defaultValues: { name: initialData?.name || '', display_name: initialData?.display_name || '', diff --git a/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-details.tsx b/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-details.tsx index 7cbb56ff0..cb77510f5 100644 --- a/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-details.tsx +++ b/packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-details.tsx @@ -32,6 +32,7 @@ import { TextField } from '@/components/ui/text-field'; import { useCoreClient } from '@/hooks/shared/use-core-client'; import { useTheme } from '@/hooks/shared/use-theme'; import { useTranslator } from '@/hooks/shared/use-translator'; +import { FORM_VALIDATION_MODE } from '@/lib/constants/form-constants'; import { cn } from '@/lib/utils'; import type { SsoProvisioningDetailsProps } from '@/types/my-organization/idp-management/sso-provisioning/sso-provisioning-tab-types'; @@ -87,6 +88,7 @@ export function SsoProvisioningDetails({ const form = useForm({ resolver: zodResolver(ssoProvisioningSchema), + mode: FORM_VALIDATION_MODE, defaultValues: { userIdAttribute: provisioningConfig?.user_id_attribute || '', scimEndpointUrl: scimEndpointUrl || '', diff --git a/packages/react/src/components/auth0/my-organization/shared/organization-management/organization-details/organization-details.tsx b/packages/react/src/components/auth0/my-organization/shared/organization-management/organization-details/organization-details.tsx index f22c474b1..f19fd90db 100644 --- a/packages/react/src/components/auth0/my-organization/shared/organization-management/organization-details/organization-details.tsx +++ b/packages/react/src/components/auth0/my-organization/shared/organization-management/organization-details/organization-details.tsx @@ -26,6 +26,7 @@ import { Separator } from '@/components/ui/separator'; import { Spinner } from '@/components/ui/spinner'; import { useTheme } from '@/hooks/shared/use-theme'; import { useTranslator } from '@/hooks/shared/use-translator'; +import { FORM_VALIDATION_MODE } from '@/lib/constants/form-constants'; import { cn } from '@/lib/utils'; import type { OrganizationDetailsProps } from '@/types/my-organization/organization-management/organization-details-types'; @@ -114,6 +115,7 @@ export function OrganizationDetails({ const form = useForm({ resolver: zodResolver(organizationDetailSchema), + mode: FORM_VALIDATION_MODE, defaultValues: formValues, values: formValues, }); diff --git a/packages/react/src/components/auth0/shared/gate-keeper/mfa-step-up/enrollment-form.tsx b/packages/react/src/components/auth0/shared/gate-keeper/mfa-step-up/enrollment-form.tsx index 7daaf1f4b..ae26786d6 100644 --- a/packages/react/src/components/auth0/shared/gate-keeper/mfa-step-up/enrollment-form.tsx +++ b/packages/react/src/components/auth0/shared/gate-keeper/mfa-step-up/enrollment-form.tsx @@ -48,6 +48,7 @@ import { Spinner } from '@/components/ui/spinner'; import { TextField } from '@/components/ui/text-field'; import { useMfaStepUp } from '@/hooks/shared/use-mfa-step-up'; import { useTranslator } from '@/hooks/shared/use-translator'; +import { FORM_VALIDATION_MODE } from '@/lib/constants/form-constants'; interface EnrollmentFormProps { error: MfaRequiredError; @@ -107,7 +108,7 @@ export function EnrollmentForm({ error, factor, onComplete, onCancel }: Enrollme const inputForm = useForm({ resolver: zodResolver(contactSchema), - mode: 'onChange', + mode: FORM_VALIDATION_MODE, }); // OTP only: call enroll on mount then show QR. diff --git a/packages/react/src/components/auth0/shared/gate-keeper/mfa-step-up/otp-code-form.tsx b/packages/react/src/components/auth0/shared/gate-keeper/mfa-step-up/otp-code-form.tsx index 2df986299..a1e2daea9 100644 --- a/packages/react/src/components/auth0/shared/gate-keeper/mfa-step-up/otp-code-form.tsx +++ b/packages/react/src/components/auth0/shared/gate-keeper/mfa-step-up/otp-code-form.tsx @@ -12,6 +12,7 @@ import { Separator } from '@/components/ui/separator'; import { Spinner } from '@/components/ui/spinner'; import { TextField } from '@/components/ui/text-field'; import { useTranslator } from '@/hooks/shared/use-translator'; +import { FORM_VALIDATION_MODE } from '@/lib/constants/form-constants'; interface Authenticator { authenticatorType?: string; @@ -54,7 +55,7 @@ export function OtpCodeForm({ const isRecoveryCode = authenticator?.authenticatorType === FACTOR_TYPE_RECOVERY_CODE; - const form = useForm({ mode: 'onChange' }); + const form = useForm({ mode: FORM_VALIDATION_MODE }); const code = form.watch('code'); const inputRef = useRef(null); diff --git a/packages/react/src/lib/constants/form-constants.ts b/packages/react/src/lib/constants/form-constants.ts new file mode 100644 index 000000000..f80dce83f --- /dev/null +++ b/packages/react/src/lib/constants/form-constants.ts @@ -0,0 +1,7 @@ +/** + * Form constants used across the components. + * @internal + */ + +export const FORM_VALIDATION_MODE = 'onTouched'; +export const FORM_REVALIDATE_MODE = 'onChange';