Skip to content

fix(clerk-js): Add success state to Keyless UI #4928

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Jan 20, 2025
Merged

fix(clerk-js): Add success state to Keyless UI #4928

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
bf5fadb
Add success state
kaftarmery Jan 17, 2025
967a3e1
Changeset
kaftarmery Jan 17, 2025
ecfae25
Add fit-content to success state
kaftarmery Jan 17, 2025
244a584
Add truncate on user's app name
kaftarmery Jan 17, 2025
7f6708e
Toggle success variable to false
kaftarmery Jan 17, 2025
d772f0d
Apply suggestions from code review
panteliselef Jan 20, 2025
ee6beea
Update .changeset/new-teachers-reflect.md
panteliselef Jan 20, 2025
d1e1595
Update .changeset/new-teachers-reflect.md
panteliselef Jan 20, 2025
eabc591
Merge branch 'main' into keyless-ui-success
Jan 20, 2025
c0d922f
Fix styling issue
kaftarmery Jan 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/new-teachers-reflect.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': minor
---

Add a confirmation state that the Application has been successfully claimed on the Keyless prompt.
190 changes: 131 additions & 59 deletions packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,10 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
const [isExpanded, setIsExpanded] = useState(false);
const claimed = Boolean(useRevalidateEnvironment().authConfig.claimedAt);

const isForcedExpanded = claimed || isExpanded;
const success = false;
const appName = useRevalidateEnvironment().displayConfig.applicationName;

const isForcedExpanded = claimed || success || isExpanded;

const baseElementStyles = css`
box-sizing: border-box;
Expand All @@ -50,6 +53,32 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
text-decoration: none;
`;

const mainCTAStyles = css`
${baseElementStyles};
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 1.75rem;
max-width: 14.625rem;
padding: 0.25rem 0.625rem;
border-radius: 0.375rem;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.12px;
color: ${claimed ? 'white' : success ? 'white' : '#fde047'};
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.32);
white-space: nowrap;
user-select: none;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.05) 100%), #454545;
box-shadow:
0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
0px 0px 0px 1px rgba(0, 0, 0, 0.12),
0px 1.5px 2px 0px rgba(0, 0, 0, 0.48),
0px 0px 4px 0px rgba(243, 107, 22, 0) inset;
`;

return (
<Portal>
<Flex
Expand Down Expand Up @@ -77,7 +106,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
flexDirection: 'column',
alignItems: 'flex-center',
justifyContent: 'flex-center',
height: '8.75rem',
height: success ? 'fit-content' : '8.563rem',
overflow: 'hidden',
width: 'fit-content',
minWidth: '16.125rem',
Expand Down Expand Up @@ -108,7 +137,31 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
gap: t.space.$2,
})}
>
{claimed ? (
{success ? (
<svg
width='1rem'
height='1rem'
viewBox='0 0 16 17'
fill='none'
aria-hidden
xmlns='http://www.w3.org/2000/svg'
>
<g opacity='0.88'>
<path
d='M13.8002 8.20039C13.8002 8.96206 13.6502 9.71627 13.3587 10.42C13.0672 11.1236 12.64 11.763 12.1014 12.3016C11.5628 12.8402 10.9234 13.2674 10.2198 13.5589C9.51607 13.8504 8.76186 14.0004 8.0002 14.0004C7.23853 14.0004 6.48432 13.8504 5.78063 13.5589C5.07694 13.2674 4.43756 12.8402 3.89898 12.3016C3.3604 11.763 2.93317 11.1236 2.64169 10.42C2.35022 9.71627 2.2002 8.96206 2.2002 8.20039C2.2002 6.66214 2.81126 5.18688 3.89898 4.09917C4.98669 3.01146 6.46194 2.40039 8.0002 2.40039C9.53845 2.40039 11.0137 3.01146 12.1014 4.09917C13.1891 5.18688 13.8002 6.66214 13.8002 8.20039Z'
fill='#22C543'
fillOpacity='0.16'
/>
<path
d='M6.06686 8.68372L7.51686 10.1337L9.93353 6.75039M13.8002 8.20039C13.8002 8.96206 13.6502 9.71627 13.3587 10.42C13.0672 11.1236 12.64 11.763 12.1014 12.3016C11.5628 12.8402 10.9234 13.2674 10.2198 13.5589C9.51607 13.8504 8.76186 14.0004 8.0002 14.0004C7.23853 14.0004 6.48432 13.8504 5.78063 13.5589C5.07694 13.2674 4.43756 12.8402 3.89898 12.3016C3.3604 11.763 2.93317 11.1236 2.64169 10.42C2.35022 9.71627 2.2002 8.96206 2.2002 8.20039C2.2002 6.66214 2.81126 5.18688 3.89898 4.09917C4.98669 3.01146 6.46194 2.40039 8.0002 2.40039C9.53845 2.40039 11.0137 3.01146 12.1014 4.09917C13.1891 5.18688 13.8002 6.66214 13.8002 8.20039Z'
stroke='#22C543'
strokeWidth='1.2'
strokeLinecap='round'
strokeLinejoin='round'
/>
</g>
</svg>
) : claimed ? (
<svg
width='1rem'
height='1rem'
Expand Down Expand Up @@ -190,7 +243,13 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {

<p
data-text='Clerk is in keyless mode'
aria-label={claimed ? 'Missing environment keys' : 'Clerk is in keyless mode'}
aria-label={
success
? 'Application claim completed'
: claimed
? 'Missing environment keys'
: 'Clerk is in keyless mode'
}
css={css`
${baseElementStyles};
color: #d9d9d9;
Expand All @@ -202,6 +261,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
cursor: pointer;

${!claimed &&
!success &&
`&::after {
content: attr(data-text);
z-index: 1;
Expand All @@ -218,7 +278,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
transparent 60%,
transparent 100%
);
background-size: 260% 100%;
background-size: 275% 100%;
background-clip: text;
filter: blur(1.2px);
animation: text-shimmer 12s 1s 1 ease-out forwards;
Expand All @@ -244,7 +304,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
transparent 65%,
transparent 100%
);
background-size: 260% 100%;
background-size: 275% 100%;
background-clip: text;
animation: text-shimmer 12s 1s 1 ease-out forwards;
-webkit-user-select: none;
Expand Down Expand Up @@ -276,7 +336,11 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
`};
`}
>
{claimed ? 'Missing environment keys' : 'Clerk is in keyless mode'}
{success
? 'Application claim completed'
: claimed
? 'Missing environment keys'
: 'Clerk is in keyless mode'}
</p>
</Flex>

Expand All @@ -290,7 +354,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
css={css`
color: #8c8c8c;
transition: color 130ms ease-out;
display: ${isExpanded && !claimed ? 'block' : 'none'};
display: ${isExpanded && !claimed && !success ? 'block' : 'none'};

:hover {
color: #eeeeee;
Expand Down Expand Up @@ -352,7 +416,24 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
}
`}
>
{claimed ? (
{success ? (
<>
Your application{' '}
<span
css={css`
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 8.125rem;
vertical-align: bottom;
`}
>
{appName}
</span>{' '}
has been successfully claimed.
</>
) : claimed ? (
<>
You claimed this application but haven&apos;t set keys in your environment. Get them from the Clerk
Dashboard.
Expand All @@ -365,67 +446,58 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
</p>
</div>

{isForcedExpanded && (
<a
href={claimed ? _props.copyKeysUrl : _props.claimUrl}
target='_blank'
rel='noopener noreferrer'
data-expanded={isForcedExpanded}
css={css`
${baseElementStyles};
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 1.75rem;
max-width: 14.625rem;
padding: 0.25rem 0.625rem;
border-radius: 0.375rem;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.12px;
color: ${claimed ? 'white' : '#fde047'};
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.32);
white-space: nowrap;
user-select: none;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.05) 100%), #454545;
box-shadow:
0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
0px 0px 0px 1px rgba(0, 0, 0, 0.12),
0px 1.5px 2px 0px rgba(0, 0, 0, 0.48),
0px 0px 4px 0px rgba(243, 107, 22, 0) inset;

animation: ${isForcedExpanded && 'show-button 600ms ease-in forwards'};
@keyframes show-button {
0%,
5% {
opacity: 0;
{isForcedExpanded &&
(success ? (
<button
type='button'
css={css`
${mainCTAStyles};
&:hover {
background: #4b4b4b;
transition: all 120ms ease-in-out;
}
14%,
100% {
opacity: 1;
`}
>
Dismiss
</button>
) : (
<a
href={claimed ? _props.copyKeysUrl : _props.claimUrl}
target='_blank'
rel='noopener noreferrer'
data-expanded={isForcedExpanded}
css={css`
${mainCTAStyles};
animation: ${isForcedExpanded && 'show-button 600ms ease-in forwards'};
@keyframes show-button {
0%,
5% {
opacity: 0;
}
14%,
100% {
opacity: 1;
}
}
}

&:hover {
${claimed
? `
&:hover {
${claimed
? `
background: #4B4B4B;
transition: all 120ms ease-in-out;`
: `
: `
box-shadow:
0px 0px 6px 0px rgba(253, 224, 71, 0.24) inset,
0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
0px 0px 0px 1px rgba(0, 0, 0, 0.12),
0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);`}
}
`}
>
{claimed ? 'Get API keys' : 'Claim application'}
</a>
)}
}
`}
>
{claimed ? 'Get API keys' : 'Claim application'}
</a>
))}
</Flex>
</Flex>
<BodyPortal>
Expand Down
Loading