diff --git a/.changeset/plenty-toes-buy.md b/.changeset/plenty-toes-buy.md new file mode 100644 index 00000000000..adfbb4e36fa --- /dev/null +++ b/.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 diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts index cd8b0200914..8f54b83a450 100644 --- a/packages/localizations/src/en-US.ts +++ b/packages/localizations/src/en-US.ts @@ -221,6 +221,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', diff --git a/packages/shared/src/types/localization.ts b/packages/shared/src/types/localization.ts index 63ad4de0f21..837031ac5d6 100644 --- a/packages/shared/src/types/localization.ts +++ b/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; diff --git a/packages/ui/src/components/SignIn/__tests__/SignInFactorOne.test.tsx b/packages/ui/src/components/SignIn/__tests__/SignInFactorOne.test.tsx index 1de4ab411a9..2a43a6632f0 100644 --- a/packages/ui/src/components/SignIn/__tests__/SignInFactorOne.test.tsx +++ b/packages/ui/src/components/SignIn/__tests__/SignInFactorOne.test.tsx @@ -118,6 +118,7 @@ describe('SignInFactorOne', () => { }); render(, { wrapper }); await screen.findByText('Password'); + screen.getByPlaceholderText('Enter your password'); }); it('should render the other methods component when clicking on "Forgot password"', async () => { diff --git a/packages/ui/src/components/SignUp/SignUpContinue.tsx b/packages/ui/src/components/SignUp/SignUpContinue.tsx index 29ae18c8e31..55c339d67f0 100644 --- a/packages/ui/src/components/SignUp/SignUpContinue.tsx +++ b/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', '', { diff --git a/packages/ui/src/components/SignUp/SignUpStart.tsx b/packages/ui/src/components/SignUp/SignUpStart.tsx index 90059b9a2f5..8400c8984ce 100644 --- a/packages/ui/src/components/SignUp/SignUpStart.tsx +++ b/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 }), }), diff --git a/packages/ui/src/components/SignUp/__tests__/SignUpContinue.test.tsx b/packages/ui/src/components/SignUp/__tests__/SignUpContinue.test.tsx index 96495d93cd3..ebf2e5dd69b 100644 --- a/packages/ui/src/components/SignUp/__tests__/SignUpContinue.test.tsx +++ b/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 () => { diff --git a/packages/ui/src/components/SignUp/__tests__/SignUpStart.test.tsx b/packages/ui/src/components/SignUp/__tests__/SignUpStart.test.tsx index 39012596dbb..e85ee5184fa 100644 --- a/packages/ui/src/components/SignUp/__tests__/SignUpStart.test.tsx +++ b/packages/ui/src/components/SignUp/__tests__/SignUpStart.test.tsx @@ -44,6 +44,7 @@ describe('SignUpStart', () => { render(, { wrapper }); screen.getByText('Email address'); screen.getByText('Password'); + screen.getByPlaceholderText('Create a password'); }); it('enables sign up with phone number and password', async () => {