Skip to content

Commit 434b432

Browse files
octopertmilewski
octoper
and
tmilewski
authored
feat(elements,ui,clerk-js): Legal consent elements support and improvements (clerk#4427)
Co-authored-by: Tom Milewski <me@tm.codes>
1 parent 69c8f4f commit 434b432

File tree

17 files changed

+250
-35
lines changed

17 files changed

+250
-35
lines changed

‎.changeset/odd-peas-hear.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@clerk/elements": minor
3+
---
4+
5+
Added support for `__experimental_legalAccepted` field

‎.changeset/witty-meals-retire.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
"@clerk/clerk-js": patch
3+
"@clerk/types": patch
4+
---
5+
6+
- Changed `__experimental_legalAccepted` checkbox Indicator element descriptor and element id
7+
- Changed `__experimental_legalAccepted` checkbox Label element descriptor and element id
8+
- Added two new element descriptors `formFieldCheckboxInput`, `formFieldCheckboxLabel`.

‎packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -281,7 +281,7 @@ function _SignUpStart(): JSX.Element {
281281
enableOAuthProviders={showOauthProviders}
282282
enableWeb3Providers={showWeb3Providers}
283283
continueSignUp={missingRequirementsWithTicket}
284-
legalAccepted={Boolean(formState.__experimental_legalAccepted.checked)}
284+
legalAccepted={Boolean(formState.__experimental_legalAccepted.checked) || undefined}
285285
/>
286286
)}
287287
{shouldShowForm && (

‎packages/clerk-js/src/ui/customizables/elementDescriptors.ts

+2
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,8 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
9191
'formFieldRadioLabel',
9292
'formFieldRadioLabelTitle',
9393
'formFieldRadioLabelDescription',
94+
'formFieldCheckboxInput',
95+
'formFieldCheckboxLabel',
9496
'formFieldAction',
9597
'formFieldInput',
9698
'formFieldErrorText',

‎packages/clerk-js/src/ui/elements/FieldControl.tsx

+26-18
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
Text,
1616
useLocalizations,
1717
} from '../customizables';
18+
import type { ElementDescriptor, ElementId } from '../customizables/elementDescriptors';
1819
import { FormFieldContextProvider, sanitizeInputProps, useFormField } from '../primitives/hooks';
1920
import type { PropsOfComponent } from '../styledSystem';
2021
import type { useFormControl as useFormControlUtil } from '../utils';
@@ -208,25 +209,32 @@ const PasswordInputElement = forwardRef<HTMLInputElement>((_, ref) => {
208209
);
209210
});
210211

211-
const CheckboxIndicator = forwardRef<HTMLInputElement>((_, ref) => {
212-
const formField = useFormField();
213-
const { placeholder, ...inputProps } = sanitizeInputProps(formField);
212+
type CheckboxIndicatorProps = {
213+
elementDescriptor?: ElementDescriptor;
214+
elementId?: ElementId;
215+
};
214216

215-
return (
216-
<CheckboxInput
217-
ref={ref}
218-
{...inputProps}
219-
elementDescriptor={descriptors.formFieldInput}
220-
elementId={descriptors.formFieldInput.setId(formField.fieldId)}
221-
focusRing={false}
222-
sx={t => ({
223-
width: 'fit-content',
224-
flexShrink: 0,
225-
marginTop: t.space.$0x5,
226-
})}
227-
/>
228-
);
229-
});
217+
const CheckboxIndicator = forwardRef<HTMLInputElement, CheckboxIndicatorProps>(
218+
({ elementDescriptor, elementId }, ref) => {
219+
const formField = useFormField();
220+
const { placeholder, ...inputProps } = sanitizeInputProps(formField);
221+
222+
return (
223+
<CheckboxInput
224+
ref={ref}
225+
{...inputProps}
226+
elementDescriptor={elementDescriptor || descriptors.formFieldInput}
227+
elementId={elementId || descriptors.formFieldInput.setId(formField.fieldId)}
228+
focusRing={false}
229+
sx={t => ({
230+
width: 'fit-content',
231+
flexShrink: 0,
232+
marginTop: t.space.$0x5,
233+
})}
234+
/>
235+
);
236+
},
237+
);
230238

231239
const CheckboxLabel = (props: { description?: string | LocalizationKey }) => {
232240
const { label, id } = useFormField();

‎packages/clerk-js/src/ui/elements/LegalConsentCheckbox.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -69,9 +69,12 @@ export const LegalCheckbox = (
6969
return (
7070
<Field.Root {...props}>
7171
<Flex justify='center'>
72-
<Field.CheckboxIndicator />
72+
<Field.CheckboxIndicator
73+
elementDescriptor={descriptors.formFieldCheckboxInput}
74+
elementId={descriptors.formFieldInput.setId('__experimental_legalAccepted')}
75+
/>
7376
<FormLabel
74-
elementDescriptor={descriptors.formFieldRadioLabel}
77+
elementDescriptor={descriptors.formFieldCheckboxLabel}
7578
htmlFor={props.itemID}
7679
sx={t => ({
7780
paddingLeft: t.space.$1x5,

‎packages/elements/src/internals/machines/form/form.machine.ts

+7-2
Original file line numberDiff line numberDiff line change
@@ -74,9 +74,14 @@ export const FormMachine = setup({
7474
throw new Error('Field name is required');
7575
}
7676

77-
if (context.fields.has(params.name)) {
77+
const fieldsNameMap: Record<string, string> = {
78+
legalAccepted: '__experimental_legalAccepted',
79+
};
80+
const fieldName = fieldsNameMap[params.name] || params.name;
81+
82+
if (context.fields.has(fieldName)) {
7883
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
79-
context.fields.get(params.name)!.feedback = params.feedback;
84+
context.fields.get(fieldName)!.feedback = params.feedback;
8085
}
8186

8287
return context.fields;

‎packages/elements/src/internals/machines/sign-up/continue.machine.ts

+17-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { snakeToCamel } from '@clerk/shared/underscore';
22
import type { SignUpResource } from '@clerk/types';
33
import type { DoneActorEvent } from 'xstate';
4-
import { fromPromise, setup } from 'xstate';
4+
import { fromPromise, not, or, setup } from 'xstate';
55

66
import { SIGN_UP_DEFAULT_BASE_PATH } from '~/internals/constants';
77
import type { FormDefaultValues, FormFields } from '~/internals/machines/form';
@@ -62,6 +62,21 @@ export const SignUpContinueMachine = setup({
6262
context.parent.send({ type: 'NEXT', resource: (event as unknown as DoneActorEvent<SignUpResource>).output }),
6363
sendToLoading,
6464
},
65+
guards: {
66+
isStatusMissingRequirements: ({ context }) =>
67+
context.parent.getSnapshot().context.clerk?.client?.signUp?.status === 'missing_requirements',
68+
hasMetPreviousMissingRequirements: ({ context }) => {
69+
const signUp = context.parent.getSnapshot().context.clerk.client.signUp;
70+
71+
const fields = context.formRef.getSnapshot().context.fields;
72+
const signUpMissingFields = signUp.missingFields.map(snakeToCamel);
73+
const missingFields = Array.from(context.formRef.getSnapshot().context.fields.keys()).filter(key => {
74+
return !signUpMissingFields.includes(key) && !fields.get(key)?.value && !fields.get(key)?.checked;
75+
});
76+
77+
return missingFields.length === 0;
78+
},
79+
},
6580
types: {} as SignUpContinueSchema,
6681
}).createMachine({
6782
id: SignUpContinueMachineId,
@@ -82,6 +97,7 @@ export const SignUpContinueMachine = setup({
8297
description: 'Waiting for user input',
8398
on: {
8499
SUBMIT: {
100+
guard: or(['hasMetPreviousMissingRequirements', not('isStatusMissingRequirements')]),
85101
target: 'Attempting',
86102
reenter: true,
87103
},

‎packages/elements/src/internals/machines/sign-up/utils/fields-to-params.ts

+17-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,15 @@ import type { SignUpCreateParams, SignUpUpdateParams } from '@clerk/types';
22

33
import type { FormFields } from '~/internals/machines/form';
44

5-
const SignUpAdditionalKeys = ['firstName', 'lastName', 'emailAddress', 'username', 'password', 'phoneNumber'] as const;
5+
const SignUpAdditionalKeys = [
6+
'firstName',
7+
'lastName',
8+
'emailAddress',
9+
'username',
10+
'password',
11+
'phoneNumber',
12+
'__experimental_legalAccepted',
13+
] as const;
614

715
type SignUpAdditionalKeys = (typeof SignUpAdditionalKeys)[number];
816

@@ -17,10 +25,16 @@ export function fieldsToSignUpParams<T extends SignUpCreateParams | SignUpUpdate
1725
): Pick<T, SignUpAdditionalKeys> {
1826
const params: SignUpUpdateParams = {};
1927

20-
fields.forEach(({ value }, key) => {
21-
if (isSignUpParam(key) && value !== undefined) {
28+
fields.forEach(({ value, checked, type }, key) => {
29+
if (isSignUpParam(key) && value !== undefined && type !== 'checkbox') {
30+
// @ts-expect-error - Type is not narrowed to string
2231
params[key] = value as string;
2332
}
33+
34+
if (isSignUpParam(key) && checked !== undefined && type === 'checkbox') {
35+
// @ts-expect-error - Type is not narrowed to boolean
36+
params[key] = checked as boolean;
37+
}
2438
});
2539

2640
return params;

‎packages/elements/src/internals/machines/third-party/third-party.machine.ts

+8-1
Original file line numberDiff line numberDiff line change
@@ -77,10 +77,17 @@ export const ThirdPartyMachine = setup({
7777
input: ({ context, event }) => {
7878
assertEvent(event, 'REDIRECT');
7979

80+
const legalAcceptedField = context.formRef
81+
.getSnapshot()
82+
.context.fields.get('__experimental_legalAccepted')?.checked;
83+
8084
return {
8185
basePath: context.basePath,
8286
flow: context.flow,
83-
params: event.params,
87+
params: {
88+
...event.params,
89+
__experimental_legalAccepted: legalAcceptedField || undefined,
90+
},
8491
parent: context.parent,
8592
};
8693
},

‎packages/types/src/appearance.ts

+2
Original file line numberDiff line numberDiff line change
@@ -210,6 +210,8 @@ export type ElementsConfig = {
210210
formFieldRadioLabel: WithOptions<FieldId, ControlState>;
211211
formFieldRadioLabelTitle: WithOptions<FieldId, ControlState>;
212212
formFieldRadioLabelDescription: WithOptions<FieldId, ControlState>;
213+
formFieldCheckboxInput: WithOptions<FieldId, ControlState>;
214+
formFieldCheckboxLabel: WithOptions<FieldId, ControlState>;
213215
formFieldAction: WithOptions<FieldId, ControlState>;
214216
formFieldInput: WithOptions<FieldId, ControlState>;
215217
formFieldErrorText: WithOptions<FieldId, ControlState>;

‎packages/ui/src/common/legal-accepted.tsx

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import * as Common from '@clerk/elements/common';
2+
import React from 'react';
3+
4+
import { useAppearance } from '~/contexts';
5+
import { useEnvironment } from '~/hooks/use-environment';
6+
import { useLocalizations } from '~/hooks/use-localizations';
7+
import * as Field from '~/primitives/field';
8+
9+
import { LinkRenderer } from './link-renderer';
10+
11+
export function LegalAcceptedField({
12+
className,
13+
checked = false,
14+
...restProps
15+
}: Omit<React.ComponentProps<typeof Common.Input>, 'type'>) {
16+
const { t } = useLocalizations();
17+
const { displayConfig } = useEnvironment();
18+
const { parsedAppearance } = useAppearance();
19+
const termsUrl = parsedAppearance.options.termsPageUrl || displayConfig.termsUrl;
20+
const privacyPolicyUrl = parsedAppearance.options.privacyPageUrl || displayConfig.privacyPolicyUrl;
21+
22+
let localizedText: string | undefined;
23+
24+
if (termsUrl && privacyPolicyUrl) {
25+
localizedText = t('signUp.__experimental_legalConsent.checkbox.label__termsOfServiceAndPrivacyPolicy', {
26+
termsOfServiceLink: termsUrl,
27+
privacyPolicyLink: privacyPolicyUrl,
28+
});
29+
} else if (termsUrl) {
30+
localizedText = t('signUp.__experimental_legalConsent.checkbox.label__onlyTermsOfService', {
31+
termsOfServiceLink: termsUrl,
32+
});
33+
} else if (privacyPolicyUrl) {
34+
localizedText = t('signUp.__experimental_legalConsent.checkbox.label__onlyPrivacyPolicy', {
35+
privacyPolicyLink: privacyPolicyUrl,
36+
});
37+
}
38+
39+
return (
40+
<Common.Field
41+
name='__experimental_legalAccepted'
42+
asChild
43+
>
44+
<Field.Root>
45+
<div className='flex justify-center gap-2'>
46+
<Common.Input
47+
type='checkbox'
48+
asChild
49+
checked={checked}
50+
{...restProps}
51+
>
52+
<Field.Checkbox />
53+
</Common.Input>
54+
55+
<Common.Label asChild>
56+
<Field.Label>
57+
<span>
58+
<LinkRenderer
59+
text={localizedText || ''}
60+
className='underline underline-offset-2'
61+
/>
62+
</span>
63+
</Field.Label>
64+
</Common.Label>
65+
</div>
66+
67+
<Common.FieldError asChild>
68+
{({ message }) => {
69+
return <Field.Message intent='error'>{message}</Field.Message>;
70+
}}
71+
</Common.FieldError>
72+
</Field.Root>
73+
</Common.Field>
74+
);
75+
}

‎packages/ui/src/common/link-renderer.tsx

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React, { memo, useMemo } from 'react';
2+
3+
interface LinkRendererProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'children' | 'class'> {
4+
text: string;
5+
className?: string;
6+
}
7+
8+
const LINK_REGEX = /\[([^\]]+)\]\(([^)]+)\)/g; // parses [text](url)
9+
10+
export const LinkRenderer: React.FC<LinkRendererProps> = memo(({ text, ...linkProps }) => {
11+
const memoizedLinkProps = useMemo(() => linkProps, [linkProps]);
12+
13+
const renderedContent = useMemo(() => {
14+
const parts: (string | JSX.Element)[] = [];
15+
let lastIndex = 0;
16+
17+
text.replace(LINK_REGEX, (match, linkText, url, offset) => {
18+
if (offset > lastIndex) {
19+
parts.push(text.slice(lastIndex, offset));
20+
}
21+
parts.push(
22+
<a
23+
{...memoizedLinkProps}
24+
href={url}
25+
target='_blank'
26+
rel='noopener noreferrer'
27+
key={offset}
28+
>
29+
{linkText}
30+
</a>,
31+
);
32+
lastIndex = offset + match.length;
33+
return match;
34+
});
35+
36+
if (lastIndex < text.length) {
37+
parts.push(text.slice(lastIndex));
38+
}
39+
40+
return parts;
41+
}, [text, memoizedLinkProps]);
42+
43+
return renderedContent;
44+
});

0 commit comments

Comments
 (0)