From e80166e08c8e230ce9ee48f2eaef3b27996b7557 Mon Sep 17 00:00:00 2001 From: Meryem Kaftar Date: Wed, 11 Dec 2024 09:15:45 -0800 Subject: [PATCH] feat(clerk-js): Add additional UI to claim/keyless flow (#4756) Co-authored-by: panteliselef Co-authored-by: Mike Wickett --- .changeset/beige-eyes-decide.md | 5 + packages/clerk-js/sandbox/app.ts | 7 +- .../src/ui/components/KeylessPrompt/index.tsx | 243 +++++++++++------- 3 files changed, 157 insertions(+), 98 deletions(-) create mode 100644 .changeset/beige-eyes-decide.md diff --git a/.changeset/beige-eyes-decide.md b/.changeset/beige-eyes-decide.md new file mode 100644 index 0000000000..6ef99d84d7 --- /dev/null +++ b/.changeset/beige-eyes-decide.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Add additional toast UI for the claim/keyless flow diff --git a/packages/clerk-js/sandbox/app.ts b/packages/clerk-js/sandbox/app.ts index 83479c5482..27b10e1ae7 100644 --- a/packages/clerk-js/sandbox/app.ts +++ b/packages/clerk-js/sandbox/app.ts @@ -160,7 +160,12 @@ function addCurrentRouteIndicator(currentRoute: string) { Clerk.mountWaitlist(app, componentControls.waitlist.getProps() ?? {}); }, '/accountless': () => { - Clerk.__unstable__updateProps({ options: { __internal_claimKeylessApplicationUrl: '/test-url' } }); + Clerk.__unstable__updateProps({ + options: { + __internal_claimKeylessApplicationUrl: 'https://dashboard.clerk.com', + __internal_copyInstanceKeysUrl: 'https://dashboard.clerk.com', + }, + }); }, '/open-sign-in': () => { mountOpenSignInButton(app, componentControls.signIn.getProps() ?? {}); diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx index 2ae30b92f0..5d3bef3aef 100644 --- a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx +++ b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx @@ -3,7 +3,8 @@ import { useClerk } from '@clerk/shared/react'; import { css } from '@emotion/react'; import { useState } from 'react'; -import { descriptors, Flex, Link } from '../../customizables'; +import { useEnvironment } from '../../contexts'; +import { descriptors, Flex, Link, Spinner } from '../../customizables'; import { Portal } from '../../elements/Portal'; import { InternalThemeProvider } from '../../styledSystem'; import { ClerkLogoIcon } from './ClerkLogoIcon'; @@ -16,7 +17,10 @@ type KeylessPromptProps = { const _KeylessPrompt = (_props: KeylessPromptProps) => { const [isExpanded, setIsExpanded] = useState(true); + const [isLoading, setIsLoading] = useState(false); const handleFocus = () => setIsExpanded(true); + + const claimed = Boolean(useEnvironment().authConfig.claimedAt); const clerk = useClerk(); return ( @@ -50,7 +54,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { height: 'fit-content', width: 'fit-content', minWidth: '16.125rem', - gap: `${t.space.$1}`, + gap: `${t.space.$1x5}`, padding: `${t.space.$2x5} ${t.space.$3} 3.25rem ${t.space.$3}`, borderRadius: `${t.radii.$xl}`, transition: 'all 210ms cubic-bezier(0.4, 1, 0.20, 0.9)', @@ -70,63 +74,82 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { gap: t.space.$2, })} > -
+ + + ) : ( +
- + - -
+ +
+ )}

{ white-space: nowrap; animation: show-title 180ms ease-out forwards; - &::after { + ${!claimed && + `&::after { content: attr(data-text); z-index: 1; position: absolute; @@ -158,9 +182,11 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { background-size: 180% 100%; background-clip: text; filter: blur(1.2px); - animation: ${isExpanded - ? 'text-shimmer-expanded 3s infinite ease-out forwards' - : 'text-shimmer 3s infinite ease-out forwards'}; + animation: ${ + isExpanded + ? 'text-shimmer-expanded 3s infinite ease-out forwards' + : 'text-shimmer 3s infinite ease-out forwards' + }; } &::before { @@ -183,20 +209,11 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { ); background-size: 180% 100%; background-clip: text; - animation: ${isExpanded - ? 'text-shimmer-expanded 3s infinite ease-out forwards' - : 'text-shimmer 3s infinite ease-out forwards'}; - } - - @keyframes show-title { - from { - transform: translateY(-1.5px); - opacity: 0; - } - to { - transform: translateY(0); - opacity: 1; - } + animation: ${ + isExpanded + ? 'text-shimmer-expanded 3s infinite ease-out forwards' + : 'text-shimmer 3s infinite ease-out forwards' + }; } @keyframes text-shimmer { @@ -219,12 +236,23 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { } } `} + @keyframes show-title { + from { + transform: translateY(-1.5px); + opacity: 0; + } + to { + transform: translateY(0); + opacity: 1; + } + } + `} > - Clerk is in keyless mode + {claimed ? 'Missing environment keys' : 'Clerk is in keyless mode'}

- {isExpanded && ( + {isExpanded && !claimed && (