chore(clerk-js): Replace text and email fields with Form.PlainInput (#2036)

* chore(clerk-js): Replace text and email fields with Form.PlainInput

* chore(clerk-js): Localize the placeholder of the confirmation field when deleting a user account

Author: panteliselef

.changeset/metal-cougars-fail.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Replace Form.Control with Form.PlainInput for text and email inputs.

.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 `<UserProfile/>`.

packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx

@@ -123,21 +123,21 @@ export const CreateOrganizationForm = (props: CreateOrganizationFormProps) => {
             onAvatarRemove={file ? onAvatarRemove : null}
           />
           <Form.ControlRow elementId={nameField.id}>
-            <Form.Control
-              sx={{ flexBasis: '80%' }}
-              autoFocus
+            <Form.PlainInput
               {...nameField.props}
+              sx={{ flexBasis: '80%' }}
               onChange={onChangeName}
-              required
+              isRequired
+              autoFocus
             />
           </Form.ControlRow>
           <Form.ControlRow elementId={slugField.id}>
-            <Form.Control
-              sx={{ flexBasis: '80%' }}
+            <Form.PlainInput
               {...slugField.props}
-              onChange={onChangeSlug}
+              sx={{ flexBasis: '80%' }}
               icon={QuestionMark}
-              required
+              onChange={onChangeSlug}
+              isRequired
             />
           </Form.ControlRow>
           <FormButtonContainer>

packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx

@@ -141,10 +141,7 @@ const ActionConfirmationPage = withCardStateProvider((props: ActionConfirmationP
           <Text localizationKey={actionDescription} />
 
           <Form.ControlRow elementId={confirmationField.id}>
-            <Form.Control
-              {...confirmationField.props}
-              required
-            />
+            <Form.PlainInput {...confirmationField.props} />
           </Form.ControlRow>
 
           <FormButtonContainer>

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}
           />
           <Form.ControlRow elementId={nameField.id}>
-            <Form.Control
+            <Form.PlainInput
               {...nameField.props}
               autoFocus
-              required
+              isRequired
             />
           </Form.ControlRow>
           <Form.ControlRow elementId={slugField.id}>
-            <Form.Control
+            <Form.PlainInput
               {...slugField.props}
               onChange={onChangeSlug}
-              required
             />
           </Form.ControlRow>
           <FormButtons isDisabled={!canSubmit} />

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(() => {
         <Text localizationKey={localizationKeys('userProfile.deletePage.actionDescription')} />
 
         <Form.ControlRow elementId={confirmationField.id}>
-          <Form.Control
-            {...confirmationField.props}
-            required
-          />
+          <Form.PlainInput {...confirmationField.props} />
         </Form.ControlRow>
         <FormButtons
           submitLabel={localizationKeys('userProfile.deletePage.confirm')}

packages/clerk-js/src/ui/components/UserProfile/EmailPage.tsx

@@ -37,7 +37,6 @@ export const EmailPage = 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(() => {
       >
         <Form.Root onSubmit={addEmail}>
           <Form.ControlRow elementId={emailField.id}>
-            <Form.Control
+            <Form.PlainInput
               {...emailField.props}
-              required
               autoFocus
             />
           </Form.ControlRow>

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 && (
             <Form.ControlRow elementId={firstNameField.id}>
-              <Form.Control
-                autoFocus
+              <Form.PlainInput
                 {...firstNameField.props}
-                required={first_name.required}
                 isDisabled={nameEditDisabled}
+                autoFocus
               />
             </Form.ControlRow>
           )}
           {showLastName && (
             <Form.ControlRow elementId={lastNameField.id}>
-              <Form.Control
+              <Form.PlainInput
                 {...lastNameField.props}
-                required={last_name.required}
                 isDisabled={nameEditDisabled}
               />
             </Form.ControlRow>

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.',

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;