feat(ui): Choose strategy for sign in (#3692)

Co-authored-by: Alex Carpenter <[email protected]>
clerk · Jul 11, 2024 · 498bd00 · 498bd00
1 parent fc1a9e3
commit 498bd00
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 33 deletions.
diff --git a/.changeset/empty-turtles-cheer.md b/.changeset/empty-turtles-cheer.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/ui/src/components/sign-in/sign-in.tsx b/packages/ui/src/components/sign-in/sign-in.tsx
@@ -251,7 +251,7 @@ export function SignInComponentLoaded() {
                               </SignIn.Action>
 
                               <SignIn.Action
-                                navigate='start'
+                                navigate='choose-strategy'
                                 asChild
                               >
                                 <LinkButton disabled={isGlobalLoading || isSubmitting}>
@@ -335,6 +335,7 @@ export function SignInComponentLoaded() {
                                   {t('formButtonPrimary')}
                                 </Button>
                               </SignIn.Action>
+
                               <SignIn.Action
                                 asChild
                                 navigate='choose-strategy'
@@ -405,6 +406,62 @@ export function SignInComponentLoaded() {
               </Card.Root>
             </SignIn.Step>
 
+            <SignIn.Step name='choose-strategy'>
+              <Card.Root>
+                <Card.Content>
+                  <Card.Header>
+                    {logoImageUrl ? (
+                      <Card.Logo
+                        href={homeUrl}
+                        src={logoImageUrl}
+                        alt={applicationName}
+                      />
+                    ) : null}
+                    <Card.Title>{t('signIn.alternativeMethods.title')}</Card.Title>
+                    <Card.Description>{t('signIn.alternativeMethods.subtitle')}</Card.Description>
+                  </Card.Header>
+                  <Card.Body>
+                    <div className='flex flex-col gap-2'>
+                      <Connections disabled={isGlobalLoading} />
+
+                      {
+                        // To be implemented in SDKI-72
+                      }
+                      <SignIn.SupportedStrategy
+                        name='email_link'
+                        asChild
+                      >
+                        <SecondaryButton icon={<Icon.LinkSm />}>
+                          {t('signIn.alternativeMethods.blockButton__emailLink', {
+                            identifier: SignIn.SafeIdentifier,
+                          })}
+                        </SecondaryButton>
+                      </SignIn.SupportedStrategy>
+
+                      <SignIn.SupportedStrategy
+                        name='email_code'
+                        asChild
+                      >
+                        <SecondaryButton icon={<Icon.Envelope />}>
+                          {t('signIn.alternativeMethods.blockButton__emailCode', {
+                            identifier: SignIn.SafeIdentifier,
+                          })}
+                        </SecondaryButton>
+                      </SignIn.SupportedStrategy>
+                    </div>
+
+                    <SignIn.Action
+                      navigate='previous'
+                      asChild
+                    >
+                      <LinkButton>{t('backButton')}</LinkButton>
+                    </SignIn.Action>
+                  </Card.Body>
+                </Card.Content>
+                <Card.Footer />
+              </Card.Root>
+            </SignIn.Step>
+
             <SignIn.Step name='forgot-password'>
               <Card.Root>
                 <Card.Content>
@@ -432,6 +489,20 @@ export function SignInComponentLoaded() {
                       <div className='flex flex-col gap-2'>
                         <Connections disabled={isGlobalLoading} />
 
+                        {
+                          // To be implemented in SDKI-72
+                        }
+                        <SignIn.SupportedStrategy
+                          name='email_link'
+                          asChild
+                        >
+                          <SecondaryButton icon={<Icon.LinkSm />}>
+                            {t('signIn.alternativeMethods.blockButton__emailLink', {
+                              identifier: SignIn.SafeIdentifier,
+                            })}
+                          </SecondaryButton>
+                        </SignIn.SupportedStrategy>
+
                         <SignIn.SupportedStrategy
                           name='reset_password_email_code'
                           asChild

diff --git a/packages/ui/src/primitives/icon.tsx b/packages/ui/src/primitives/icon.tsx
@@ -506,6 +506,48 @@ export const CheckmarkCircleSm = createIcon({
   ),
 });
 
+export const Checkmark = createIcon({
+  displayName: 'IconCheckmark',
+  viewBox: '0 0 10 10',
+  path: (
+    <path
+      d='m1 6 3 3 5-8'
+      stroke='currentColor'
+      strokeWidth='1.25'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  ),
+});
+
+export const ChevronUpDown = createIcon({
+  displayName: 'IconChevronUpDown',
+  viewBox: '0 0 16 16',
+  path: (
+    <path
+      fill='currentColor'
+      d='M5.53 9.22a.75.75 0 0 0-1.06 1.06l3 3a.75.75 0 0 0 1.06 0l3-3a.75.75 0 1 0-1.06-1.06L8 11.69 5.53 9.22ZM5.53 6.78a.75.75 0 0 1-1.06-1.06l3-3a.75.75 0 0 1 1.06 0l3 3a.75.75 0 0 1-1.06 1.06L8 4.31 5.53 6.78Z'
+    />
+  ),
+});
+
+export const Envelope = createIcon({
+  displayName: 'IconEnvelope',
+  viewBox: '0 0 16 16',
+  path: (
+    <>
+      <path
+        fill='currentColor'
+        d='M2.75 2.75A1.75 1.75 0 0 0 1 4.5v1.016l6.51 3.693a1.094 1.094 0 0 0 .98 0L15 5.517V4.5a1.75 1.75 0 0 0-1.75-1.75H2.75Z'
+      />
+      <path
+        fill='currentColor'
+        d='m15 6.984-5.924 3.4a2.406 2.406 0 0 1-2.152 0L1 6.983V11.5a1.75 1.75 0 0 0 1.75 1.75h10.5A1.75 1.75 0 0 0 15 11.5V6.984Z'
+      />
+    </>
+  ),
+});
+
 export const ExclamationOctagonSm = createIcon({
   displayName: 'IconExclamationOctagonSm',
   viewBox: '0 0 16 16',
@@ -651,42 +693,14 @@ export const InformationLegacy = createIcon({
   ),
 });
 
-export const Envelope = createIcon({
-  displayName: 'IconEnvelope',
+export const LinkSm = createIcon({
+  displayName: 'IconLinkSm',
   viewBox: '0 0 16 16',
-  path: (
-    <>
-      <path
-        fill='currentColor'
-        d='M2.75 2.75A1.75 1.75 0 0 0 1 4.5v1.016l6.51 3.693a1.094 1.094 0 0 0 .98 0L15 5.517V4.5a1.75 1.75 0 0 0-1.75-1.75H2.75Z'
-      />
-      <path
-        fill='currentColor'
-        d='m15 6.984-5.924 3.4a2.406 2.406 0 0 1-2.152 0L1 6.983V11.5a1.75 1.75 0 0 0 1.75 1.75h10.5A1.75 1.75 0 0 0 15 11.5V6.984Z'
-      />
-    </>
-  ),
-});
-
-export const ChevronUpDown = createIcon({
-  displayName: 'IconChevronUpDown',
-  viewBox: '0 0 16 16',
-  path: (
-    <path
-      fill='currentColor'
-      d='M5.53 9.22a.75.75 0 0 0-1.06 1.06l3 3a.75.75 0 0 0 1.06 0l3-3a.75.75 0 1 0-1.06-1.06L8 11.69 5.53 9.22ZM5.53 6.78a.75.75 0 0 1-1.06-1.06l3-3a.75.75 0 0 1 1.06 0l3 3a.75.75 0 0 1-1.06 1.06L8 4.31 5.53 6.78Z'
-    />
-  ),
-});
-
-export const Checkmark = createIcon({
-  displayName: 'IconCheckmark',
-  viewBox: '0 0 10 10',
   path: (
     <path
-      d='m1 6 3 3 5-8'
+      d='M7.75 3.7891L7.86522 3.67388C9.09706 2.44204 11.0943 2.44204 12.3261 3.67388C13.558 4.90572 13.558 6.90294 12.3261 8.13478L12.2109 8.25M6.75 9.25L9.25 6.75M8.25 12.2109L8.13478 12.3261C6.90294 13.558 4.90572 13.558 3.67388 12.3261C2.44204 11.0943 2.44204 9.09706 3.67388 7.86522L3.78911 7.75'
       stroke='currentColor'
-      strokeWidth='1.25'
+      strokeWidth={1.5}
       strokeLinecap='round'
       strokeLinejoin='round'
     />