From 614cf2283029e7cfc02a525a3e71b9694d9c25d4 Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Fri, 15 Dec 2023 22:32:59 +0200 Subject: [PATCH] feat(clerk-js): Retheme Sign Up (#2376) * feat(clerk-js): Retheme Sign Up * feat(clerk-js): Retheme Sign Up * chore(repo): Add Changeset * test(clerk-js): Fix tests --- .changeset/odd-eels-ring.md | 2 + .../src/ui/common/EmailLinkStatusCard.tsx | 19 ++-- .../clerk-js/src/ui/common/SSOCallback.tsx | 1 + .../SignIn/SignInAccountSwitcher.tsx | 95 ++++++++++--------- .../ui/components/SignUp/SignUpContinue.tsx | 74 ++++++++------- .../SignUp/__tests__/SignUpContinue.test.tsx | 2 +- .../SignUp/__tests__/SignUpStart.test.tsx | 2 +- .../__tests__/SignUpVerifyEmail.test.tsx | 2 +- .../__tests__/SignUpVerifyPhone.test.tsx | 2 +- .../clerk-js/src/ui/elements/LoadingCard.tsx | 1 + packages/localizations/src/en-US.ts | 14 +-- 11 files changed, 114 insertions(+), 100 deletions(-) create mode 100644 .changeset/odd-eels-ring.md diff --git a/.changeset/odd-eels-ring.md b/.changeset/odd-eels-ring.md new file mode 100644 index 00000000000..a845151cc84 --- /dev/null +++ b/.changeset/odd-eels-ring.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/packages/clerk-js/src/ui/common/EmailLinkStatusCard.tsx b/packages/clerk-js/src/ui/common/EmailLinkStatusCard.tsx index 94496b1207c..8531448a913 100644 --- a/packages/clerk-js/src/ui/common/EmailLinkStatusCard.tsx +++ b/packages/clerk-js/src/ui/common/EmailLinkStatusCard.tsx @@ -35,14 +35,17 @@ export const EmailLinkStatusCard = (props: EmailLinkStatusCardProps) => { return ( - {card.error} - - - - - - - + + {card.error} + + + + + + + + + ); diff --git a/packages/clerk-js/src/ui/common/SSOCallback.tsx b/packages/clerk-js/src/ui/common/SSOCallback.tsx index 0dcc5b3251d..40d7f4bf47d 100644 --- a/packages/clerk-js/src/ui/common/SSOCallback.tsx +++ b/packages/clerk-js/src/ui/common/SSOCallback.tsx @@ -37,6 +37,7 @@ export const SSOCallbackCard = (props: HandleOAuthCallbackParams | HandleSamlCal {card.error} + ); diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx index c3173f9b2f2..61831d76228 100644 --- a/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx +++ b/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx @@ -25,54 +25,57 @@ const _SignInAccountSwitcher = () => { return ( - {card.error} - - Signed out - Select account to continue to {applicationName} - - - - {activeSessions.map(s => ( - ({ height: theme.sizes.$16, justifyContent: 'flex-start' })} + + {card.error} + + Signed out + Select account to continue to {applicationName} + + + + {activeSessions.map(s => ( + ({ height: theme.sizes.$16, justifyContent: 'flex-start' })} + > + + + ))} + + + ({ color: theme.colors.$blackAlpha500 })} + /> + } + onClick={handleAddAccountClicked} > - - - ))} - - - ({ color: theme.colors.$blackAlpha500 })} - /> - } - onClick={handleAddAccountClicked} - > - Add account - - ({ color: theme.colors.$blackAlpha500 })} - /> - } - onClick={handleSignOutAllClicked} - > - Sign out of all accounts - + Add account + + ({ color: theme.colors.$blackAlpha500 })} + /> + } + onClick={handleSignOutAllClicked} + > + Sign out of all accounts + + - + + ); diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx index 96ded091d86..ffb13ce9a72 100644 --- a/packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx +++ b/packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx @@ -160,42 +160,46 @@ function _SignUpContinue() { return ( - {card.error} - - - - - - - {(showOauthProviders || showWeb3Providers) && ( - + {card.error} + + + + + + + {(showOauthProviders || showWeb3Providers) && ( + + )} + - )} - - - - - - - - - - + + + + + + + + + + + + ); diff --git a/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpContinue.test.tsx b/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpContinue.test.tsx index ff242d817a3..f588cd654cf 100644 --- a/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpContinue.test.tsx +++ b/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpContinue.test.tsx @@ -82,7 +82,7 @@ describe('SignUpContinue', () => { }); render(, { wrapper }); - const signInLink = screen.getByText('Have an account?').nextElementSibling; + const signInLink = screen.getByText('Already have an account?').nextElementSibling; expect(signInLink?.textContent).toBe('Sign in'); expect(signInLink?.tagName.toUpperCase()).toBe('A'); expect(signInLink?.getAttribute('href')).toMatch(fixtures.environment.displayConfig.signInUrl); diff --git a/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpStart.test.tsx b/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpStart.test.tsx index 6b95a1137f5..aa0de597504 100644 --- a/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpStart.test.tsx +++ b/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpStart.test.tsx @@ -141,7 +141,7 @@ describe('SignUpStart', () => { }); render(, { wrapper }); - const signInLink = screen.getByText('Have an account?').nextElementSibling; + const signInLink = screen.getByText('Already have an account?').nextElementSibling; expect(signInLink?.textContent).toBe('Sign in'); expect(signInLink?.tagName.toUpperCase()).toBe('A'); expect(signInLink?.getAttribute('href')).toMatch(fixtures.environment.displayConfig.signInUrl); diff --git a/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyEmail.test.tsx b/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyEmail.test.tsx index cb21ba46a6d..9cd0189dc5c 100644 --- a/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyEmail.test.tsx +++ b/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyEmail.test.tsx @@ -54,7 +54,7 @@ describe('SignUpVerifyEmail', () => { render(, { wrapper }); screen.getByText(/Verify your email/i); - screen.getByText(/to continue to TestApp/i); + screen.getByText(/Enter the verification code sent to your email/i); }); it('clicking on the edit icon navigates to the previous route', async () => { diff --git a/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyPhone.test.tsx b/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyPhone.test.tsx index 60d45fa38bd..bf5d6ddfe7e 100644 --- a/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyPhone.test.tsx +++ b/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyPhone.test.tsx @@ -29,7 +29,7 @@ describe('SignUpVerifyPhone', () => { }); render(, { wrapper }); screen.getByText(/Verify your phone/i); - screen.getByText(/to continue to TestApp/i); + screen.getByText(/Enter the verification code sent to your phone/i); }); it('clicking on the edit icon navigates to the previous route', async () => { diff --git a/packages/clerk-js/src/ui/elements/LoadingCard.tsx b/packages/clerk-js/src/ui/elements/LoadingCard.tsx index e8a78567156..5c099f0b46d 100644 --- a/packages/clerk-js/src/ui/elements/LoadingCard.tsx +++ b/packages/clerk-js/src/ui/elements/LoadingCard.tsx @@ -34,6 +34,7 @@ export const LoadingCard = withCardStateProvider(() => { {card.error} + ); }); diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts index 5ac1a07a6d4..922d50f47b7 100644 --- a/packages/localizations/src/en-US.ts +++ b/packages/localizations/src/en-US.ts @@ -88,8 +88,8 @@ export const enUS: LocalizationResource = { signUp: { start: { title: 'Create your account', - subtitle: 'to continue to {{applicationName}}', - actionText: 'Have an account?', + subtitle: 'Welcome! Please fill in the details to get started.', + actionText: 'Already have an account?', actionLink: 'Sign in', }, emailLink: { @@ -112,22 +112,22 @@ export const enUS: LocalizationResource = { }, emailCode: { title: 'Verify your email', - subtitle: 'to continue to {{applicationName}}', + subtitle: 'Enter the verification code sent to your email', formTitle: 'Verification code', formSubtitle: 'Enter the verification code sent to your email address', resendButton: "Didn't receive a code? Resend", }, phoneCode: { title: 'Verify your phone', - subtitle: 'to continue to {{applicationName}}', + subtitle: 'Enter the verification code sent to your phone', formTitle: 'Verification code', formSubtitle: 'Enter the verification code sent to your phone number', resendButton: "Didn't receive a code? Resend", }, continue: { title: 'Fill in missing fields', - subtitle: 'to continue to {{applicationName}}', - actionText: 'Have an account?', + subtitle: 'Please fill in the remaining details to continue.', + actionText: 'Already have an account?', actionLink: 'Sign in', }, }, @@ -135,7 +135,7 @@ export const enUS: LocalizationResource = { start: { title: 'Sign in to {{applicationName}}', subtitle: 'Welcome back! Please sign in to continue', - actionText: 'No account?', + actionText: 'Don’t have an account?', actionLink: 'Sign up', actionLink__use_email: 'Use email', actionLink__use_phone: 'Use phone',