chore(ui,localizations,shared): Use distinct password placeholder for sign-up forms (#8082)

Author: wobsoriano

.changeset/plenty-toes-buy.md

@@ -0,0 +1,7 @@
+---
+"@clerk/localizations": patch
+"@clerk/shared": patch
+"@clerk/ui": patch
+---
+
+Use distinct password placeholder for sign-up forms

packages/localizations/src/en-US.ts

@@ -239,6 +239,7 @@ export const enUS: LocalizationResource = {
   formFieldInputPlaceholder__organizationName: 'Organization name',
   formFieldInputPlaceholder__organizationSlug: 'my-org',
   formFieldInputPlaceholder__password: 'Enter your password',
+  formFieldInputPlaceholder__signUpPassword: 'Create a password',
   formFieldInputPlaceholder__phoneNumber: 'Enter your phone number',
   formFieldInputPlaceholder__username: 'Enter your username',
   formFieldInput__emailAddress_format: 'Example format: name@example.com',

packages/shared/src/types/localization.ts

@@ -119,6 +119,7 @@ export type __internal_LocalizationResource = {
   formFieldInputPlaceholder__username: LocalizationValue;
   formFieldInputPlaceholder__emailAddress_username: LocalizationValue;
   formFieldInputPlaceholder__password: LocalizationValue;
+  formFieldInputPlaceholder__signUpPassword: LocalizationValue;
   formFieldInputPlaceholder__firstName: LocalizationValue;
   formFieldInputPlaceholder__lastName: LocalizationValue;
   formFieldInputPlaceholder__backupCode: LocalizationValue;

packages/ui/src/components/SignIn/__tests__/SignInFactorOne.test.tsx

@@ -118,6 +118,7 @@ describe('SignInFactorOne', () => {
         });
         render(<SignInFactorOne />, { wrapper });
         await screen.findByText('Password');
+        screen.getByPlaceholderText('Enter your password');
       });
 
       it('should render the other methods component when clicking on "Forgot password"', async () => {

packages/ui/src/components/SignUp/SignUpContinue.tsx

@@ -81,7 +81,7 @@ function SignUpContinueInternal() {
     password: useFormControl('password', '', {
       type: 'password',
       label: localizationKeys('formFieldLabel__password'),
-      placeholder: localizationKeys('formFieldInputPlaceholder__password'),
+      placeholder: localizationKeys('formFieldInputPlaceholder__signUpPassword'),
       validatePassword: true,
     }),
     legalAccepted: useFormControl('legalAccepted', '', {

packages/ui/src/components/SignUp/SignUpStart.tsx

@@ -109,7 +109,7 @@ function SignUpStartInternal(): JSX.Element {
     password: useFormControl('password', '', {
       type: 'password',
       label: localizationKeys('formFieldLabel__password'),
-      placeholder: localizationKeys('formFieldInputPlaceholder__password'),
+      placeholder: localizationKeys('formFieldInputPlaceholder__signUpPassword'),
       validatePassword: true,
       buildErrorMessage: errors => createPasswordError(errors, { t, locale, passwordSettings }),
     }),

packages/ui/src/components/SignUp/__tests__/SignUpContinue.test.tsx

@@ -51,6 +51,7 @@ describe('SignUpContinue', () => {
     // the email field will be lost
     expect(screen.queryByText(/email address/i)).toBeInTheDocument();
     expect(screen.queryByText(/password/i)).toBeInTheDocument();
+    screen.getByPlaceholderText('Create a password');
   });
 
   it('does not show email field if has been verified', async () => {

packages/ui/src/components/SignUp/__tests__/SignUpStart.test.tsx

@@ -44,6 +44,7 @@ describe('SignUpStart', () => {
       render(<SignUpStart />, { wrapper });
       screen.getByText('Email address');
       screen.getByText('Password');
+      screen.getByPlaceholderText('Create a password');
     });
 
     it('enables sign up with phone number and password', async () => {