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
clerk · Dec 16, 2023 · 614cf22 · 614cf22
1 parent b4d8e1f
commit 614cf22
Show file tree

Hide file tree

Showing 11 changed files with 114 additions and 100 deletions.
diff --git a/.changeset/odd-eels-ring.md 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
@@ -35,14 +35,17 @@ export const EmailLinkStatusCard = (props: EmailLinkStatusCardProps) => {
   return (
     <Flow.Part part='emailLinkStatus'>
       <Card.Root>
-        <Card.Alert>{card.error}</Card.Alert>
-        <Header.Root>
-          <Header.Title localizationKey={props.title} />
-          <Header.Subtitle localizationKey={props.subtitle} />
-        </Header.Root>
-        <Col elementDescriptor={descriptors.main}>
-          <StatusRow status={props.status} />
-        </Col>
+        <Card.Content>
+          <Card.Alert>{card.error}</Card.Alert>
+          <Header.Root>
+            <Header.Title localizationKey={props.title} />
+            <Header.Subtitle localizationKey={props.subtitle} />
+          </Header.Root>
+          <Col elementDescriptor={descriptors.main}>
+            <StatusRow status={props.status} />
+          </Col>
+        </Card.Content>
+        <Card.Footer />
       </Card.Root>
     </Flow.Part>
   );

diff --git 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.Alert>{card.error}</Card.Alert>
           <LoadingCardContainer />
         </Card.Content>
+        <Card.Footer />
       </Card.Root>
     </Flow.Part>
   );

diff --git 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 (
     <Flow.Part part='accountSwitcher'>
       <Card.Root>
-        <Card.Alert>{card.error}</Card.Alert>
-        <Header.Root>
-          <Header.Title>Signed out</Header.Title>
-          <Header.Subtitle>Select account to continue to {applicationName}</Header.Subtitle>
-        </Header.Root>
-        <Col
-          elementDescriptor={descriptors.main}
-          gap={8}
-        >
-          <Col>
-            {activeSessions.map(s => (
-              <PreviewButton
-                key={s.id}
-                onClick={handleSessionClicked(s)}
-                sx={theme => ({ height: theme.sizes.$16, justifyContent: 'flex-start' })}
+        <Card.Content>
+          <Card.Alert>{card.error}</Card.Alert>
+          <Header.Root>
+            <Header.Title>Signed out</Header.Title>
+            <Header.Subtitle>Select account to continue to {applicationName}</Header.Subtitle>
+          </Header.Root>
+          <Col
+            elementDescriptor={descriptors.main}
+            gap={8}
+          >
+            <Col>
+              {activeSessions.map(s => (
+                <PreviewButton
+                  key={s.id}
+                  onClick={handleSessionClicked(s)}
+                  sx={theme => ({ height: theme.sizes.$16, justifyContent: 'flex-start' })}
+                >
+                  <UserPreview user={s.user} />
+                </PreviewButton>
+              ))}
+            </Col>
+            <Col gap={2}>
+              <ArrowBlockButton
+                isDisabled={card.isLoading}
+                leftIcon={
+                  <Icon
+                    size='sm'
+                    icon={Plus}
+                    sx={theme => ({ color: theme.colors.$blackAlpha500 })}
+                  />
+                }
+                onClick={handleAddAccountClicked}
               >
-                <UserPreview user={s.user} />
-              </PreviewButton>
-            ))}
-          </Col>
-          <Col gap={2}>
-            <ArrowBlockButton
-              isDisabled={card.isLoading}
-              leftIcon={
-                <Icon
-                  size='sm'
-                  icon={Plus}
-                  sx={theme => ({ color: theme.colors.$blackAlpha500 })}
-                />
-              }
-              onClick={handleAddAccountClicked}
-            >
-              Add account
-            </ArrowBlockButton>
-            <ArrowBlockButton
-              isDisabled={card.isLoading}
-              leftIcon={
-                <Icon
-                  icon={SignOutDouble}
-                  sx={theme => ({ color: theme.colors.$blackAlpha500 })}
-                />
-              }
-              onClick={handleSignOutAllClicked}
-            >
-              Sign out of all accounts
-            </ArrowBlockButton>
+                Add account
+              </ArrowBlockButton>
+              <ArrowBlockButton
+                isDisabled={card.isLoading}
+                leftIcon={
+                  <Icon
+                    icon={SignOutDouble}
+                    sx={theme => ({ color: theme.colors.$blackAlpha500 })}
+                  />
+                }
+                onClick={handleSignOutAllClicked}
+              >
+                Sign out of all accounts
+              </ArrowBlockButton>
+            </Col>
           </Col>
-        </Col>
+        </Card.Content>
+        <Card.Footer />
       </Card.Root>
     </Flow.Part>
   );

diff --git 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 (
     <Flow.Part part='complete'>
       <Card.Root>
-        <Card.Alert>{card.error}</Card.Alert>
-        <Header.Root>
-          <Header.Title localizationKey={localizationKeys('signUp.continue.title')} />
-          <Header.Subtitle localizationKey={localizationKeys('signUp.continue.subtitle')} />
-        </Header.Root>
-        <Flex
-          direction='col'
-          elementDescriptor={descriptors.main}
-          gap={8}
-        >
-          <SocialButtonsReversibleContainerWithDivider>
-            {(showOauthProviders || showWeb3Providers) && (
-              <SignUpSocialButtons
-                enableOAuthProviders={showOauthProviders}
-                enableWeb3Providers={showWeb3Providers}
+        <Card.Content>
+          <Card.Alert>{card.error}</Card.Alert>
+          <Header.Root>
+            <Header.Title localizationKey={localizationKeys('signUp.continue.title')} />
+            <Header.Subtitle localizationKey={localizationKeys('signUp.continue.subtitle')} />
+          </Header.Root>
+          <Flex
+            direction='col'
+            elementDescriptor={descriptors.main}
+            gap={8}
+          >
+            <SocialButtonsReversibleContainerWithDivider>
+              {(showOauthProviders || showWeb3Providers) && (
+                <SignUpSocialButtons
+                  enableOAuthProviders={showOauthProviders}
+                  enableWeb3Providers={showWeb3Providers}
+                />
+              )}
+              <SignUpForm
+                handleSubmit={handleSubmit}
+                fields={fields}
+                formState={formState}
+                canToggleEmailPhone={canToggleEmailPhone}
+                handleEmailPhoneToggle={handleChangeActive}
               />
-            )}
-            <SignUpForm
-              handleSubmit={handleSubmit}
-              fields={fields}
-              formState={formState}
-              canToggleEmailPhone={canToggleEmailPhone}
-              handleEmailPhoneToggle={handleChangeActive}
-            />
-          </SocialButtonsReversibleContainerWithDivider>
-        </Flex>
-        <Footer.Root>
-          <Footer.Action elementId='signUp'>
-            <Footer.ActionText localizationKey={localizationKeys('signUp.continue.actionText')} />
-            <Footer.ActionLink
-              localizationKey={localizationKeys('signUp.continue.actionLink')}
-              to={clerk.buildUrlWithAuth(signInUrl)}
-            />
-          </Footer.Action>
-          <Footer.Links />
-        </Footer.Root>
+            </SocialButtonsReversibleContainerWithDivider>
+          </Flex>
+        </Card.Content>
+        <Card.Footer>
+          <Footer.Root>
+            <Footer.Action elementId='signUp'>
+              <Footer.ActionText localizationKey={localizationKeys('signUp.continue.actionText')} />
+              <Footer.ActionLink
+                localizationKey={localizationKeys('signUp.continue.actionLink')}
+                to={clerk.buildUrlWithAuth(signInUrl)}
+              />
+            </Footer.Action>
+            <Footer.Links />
+          </Footer.Root>
+        </Card.Footer>
       </Card.Root>
     </Flow.Part>
   );

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
@@ -82,7 +82,7 @@ describe('SignUpContinue', () => {
       });
       render(<SignUpContinue />, { 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
@@ -141,7 +141,7 @@ describe('SignUpStart', () => {
       });
       render(<SignUpStart />, { 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
@@ -54,7 +54,7 @@ describe('SignUpVerifyEmail', () => {
 
     render(<SignUpVerifyEmail />, { 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
@@ -29,7 +29,7 @@ describe('SignUpVerifyPhone', () => {
     });
     render(<SignUpVerifyPhone />, { 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
@@ -34,6 +34,7 @@ export const LoadingCard = withCardStateProvider(() => {
         <Card.Alert>{card.error}</Card.Alert>
         <LoadingCardContainer />
       </Card.Content>
+      <Card.Footer />
     </Card.Root>
   );
 });
diff --git 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,30 +112,30 @@ 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',
     },
   },
   signIn: {
     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',