Skip to content

Commit

Permalink
fix(clerk-js,localizations): Improve text on username, password scree…
Browse files Browse the repository at this point in the history
…ns (#2843)

* chore(clerk-js): Remove unneeded localization key

* fix(clerk-js,localizations): Improve text on username, profile, password screens
  • Loading branch information
desiprisg authored Feb 22, 2024
1 parent 4291669 commit 1620056
Show file tree
Hide file tree
Showing 41 changed files with 431 additions and 415 deletions.
2 changes: 2 additions & 0 deletions .changeset/good-dogs-attack.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
---
---
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,6 @@ export const VerifiedDomainForm = withCardStateProvider((props: VerifiedDomainFo
)}

<FormButtons
localizationKey={localizationKeys('organizationProfile.verifiedDomainPage.enrollmentTab.formButton__save')}
isDisabled={domainIsLoading || !domain}
onReset={onReset}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ describe('OrganizationSettings', () => {
const { getByText, getByRole } = render(<OrganizationGeneralPage />, { wrapper });
await waitFor(() => {
expect(getByText('General')).toBeDefined();
getByRole('button', { name: /edit profile/i });
getByRole('button', { name: /update profile/i });
expect(getByRole('button', { name: /leave organization/i })).not.toBeDisabled();
});
});
Expand All @@ -87,7 +87,7 @@ describe('OrganizationSettings', () => {
const { getByText, queryByRole } = render(<OrganizationGeneralPage />, { wrapper });
await waitFor(() => {
expect(getByText('General')).toBeDefined();
expect(queryByRole('button', { name: /edit profile/i })).not.toBeInTheDocument();
expect(queryByRole('button', { name: /update profile/i })).not.toBeInTheDocument();
expect(queryByRole('button', { name: /leave organization/i })).not.toBeDisabled();
});
});
Expand Down Expand Up @@ -255,12 +255,15 @@ describe('OrganizationSettings', () => {
});
});

const { getByText, getByRole, userEvent, queryByText, queryByLabelText } = render(<OrganizationGeneralPage />, {
wrapper,
});
const { getByText, getByLabelText, getByRole, userEvent, queryByText, queryByLabelText } = render(
<OrganizationGeneralPage />,
{
wrapper,
},
);
getByText('Org1');
await userEvent.click(getByRole('button', { name: /edit profile/i }));
await waitFor(() => getByText(/update profile/i));
await userEvent.click(getByRole('button', { name: /update profile/i }));
await waitFor(() => getByLabelText(/name/i));
expect(queryByText('Logo')).toBeInTheDocument();
expect(queryByLabelText(/name/i)).toBeInTheDocument();
expect(queryByLabelText(/slug/i)).toBeInTheDocument();
Expand Down
16 changes: 8 additions & 8 deletions packages/clerk-js/src/ui/components/UserProfile/PasswordForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,13 @@ const generateSuccessPageText = (userHasPassword: boolean, sessionSignOut: boole
const localizedTexts = [];

if (userHasPassword) {
localizedTexts.push(localizationKeys('userProfile.passwordPage.changePasswordSuccessMessage'));
localizedTexts.push(localizationKeys('userProfile.passwordPage.successMessage__update'));
} else {
localizedTexts.push(localizationKeys('userProfile.passwordPage.successMessage'));
localizedTexts.push(localizationKeys('userProfile.passwordPage.successMessage__set'));
}

if (sessionSignOut) {
localizedTexts.push(localizationKeys('userProfile.passwordPage.sessionsSignedOutSuccessMessage'));
localizedTexts.push(localizationKeys('userProfile.passwordPage.successMessage__signOutOfOtherSessions'));
}

return localizedTexts;
Expand All @@ -43,15 +43,15 @@ export const PasswordForm = withCardStateProvider((props: PasswordFormProps) =>

const { session } = useSession();
const title = user.passwordEnabled
? localizationKeys('userProfile.passwordPage.changePasswordTitle')
: localizationKeys('userProfile.passwordPage.title');
? localizationKeys('userProfile.passwordPage.title__update')
: localizationKeys('userProfile.passwordPage.title__set');
const card = useCardState();

const passwordEditDisabled = user.samlAccounts.some(sa => sa.active);

// Ensure that messages will not use the updated state of User after a password has been set or changed
const successPagePropsRef = useRef<Parameters<typeof SuccessPage>[0]>({
title: localizationKeys('userProfile.passwordPage.title'),
title: localizationKeys('userProfile.passwordPage.title__set'),
});

const currentPasswordField = useFormControl('currentPassword', '', {
Expand Down Expand Up @@ -112,8 +112,8 @@ export const PasswordForm = withCardStateProvider((props: PasswordFormProps) =>
try {
successPagePropsRef.current = {
title: user.passwordEnabled
? localizationKeys('userProfile.passwordPage.changePasswordTitle')
: localizationKeys('userProfile.passwordPage.title'),
? localizationKeys('userProfile.passwordPage.title__update')
: localizationKeys('userProfile.passwordPage.title__set'),
text: generateSuccessPageText(user.passwordEnabled, !!sessionsField.checked),
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export const PasswordSection = () => {
id='password'
localizationKey={
passwordEnabled
? localizationKeys('userProfile.start.passwordSection.primaryButton__changePassword')
? localizationKeys('userProfile.start.passwordSection.primaryButton__updatePassword')
: localizationKeys('userProfile.start.passwordSection.primaryButton__setPassword')
}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,13 @@ const generateSuccessPageText = (userHasPassword: boolean, sessionSignOut: boole
const localizedTexts: LocalizationKey[] = [];

if (userHasPassword) {
localizedTexts.push(localizationKeys('userProfile.passwordPage.changePasswordSuccessMessage'));
localizedTexts.push(localizationKeys('userProfile.passwordPage.successMessage__update'));
} else {
localizedTexts.push(localizationKeys('userProfile.passwordPage.successMessage'));
localizedTexts.push(localizationKeys('userProfile.passwordPage.successMessage__set'));
}

if (sessionSignOut) {
localizedTexts.push(localizationKeys('userProfile.passwordPage.sessionsSignedOutSuccessMessage'));
localizedTexts.push(localizationKeys('userProfile.passwordPage.successMessage__signOutOfOtherSessions'));
}

return localizedTexts;
Expand All @@ -50,7 +50,7 @@ export const UpdatePasswordForm = withCardStateProvider(() => {

// Ensure that messages will not use the updated state of User after a password has been set or changed
const successPagePropsRef = useRef<Parameters<typeof SuccessPage>[0]>({
title: localizationKeys('userProfile.passwordPage.title'),
title: localizationKeys('userProfile.passwordPage.title__set'),
});

const currentPasswordField = useFormControl('currentPassword', '', {
Expand Down Expand Up @@ -111,8 +111,8 @@ export const UpdatePasswordForm = withCardStateProvider(() => {
try {
successPagePropsRef.current = {
title: user.passwordEnabled
? localizationKeys('userProfile.passwordPage.changePasswordTitle')
: localizationKeys('userProfile.passwordPage.title'),
? localizationKeys('userProfile.passwordPage.title__update')
: localizationKeys('userProfile.passwordPage.title__set'),
text: generateSuccessPageText(user.passwordEnabled, !!sessionsField.checked),
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,13 @@ export const UsernameForm = withCardStateProvider((props: UsernameFormProps) =>
};

return (
<FormContainer headerTitle={localizationKeys('userProfile.usernamePage.title')}>
<FormContainer
headerTitle={
user.username
? localizationKeys('userProfile.usernamePage.title__update')
: localizationKeys('userProfile.usernamePage.title__set')
}
>
<Form.Root onSubmit={updatePassword}>
<Form.ControlRow elementId={usernameField.id}>
<Form.PlainInput
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export const UsernameSection = () => {
id='username'
localizationKey={
user.username
? localizationKeys('userProfile.start.usernameSection.primaryButton__changeUsername')
? localizationKeys('userProfile.start.usernameSection.primaryButton__updateUsername')
: localizationKeys('userProfile.start.usernameSection.primaryButton__setUsername')
}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,32 +16,34 @@ describe('AccountPage', () => {
});

describe('Sections', () => {
it('open the profile section and can edit name', async () => {
it('open the profile section and can update name', async () => {
const { wrapper } = await createFixtures(f => {
f.withName();
f.withUser({ email_addresses: ['[email protected]'], first_name: 'Clerk', last_name: 'User' });
});

const { getByText, getByRole, userEvent, queryByText, queryByLabelText } = render(<AccountPage />, { wrapper });
const { getByText, getByLabelText, getByRole, userEvent, queryByText, queryByLabelText } = render(
<AccountPage />,
{ wrapper },
);
getByText('Clerk User');
await userEvent.click(getByRole('button', { name: /edit profile/i }));
await waitFor(() => getByText(/update profile/i));
await userEvent.click(getByRole('button', { name: /update profile/i }));
await waitFor(() => getByLabelText(/first name/i));
expect(queryByText('Clerk User')).not.toBeInTheDocument();
expect(queryByLabelText(/first name/i)).toBeInTheDocument();
expect(queryByLabelText(/last name/i)).toBeInTheDocument();

expect(getByRole('button', { name: /save$/i })).toBeDisabled();
});

it('open the profile section and cannot edit name', async () => {
it('open the profile section and cannot update name', async () => {
const { wrapper } = await createFixtures(f => {
f.withUser({ email_addresses: ['[email protected]'], first_name: 'Clerk', last_name: 'User' });
});

const { getByText, getByRole, userEvent, queryByText, queryByLabelText } = render(<AccountPage />, { wrapper });
getByText('Clerk User');
await userEvent.click(getByRole('button', { name: /edit profile/i }));
await waitFor(() => getByText(/update profile/i));
await userEvent.click(getByRole('button', { name: /update profile/i }));
await waitFor(() => getByRole('button', { name: /save/i }));
expect(queryByText('Clerk User')).not.toBeInTheDocument();
expect(queryByLabelText(/first name/i)).not.toBeInTheDocument();
expect(queryByLabelText(/last name/i)).not.toBeInTheDocument();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const initConfig = createFixtures.config(f => {
f.withUser({});
});

const changePasswordConfig = createFixtures.config(f => {
const updatePasswordConfig = createFixtures.config(f => {
f.withUser({ password_enabled: true });
});

Expand All @@ -30,8 +30,8 @@ describe('PasswordSection', () => {
getByRole('button', { name: /set password/i });
});

it('renders the section with change button', async () => {
const { wrapper } = await createFixtures(changePasswordConfig);
it('renders the section with update button', async () => {
const { wrapper } = await createFixtures(updatePasswordConfig);

const { getByText, getByRole } = render(
<CardStateProvider>
Expand All @@ -40,7 +40,7 @@ describe('PasswordSection', () => {
{ wrapper },
);
getByText(/^Password/i);
getByRole('button', { name: /change password/i });
getByRole('button', { name: /update password/i });
});

describe('Set password', () => {
Expand Down Expand Up @@ -204,14 +204,14 @@ describe('PasswordSection', () => {
});
});

describe('Change password', () => {
describe('Update password', () => {
it('renders the set password screen', async () => {
const { wrapper } = await createFixtures(changePasswordConfig);
const { wrapper } = await createFixtures(updatePasswordConfig);

const { getByRole, userEvent, getByLabelText } = render(<PasswordSection />, { wrapper });

await userEvent.click(getByRole('button', { name: /change password/i }));
await waitFor(() => getByRole('heading', { name: /change password/i }));
await userEvent.click(getByRole('button', { name: /update password/i }));
await waitFor(() => getByRole('heading', { name: /update password/i }));

getByLabelText(/current password/i);
getByLabelText(/new password/i);
Expand All @@ -221,11 +221,11 @@ describe('PasswordSection', () => {
});

it('changes a new password and calls the appropriate function and closes', async () => {
const { wrapper, fixtures } = await createFixtures(changePasswordConfig);
const { wrapper, fixtures } = await createFixtures(updatePasswordConfig);

const { getByRole, userEvent, getByLabelText, queryByRole } = render(<PasswordSection />, { wrapper });
await userEvent.click(getByRole('button', { name: /change password/i }));
await waitFor(() => getByRole('heading', { name: /change password/i }));
await userEvent.click(getByRole('button', { name: /update password/i }));
await waitFor(() => getByRole('heading', { name: /update password/i }));

await userEvent.type(getByLabelText(/current password/i), 'testtest1234');
await userEvent.type(getByLabelText(/new password/i), 'testtest');
Expand All @@ -236,8 +236,8 @@ describe('PasswordSection', () => {
newPassword: 'testtest',
signOutOfOtherSessions: true,
});
await waitFor(() => getByRole('button', { name: /change password/i }));
expect(queryByRole('heading', { name: /change password/i })).not.toBeInTheDocument();
await waitFor(() => getByRole('button', { name: /update password/i }));
expect(queryByRole('heading', { name: /update password/i })).not.toBeInTheDocument();
});

describe('with SAML', () => {
Expand All @@ -264,8 +264,8 @@ describe('PasswordSection', () => {
const { wrapper } = await createFixtures(config);

const { getByRole, userEvent, getByLabelText } = render(<PasswordSection />, { wrapper });
await userEvent.click(getByRole('button', { name: /change password/i }));
await waitFor(() => getByRole('heading', { name: /change password/i }));
await userEvent.click(getByRole('button', { name: /update password/i }));
await waitFor(() => getByRole('heading', { name: /update password/i }));

expect(getByLabelText(/current password/i)).toBeDisabled();
expect(getByLabelText(/new password/i)).toBeDisabled();
Expand Down Expand Up @@ -302,8 +302,8 @@ describe('PasswordSection', () => {
const { wrapper } = await createFixtures(config);

const { getByRole, userEvent, getByLabelText } = render(<PasswordSection />, { wrapper });
await userEvent.click(getByRole('button', { name: /change password/i }));
await waitFor(() => getByRole('heading', { name: /change password/i }));
await userEvent.click(getByRole('button', { name: /update password/i }));
await waitFor(() => getByRole('heading', { name: /update password/i }));

expect(getByLabelText(/current password/i)).not.toBeDisabled();
expect(getByLabelText(/new password/i)).not.toBeDisabled();
Expand All @@ -320,10 +320,10 @@ describe('PasswordSection', () => {

describe('Form buttons', () => {
it('save button is disabled until current password is set', async () => {
const { wrapper } = await createFixtures(changePasswordConfig);
const { wrapper } = await createFixtures(updatePasswordConfig);
const { getByRole, userEvent, getByLabelText } = render(<PasswordSection />, { wrapper });
await userEvent.click(getByRole('button', { name: /change password/i }));
await waitFor(() => getByRole('heading', { name: /change password/i }));
await userEvent.click(getByRole('button', { name: /update password/i }));
await waitFor(() => getByRole('heading', { name: /update password/i }));

await userEvent.type(getByLabelText(/new password/i), 'testtest');
await userEvent.type(getByLabelText(/confirm password/i), 'testtest');
Expand Down
Loading

0 comments on commit 1620056

Please sign in to comment.