diff --git a/.changeset/metal-cougars-fail.md b/.changeset/metal-cougars-fail.md new file mode 100644 index 0000000000..b67f2a3f5a --- /dev/null +++ b/.changeset/metal-cougars-fail.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Replace Form.Control with Form.PlainInput for text and email inputs. diff --git a/.changeset/pretty-months-greet.md b/.changeset/pretty-months-greet.md new file mode 100644 index 0000000000..2b62460679 --- /dev/null +++ b/.changeset/pretty-months-greet.md @@ -0,0 +1,7 @@ +--- +'@clerk/localizations': patch +'@clerk/clerk-js': patch +'@clerk/types': patch +--- + +Localize placeholder of confirmation field when deleting a user account from ``. diff --git a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx index 9bd8725c14..cb999c8527 100644 --- a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx +++ b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx @@ -123,21 +123,21 @@ export const CreateOrganizationForm = (props: CreateOrganizationFormProps) => { onAvatarRemove={file ? onAvatarRemove : null} /> - - diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx index ceb303314e..c176b6ef5c 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx @@ -141,10 +141,7 @@ const ActionConfirmationPage = withCardStateProvider((props: ActionConfirmationP - + diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ProfileSettingsPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/ProfileSettingsPage.tsx index 0c99fdc90a..966ce440e1 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/ProfileSettingsPage.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/ProfileSettingsPage.tsx @@ -37,7 +37,6 @@ export const ProfileSettingsPage = withCardStateProvider(() => { const dataChanged = organization.name !== nameField.value || organization.slug !== slugField.value; const canSubmit = (dataChanged || avatarChanged) && slugField.feedbackType !== 'error'; - // eslint-disable-next-line @typescript-eslint/require-await const onSubmit = async (e: React.FormEvent) => { e.preventDefault(); return (dataChanged ? organization.update({ name: nameField.value, slug: slugField.value }) : Promise.resolve()) @@ -90,17 +89,16 @@ export const ProfileSettingsPage = withCardStateProvider(() => { onAvatarRemove={isDefaultImage(organization.imageUrl) ? null : onAvatarRemove} /> - - diff --git a/packages/clerk-js/src/ui/components/UserProfile/DeletePage.tsx b/packages/clerk-js/src/ui/components/UserProfile/DeletePage.tsx index 19bcc9e4ca..2cb3f702c8 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/DeletePage.tsx +++ b/packages/clerk-js/src/ui/components/UserProfile/DeletePage.tsx @@ -29,7 +29,7 @@ export const DeletePage = withCardStateProvider(() => { type: 'text', label: localizationKeys('formFieldLabel__confirmDeletion'), isRequired: true, - placeholder: 'Delete account', + placeholder: localizationKeys('formFieldInputPlaceholder__confirmDeletionUserAccount'), }); const canSubmit = confirmationField.value === 'Delete account'; @@ -45,10 +45,7 @@ export const DeletePage = withCardStateProvider(() => { - + { const canSubmit = emailField.value.length > 1 && user.username !== emailField.value; - // eslint-disable-next-line @typescript-eslint/require-await const addEmail = async (e: React.FormEvent) => { e.preventDefault(); return user @@ -57,9 +56,8 @@ export const EmailPage = withCardStateProvider(() => { > - diff --git a/packages/clerk-js/src/ui/components/UserProfile/ProfilePage.tsx b/packages/clerk-js/src/ui/components/UserProfile/ProfilePage.tsx index 7d5906d4b0..ff40549c3e 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/ProfilePage.tsx +++ b/packages/clerk-js/src/ui/components/UserProfile/ProfilePage.tsx @@ -34,11 +34,13 @@ export const ProfilePage = withCardStateProvider(() => { type: 'text', label: localizationKeys('formFieldLabel__firstName'), placeholder: localizationKeys('formFieldInputPlaceholder__firstName'), + isRequired: last_name.required, }); const lastNameField = useFormControl('lastName', user.lastName || '', { type: 'text', label: localizationKeys('formFieldLabel__lastName'), placeholder: localizationKeys('formFieldInputPlaceholder__lastName'), + isRequired: last_name.required, }); const userInfoChanged = @@ -51,7 +53,6 @@ export const ProfilePage = withCardStateProvider(() => { const nameEditDisabled = user.samlAccounts.some(sa => sa.active); - // eslint-disable-next-line @typescript-eslint/require-await const onSubmit = async (e: React.FormEvent) => { e.preventDefault(); @@ -104,19 +105,17 @@ export const ProfilePage = withCardStateProvider(() => { /> {showFirstName && ( - )} {showLastName && ( - diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts index f23c9d58a1..04b2d4a3f2 100644 --- a/packages/localizations/src/en-US.ts +++ b/packages/localizations/src/en-US.ts @@ -59,6 +59,7 @@ export const enUS: LocalizationResource = { formFieldInputPlaceholder__organizationSlug: '', formFieldInputPlaceholder__organizationDomain: '', formFieldInputPlaceholder__organizationDomainEmailAddress: '', + formFieldInputPlaceholder__confirmDeletionUserAccount: 'Delete account', formFieldError__notMatchingPasswords: `Passwords don't match.`, formFieldError__matchingPasswords: 'Passwords match.', formFieldError__verificationLinkExpired: 'The verification link expired. Please request a new link.', diff --git a/packages/types/src/localization.ts b/packages/types/src/localization.ts index 1075dee38d..44ef6e5ac6 100644 --- a/packages/types/src/localization.ts +++ b/packages/types/src/localization.ts @@ -84,6 +84,7 @@ type _LocalizationResource = { formFieldInputPlaceholder__organizationSlug: LocalizationValue; formFieldInputPlaceholder__organizationDomain: LocalizationValue; formFieldInputPlaceholder__organizationDomainEmailAddress: LocalizationValue; + formFieldInputPlaceholder__confirmDeletionUserAccount: LocalizationValue; formFieldError__notMatchingPasswords: LocalizationValue; formFieldError__matchingPasswords: LocalizationValue; formFieldError__verificationLinkExpired: LocalizationValue;