From ce3561e543bed074dbb2dcf576b8d30a30aeccfb Mon Sep 17 00:00:00 2001 From: Dylan Staley <88163+dstaley@users.noreply.github.com> Date: Fri, 9 Aug 2024 14:16:55 -0700 Subject: [PATCH 1/5] feat(elements,ui): Add support for actions within start step --- .../src/internals/machines/shared/shared.actions.ts | 13 +++++++++++++ .../internals/machines/sign-in/router.machine.ts | 1 + .../src/internals/machines/sign-in/start.types.ts | 4 ++-- .../src/internals/machines/types/router.types.ts | 2 ++ packages/elements/src/react/common/form/index.tsx | 6 +++--- packages/elements/src/react/common/loading.tsx | 12 +++++++++--- .../elements/src/react/hooks/use-loading.hook.ts | 6 +++--- packages/ui/src/components/sign-in/steps/start.tsx | 4 ++-- 8 files changed, 35 insertions(+), 13 deletions(-) diff --git a/packages/elements/src/internals/machines/shared/shared.actions.ts b/packages/elements/src/internals/machines/shared/shared.actions.ts index b8e30dd9208..99eb018e9e9 100644 --- a/packages/elements/src/internals/machines/shared/shared.actions.ts +++ b/packages/elements/src/internals/machines/shared/shared.actions.ts @@ -42,6 +42,7 @@ export function sendToLoading({ context, event }: SendToLoadingProps): void { // Unrelated to the `context` of each machine, the step passed to the loading event must use BaseRouterLoadingStep let step: BaseRouterLoadingStep | undefined; let strategy: SignInStrategy | undefined; + let action: string | undefined; // By default the loading state is set to `true` when this function is called // Only if these events are received, the loading state is set to `false` @@ -90,6 +91,18 @@ export function sendToLoading({ context, event }: SendToLoadingProps): void { step, strategy, }); + } else if (context.loadingStep === 'start') { + step = 'start'; + strategy = undefined; + action = event.type === 'AUTHENTICATE.PASSKEY' ? 'passkey' : event.type === 'SUBMIT' ? 'submit' : undefined; + + return context.parent.send({ + type: 'LOADING', + isLoading: true, + step, + strategy, + action, + }); } else { step = context.loadingStep; strategy = undefined; diff --git a/packages/elements/src/internals/machines/sign-in/router.machine.ts b/packages/elements/src/internals/machines/sign-in/router.machine.ts index 029c429e410..be3b86214e2 100644 --- a/packages/elements/src/internals/machines/sign-in/router.machine.ts +++ b/packages/elements/src/internals/machines/sign-in/router.machine.ts @@ -227,6 +227,7 @@ export const SignInRouterMachine = setup({ isLoading: event.isLoading, step: event.step, strategy: event.strategy, + action: event.action, }, })), }, diff --git a/packages/elements/src/internals/machines/sign-in/start.types.ts b/packages/elements/src/internals/machines/sign-in/start.types.ts index 4ad02ee0163..3e76450b0fb 100644 --- a/packages/elements/src/internals/machines/sign-in/start.types.ts +++ b/packages/elements/src/internals/machines/sign-in/start.types.ts @@ -12,8 +12,8 @@ export type SignInStartTags = 'state:pending' | 'state:attempting' | 'state:load // ---------------------------------- Events ---------------------------------- // -export type SignInStartSubmitEvent = { type: 'SUBMIT' }; -export type SignInStartPasskeyEvent = { type: 'AUTHENTICATE.PASSKEY' }; +export type SignInStartSubmitEvent = { type: 'SUBMIT'; action: 'submit' }; +export type SignInStartPasskeyEvent = { type: 'AUTHENTICATE.PASSKEY'; action: 'passkey' }; export type SignInStartPasskeyAutofillEvent = { type: 'AUTHENTICATE.PASSKEY.AUTOFILL' }; export type SignInStartWeb3Event = { type: 'AUTHENTICATE.WEB3'; strategy: Web3Strategy }; diff --git a/packages/elements/src/internals/machines/types/router.types.ts b/packages/elements/src/internals/machines/types/router.types.ts index 6db5af79fe7..a77bac78286 100644 --- a/packages/elements/src/internals/machines/types/router.types.ts +++ b/packages/elements/src/internals/machines/types/router.types.ts @@ -35,10 +35,12 @@ export type BaseRouterLoadingEvent = ( | { step: TSteps | undefined; strategy?: never; + action?: string; } | { step?: never; strategy: SignInStrategy | undefined; + action?: never; } ) & { type: 'LOADING'; isLoading: boolean }; diff --git a/packages/elements/src/react/common/form/index.tsx b/packages/elements/src/react/common/form/index.tsx index a8b5aa12df4..c48c427c2b6 100644 --- a/packages/elements/src/react/common/form/index.tsx +++ b/packages/elements/src/react/common/form/index.tsx @@ -162,7 +162,7 @@ const useFieldState = ({ name }: Partial>) => { /** * Provides the form submission handler along with the form's validity via a data attribute */ -const useForm = ({ flowActor }: { flowActor?: BaseActorRef<{ type: 'SUBMIT' }> }) => { +const useForm = ({ flowActor }: { flowActor?: BaseActorRef<{ type: 'SUBMIT'; action: 'submit' }> }) => { const { errors } = useGlobalErrors(); // Register the onSubmit handler for form submission @@ -171,7 +171,7 @@ const useForm = ({ flowActor }: { flowActor?: BaseActorRef<{ type: 'SUBMIT' }> } (event: React.FormEvent) => { event.preventDefault(); if (flowActor) { - flowActor.send({ type: 'SUBMIT' }); + flowActor.send({ type: 'SUBMIT', action: 'submit' }); } }, [flowActor], @@ -412,7 +412,7 @@ const FORM_NAME = 'ClerkElementsForm'; type FormElement = React.ElementRef; type FormProps = Omit & { children: React.ReactNode; - flowActor?: BaseActorRef<{ type: 'SUBMIT' }>; + flowActor?: BaseActorRef<{ type: 'SUBMIT'; action: 'submit' }>; }; const Form = React.forwardRef(({ flowActor, onSubmit, ...rest }, forwardedRef) => { diff --git a/packages/elements/src/react/common/loading.tsx b/packages/elements/src/react/common/loading.tsx index a0a4d55626a..31d8b2bfd77 100644 --- a/packages/elements/src/react/common/loading.tsx +++ b/packages/elements/src/react/common/loading.tsx @@ -16,7 +16,13 @@ import { SIGN_UP_STEPS } from '~/react/sign-up/step'; import { isProviderStrategyScope, mapScopeToStrategy } from '~/react/utils/map-scope-to-strategy'; type Strategy = OAuthProvider | SamlStrategy | 'metamask'; -type LoadingScope = 'global' | `step:${T}` | `provider:${Strategy}` | undefined; +type LoadingScope = + | 'global' + | `step:${T}` + | `provider:${Strategy}` + | 'submit' + | 'passkey' + | undefined; type LoadingProps = { scope?: LoadingScope; @@ -134,7 +140,7 @@ type SignInLoadingProps = { }; function SignInLoading({ children, scope, routerRef }: SignInLoadingProps) { - const [isLoading, { step: loadingStep, strategy }] = useLoading(routerRef); + const [isLoading, { step: loadingStep, strategy, action }] = useLoading(routerRef); const tags = useSelector(routerRef, s => s.tags); const isStepLoading = (step: TSignInStep) => isLoading && loadingStep === step; @@ -150,7 +156,7 @@ function SignInLoading({ children, scope, routerRef }: SignInLoadingProps) { loadingResult = isLoading && loadingStep === undefined && strategy === mapScopeToStrategy(scope); } else if (scope) { // Specified Loading Scope - loadingResult = isStepLoading(scope.replace('step:', '') as TSignInStep); + loadingResult = isStepLoading(scope.replace('step:', '') as TSignInStep) || scope === action; } else { // Inferred Loading Scope loadingResult = diff --git a/packages/elements/src/react/hooks/use-loading.hook.ts b/packages/elements/src/react/hooks/use-loading.hook.ts index e1c50c344b7..75292da44b1 100644 --- a/packages/elements/src/react/hooks/use-loading.hook.ts +++ b/packages/elements/src/react/hooks/use-loading.hook.ts @@ -10,7 +10,7 @@ export type ActorSignUp = ActorRefFrom; type LoadingContext = T extends ActorSignIn ? SignInRouterLoadingContext : SignUpRouterLoadingContext; type UseLoadingReturn = [ isLoading: boolean, - { step: LoadingContext['step']; strategy: LoadingContext['strategy'] }, + { step: LoadingContext['step']; strategy: LoadingContext['strategy']; action: LoadingContext['action'] }, ]; const selectLoading = | SnapshotFrom>( @@ -33,8 +33,8 @@ export function useLoading(actor: TAct const loadingCtx = useSelector(actor, selectLoading, compareLoadingValue) as LoadingContext; if (!loadingCtx) { - return [false, { step: undefined, strategy: undefined }]; + return [false, { step: undefined, strategy: undefined, action: undefined }]; } - return [loadingCtx.isLoading, { step: loadingCtx.step, strategy: loadingCtx.strategy }]; + return [loadingCtx.isLoading, { step: loadingCtx.step, strategy: loadingCtx.strategy, action: loadingCtx.action }]; } diff --git a/packages/ui/src/components/sign-in/steps/start.tsx b/packages/ui/src/components/sign-in/steps/start.tsx index 647afc04e3b..62937e5f66b 100644 --- a/packages/ui/src/components/sign-in/steps/start.tsx +++ b/packages/ui/src/components/sign-in/steps/start.tsx @@ -136,7 +136,7 @@ export function SignInStart() { ) : null} - + {isSubmitting => { return ( + {isSubmitting => { return ( From d70e3e021b68d0aca1a2b55658bfef55095e0f30 Mon Sep 17 00:00:00 2001 From: Dylan Staley <88163+dstaley@users.noreply.github.com> Date: Mon, 12 Aug 2024 12:17:39 -0700 Subject: [PATCH 2/5] fix(elements): Use value of event.action --- .../elements/src/internals/machines/shared/shared.actions.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/elements/src/internals/machines/shared/shared.actions.ts b/packages/elements/src/internals/machines/shared/shared.actions.ts index 99eb018e9e9..cc9a9545370 100644 --- a/packages/elements/src/internals/machines/shared/shared.actions.ts +++ b/packages/elements/src/internals/machines/shared/shared.actions.ts @@ -94,7 +94,7 @@ export function sendToLoading({ context, event }: SendToLoadingProps): void { } else if (context.loadingStep === 'start') { step = 'start'; strategy = undefined; - action = event.type === 'AUTHENTICATE.PASSKEY' ? 'passkey' : event.type === 'SUBMIT' ? 'submit' : undefined; + action = 'action' in event ? event.action : undefined; return context.parent.send({ type: 'LOADING', From 344d754ddabddbcdddc1bcbad542d6acb98aa58a Mon Sep 17 00:00:00 2001 From: Dylan Staley <88163+dstaley@users.noreply.github.com> Date: Mon, 12 Aug 2024 12:22:56 -0700 Subject: [PATCH 3/5] chore(elements): Add changeset --- .changeset/small-bees-jog.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/small-bees-jog.md diff --git a/.changeset/small-bees-jog.md b/.changeset/small-bees-jog.md new file mode 100644 index 00000000000..8f73ec341df --- /dev/null +++ b/.changeset/small-bees-jog.md @@ -0,0 +1,5 @@ +--- +"@clerk/elements": patch +--- + +Add support for submit and passkey loading scopes From 792f4e5b9d6878db95b91e52c4628f879403a0f5 Mon Sep 17 00:00:00 2001 From: Dylan Staley <88163+dstaley@users.noreply.github.com> Date: Wed, 14 Aug 2024 13:11:22 -0700 Subject: [PATCH 4/5] feat(elements): Add action support to all steps --- .../src/internals/machines/shared/shared.actions.ts | 6 ++++++ .../src/internals/machines/sign-in/reset-password.types.ts | 2 +- .../src/internals/machines/sign-in/verification.types.ts | 2 +- .../src/internals/machines/sign-up/continue.types.ts | 2 +- .../src/internals/machines/sign-up/router.machine.ts | 1 + .../elements/src/internals/machines/sign-up/start.types.ts | 2 +- .../src/internals/machines/sign-up/verification.types.ts | 2 +- packages/elements/src/react/common/loading.tsx | 4 ++-- 8 files changed, 14 insertions(+), 7 deletions(-) diff --git a/packages/elements/src/internals/machines/shared/shared.actions.ts b/packages/elements/src/internals/machines/shared/shared.actions.ts index cc9a9545370..18ce93aa281 100644 --- a/packages/elements/src/internals/machines/shared/shared.actions.ts +++ b/packages/elements/src/internals/machines/shared/shared.actions.ts @@ -74,22 +74,26 @@ export function sendToLoading({ context, event }: SendToLoadingProps): void { } else if (context.loadingStep === 'continue') { step = 'continue'; strategy = undefined; + action = 'action' in event ? event.action : undefined; return context.parent.send({ type: 'LOADING', isLoading: true, step, strategy, + action, }); } else if (context.loadingStep === 'reset-password') { step = 'reset-password'; strategy = undefined; + action = 'action' in event ? event.action : undefined; return context.parent.send({ type: 'LOADING', isLoading: true, step, strategy, + action, }); } else if (context.loadingStep === 'start') { step = 'start'; @@ -106,12 +110,14 @@ export function sendToLoading({ context, event }: SendToLoadingProps): void { } else { step = context.loadingStep; strategy = undefined; + action = 'action' in event ? event.action : undefined; return context.parent.send({ type: 'LOADING', isLoading: true, step, strategy, + action, }); } } diff --git a/packages/elements/src/internals/machines/sign-in/reset-password.types.ts b/packages/elements/src/internals/machines/sign-in/reset-password.types.ts index c9306cf4dbc..a6b9b2d16ea 100644 --- a/packages/elements/src/internals/machines/sign-in/reset-password.types.ts +++ b/packages/elements/src/internals/machines/sign-in/reset-password.types.ts @@ -11,7 +11,7 @@ export type SignInResetPasswordTags = 'state:pending' | 'state:attempting' | 'st // ---------------------------------- Events ---------------------------------- // -export type SignInResetPasswordSubmitEvent = { type: 'SUBMIT' }; +export type SignInResetPasswordSubmitEvent = { type: 'SUBMIT'; action: 'submit' }; export type SignInResetPasswordEvents = ErrorActorEvent | SignInResetPasswordSubmitEvent; diff --git a/packages/elements/src/internals/machines/sign-in/verification.types.ts b/packages/elements/src/internals/machines/sign-in/verification.types.ts index 191c6f2e979..dc91de076b7 100644 --- a/packages/elements/src/internals/machines/sign-in/verification.types.ts +++ b/packages/elements/src/internals/machines/sign-in/verification.types.ts @@ -19,7 +19,7 @@ export type SignInVerificationTags = // ---------------------------------- Events ---------------------------------- // -export type SignInVerificationSubmitEvent = { type: 'SUBMIT' }; +export type SignInVerificationSubmitEvent = { type: 'SUBMIT'; action: 'submit' }; export type SignInVerificationFactorUpdateEvent = { type: 'STRATEGY.UPDATE'; factor: SignInFactor | undefined }; export type SignInVerificationRetryEvent = { type: 'RETRY' }; export type SignInVerificationStrategyRegisterEvent = { type: 'STRATEGY.REGISTER'; factor: SignInStrategyName }; diff --git a/packages/elements/src/internals/machines/sign-up/continue.types.ts b/packages/elements/src/internals/machines/sign-up/continue.types.ts index cf9c4f5c07e..52b1276e692 100644 --- a/packages/elements/src/internals/machines/sign-up/continue.types.ts +++ b/packages/elements/src/internals/machines/sign-up/continue.types.ts @@ -11,7 +11,7 @@ export type SignUpContinueTags = 'state:pending' | 'state:attempting' | 'state:l // ---------------------------------- Events ---------------------------------- // -export type SignUpContinueSubmitEvent = { type: 'SUBMIT' }; +export type SignUpContinueSubmitEvent = { type: 'SUBMIT'; action: 'submit' }; export type SignUpContinueEvents = ErrorActorEvent | SignUpContinueSubmitEvent; diff --git a/packages/elements/src/internals/machines/sign-up/router.machine.ts b/packages/elements/src/internals/machines/sign-up/router.machine.ts index 671596ce5b6..5019bd03dc7 100644 --- a/packages/elements/src/internals/machines/sign-up/router.machine.ts +++ b/packages/elements/src/internals/machines/sign-up/router.machine.ts @@ -232,6 +232,7 @@ export const SignUpRouterMachine = setup({ isLoading: event.isLoading, step: event.step, strategy: event.strategy, + action: event.action, }, })), }, diff --git a/packages/elements/src/internals/machines/sign-up/start.types.ts b/packages/elements/src/internals/machines/sign-up/start.types.ts index c6cc0ee196f..0cf78efdc66 100644 --- a/packages/elements/src/internals/machines/sign-up/start.types.ts +++ b/packages/elements/src/internals/machines/sign-up/start.types.ts @@ -12,7 +12,7 @@ export type SignUpStartTags = 'state:pending' | 'state:attempting' | 'state:load // ---------------------------------- Events ---------------------------------- // -export type SignUpStartSubmitEvent = { type: 'SUBMIT' }; +export type SignUpStartSubmitEvent = { type: 'SUBMIT'; action: 'submit' }; // TODO: Consolidate with SignInStartMachine export type SignUpStartRedirectOauthEvent = { type: 'AUTHENTICATE.OAUTH'; strategy: OAuthStrategy }; diff --git a/packages/elements/src/internals/machines/sign-up/verification.types.ts b/packages/elements/src/internals/machines/sign-up/verification.types.ts index 7e4f6f1a371..edf46bf35f9 100644 --- a/packages/elements/src/internals/machines/sign-up/verification.types.ts +++ b/packages/elements/src/internals/machines/sign-up/verification.types.ts @@ -27,7 +27,7 @@ export type SignUpVerificationFriendlyTags = 'code' | 'email_link' | 'email_code // ---------------------------------- Events ---------------------------------- // -export type SignUpVerificationSubmitEvent = { type: 'SUBMIT' }; +export type SignUpVerificationSubmitEvent = { type: 'SUBMIT'; action: 'submit' }; export type SignUpVerificationNextEvent = { type: 'NEXT'; resource?: SignUpResource }; export type SignUpVerificationRetryEvent = { type: 'RETRY' }; diff --git a/packages/elements/src/react/common/loading.tsx b/packages/elements/src/react/common/loading.tsx index 31d8b2bfd77..b55f40d5247 100644 --- a/packages/elements/src/react/common/loading.tsx +++ b/packages/elements/src/react/common/loading.tsx @@ -177,7 +177,7 @@ type SignUpLoadingProps = { }; function SignUpLoading({ children, scope, routerRef }: SignUpLoadingProps) { - const [isLoading, { step: loadingStep, strategy }] = useLoading(routerRef); + const [isLoading, { step: loadingStep, strategy, action }] = useLoading(routerRef); const tags = useSelector(routerRef, s => s.tags); const isStepLoading = (step: TSignUpStep) => isLoading && loadingStep === step; @@ -192,7 +192,7 @@ function SignUpLoading({ children, scope, routerRef }: SignUpLoadingProps) { // Provider-Specific Loading Scope loadingResult = isLoading && loadingStep === undefined && strategy === mapScopeToStrategy(scope); } else if (scope) { - loadingResult = isStepLoading(scope.replace('step:', '') as TSignUpStep); + loadingResult = isStepLoading(scope.replace('step:', '') as TSignUpStep) || scope === action; } else { // Inferred Loading Scope loadingResult = From 8223cd6c15943512f093777226c5f50eb2685011 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Thu, 15 Aug 2024 16:01:20 -0400 Subject: [PATCH 5/5] chore(ui): Implement loading scopes across sign in/up components (#3964) --- .../sign-in/steps/reset-password.tsx | 30 +-- .../ui/src/components/sign-in/steps/start.tsx | 2 +- .../sign-in/steps/verifications.tsx | 213 ++++++++---------- .../src/components/sign-up/steps/continue.tsx | 16 +- .../ui/src/components/sign-up/steps/start.tsx | 16 +- .../sign-up/steps/verifications.tsx | 32 +-- 6 files changed, 145 insertions(+), 164 deletions(-) diff --git a/packages/ui/src/components/sign-in/steps/reset-password.tsx b/packages/ui/src/components/sign-in/steps/reset-password.tsx index f30b652978a..5767e3221e9 100644 --- a/packages/ui/src/components/sign-in/steps/reset-password.tsx +++ b/packages/ui/src/components/sign-in/steps/reset-password.tsx @@ -66,32 +66,32 @@ export function SignInResetPassword() { - - {isSubmitting => { - return ( - + + + {isSubmitting => { + return ( + ); + }} + - - {t('backButton')} - - - ); - }} - + + {t('backButton')} + + diff --git a/packages/ui/src/components/sign-in/steps/start.tsx b/packages/ui/src/components/sign-in/steps/start.tsx index 8ea52cf27cc..9808f609085 100644 --- a/packages/ui/src/components/sign-in/steps/start.tsx +++ b/packages/ui/src/components/sign-in/steps/start.tsx @@ -168,7 +168,7 @@ export function SignInStart() { {t('signIn.start.actionLink__use_passkey')} diff --git a/packages/ui/src/components/sign-in/steps/verifications.tsx b/packages/ui/src/components/sign-in/steps/verifications.tsx index 5a8b0914400..97d05c0d645 100644 --- a/packages/ui/src/components/sign-in/steps/verifications.tsx +++ b/packages/ui/src/components/sign-in/steps/verifications.tsx @@ -92,10 +92,10 @@ export function SignInVerifications() { /> - - {isSubmitting => { - return ( - + + + {isSubmitting => { + return ( + ); + }} + - - - {t('signIn.password.actionLink')} - - - - ); - }} - + + {t('signIn.password.actionLink')} + + @@ -155,22 +153,10 @@ export function SignInVerifications() { - - {isSubmitting => { - return ( - - { - // Note: - // 1. Currently this triggers the loading - // spinner for "Continue" which is a little - // confusing. We could use a manual setState - // on click, but we'll need to find a way to - // clean up the state based on `isSubmitting` - // 2. This button doesn't currently work; it's - // being tracked here: - // https://linear.app/clerk/issue/SDKI-172 - } - + + + {isSubmitting => { + return ( - - - - {t('footerActionLink__useAnotherMethod')} - - - - ); - }} - + ); + }} + + + {t('footerActionLink__useAnotherMethod')} + + @@ -217,10 +200,10 @@ export function SignInVerifications() { - - {isSubmitting => { - return ( - + + + {isSubmitting => { + return ( - - - - {t('footerActionLink__useAnotherMethod')} - - - - ); - }} - + ); + }} + + + + {t('footerActionLink__useAnotherMethod')} + + + @@ -307,10 +289,10 @@ export function SignInVerifications() { } /> - - {isSubmitting => { - return ( - + + + {isSubmitting => { + return ( + ); + }} + - - {t('footerActionLink__useAnotherMethod')} - - - ); - }} - + + {t('footerActionLink__useAnotherMethod')} + + @@ -393,10 +375,10 @@ export function SignInVerifications() { /> - - {isSubmitting => { - return ( - + + + {isSubmitting => { + return ( + ); + }} + - - {t('footerActionLink__useAnotherMethod')} - - - ); - }} - + + {t('footerActionLink__useAnotherMethod')} + + @@ -517,10 +499,10 @@ export function SignInVerifications() { /> - - {isSubmitting => { - return ( - + + + {isSubmitting => { + return ( - - ); - }} - + ); + }} + + @@ -561,10 +543,10 @@ export function SignInVerifications() { /> - - {isSubmitting => { - return ( - + + + {isSubmitting => { + return ( - - - {t('footerActionLink__useAnotherMethod')} - - - ); - }} - + ); + }} + + + {t('footerActionLink__useAnotherMethod')} + + diff --git a/packages/ui/src/components/sign-up/steps/continue.tsx b/packages/ui/src/components/sign-up/steps/continue.tsx index 69cbb2e3f4e..37c02d3848a 100644 --- a/packages/ui/src/components/sign-up/steps/continue.tsx +++ b/packages/ui/src/components/sign-up/steps/continue.tsx @@ -97,10 +97,10 @@ export function SignUpContinue() { ) : null} - - {isSubmitting => { - return ( - + + + {isSubmitting => { + return ( - - ); - }} - + ); + }} + + diff --git a/packages/ui/src/components/sign-up/steps/start.tsx b/packages/ui/src/components/sign-up/steps/start.tsx index 466b01f4334..2a37c627bb3 100644 --- a/packages/ui/src/components/sign-up/steps/start.tsx +++ b/packages/ui/src/components/sign-up/steps/start.tsx @@ -133,10 +133,10 @@ export function SignUpStart() { {userSettings.signUp.captcha_enabled ? : null} {hasConnection || hasIdentifier ? ( - - {isSubmitting => { - return ( - + + + {isSubmitting => { + return ( - - ); - }} - + ); + }} + + ) : null} diff --git a/packages/ui/src/components/sign-up/steps/verifications.tsx b/packages/ui/src/components/sign-up/steps/verifications.tsx index 771ac5b0591..4233155075e 100644 --- a/packages/ui/src/components/sign-up/steps/verifications.tsx +++ b/packages/ui/src/components/sign-up/steps/verifications.tsx @@ -120,10 +120,10 @@ export function SignUpVerifications() { } /> - - {isSubmitting => { - return ( - + + + {isSubmitting => { + return ( - - ); - }} - + ); + }} + + @@ -198,10 +198,10 @@ export function SignUpVerifications() { } /> - - {isSubmitting => { - return ( - + + + {isSubmitting => { + return ( - - ); - }} - + ); + }} + +