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;