Skip to content

chore(clerk-js): Introduce Form.PasswordInput, InputGroup, Checkbox#2087

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
panteliselef merged 5 commits into from
Nov 16, 2023
Merged

chore(clerk-js): Introduce Form.PasswordInput, InputGroup, Checkbox #2087

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8103254
chore(clerk-js): Introduce Form.PasswordInput, InputGroup, Checkbox
panteliselef Nov 8, 2023
0e6cf82
chore(clerk-js): Use Form.PasswordInput, InputGroup, Checkbox as repl…
panteliselef Nov 8, 2023
771a0e9
chore(clerk-js): Dropping Radio, Checkbox, Password support from Form…
panteliselef Nov 8, 2023
5565130
chore(clerk-js): Add changeset
panteliselef Nov 9, 2023
9cbb4a6
chore(clerk-js): Apply changes to ui.retheme
panteliselef Nov 13, 2023
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/proud-hairs-check.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': patch
---

Refactor of internal input group, password field, and checkbox inputs in forms.
2 changes: 1 addition & 1 deletion packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifiedDomainPage.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -263,7 +263,7 @@ export const VerifiedDomainPage = withCardStateProvider(() => {

{allowsEdit && (
<Form.ControlRow elementId={deletePending.id}>
<Form.Control {...deletePending.props} />
<Form.Checkbox {...deletePending.props} />
</Form.ControlRow>
)}

Expand Down
6 changes: 3 additions & 3 deletions packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifyDomainPage.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -151,11 +151,11 @@ export const VerifyDomainPage = withCardStateProvider(() => {
>
<Form.Root onSubmit={onSubmitPrepare}>
<Form.ControlRow elementId={emailField.id}>
<Form.Control
<Form.InputGroup
{...emailField.props}
autoFocus
groupSuffix={`@${domain.name}`}
required
groupSuffix={emailDomainSuffix}
isRequired
/>
</Form.ControlRow>
<FormButtons isDisabled={!canSubmit} />
Expand Down
10 changes: 5 additions & 5 deletions packages/clerk-js/src/ui.retheme/components/SignIn/ResetPassword.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -88,7 +88,7 @@ export const _ResetPassword = () => {
return console.error(clerkInvalidFAPIResponse(status, supportEmail));
}
} catch (e) {
handleError(e, [passwordField, confirmField], card.setError);
return handleError(e, [passwordField, confirmField], card.setError);
}
};

Expand DownExpand Up@@ -117,14 +117,14 @@ export const _ResetPassword = () => {
style={{ display: 'none' }}
/>
<Form.ControlRow elementId={passwordField.id}>
<Form.Control
<Form.PasswordInput
{...passwordField.props}
required
isRequired
autoFocus
/>
</Form.ControlRow>
<Form.ControlRow elementId={confirmField.id}>
<Form.Control
<Form.PasswordInput
{...confirmField.props}
onChange={e => {
if (e.target.value) {
Expand All@@ -136,7 +136,7 @@ export const _ResetPassword = () => {
</Form.ControlRow>
{!requiresNewPassword && (
<Form.ControlRow elementId={sessionsField.id}>
<Form.Control {...sessionsField.props} />
<Form.Checkbox {...sessionsField.props} />
</Form.ControlRow>
)}
<Form.SubmitButton
Expand Down
2 changes: 1 addition & 1 deletion packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorOnePasswordCard.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -117,7 +117,7 @@ export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps)
style={{ display: 'none' }}
/>
<Form.ControlRow elementId={passwordControl.id}>
<Form.Control
<Form.PasswordInput
{...passwordControl.props}
autoFocus
/>
Expand Down
2 changes: 1 addition & 1 deletion packages/clerk-js/src/ui.retheme/components/SignIn/SignInStart.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -368,7 +368,7 @@ const InstantPasswordRow = ({ field }: { field?: FormControlState<'password'> })
!field.value && !autofilled ? { opacity: 0, height: 0, pointerEvents: 'none', marginTop: '-1rem' } : undefined
}
>
<Form.Control
<Form.PasswordInput
{...field.props}
ref={ref}
tabIndex={!field.value ? -1 : undefined}
Expand Down
2 changes: 1 addition & 1 deletion packages/clerk-js/src/ui.retheme/components/SignUp/SignUpForm.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -82,7 +82,7 @@ export const SignUpForm = (props: SignUpFormProps) => {
)}
{shouldShow('password') && (
<Form.ControlRow elementId='password'>
<Form.Control
<Form.PasswordInput
{...{
...formState.password.props,
isRequired: fields.password!.required,
Expand Down
15 changes: 9 additions & 6 deletions packages/clerk-js/src/ui.retheme/components/UserProfile/PasswordPage.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -143,39 +143,42 @@ export const PasswordPage = withCardStateProvider(() => {
/>
{user.passwordEnabled && (
<Form.ControlRow elementId={currentPasswordField.id}>
<Form.Control
<Form.PasswordInput
{...currentPasswordField.props}
minLength={6}
required
isRequired
autoFocus
isDisabled={passwordEditDisabled}
/>
</Form.ControlRow>
)}
<Form.ControlRow elementId={passwordField.id}>
<Form.Control
<Form.PasswordInput
{...passwordField.props}
minLength={6}
required
isRequired
autoFocus={!user.passwordEnabled}
isDisabled={passwordEditDisabled}
/>
</Form.ControlRow>
<Form.ControlRow elementId={confirmField.id}>
<Form.Control
<Form.PasswordInput
{...confirmField.props}
onChange={e => {
if (e.target.value) {
setConfirmPasswordFeedback(e.target.value);
}
return confirmField.props.onChange(e);
}}
isRequired
isDisabled={passwordEditDisabled}
/>
</Form.ControlRow>
<Form.ControlRow elementId={sessionsField.id}>
<Form.Control
<Form.Checkbox
{...sessionsField.props}
//TODO: localize this
description={'It is advised to logout of all other devices that may user an old password'}
isDisabled={passwordEditDisabled}
/>
</Form.ControlRow>
Expand Down
8 changes: 4 additions & 4 deletions packages/clerk-js/src/ui.retheme/components/UserProfile/__tests__/PasswordPage.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -79,7 +79,7 @@ describe('PasswordPage', () => {

expect(screen.getByLabelText(/new password/i)).toBeDisabled();
expect(screen.getByLabelText(/confirm password/i)).toBeDisabled();
expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).toBeDisabled();
expect(screen.getByRole('checkbox', { name: /sign out of all other devices/i })).toBeDisabled();

expect(
screen.getByText(
Expand DownExpand Up@@ -113,7 +113,7 @@ describe('PasswordPage', () => {

expect(screen.getByLabelText(/new password/i)).not.toBeDisabled();
expect(screen.getByLabelText(/confirm password/i)).not.toBeDisabled();
expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).not.toBeDisabled();
expect(screen.getByRole('checkbox', { name: /sign out of all other devices/i })).not.toBeDisabled();

expect(
screen.queryByText(
Expand DownExpand Up@@ -149,7 +149,7 @@ describe('PasswordPage', () => {
expect(screen.getByLabelText(/current password/i)).toBeDisabled();
expect(screen.getByLabelText(/new password/i)).toBeDisabled();
expect(screen.getByLabelText(/confirm password/i)).toBeDisabled();
expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).toBeDisabled();
expect(screen.getByRole('checkbox', { name: /sign out of all other devices/i })).toBeDisabled();

expect(
screen.getByText(
Expand DownExpand Up@@ -185,7 +185,7 @@ describe('PasswordPage', () => {
expect(screen.getByLabelText(/current password/i)).not.toBeDisabled();
expect(screen.getByLabelText(/new password/i)).not.toBeDisabled();
expect(screen.getByLabelText(/confirm password/i)).not.toBeDisabled();
expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).not.toBeDisabled();
expect(screen.getByRole('checkbox', { name: /sign out of all other devices/i })).not.toBeDisabled();

expect(
screen.queryByText(
Expand Down
94 changes: 91 additions & 3 deletions packages/clerk-js/src/ui.retheme/elements/FieldControl.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -22,7 +22,9 @@ import { useFormControlFeedback } from '../utils';
import { useCardState } from './contexts';
import type { FormFeedbackProps } from './FormControl';
import { FormFeedback } from './FormControl';
import { RadioItem } from './RadioGroup';
import { InputGroup } from './InputGroup';
import { PasswordInput } from './PasswordInput';
import { RadioItem, RadioLabel } from './RadioGroup';

type FormControlProps = Omit<PropsOfComponent<typeof Input>, 'label' | 'placeholder' | 'disabled' | 'required'> &
ReturnType<typeof useFormControlUtil<FieldId>>['props'];
Expand All@@ -37,7 +39,6 @@ const Root = (props: PropsWithChildren<FormControlProps>) => {
setInfo,
setSuccess,
setWarning,
setHasPassedComplexity,
clearFeedback,
feedbackType,
feedback,
Expand All@@ -63,7 +64,6 @@ const Root = (props: PropsWithChildren<FormControlProps>) => {
setSuccess={setSuccess}
setWarning={setWarning}
setInfo={setInfo}
setHasPassedComplexity={setHasPassedComplexity}
clearFeedback={clearFeedback}
sx={sx}
>
Expand DownExpand Up@@ -199,6 +199,66 @@ const FieldFeedback = (props: Pick<FormFeedbackProps, 'elementDescriptors'>) =>
);
};

const PasswordInputElement = forwardRef<HTMLInputElement>((_, ref) => {
const { t } = useLocalizations();
const formField = useFormField();
const { placeholder, ...inputProps } = sanitizeInputProps(formField, [
'validatePassword',
'setError',
'setWarning',
'setSuccess',
'setInfo',
'setHasPassedComplexity',
]);

return (
// @ts-expect-error
<PasswordInput
ref={ref}
elementDescriptor={descriptors.formFieldInput}
elementId={descriptors.formFieldInput.setId(formField.fieldId)}
{...inputProps}
placeholder={t(placeholder)}
/>
);
});

const CheckboxIndicator = forwardRef<HTMLInputElement>((_, ref) => {
const formField = useFormField();
const { placeholder, ...inputProps } = sanitizeInputProps(formField);

return (
<Input
ref={ref}
{...inputProps}
elementDescriptor={descriptors.formFieldInput}
elementId={descriptors.formFieldInput.setId(formField.fieldId)}
focusRing={false}
sx={t => ({
width: 'fit-content',
marginTop: t.space.$0x5,
})}
type='checkbox'
/>
);
});

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

if (!label) {
return null;
}

return (
<RadioLabel
label={label}
id={id}
description={props.description}
/>
);
};

const InputElement = forwardRef<HTMLInputElement>((_, ref) => {
const { t } = useLocalizations();
const formField = useFormField();
Expand All@@ -214,12 +274,40 @@ const InputElement = forwardRef<HTMLInputElement>((_, ref) => {
);
});

const InputGroupElement = forwardRef<
HTMLInputElement,
{
groupPrefix?: string;
groupSuffix?: string;
}
>((props, ref) => {
const { t } = useLocalizations();
const formField = useFormField();
const { placeholder, ...inputProps } = sanitizeInputProps(formField);

return (
<InputGroup
ref={ref}
elementDescriptor={descriptors.formFieldInput}
elementId={descriptors.formFieldInput.setId(formField.fieldId)}
{...inputProps}
groupPrefix={props.groupPrefix}
groupSuffix={props.groupSuffix}
placeholder={t(placeholder)}
/>
);
});

export const Field = {
Root: Root,
Label: FieldLabel,
LabelRow: FieldLabelRow,
Input: InputElement,
PasswordInput: PasswordInputElement,
InputGroup: InputGroupElement,
RadioItem: RadioItem,
CheckboxIndicator: CheckboxIndicator,
CheckboxLabel: CheckboxLabel,
Action: FieldAction,
AsOptional: FieldOptionalLabel,
LabelIcon: FieldLabelIcon,
Expand Down
40 changes: 40 additions & 0 deletions packages/clerk-js/src/ui.retheme/elements/Form.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -156,6 +156,43 @@ const PlainInput = (props: CommonInputProps) => {
);
};

const PasswordInput = (props: CommonInputProps) => {
return (
<CommonInputWrapper {...props}>
<Field.PasswordInput />
</CommonInputWrapper>
);
};

const InputGroup = (
props: CommonInputProps & {
groupPrefix?: string;
groupSuffix?: string;
},
) => {
const { groupSuffix, groupPrefix, ...fieldProps } = props;
return (
<CommonInputWrapper {...fieldProps}>
<Field.InputGroup {...{ groupSuffix, groupPrefix }} />
</CommonInputWrapper>
);
};

const Checkbox = (
props: CommonFieldRootProps & {
description?: string | LocalizationKey;
},
) => {
return (
<Field.Root {...props}>
<Flex align='start'>
<Field.CheckboxIndicator />
<Field.CheckboxLabel description={props.description} />
</Flex>
</Field.Root>
);
};

const RadioGroup = (
props: Omit<PropsOfComponent<typeof Field.Root>, 'infoText' | 'type' | 'validatePassword' | 'label' | 'placeholder'>,
) => {
Expand DownExpand Up@@ -189,7 +226,10 @@ export const Form = {
*/
Control: FormControl,
PlainInput,
PasswordInput,
InputGroup,
RadioGroup,
Checkbox,
SubmitButton: FormSubmit,
ResetButton: FormReset,
};
Expand Down
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
chore(clerk-js): Introduce Form.PasswordInput, InputGroup, Checkbox by panteliselef · Pull Request #2087 · clerk/javascript · GitHub
Skip to content
chore(clerk-js): Introduce Form.PasswordInput, InputGroup, Checkbox#2087

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

panteliselef
merged 5 commits into

from

Nov 16, 2023
 Merged


chore(clerk-js): Introduce Form.PasswordInput, InputGroup, Checkbox
#2087
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


5 commits


Select commit
Hold shift + click to select a range
8103254

chore(clerk-js): Introduce Form.PasswordInput, InputGroup, Checkbox


panteliselef Nov 8, 2023
0e6cf82

chore(clerk-js): Use Form.PasswordInput, InputGroup, Checkbox as repl…


panteliselef Nov 8, 2023
771a0e9

chore(clerk-js): Dropping Radio, Checkbox, Password support from Form…


panteliselef Nov 8, 2023
5565130

chore(clerk-js): Add changeset


panteliselef Nov 9, 2023
9cbb4a6

chore(clerk-js): Apply changes to ui.retheme


panteliselef Nov 13, 2023

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/proud-hairs-check.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': patch
---

Refactor of internal input group, password field, and checkbox inputs in forms.

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifiedDomainPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -263,7 +263,7 @@ export const VerifiedDomainPage = withCardStateProvider(() => {

 {allowsEdit && (
 <Form.ControlRow elementId={deletePending.id}>
 <Form.Control {...deletePending.props} />
 <Form.Checkbox {...deletePending.props} />
 </Form.ControlRow>
 )}

Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifyDomainPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -151,11 +151,11 @@ export const VerifyDomainPage = withCardStateProvider(() => {
 >
 <Form.Root onSubmit={onSubmitPrepare}>
 <Form.ControlRow elementId={emailField.id}>
 <Form.Control
 <Form.InputGroup
 {...emailField.props}
 autoFocus
 groupSuffix={`@${domain.name}`}
required
 groupSuffix={emailDomainSuffix}
isRequired
 />
 </Form.ControlRow>
 <FormButtons isDisabled={!canSubmit} />
Expand Down

10 changes: 5 additions & 5 deletions
packages/clerk-js/src/ui.retheme/components/SignIn/ResetPassword.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -88,7 +88,7 @@ export const _ResetPassword = () => {
 return console.error(clerkInvalidFAPIResponse(status, supportEmail));
 }
 } catch (e) {
 handleError(e, [passwordField, confirmField], card.setError);
return handleError(e, [passwordField, confirmField], card.setError);
 }
 };

Expand DownExpand Up@@ -117,14 +117,14 @@ export const _ResetPassword = () => {
 style={{ display: 'none' }}
 />
 <Form.ControlRow elementId={passwordField.id}>
 <Form.Control
 <Form.PasswordInput
 {...passwordField.props}
required
isRequired
 autoFocus
 />
 </Form.ControlRow>
 <Form.ControlRow elementId={confirmField.id}>
 <Form.Control
 <Form.PasswordInput
 {...confirmField.props}
 onChange={e => {
 if (e.target.value) {
Expand All@@ -136,7 +136,7 @@ export const _ResetPassword = () => {
 </Form.ControlRow>
 {!requiresNewPassword && (
 <Form.ControlRow elementId={sessionsField.id}>
 <Form.Control {...sessionsField.props} />
 <Form.Checkbox {...sessionsField.props} />
 </Form.ControlRow>
 )}
 <Form.SubmitButton
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorOnePasswordCard.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -117,7 +117,7 @@ export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps)
 style={{ display: 'none' }}
 />
 <Form.ControlRow elementId={passwordControl.id}>
 <Form.Control
 <Form.PasswordInput
 {...passwordControl.props}
 autoFocus
 />
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui.retheme/components/SignIn/SignInStart.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -368,7 +368,7 @@ const InstantPasswordRow = ({ field }: { field?: FormControlState<'password'> })
 !field.value && !autofilled ? { opacity: 0, height: 0, pointerEvents: 'none', marginTop: '-1rem' } : undefined
 }
 >
 <Form.Control
 <Form.PasswordInput
 {...field.props}
 ref={ref}
 tabIndex={!field.value ? -1 : undefined}
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui.retheme/components/SignUp/SignUpForm.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -82,7 +82,7 @@ export const SignUpForm = (props: SignUpFormProps) => {
 )}
 {shouldShow('password') && (
 <Form.ControlRow elementId='password'>
 <Form.Control
 <Form.PasswordInput
 {...{
 ...formState.password.props,
 isRequired: fields.password!.required,
Expand Down

15 changes: 9 additions & 6 deletions
packages/clerk-js/src/ui.retheme/components/UserProfile/PasswordPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -143,39 +143,42 @@ export const PasswordPage = withCardStateProvider(() => {
 />
 {user.passwordEnabled && (
 <Form.ControlRow elementId={currentPasswordField.id}>
 <Form.Control
 <Form.PasswordInput
 {...currentPasswordField.props}
 minLength={6}
required
isRequired
 autoFocus
 isDisabled={passwordEditDisabled}
 />
 </Form.ControlRow>
 )}
 <Form.ControlRow elementId={passwordField.id}>
 <Form.Control
 <Form.PasswordInput
 {...passwordField.props}
 minLength={6}
required
isRequired
 autoFocus={!user.passwordEnabled}
 isDisabled={passwordEditDisabled}
 />
 </Form.ControlRow>
 <Form.ControlRow elementId={confirmField.id}>
 <Form.Control
 <Form.PasswordInput
 {...confirmField.props}
 onChange={e => {
 if (e.target.value) {
 setConfirmPasswordFeedback(e.target.value);
 }
 return confirmField.props.onChange(e);
 }}
 isRequired
 isDisabled={passwordEditDisabled}
 />
 </Form.ControlRow>
 <Form.ControlRow elementId={sessionsField.id}>
 <Form.Control
 <Form.Checkbox
 {...sessionsField.props}
 //TODO: localize this
 description={'It is advised to logout of all other devices that may user an old password'}
 isDisabled={passwordEditDisabled}
 />
 </Form.ControlRow>
Expand Down

8 changes: 4 additions & 4 deletions
packages/clerk-js/src/ui.retheme/components/UserProfile/__tests__/PasswordPage.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -79,7 +79,7 @@ describe('PasswordPage', () => {

 expect(screen.getByLabelText(/new password/i)).toBeDisabled();
 expect(screen.getByLabelText(/confirm password/i)).toBeDisabled();
 expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).toBeDisabled();
 expect(screen.getByRole('checkbox', { name: /sign out of all other devices/i })).toBeDisabled();

 expect(
 screen.getByText(
Expand DownExpand Up@@ -113,7 +113,7 @@ describe('PasswordPage', () => {

 expect(screen.getByLabelText(/new password/i)).not.toBeDisabled();
 expect(screen.getByLabelText(/confirm password/i)).not.toBeDisabled();
 expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).not.toBeDisabled();
 expect(screen.getByRole('checkbox', { name: /sign out of all other devices/i })).not.toBeDisabled();

 expect(
 screen.queryByText(
Expand DownExpand Up@@ -149,7 +149,7 @@ describe('PasswordPage', () => {
 expect(screen.getByLabelText(/current password/i)).toBeDisabled();
 expect(screen.getByLabelText(/new password/i)).toBeDisabled();
 expect(screen.getByLabelText(/confirm password/i)).toBeDisabled();
 expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).toBeDisabled();
 expect(screen.getByRole('checkbox', { name: /sign out of all other devices/i })).toBeDisabled();

 expect(
 screen.getByText(
Expand DownExpand Up@@ -185,7 +185,7 @@ describe('PasswordPage', () => {
 expect(screen.getByLabelText(/current password/i)).not.toBeDisabled();
 expect(screen.getByLabelText(/new password/i)).not.toBeDisabled();
 expect(screen.getByLabelText(/confirm password/i)).not.toBeDisabled();
 expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).not.toBeDisabled();
 expect(screen.getByRole('checkbox', { name: /sign out of all other devices/i })).not.toBeDisabled();

 expect(
 screen.queryByText(
Expand Down

94 changes: 91 additions & 3 deletions
packages/clerk-js/src/ui.retheme/elements/FieldControl.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -22,7 +22,9 @@ import { useFormControlFeedback } from '../utils';
import { useCardState } from './contexts';
import type { FormFeedbackProps } from './FormControl';
import { FormFeedback } from './FormControl';
import { RadioItem } from './RadioGroup';
import { InputGroup } from './InputGroup';
import { PasswordInput } from './PasswordInput';
import { RadioItem, RadioLabel } from './RadioGroup';

type FormControlProps = Omit<PropsOfComponent<typeof Input>, 'label' | 'placeholder' | 'disabled' | 'required'> &
 ReturnType<typeof useFormControlUtil<FieldId>>['props'];
Expand All@@ -37,7 +39,6 @@ const Root = (props: PropsWithChildren<FormControlProps>) => {
 setInfo,
 setSuccess,
 setWarning,
 setHasPassedComplexity,
 clearFeedback,
 feedbackType,
 feedback,
Expand All@@ -63,7 +64,6 @@ const Root = (props: PropsWithChildren<FormControlProps>) => {
 setSuccess={setSuccess}
 setWarning={setWarning}
 setInfo={setInfo}
 setHasPassedComplexity={setHasPassedComplexity}
 clearFeedback={clearFeedback}
 sx={sx}
 >
Expand DownExpand Up@@ -199,6 +199,66 @@ const FieldFeedback = (props: Pick<FormFeedbackProps, 'elementDescriptors'>) =>
 );
};

const PasswordInputElement = forwardRef<HTMLInputElement>((_, ref) => {
 const { t } = useLocalizations();
 const formField = useFormField();
 const { placeholder, ...inputProps } = sanitizeInputProps(formField, [
 'validatePassword',
 'setError',
 'setWarning',
 'setSuccess',
 'setInfo',
 'setHasPassedComplexity',
 ]);

 return (
 // @ts-expect-error
 <PasswordInput
 ref={ref}
 elementDescriptor={descriptors.formFieldInput}
 elementId={descriptors.formFieldInput.setId(formField.fieldId)}
 {...inputProps}
 placeholder={t(placeholder)}
 />
 );
});

const CheckboxIndicator = forwardRef<HTMLInputElement>((_, ref) => {
 const formField = useFormField();
 const { placeholder, ...inputProps } = sanitizeInputProps(formField);

 return (
 <Input
 ref={ref}
 {...inputProps}
 elementDescriptor={descriptors.formFieldInput}
 elementId={descriptors.formFieldInput.setId(formField.fieldId)}
 focusRing={false}
 sx={t => ({
 width: 'fit-content',
 marginTop: t.space.$0x5,
 })}
 type='checkbox'
 />
 );
});

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

 if (!label) {
 return null;
 }

 return (
 <RadioLabel
 label={label}
 id={id}
 description={props.description}
 />
 );
};

const InputElement = forwardRef<HTMLInputElement>((_, ref) => {
 const { t } = useLocalizations();
 const formField = useFormField();
Expand All@@ -214,12 +274,40 @@ const InputElement = forwardRef<HTMLInputElement>((_, ref) => {
 );
});

const InputGroupElement = forwardRef<
 HTMLInputElement,
 {
 groupPrefix?: string;
 groupSuffix?: string;
 }
>((props, ref) => {
 const { t } = useLocalizations();
 const formField = useFormField();
 const { placeholder, ...inputProps } = sanitizeInputProps(formField);

 return (
 <InputGroup
 ref={ref}
 elementDescriptor={descriptors.formFieldInput}
 elementId={descriptors.formFieldInput.setId(formField.fieldId)}
 {...inputProps}
 groupPrefix={props.groupPrefix}
 groupSuffix={props.groupSuffix}
 placeholder={t(placeholder)}
 />
 );
});

export const Field = {
 Root: Root,
 Label: FieldLabel,
 LabelRow: FieldLabelRow,
 Input: InputElement,
 PasswordInput: PasswordInputElement,
 InputGroup: InputGroupElement,
 RadioItem: RadioItem,
 CheckboxIndicator: CheckboxIndicator,
 CheckboxLabel: CheckboxLabel,
 Action: FieldAction,
 AsOptional: FieldOptionalLabel,
 LabelIcon: FieldLabelIcon,
Expand Down

40 changes: 40 additions & 0 deletions
packages/clerk-js/src/ui.retheme/elements/Form.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -156,6 +156,43 @@ const PlainInput = (props: CommonInputProps) => {
 );
};

const PasswordInput = (props: CommonInputProps) => {
 return (
 <CommonInputWrapper {...props}>
 <Field.PasswordInput />
 </CommonInputWrapper>
 );
};

const InputGroup = (
 props: CommonInputProps & {
 groupPrefix?: string;
 groupSuffix?: string;
 },
) => {
 const { groupSuffix, groupPrefix, ...fieldProps } = props;
 return (
 <CommonInputWrapper {...fieldProps}>
 <Field.InputGroup {...{ groupSuffix, groupPrefix }} />
 </CommonInputWrapper>
 );
};

const Checkbox = (
 props: CommonFieldRootProps & {
 description?: string | LocalizationKey;
 },
) => {
 return (
 <Field.Root {...props}>
 <Flex align='start'>
 <Field.CheckboxIndicator />
 <Field.CheckboxLabel description={props.description} />
 </Flex>
 </Field.Root>
 );
};

const RadioGroup = (
 props: Omit<PropsOfComponent<typeof Field.Root>, 'infoText' | 'type' | 'validatePassword' | 'label' | 'placeholder'>,
) => {
Expand DownExpand Up@@ -189,7 +226,10 @@ export const Form = {
 */
 Control: FormControl,
 PlainInput,
 PasswordInput,
 InputGroup,
 RadioGroup,
 Checkbox,
 SubmitButton: FormSubmit,
 ResetButton: FormReset,
};
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
chore(clerk-js): Introduce Form.PasswordInput, InputGroup, Checkbox by panteliselef · Pull Request #2087 · clerk/javascript · GitHub
Skip to content
chore(clerk-js): Introduce Form.PasswordInput, InputGroup, Checkbox#2087

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

panteliselef
merged 5 commits into

from

Nov 16, 2023
 Merged


chore(clerk-js): Introduce Form.PasswordInput, InputGroup, Checkbox
#2087
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


5 commits


Select commit
Hold shift + click to select a range
8103254

chore(clerk-js): Introduce Form.PasswordInput, InputGroup, Checkbox


panteliselef Nov 8, 2023
0e6cf82

chore(clerk-js): Use Form.PasswordInput, InputGroup, Checkbox as repl…


panteliselef Nov 8, 2023
771a0e9

chore(clerk-js): Dropping Radio, Checkbox, Password support from Form…


panteliselef Nov 8, 2023
5565130

chore(clerk-js): Add changeset


panteliselef Nov 9, 2023
9cbb4a6

chore(clerk-js): Apply changes to ui.retheme


panteliselef Nov 13, 2023

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/proud-hairs-check.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': patch
---

Refactor of internal input group, password field, and checkbox inputs in forms.

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifiedDomainPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -263,7 +263,7 @@ export const VerifiedDomainPage = withCardStateProvider(() => {

 {allowsEdit && (
 <Form.ControlRow elementId={deletePending.id}>
 <Form.Control {...deletePending.props} />
 <Form.Checkbox {...deletePending.props} />
 </Form.ControlRow>
 )}

Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifyDomainPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -151,11 +151,11 @@ export const VerifyDomainPage = withCardStateProvider(() => {
 >
 <Form.Root onSubmit={onSubmitPrepare}>
 <Form.ControlRow elementId={emailField.id}>
 <Form.Control
 <Form.InputGroup
 {...emailField.props}
 autoFocus
 groupSuffix={`@${domain.name}`}
required
 groupSuffix={emailDomainSuffix}
isRequired
 />
 </Form.ControlRow>
 <FormButtons isDisabled={!canSubmit} />
Expand Down

10 changes: 5 additions & 5 deletions
packages/clerk-js/src/ui.retheme/components/SignIn/ResetPassword.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -88,7 +88,7 @@ export const _ResetPassword = () => {
 return console.error(clerkInvalidFAPIResponse(status, supportEmail));
 }
 } catch (e) {
 handleError(e, [passwordField, confirmField], card.setError);
return handleError(e, [passwordField, confirmField], card.setError);
 }
 };

Expand DownExpand Up@@ -117,14 +117,14 @@ export const _ResetPassword = () => {
 style={{ display: 'none' }}
 />
 <Form.ControlRow elementId={passwordField.id}>
 <Form.Control
 <Form.PasswordInput
 {...passwordField.props}
required
isRequired
 autoFocus
 />
 </Form.ControlRow>
 <Form.ControlRow elementId={confirmField.id}>
 <Form.Control
 <Form.PasswordInput
 {...confirmField.props}
 onChange={e => {
 if (e.target.value) {
Expand All@@ -136,7 +136,7 @@ export const _ResetPassword = () => {
 </Form.ControlRow>
 {!requiresNewPassword && (
 <Form.ControlRow elementId={sessionsField.id}>
 <Form.Control {...sessionsField.props} />
 <Form.Checkbox {...sessionsField.props} />
 </Form.ControlRow>
 )}
 <Form.SubmitButton
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorOnePasswordCard.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -117,7 +117,7 @@ export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps)
 style={{ display: 'none' }}
 />
 <Form.ControlRow elementId={passwordControl.id}>
 <Form.Control
 <Form.PasswordInput
 {...passwordControl.props}
 autoFocus
 />
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui.retheme/components/SignIn/SignInStart.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -368,7 +368,7 @@ const InstantPasswordRow = ({ field }: { field?: FormControlState<'password'> })
 !field.value && !autofilled ? { opacity: 0, height: 0, pointerEvents: 'none', marginTop: '-1rem' } : undefined
 }
 >
 <Form.Control
 <Form.PasswordInput
 {...field.props}
 ref={ref}
 tabIndex={!field.value ? -1 : undefined}
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui.retheme/components/SignUp/SignUpForm.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -82,7 +82,7 @@ export const SignUpForm = (props: SignUpFormProps) => {
 )}
 {shouldShow('password') && (
 <Form.ControlRow elementId='password'>
 <Form.Control
 <Form.PasswordInput
 {...{
 ...formState.password.props,
 isRequired: fields.password!.required,
Expand Down

15 changes: 9 additions & 6 deletions
packages/clerk-js/src/ui.retheme/components/UserProfile/PasswordPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -143,39 +143,42 @@ export const PasswordPage = withCardStateProvider(() => {
 />
 {user.passwordEnabled && (
 <Form.ControlRow elementId={currentPasswordField.id}>
 <Form.Control
 <Form.PasswordInput
 {...currentPasswordField.props}
 minLength={6}
required
isRequired
 autoFocus
 isDisabled={passwordEditDisabled}
 />
 </Form.ControlRow>
 )}
 <Form.ControlRow elementId={passwordField.id}>
 <Form.Control
 <Form.PasswordInput
 {...passwordField.props}
 minLength={6}
required
isRequired
 autoFocus={!user.passwordEnabled}
 isDisabled={passwordEditDisabled}
 />
 </Form.ControlRow>
 <Form.ControlRow elementId={confirmField.id}>
 <Form.Control
 <Form.PasswordInput
 {...confirmField.props}
 onChange={e => {
 if (e.target.value) {
 setConfirmPasswordFeedback(e.target.value);
 }
 return confirmField.props.onChange(e);
 }}
 isRequired
 isDisabled={passwordEditDisabled}
 />
 </Form.ControlRow>
 <Form.ControlRow elementId={sessionsField.id}>
 <Form.Control
 <Form.Checkbox
 {...sessionsField.props}
 //TODO: localize this
 description={'It is advised to logout of all other devices that may user an old password'}
 isDisabled={passwordEditDisabled}
 />
 </Form.ControlRow>
Expand Down

8 changes: 4 additions & 4 deletions
packages/clerk-js/src/ui.retheme/components/UserProfile/__tests__/PasswordPage.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -79,7 +79,7 @@ describe('PasswordPage', () => {

 expect(screen.getByLabelText(/new password/i)).toBeDisabled();
 expect(screen.getByLabelText(/confirm password/i)).toBeDisabled();
 expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).toBeDisabled();
 expect(screen.getByRole('checkbox', { name: /sign out of all other devices/i })).toBeDisabled();

 expect(
 screen.getByText(
Expand DownExpand Up@@ -113,7 +113,7 @@ describe('PasswordPage', () => {

 expect(screen.getByLabelText(/new password/i)).not.toBeDisabled();
 expect(screen.getByLabelText(/confirm password/i)).not.toBeDisabled();
 expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).not.toBeDisabled();
 expect(screen.getByRole('checkbox', { name: /sign out of all other devices/i })).not.toBeDisabled();

 expect(
 screen.queryByText(
Expand DownExpand Up@@ -149,7 +149,7 @@ describe('PasswordPage', () => {
 expect(screen.getByLabelText(/current password/i)).toBeDisabled();
 expect(screen.getByLabelText(/new password/i)).toBeDisabled();
 expect(screen.getByLabelText(/confirm password/i)).toBeDisabled();
 expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).toBeDisabled();
 expect(screen.getByRole('checkbox', { name: /sign out of all other devices/i })).toBeDisabled();

 expect(
 screen.getByText(
Expand DownExpand Up@@ -185,7 +185,7 @@ describe('PasswordPage', () => {
 expect(screen.getByLabelText(/current password/i)).not.toBeDisabled();
 expect(screen.getByLabelText(/new password/i)).not.toBeDisabled();
 expect(screen.getByLabelText(/confirm password/i)).not.toBeDisabled();
 expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).not.toBeDisabled();
 expect(screen.getByRole('checkbox', { name: /sign out of all other devices/i })).not.toBeDisabled();

 expect(
 screen.queryByText(
Expand Down

94 changes: 91 additions & 3 deletions
packages/clerk-js/src/ui.retheme/elements/FieldControl.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -22,7 +22,9 @@ import { useFormControlFeedback } from '../utils';
import { useCardState } from './contexts';
import type { FormFeedbackProps } from './FormControl';
import { FormFeedback } from './FormControl';
import { RadioItem } from './RadioGroup';
import { InputGroup } from './InputGroup';
import { PasswordInput } from './PasswordInput';
import { RadioItem, RadioLabel } from './RadioGroup';

type FormControlProps = Omit<PropsOfComponent<typeof Input>, 'label' | 'placeholder' | 'disabled' | 'required'> &
 ReturnType<typeof useFormControlUtil<FieldId>>['props'];
Expand All@@ -37,7 +39,6 @@ const Root = (props: PropsWithChildren<FormControlProps>) => {
 setInfo,
 setSuccess,
 setWarning,
 setHasPassedComplexity,
 clearFeedback,
 feedbackType,
 feedback,
Expand All@@ -63,7 +64,6 @@ const Root = (props: PropsWithChildren<FormControlProps>) => {
 setSuccess={setSuccess}
 setWarning={setWarning}
 setInfo={setInfo}
 setHasPassedComplexity={setHasPassedComplexity}
 clearFeedback={clearFeedback}
 sx={sx}
 >
Expand DownExpand Up@@ -199,6 +199,66 @@ const FieldFeedback = (props: Pick<FormFeedbackProps, 'elementDescriptors'>) =>
 );
};

const PasswordInputElement = forwardRef<HTMLInputElement>((_, ref) => {
 const { t } = useLocalizations();
 const formField = useFormField();
 const { placeholder, ...inputProps } = sanitizeInputProps(formField, [
 'validatePassword',
 'setError',
 'setWarning',
 'setSuccess',
 'setInfo',
 'setHasPassedComplexity',
 ]);

 return (
 // @ts-expect-error
 <PasswordInput
 ref={ref}
 elementDescriptor={descriptors.formFieldInput}
 elementId={descriptors.formFieldInput.setId(formField.fieldId)}
 {...inputProps}
 placeholder={t(placeholder)}
 />
 );
});

const CheckboxIndicator = forwardRef<HTMLInputElement>((_, ref) => {
 const formField = useFormField();
 const { placeholder, ...inputProps } = sanitizeInputProps(formField);

 return (
 <Input
 ref={ref}
 {...inputProps}
 elementDescriptor={descriptors.formFieldInput}
 elementId={descriptors.formFieldInput.setId(formField.fieldId)}
 focusRing={false}
 sx={t => ({
 width: 'fit-content',
 marginTop: t.space.$0x5,
 })}
 type='checkbox'
 />
 );
});

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

 if (!label) {
 return null;
 }

 return (
 <RadioLabel
 label={label}
 id={id}
 description={props.description}
 />
 );
};

const InputElement = forwardRef<HTMLInputElement>((_, ref) => {
 const { t } = useLocalizations();
 const formField = useFormField();
Expand All@@ -214,12 +274,40 @@ const InputElement = forwardRef<HTMLInputElement>((_, ref) => {
 );
});

const InputGroupElement = forwardRef<
 HTMLInputElement,
 {
 groupPrefix?: string;
 groupSuffix?: string;
 }
>((props, ref) => {
 const { t } = useLocalizations();
 const formField = useFormField();
 const { placeholder, ...inputProps } = sanitizeInputProps(formField);

 return (
 <InputGroup
 ref={ref}
 elementDescriptor={descriptors.formFieldInput}
 elementId={descriptors.formFieldInput.setId(formField.fieldId)}
 {...inputProps}
 groupPrefix={props.groupPrefix}
 groupSuffix={props.groupSuffix}
 placeholder={t(placeholder)}
 />
 );
});

export const Field = {
 Root: Root,
 Label: FieldLabel,
 LabelRow: FieldLabelRow,
 Input: InputElement,
 PasswordInput: PasswordInputElement,
 InputGroup: InputGroupElement,
 RadioItem: RadioItem,
 CheckboxIndicator: CheckboxIndicator,
 CheckboxLabel: CheckboxLabel,
 Action: FieldAction,
 AsOptional: FieldOptionalLabel,
 LabelIcon: FieldLabelIcon,
Expand Down

40 changes: 40 additions & 0 deletions
packages/clerk-js/src/ui.retheme/elements/Form.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -156,6 +156,43 @@ const PlainInput = (props: CommonInputProps) => {
 );
};

const PasswordInput = (props: CommonInputProps) => {
 return (
 <CommonInputWrapper {...props}>
 <Field.PasswordInput />
 </CommonInputWrapper>
 );
};

const InputGroup = (
 props: CommonInputProps & {
 groupPrefix?: string;
 groupSuffix?: string;
 },
) => {
 const { groupSuffix, groupPrefix, ...fieldProps } = props;
 return (
 <CommonInputWrapper {...fieldProps}>
 <Field.InputGroup {...{ groupSuffix, groupPrefix }} />
 </CommonInputWrapper>
 );
};

const Checkbox = (
 props: CommonFieldRootProps & {
 description?: string | LocalizationKey;
 },
) => {
 return (
 <Field.Root {...props}>
 <Flex align='start'>
 <Field.CheckboxIndicator />
 <Field.CheckboxLabel description={props.description} />
 </Flex>
 </Field.Root>
 );
};

const RadioGroup = (
 props: Omit<PropsOfComponent<typeof Field.Root>, 'infoText' | 'type' | 'validatePassword' | 'label' | 'placeholder'>,
) => {
Expand DownExpand Up@@ -189,7 +226,10 @@ export const Form = {
 */
 Control: FormControl,
 PlainInput,
 PasswordInput,
 InputGroup,
 RadioGroup,
 Checkbox,
 SubmitButton: FormSubmit,
 ResetButton: FormReset,
};
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
chore(clerk-js): Introduce Form.PasswordInput, InputGroup, Checkbox by panteliselef · Pull Request #2087 · clerk/javascript · GitHub
Skip to content
chore(clerk-js): Introduce Form.PasswordInput, InputGroup, Checkbox#2087

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

panteliselef
merged 5 commits into

from

Nov 16, 2023
 Merged


chore(clerk-js): Introduce Form.PasswordInput, InputGroup, Checkbox
#2087
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


5 commits


Select commit
Hold shift + click to select a range
8103254

chore(clerk-js): Introduce Form.PasswordInput, InputGroup, Checkbox


panteliselef Nov 8, 2023
0e6cf82

chore(clerk-js): Use Form.PasswordInput, InputGroup, Checkbox as repl…


panteliselef Nov 8, 2023
771a0e9

chore(clerk-js): Dropping Radio, Checkbox, Password support from Form…


panteliselef Nov 8, 2023
5565130

chore(clerk-js): Add changeset


panteliselef Nov 9, 2023
9cbb4a6

chore(clerk-js): Apply changes to ui.retheme


panteliselef Nov 13, 2023

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/proud-hairs-check.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': patch
---

Refactor of internal input group, password field, and checkbox inputs in forms.

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifiedDomainPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -263,7 +263,7 @@ export const VerifiedDomainPage = withCardStateProvider(() => {

 {allowsEdit && (
 <Form.ControlRow elementId={deletePending.id}>
 <Form.Control {...deletePending.props} />
 <Form.Checkbox {...deletePending.props} />
 </Form.ControlRow>
 )}

Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifyDomainPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -151,11 +151,11 @@ export const VerifyDomainPage = withCardStateProvider(() => {
 >
 <Form.Root onSubmit={onSubmitPrepare}>
 <Form.ControlRow elementId={emailField.id}>
 <Form.Control
 <Form.InputGroup
 {...emailField.props}
 autoFocus
 groupSuffix={`@${domain.name}`}
required
 groupSuffix={emailDomainSuffix}
isRequired
 />
 </Form.ControlRow>
 <FormButtons isDisabled={!canSubmit} />
Expand Down

10 changes: 5 additions & 5 deletions
packages/clerk-js/src/ui.retheme/components/SignIn/ResetPassword.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -88,7 +88,7 @@ export const _ResetPassword = () => {
 return console.error(clerkInvalidFAPIResponse(status, supportEmail));
 }
 } catch (e) {
 handleError(e, [passwordField, confirmField], card.setError);
return handleError(e, [passwordField, confirmField], card.setError);
 }
 };

Expand DownExpand Up@@ -117,14 +117,14 @@ export const _ResetPassword = () => {
 style={{ display: 'none' }}
 />
 <Form.ControlRow elementId={passwordField.id}>
 <Form.Control
 <Form.PasswordInput
 {...passwordField.props}
required
isRequired
 autoFocus
 />
 </Form.ControlRow>
 <Form.ControlRow elementId={confirmField.id}>
 <Form.Control
 <Form.PasswordInput
 {...confirmField.props}
 onChange={e => {
 if (e.target.value) {
Expand All@@ -136,7 +136,7 @@ export const _ResetPassword = () => {
 </Form.ControlRow>
 {!requiresNewPassword && (
 <Form.ControlRow elementId={sessionsField.id}>
 <Form.Control {...sessionsField.props} />
 <Form.Checkbox {...sessionsField.props} />
 </Form.ControlRow>
 )}
 <Form.SubmitButton
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorOnePasswordCard.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -117,7 +117,7 @@ export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps)
 style={{ display: 'none' }}
 />
 <Form.ControlRow elementId={passwordControl.id}>
 <Form.Control
 <Form.PasswordInput
 {...passwordControl.props}
 autoFocus
 />
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui.retheme/components/SignIn/SignInStart.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -368,7 +368,7 @@ const InstantPasswordRow = ({ field }: { field?: FormControlState<'password'> })
 !field.value && !autofilled ? { opacity: 0, height: 0, pointerEvents: 'none', marginTop: '-1rem' } : undefined
 }
 >
 <Form.Control
 <Form.PasswordInput
 {...field.props}
 ref={ref}
 tabIndex={!field.value ? -1 : undefined}
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui.retheme/components/SignUp/SignUpForm.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -82,7 +82,7 @@ export const SignUpForm = (props: SignUpFormProps) => {
 )}
 {shouldShow('password') && (
 <Form.ControlRow elementId='password'>
 <Form.Control
 <Form.PasswordInput
 {...{
 ...formState.password.props,
 isRequired: fields.password!.required,
Expand Down

15 changes: 9 additions & 6 deletions
packages/clerk-js/src/ui.retheme/components/UserProfile/PasswordPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -143,39 +143,42 @@ export const PasswordPage = withCardStateProvider(() => {
 />
 {user.passwordEnabled && (
 <Form.ControlRow elementId={currentPasswordField.id}>
 <Form.Control
 <Form.PasswordInput
 {...currentPasswordField.props}
 minLength={6}
required
isRequired
 autoFocus
 isDisabled={passwordEditDisabled}
 />
 </Form.ControlRow>
 )}
 <Form.ControlRow elementId={passwordField.id}>
 <Form.Control
 <Form.PasswordInput
 {...passwordField.props}
 minLength={6}
required
isRequired
 autoFocus={!user.passwordEnabled}
 isDisabled={passwordEditDisabled}
 />
 </Form.ControlRow>
 <Form.ControlRow elementId={confirmField.id}>
 <Form.Control
 <Form.PasswordInput
 {...confirmField.props}
 onChange={e => {
 if (e.target.value) {
 setConfirmPasswordFeedback(e.target.value);
 }
 return confirmField.props.onChange(e);
 }}
 isRequired
 isDisabled={passwordEditDisabled}
 />
 </Form.ControlRow>
 <Form.ControlRow elementId={sessionsField.id}>
 <Form.Control
 <Form.Checkbox
 {...sessionsField.props}
 //TODO: localize this
 description={'It is advised to logout of all other devices that may user an old password'}
 isDisabled={passwordEditDisabled}
 />
 </Form.ControlRow>
Expand Down

8 changes: 4 additions & 4 deletions
packages/clerk-js/src/ui.retheme/components/UserProfile/__tests__/PasswordPage.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -79,7 +79,7 @@ describe('PasswordPage', () => {

 expect(screen.getByLabelText(/new password/i)).toBeDisabled();
 expect(screen.getByLabelText(/confirm password/i)).toBeDisabled();
 expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).toBeDisabled();
 expect(screen.getByRole('checkbox', { name: /sign out of all other devices/i })).toBeDisabled();

 expect(
 screen.getByText(
Expand DownExpand Up@@ -113,7 +113,7 @@ describe('PasswordPage', () => {

 expect(screen.getByLabelText(/new password/i)).not.toBeDisabled();
 expect(screen.getByLabelText(/confirm password/i)).not.toBeDisabled();
 expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).not.toBeDisabled();
 expect(screen.getByRole('checkbox', { name: /sign out of all other devices/i })).not.toBeDisabled();

 expect(
 screen.queryByText(
Expand DownExpand Up@@ -149,7 +149,7 @@ describe('PasswordPage', () => {
 expect(screen.getByLabelText(/current password/i)).toBeDisabled();
 expect(screen.getByLabelText(/new password/i)).toBeDisabled();
 expect(screen.getByLabelText(/confirm password/i)).toBeDisabled();
 expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).toBeDisabled();
 expect(screen.getByRole('checkbox', { name: /sign out of all other devices/i })).toBeDisabled();

 expect(
 screen.getByText(
Expand DownExpand Up@@ -185,7 +185,7 @@ describe('PasswordPage', () => {
 expect(screen.getByLabelText(/current password/i)).not.toBeDisabled();
 expect(screen.getByLabelText(/new password/i)).not.toBeDisabled();
 expect(screen.getByLabelText(/confirm password/i)).not.toBeDisabled();
 expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).not.toBeDisabled();
 expect(screen.getByRole('checkbox', { name: /sign out of all other devices/i })).not.toBeDisabled();

 expect(
 screen.queryByText(
Expand Down

94 changes: 91 additions & 3 deletions
packages/clerk-js/src/ui.retheme/elements/FieldControl.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -22,7 +22,9 @@ import { useFormControlFeedback } from '../utils';
import { useCardState } from './contexts';
import type { FormFeedbackProps } from './FormControl';
import { FormFeedback } from './FormControl';
import { RadioItem } from './RadioGroup';
import { InputGroup } from './InputGroup';
import { PasswordInput } from './PasswordInput';
import { RadioItem, RadioLabel } from './RadioGroup';

type FormControlProps = Omit<PropsOfComponent<typeof Input>, 'label' | 'placeholder' | 'disabled' | 'required'> &
 ReturnType<typeof useFormControlUtil<FieldId>>['props'];
Expand All@@ -37,7 +39,6 @@ const Root = (props: PropsWithChildren<FormControlProps>) => {
 setInfo,
 setSuccess,
 setWarning,
 setHasPassedComplexity,
 clearFeedback,
 feedbackType,
 feedback,
Expand All@@ -63,7 +64,6 @@ const Root = (props: PropsWithChildren<FormControlProps>) => {
 setSuccess={setSuccess}
 setWarning={setWarning}
 setInfo={setInfo}
 setHasPassedComplexity={setHasPassedComplexity}
 clearFeedback={clearFeedback}
 sx={sx}
 >
Expand DownExpand Up@@ -199,6 +199,66 @@ const FieldFeedback = (props: Pick<FormFeedbackProps, 'elementDescriptors'>) =>
 );
};

const PasswordInputElement = forwardRef<HTMLInputElement>((_, ref) => {
 const { t } = useLocalizations();
 const formField = useFormField();
 const { placeholder, ...inputProps } = sanitizeInputProps(formField, [
 'validatePassword',
 'setError',
 'setWarning',
 'setSuccess',
 'setInfo',
 'setHasPassedComplexity',
 ]);

 return (
 // @ts-expect-error
 <PasswordInput
 ref={ref}
 elementDescriptor={descriptors.formFieldInput}
 elementId={descriptors.formFieldInput.setId(formField.fieldId)}
 {...inputProps}
 placeholder={t(placeholder)}
 />
 );
});

const CheckboxIndicator = forwardRef<HTMLInputElement>((_, ref) => {
 const formField = useFormField();
 const { placeholder, ...inputProps } = sanitizeInputProps(formField);

 return (
 <Input
 ref={ref}
 {...inputProps}
 elementDescriptor={descriptors.formFieldInput}
 elementId={descriptors.formFieldInput.setId(formField.fieldId)}
 focusRing={false}
 sx={t => ({
 width: 'fit-content',
 marginTop: t.space.$0x5,
 })}
 type='checkbox'
 />
 );
});

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

 if (!label) {
 return null;
 }

 return (
 <RadioLabel
 label={label}
 id={id}
 description={props.description}
 />
 );
};

const InputElement = forwardRef<HTMLInputElement>((_, ref) => {
 const { t } = useLocalizations();
 const formField = useFormField();
Expand All@@ -214,12 +274,40 @@ const InputElement = forwardRef<HTMLInputElement>((_, ref) => {
 );
});

const InputGroupElement = forwardRef<
 HTMLInputElement,
 {
 groupPrefix?: string;
 groupSuffix?: string;
 }
>((props, ref) => {
 const { t } = useLocalizations();
 const formField = useFormField();
 const { placeholder, ...inputProps } = sanitizeInputProps(formField);

 return (
 <InputGroup
 ref={ref}
 elementDescriptor={descriptors.formFieldInput}
 elementId={descriptors.formFieldInput.setId(formField.fieldId)}
 {...inputProps}
 groupPrefix={props.groupPrefix}
 groupSuffix={props.groupSuffix}
 placeholder={t(placeholder)}
 />
 );
});

export const Field = {
 Root: Root,
 Label: FieldLabel,
 LabelRow: FieldLabelRow,
 Input: InputElement,
 PasswordInput: PasswordInputElement,
 InputGroup: InputGroupElement,
 RadioItem: RadioItem,
 CheckboxIndicator: CheckboxIndicator,
 CheckboxLabel: CheckboxLabel,
 Action: FieldAction,
 AsOptional: FieldOptionalLabel,
 LabelIcon: FieldLabelIcon,
Expand Down

40 changes: 40 additions & 0 deletions
packages/clerk-js/src/ui.retheme/elements/Form.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -156,6 +156,43 @@ const PlainInput = (props: CommonInputProps) => {
 );
};

const PasswordInput = (props: CommonInputProps) => {
 return (
 <CommonInputWrapper {...props}>
 <Field.PasswordInput />
 </CommonInputWrapper>
 );
};

const InputGroup = (
 props: CommonInputProps & {
 groupPrefix?: string;
 groupSuffix?: string;
 },
) => {
 const { groupSuffix, groupPrefix, ...fieldProps } = props;
 return (
 <CommonInputWrapper {...fieldProps}>
 <Field.InputGroup {...{ groupSuffix, groupPrefix }} />
 </CommonInputWrapper>
 );
};

const Checkbox = (
 props: CommonFieldRootProps & {
 description?: string | LocalizationKey;
 },
) => {
 return (
 <Field.Root {...props}>
 <Flex align='start'>
 <Field.CheckboxIndicator />
 <Field.CheckboxLabel description={props.description} />
 </Flex>
 </Field.Root>
 );
};

const RadioGroup = (
 props: Omit<PropsOfComponent<typeof Field.Root>, 'infoText' | 'type' | 'validatePassword' | 'label' | 'placeholder'>,
) => {
Expand DownExpand Up@@ -189,7 +226,10 @@ export const Form = {
 */
 Control: FormControl,
 PlainInput,
 PasswordInput,
 InputGroup,
 RadioGroup,
 Checkbox,
 SubmitButton: FormSubmit,
 ResetButton: FormReset,
};
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
chore(clerk-js): Introduce Form.PasswordInput, InputGroup, Checkbox by panteliselef · Pull Request #2087 · clerk/javascript · GitHub
Skip to content
chore(clerk-js): Introduce Form.PasswordInput, InputGroup, Checkbox#2087

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

panteliselef
merged 5 commits into

from

Nov 16, 2023
 Merged


chore(clerk-js): Introduce Form.PasswordInput, InputGroup, Checkbox
#2087
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


5 commits


Select commit
Hold shift + click to select a range
8103254

chore(clerk-js): Introduce Form.PasswordInput, InputGroup, Checkbox


panteliselef Nov 8, 2023
0e6cf82

chore(clerk-js): Use Form.PasswordInput, InputGroup, Checkbox as repl…


panteliselef Nov 8, 2023
771a0e9

chore(clerk-js): Dropping Radio, Checkbox, Password support from Form…


panteliselef Nov 8, 2023
5565130

chore(clerk-js): Add changeset


panteliselef Nov 9, 2023
9cbb4a6

chore(clerk-js): Apply changes to ui.retheme


panteliselef Nov 13, 2023

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/proud-hairs-check.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': patch
---

Refactor of internal input group, password field, and checkbox inputs in forms.

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifiedDomainPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -263,7 +263,7 @@ export const VerifiedDomainPage = withCardStateProvider(() => {

 {allowsEdit && (
 <Form.ControlRow elementId={deletePending.id}>
 <Form.Control {...deletePending.props} />
 <Form.Checkbox {...deletePending.props} />
 </Form.ControlRow>
 )}

Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifyDomainPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -151,11 +151,11 @@ export const VerifyDomainPage = withCardStateProvider(() => {
 >
 <Form.Root onSubmit={onSubmitPrepare}>
 <Form.ControlRow elementId={emailField.id}>
 <Form.Control
 <Form.InputGroup
 {...emailField.props}
 autoFocus
 groupSuffix={`@${domain.name}`}
required
 groupSuffix={emailDomainSuffix}
isRequired
 />
 </Form.ControlRow>
 <FormButtons isDisabled={!canSubmit} />
Expand Down

10 changes: 5 additions & 5 deletions
packages/clerk-js/src/ui.retheme/components/SignIn/ResetPassword.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -88,7 +88,7 @@ export const _ResetPassword = () => {
 return console.error(clerkInvalidFAPIResponse(status, supportEmail));
 }
 } catch (e) {
 handleError(e, [passwordField, confirmField], card.setError);
return handleError(e, [passwordField, confirmField], card.setError);
 }
 };

Expand DownExpand Up@@ -117,14 +117,14 @@ export const _ResetPassword = () => {
 style={{ display: 'none' }}
 />
 <Form.ControlRow elementId={passwordField.id}>
 <Form.Control
 <Form.PasswordInput
 {...passwordField.props}
required
isRequired
 autoFocus
 />
 </Form.ControlRow>
 <Form.ControlRow elementId={confirmField.id}>
 <Form.Control
 <Form.PasswordInput
 {...confirmField.props}
 onChange={e => {
 if (e.target.value) {
Expand All@@ -136,7 +136,7 @@ export const _ResetPassword = () => {
 </Form.ControlRow>
 {!requiresNewPassword && (
 <Form.ControlRow elementId={sessionsField.id}>
 <Form.Control {...sessionsField.props} />
 <Form.Checkbox {...sessionsField.props} />
 </Form.ControlRow>
 )}
 <Form.SubmitButton
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorOnePasswordCard.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -117,7 +117,7 @@ export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps)
 style={{ display: 'none' }}
 />
 <Form.ControlRow elementId={passwordControl.id}>
 <Form.Control
 <Form.PasswordInput
 {...passwordControl.props}
 autoFocus
 />
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui.retheme/components/SignIn/SignInStart.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -368,7 +368,7 @@ const InstantPasswordRow = ({ field }: { field?: FormControlState<'password'> })
 !field.value && !autofilled ? { opacity: 0, height: 0, pointerEvents: 'none', marginTop: '-1rem' } : undefined
 }
 >
 <Form.Control
 <Form.PasswordInput
 {...field.props}
 ref={ref}
 tabIndex={!field.value ? -1 : undefined}
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui.retheme/components/SignUp/SignUpForm.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -82,7 +82,7 @@ export const SignUpForm = (props: SignUpFormProps) => {
 )}
 {shouldShow('password') && (
 <Form.ControlRow elementId='password'>
 <Form.Control
 <Form.PasswordInput
 {...{
 ...formState.password.props,
 isRequired: fields.password!.required,
Expand Down

15 changes: 9 additions & 6 deletions
packages/clerk-js/src/ui.retheme/components/UserProfile/PasswordPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -143,39 +143,42 @@ export const PasswordPage = withCardStateProvider(() => {
 />
 {user.passwordEnabled && (
 <Form.ControlRow elementId={currentPasswordField.id}>
 <Form.Control
 <Form.PasswordInput
 {...currentPasswordField.props}
 minLength={6}
required
isRequired
 autoFocus
 isDisabled={passwordEditDisabled}
 />
 </Form.ControlRow>
 )}
 <Form.ControlRow elementId={passwordField.id}>
 <Form.Control
 <Form.PasswordInput
 {...passwordField.props}
 minLength={6}
required
isRequired
 autoFocus={!user.passwordEnabled}
 isDisabled={passwordEditDisabled}
 />
 </Form.ControlRow>
 <Form.ControlRow elementId={confirmField.id}>
 <Form.Control
 <Form.PasswordInput
 {...confirmField.props}
 onChange={e => {
 if (e.target.value) {
 setConfirmPasswordFeedback(e.target.value);
 }
 return confirmField.props.onChange(e);
 }}
 isRequired
 isDisabled={passwordEditDisabled}
 />
 </Form.ControlRow>
 <Form.ControlRow elementId={sessionsField.id}>
 <Form.Control
 <Form.Checkbox
 {...sessionsField.props}
 //TODO: localize this
 description={'It is advised to logout of all other devices that may user an old password'}
 isDisabled={passwordEditDisabled}
 />
 </Form.ControlRow>
Expand Down

8 changes: 4 additions & 4 deletions
packages/clerk-js/src/ui.retheme/components/UserProfile/__tests__/PasswordPage.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -79,7 +79,7 @@ describe('PasswordPage', () => {

 expect(screen.getByLabelText(/new password/i)).toBeDisabled();
 expect(screen.getByLabelText(/confirm password/i)).toBeDisabled();
 expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).toBeDisabled();
 expect(screen.getByRole('checkbox', { name: /sign out of all other devices/i })).toBeDisabled();

 expect(
 screen.getByText(
Expand DownExpand Up@@ -113,7 +113,7 @@ describe('PasswordPage', () => {

 expect(screen.getByLabelText(/new password/i)).not.toBeDisabled();
 expect(screen.getByLabelText(/confirm password/i)).not.toBeDisabled();
 expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).not.toBeDisabled();
 expect(screen.getByRole('checkbox', { name: /sign out of all other devices/i })).not.toBeDisabled();

 expect(
 screen.queryByText(
Expand DownExpand Up@@ -149,7 +149,7 @@ describe('PasswordPage', () => {
 expect(screen.getByLabelText(/current password/i)).toBeDisabled();
 expect(screen.getByLabelText(/new password/i)).toBeDisabled();
 expect(screen.getByLabelText(/confirm password/i)).toBeDisabled();
 expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).toBeDisabled();
 expect(screen.getByRole('checkbox', { name: /sign out of all other devices/i })).toBeDisabled();

 expect(
 screen.getByText(
Expand DownExpand Up@@ -185,7 +185,7 @@ describe('PasswordPage', () => {
 expect(screen.getByLabelText(/current password/i)).not.toBeDisabled();
 expect(screen.getByLabelText(/new password/i)).not.toBeDisabled();
 expect(screen.getByLabelText(/confirm password/i)).not.toBeDisabled();
 expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).not.toBeDisabled();
 expect(screen.getByRole('checkbox', { name: /sign out of all other devices/i })).not.toBeDisabled();

 expect(
 screen.queryByText(
Expand Down

94 changes: 91 additions & 3 deletions
packages/clerk-js/src/ui.retheme/elements/FieldControl.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -22,7 +22,9 @@ import { useFormControlFeedback } from '../utils';
import { useCardState } from './contexts';
import type { FormFeedbackProps } from './FormControl';
import { FormFeedback } from './FormControl';
import { RadioItem } from './RadioGroup';
import { InputGroup } from './InputGroup';
import { PasswordInput } from './PasswordInput';
import { RadioItem, RadioLabel } from './RadioGroup';

type FormControlProps = Omit<PropsOfComponent<typeof Input>, 'label' | 'placeholder' | 'disabled' | 'required'> &
 ReturnType<typeof useFormControlUtil<FieldId>>['props'];
Expand All@@ -37,7 +39,6 @@ const Root = (props: PropsWithChildren<FormControlProps>) => {
 setInfo,
 setSuccess,
 setWarning,
 setHasPassedComplexity,
 clearFeedback,
 feedbackType,
 feedback,
Expand All@@ -63,7 +64,6 @@ const Root = (props: PropsWithChildren<FormControlProps>) => {
 setSuccess={setSuccess}
 setWarning={setWarning}
 setInfo={setInfo}
 setHasPassedComplexity={setHasPassedComplexity}
 clearFeedback={clearFeedback}
 sx={sx}
 >
Expand DownExpand Up@@ -199,6 +199,66 @@ const FieldFeedback = (props: Pick<FormFeedbackProps, 'elementDescriptors'>) =>
 );
};

const PasswordInputElement = forwardRef<HTMLInputElement>((_, ref) => {
 const { t } = useLocalizations();
 const formField = useFormField();
 const { placeholder, ...inputProps } = sanitizeInputProps(formField, [
 'validatePassword',
 'setError',
 'setWarning',
 'setSuccess',
 'setInfo',
 'setHasPassedComplexity',
 ]);

 return (
 // @ts-expect-error
 <PasswordInput
 ref={ref}
 elementDescriptor={descriptors.formFieldInput}
 elementId={descriptors.formFieldInput.setId(formField.fieldId)}
 {...inputProps}
 placeholder={t(placeholder)}
 />
 );
});

const CheckboxIndicator = forwardRef<HTMLInputElement>((_, ref) => {
 const formField = useFormField();
 const { placeholder, ...inputProps } = sanitizeInputProps(formField);

 return (
 <Input
 ref={ref}
 {...inputProps}
 elementDescriptor={descriptors.formFieldInput}
 elementId={descriptors.formFieldInput.setId(formField.fieldId)}
 focusRing={false}
 sx={t => ({
 width: 'fit-content',
 marginTop: t.space.$0x5,
 })}
 type='checkbox'
 />
 );
});

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

 if (!label) {
 return null;
 }

 return (
 <RadioLabel
 label={label}
 id={id}
 description={props.description}
 />
 );
};

const InputElement = forwardRef<HTMLInputElement>((_, ref) => {
 const { t } = useLocalizations();
 const formField = useFormField();
Expand All@@ -214,12 +274,40 @@ const InputElement = forwardRef<HTMLInputElement>((_, ref) => {
 );
});

const InputGroupElement = forwardRef<
 HTMLInputElement,
 {
 groupPrefix?: string;
 groupSuffix?: string;
 }
>((props, ref) => {
 const { t } = useLocalizations();
 const formField = useFormField();
 const { placeholder, ...inputProps } = sanitizeInputProps(formField);

 return (
 <InputGroup
 ref={ref}
 elementDescriptor={descriptors.formFieldInput}
 elementId={descriptors.formFieldInput.setId(formField.fieldId)}
 {...inputProps}
 groupPrefix={props.groupPrefix}
 groupSuffix={props.groupSuffix}
 placeholder={t(placeholder)}
 />
 );
});

export const Field = {
 Root: Root,
 Label: FieldLabel,
 LabelRow: FieldLabelRow,
 Input: InputElement,
 PasswordInput: PasswordInputElement,
 InputGroup: InputGroupElement,
 RadioItem: RadioItem,
 CheckboxIndicator: CheckboxIndicator,
 CheckboxLabel: CheckboxLabel,
 Action: FieldAction,
 AsOptional: FieldOptionalLabel,
 LabelIcon: FieldLabelIcon,
Expand Down

40 changes: 40 additions & 0 deletions
packages/clerk-js/src/ui.retheme/elements/Form.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -156,6 +156,43 @@ const PlainInput = (props: CommonInputProps) => {
 );
};

const PasswordInput = (props: CommonInputProps) => {
 return (
 <CommonInputWrapper {...props}>
 <Field.PasswordInput />
 </CommonInputWrapper>
 );
};

const InputGroup = (
 props: CommonInputProps & {
 groupPrefix?: string;
 groupSuffix?: string;
 },
) => {
 const { groupSuffix, groupPrefix, ...fieldProps } = props;
 return (
 <CommonInputWrapper {...fieldProps}>
 <Field.InputGroup {...{ groupSuffix, groupPrefix }} />
 </CommonInputWrapper>
 );
};

const Checkbox = (
 props: CommonFieldRootProps & {
 description?: string | LocalizationKey;
 },
) => {
 return (
 <Field.Root {...props}>
 <Flex align='start'>
 <Field.CheckboxIndicator />
 <Field.CheckboxLabel description={props.description} />
 </Flex>
 </Field.Root>
 );
};

const RadioGroup = (
 props: Omit<PropsOfComponent<typeof Field.Root>, 'infoText' | 'type' | 'validatePassword' | 'label' | 'placeholder'>,
) => {
Expand DownExpand Up@@ -189,7 +226,10 @@ export const Form = {
 */
 Control: FormControl,
 PlainInput,
 PasswordInput,
 InputGroup,
 RadioGroup,
 Checkbox,
 SubmitButton: FormSubmit,
 ResetButton: FormReset,
};
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
chore(clerk-js): Introduce Form.PasswordInput, InputGroup, Checkbox by panteliselef · Pull Request #2087 · clerk/javascript · GitHub
Skip to content
chore(clerk-js): Introduce Form.PasswordInput, InputGroup, Checkbox#2087

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

panteliselef
merged 5 commits into

from

Nov 16, 2023
 Merged


chore(clerk-js): Introduce Form.PasswordInput, InputGroup, Checkbox
#2087
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


5 commits


Select commit
Hold shift + click to select a range
8103254

chore(clerk-js): Introduce Form.PasswordInput, InputGroup, Checkbox


panteliselef Nov 8, 2023
0e6cf82

chore(clerk-js): Use Form.PasswordInput, InputGroup, Checkbox as repl…


panteliselef Nov 8, 2023
771a0e9

chore(clerk-js): Dropping Radio, Checkbox, Password support from Form…


panteliselef Nov 8, 2023
5565130

chore(clerk-js): Add changeset


panteliselef Nov 9, 2023
9cbb4a6

chore(clerk-js): Apply changes to ui.retheme


panteliselef Nov 13, 2023

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/proud-hairs-check.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': patch
---

Refactor of internal input group, password field, and checkbox inputs in forms.

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifiedDomainPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -263,7 +263,7 @@ export const VerifiedDomainPage = withCardStateProvider(() => {

 {allowsEdit && (
 <Form.ControlRow elementId={deletePending.id}>
 <Form.Control {...deletePending.props} />
 <Form.Checkbox {...deletePending.props} />
 </Form.ControlRow>
 )}

Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifyDomainPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -151,11 +151,11 @@ export const VerifyDomainPage = withCardStateProvider(() => {
 >
 <Form.Root onSubmit={onSubmitPrepare}>
 <Form.ControlRow elementId={emailField.id}>
 <Form.Control
 <Form.InputGroup
 {...emailField.props}
 autoFocus
 groupSuffix={`@${domain.name}`}
required
 groupSuffix={emailDomainSuffix}
isRequired
 />
 </Form.ControlRow>
 <FormButtons isDisabled={!canSubmit} />
Expand Down

10 changes: 5 additions & 5 deletions
packages/clerk-js/src/ui.retheme/components/SignIn/ResetPassword.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -88,7 +88,7 @@ export const _ResetPassword = () => {
 return console.error(clerkInvalidFAPIResponse(status, supportEmail));
 }
 } catch (e) {
 handleError(e, [passwordField, confirmField], card.setError);
return handleError(e, [passwordField, confirmField], card.setError);
 }
 };

Expand DownExpand Up@@ -117,14 +117,14 @@ export const _ResetPassword = () => {
 style={{ display: 'none' }}
 />
 <Form.ControlRow elementId={passwordField.id}>
 <Form.Control
 <Form.PasswordInput
 {...passwordField.props}
required
isRequired
 autoFocus
 />
 </Form.ControlRow>
 <Form.ControlRow elementId={confirmField.id}>
 <Form.Control
 <Form.PasswordInput
 {...confirmField.props}
 onChange={e => {
 if (e.target.value) {
Expand All@@ -136,7 +136,7 @@ export const _ResetPassword = () => {
 </Form.ControlRow>
 {!requiresNewPassword && (
 <Form.ControlRow elementId={sessionsField.id}>
 <Form.Control {...sessionsField.props} />
 <Form.Checkbox {...sessionsField.props} />
 </Form.ControlRow>
 )}
 <Form.SubmitButton
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorOnePasswordCard.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -117,7 +117,7 @@ export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps)
 style={{ display: 'none' }}
 />
 <Form.ControlRow elementId={passwordControl.id}>
 <Form.Control
 <Form.PasswordInput
 {...passwordControl.props}
 autoFocus
 />
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui.retheme/components/SignIn/SignInStart.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -368,7 +368,7 @@ const InstantPasswordRow = ({ field }: { field?: FormControlState<'password'> })
 !field.value && !autofilled ? { opacity: 0, height: 0, pointerEvents: 'none', marginTop: '-1rem' } : undefined
 }
 >
 <Form.Control
 <Form.PasswordInput
 {...field.props}
 ref={ref}
 tabIndex={!field.value ? -1 : undefined}
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui.retheme/components/SignUp/SignUpForm.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -82,7 +82,7 @@ export const SignUpForm = (props: SignUpFormProps) => {
 )}
 {shouldShow('password') && (
 <Form.ControlRow elementId='password'>
 <Form.Control
 <Form.PasswordInput
 {...{
 ...formState.password.props,
 isRequired: fields.password!.required,
Expand Down

15 changes: 9 additions & 6 deletions
packages/clerk-js/src/ui.retheme/components/UserProfile/PasswordPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -143,39 +143,42 @@ export const PasswordPage = withCardStateProvider(() => {
 />
 {user.passwordEnabled && (
 <Form.ControlRow elementId={currentPasswordField.id}>
 <Form.Control
 <Form.PasswordInput
 {...currentPasswordField.props}
 minLength={6}
required
isRequired
 autoFocus
 isDisabled={passwordEditDisabled}
 />
 </Form.ControlRow>
 )}
 <Form.ControlRow elementId={passwordField.id}>
 <Form.Control
 <Form.PasswordInput
 {...passwordField.props}
 minLength={6}
required
isRequired
 autoFocus={!user.passwordEnabled}
 isDisabled={passwordEditDisabled}
 />
 </Form.ControlRow>
 <Form.ControlRow elementId={confirmField.id}>
 <Form.Control
 <Form.PasswordInput
 {...confirmField.props}
 onChange={e => {
 if (e.target.value) {
 setConfirmPasswordFeedback(e.target.value);
 }
 return confirmField.props.onChange(e);
 }}
 isRequired
 isDisabled={passwordEditDisabled}
 />
 </Form.ControlRow>
 <Form.ControlRow elementId={sessionsField.id}>
 <Form.Control
 <Form.Checkbox
 {...sessionsField.props}
 //TODO: localize this
 description={'It is advised to logout of all other devices that may user an old password'}
 isDisabled={passwordEditDisabled}
 />
 </Form.ControlRow>
Expand Down

8 changes: 4 additions & 4 deletions
packages/clerk-js/src/ui.retheme/components/UserProfile/__tests__/PasswordPage.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -79,7 +79,7 @@ describe('PasswordPage', () => {

 expect(screen.getByLabelText(/new password/i)).toBeDisabled();
 expect(screen.getByLabelText(/confirm password/i)).toBeDisabled();
 expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).toBeDisabled();
 expect(screen.getByRole('checkbox', { name: /sign out of all other devices/i })).toBeDisabled();

 expect(
 screen.getByText(
Expand DownExpand Up@@ -113,7 +113,7 @@ describe('PasswordPage', () => {

 expect(screen.getByLabelText(/new password/i)).not.toBeDisabled();
 expect(screen.getByLabelText(/confirm password/i)).not.toBeDisabled();
 expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).not.toBeDisabled();
 expect(screen.getByRole('checkbox', { name: /sign out of all other devices/i })).not.toBeDisabled();

 expect(
 screen.queryByText(
Expand DownExpand Up@@ -149,7 +149,7 @@ describe('PasswordPage', () => {
 expect(screen.getByLabelText(/current password/i)).toBeDisabled();
 expect(screen.getByLabelText(/new password/i)).toBeDisabled();
 expect(screen.getByLabelText(/confirm password/i)).toBeDisabled();
 expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).toBeDisabled();
 expect(screen.getByRole('checkbox', { name: /sign out of all other devices/i })).toBeDisabled();

 expect(
 screen.getByText(
Expand DownExpand Up@@ -185,7 +185,7 @@ describe('PasswordPage', () => {
 expect(screen.getByLabelText(/current password/i)).not.toBeDisabled();
 expect(screen.getByLabelText(/new password/i)).not.toBeDisabled();
 expect(screen.getByLabelText(/confirm password/i)).not.toBeDisabled();
 expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).not.toBeDisabled();
 expect(screen.getByRole('checkbox', { name: /sign out of all other devices/i })).not.toBeDisabled();

 expect(
 screen.queryByText(
Expand Down

94 changes: 91 additions & 3 deletions
packages/clerk-js/src/ui.retheme/elements/FieldControl.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -22,7 +22,9 @@ import { useFormControlFeedback } from '../utils';
import { useCardState } from './contexts';
import type { FormFeedbackProps } from './FormControl';
import { FormFeedback } from './FormControl';
import { RadioItem } from './RadioGroup';
import { InputGroup } from './InputGroup';
import { PasswordInput } from './PasswordInput';
import { RadioItem, RadioLabel } from './RadioGroup';

type FormControlProps = Omit<PropsOfComponent<typeof Input>, 'label' | 'placeholder' | 'disabled' | 'required'> &
 ReturnType<typeof useFormControlUtil<FieldId>>['props'];
Expand All@@ -37,7 +39,6 @@ const Root = (props: PropsWithChildren<FormControlProps>) => {
 setInfo,
 setSuccess,
 setWarning,
 setHasPassedComplexity,
 clearFeedback,
 feedbackType,
 feedback,
Expand All@@ -63,7 +64,6 @@ const Root = (props: PropsWithChildren<FormControlProps>) => {
 setSuccess={setSuccess}
 setWarning={setWarning}
 setInfo={setInfo}
 setHasPassedComplexity={setHasPassedComplexity}
 clearFeedback={clearFeedback}
 sx={sx}
 >
Expand DownExpand Up@@ -199,6 +199,66 @@ const FieldFeedback = (props: Pick<FormFeedbackProps, 'elementDescriptors'>) =>
 );
};

const PasswordInputElement = forwardRef<HTMLInputElement>((_, ref) => {
 const { t } = useLocalizations();
 const formField = useFormField();
 const { placeholder, ...inputProps } = sanitizeInputProps(formField, [
 'validatePassword',
 'setError',
 'setWarning',
 'setSuccess',
 'setInfo',
 'setHasPassedComplexity',
 ]);

 return (
 // @ts-expect-error
 <PasswordInput
 ref={ref}
 elementDescriptor={descriptors.formFieldInput}
 elementId={descriptors.formFieldInput.setId(formField.fieldId)}
 {...inputProps}
 placeholder={t(placeholder)}
 />
 );
});

const CheckboxIndicator = forwardRef<HTMLInputElement>((_, ref) => {
 const formField = useFormField();
 const { placeholder, ...inputProps } = sanitizeInputProps(formField);

 return (
 <Input
 ref={ref}
 {...inputProps}
 elementDescriptor={descriptors.formFieldInput}
 elementId={descriptors.formFieldInput.setId(formField.fieldId)}
 focusRing={false}
 sx={t => ({
 width: 'fit-content',
 marginTop: t.space.$0x5,
 })}
 type='checkbox'
 />
 );
});

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

 if (!label) {
 return null;
 }

 return (
 <RadioLabel
 label={label}
 id={id}
 description={props.description}
 />
 );
};

const InputElement = forwardRef<HTMLInputElement>((_, ref) => {
 const { t } = useLocalizations();
 const formField = useFormField();
Expand All@@ -214,12 +274,40 @@ const InputElement = forwardRef<HTMLInputElement>((_, ref) => {
 );
});

const InputGroupElement = forwardRef<
 HTMLInputElement,
 {
 groupPrefix?: string;
 groupSuffix?: string;
 }
>((props, ref) => {
 const { t } = useLocalizations();
 const formField = useFormField();
 const { placeholder, ...inputProps } = sanitizeInputProps(formField);

 return (
 <InputGroup
 ref={ref}
 elementDescriptor={descriptors.formFieldInput}
 elementId={descriptors.formFieldInput.setId(formField.fieldId)}
 {...inputProps}
 groupPrefix={props.groupPrefix}
 groupSuffix={props.groupSuffix}
 placeholder={t(placeholder)}
 />
 );
});

export const Field = {
 Root: Root,
 Label: FieldLabel,
 LabelRow: FieldLabelRow,
 Input: InputElement,
 PasswordInput: PasswordInputElement,
 InputGroup: InputGroupElement,
 RadioItem: RadioItem,
 CheckboxIndicator: CheckboxIndicator,
 CheckboxLabel: CheckboxLabel,
 Action: FieldAction,
 AsOptional: FieldOptionalLabel,
 LabelIcon: FieldLabelIcon,
Expand Down

40 changes: 40 additions & 0 deletions
packages/clerk-js/src/ui.retheme/elements/Form.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -156,6 +156,43 @@ const PlainInput = (props: CommonInputProps) => {
 );
};

const PasswordInput = (props: CommonInputProps) => {
 return (
 <CommonInputWrapper {...props}>
 <Field.PasswordInput />
 </CommonInputWrapper>
 );
};

const InputGroup = (
 props: CommonInputProps & {
 groupPrefix?: string;
 groupSuffix?: string;
 },
) => {
 const { groupSuffix, groupPrefix, ...fieldProps } = props;
 return (
 <CommonInputWrapper {...fieldProps}>
 <Field.InputGroup {...{ groupSuffix, groupPrefix }} />
 </CommonInputWrapper>
 );
};

const Checkbox = (
 props: CommonFieldRootProps & {
 description?: string | LocalizationKey;
 },
) => {
 return (
 <Field.Root {...props}>
 <Flex align='start'>
 <Field.CheckboxIndicator />
 <Field.CheckboxLabel description={props.description} />
 </Flex>
 </Field.Root>
 );
};

const RadioGroup = (
 props: Omit<PropsOfComponent<typeof Field.Root>, 'infoText' | 'type' | 'validatePassword' | 'label' | 'placeholder'>,
) => {
Expand DownExpand Up@@ -189,7 +226,10 @@ export const Form = {
 */
 Control: FormControl,
 PlainInput,
 PasswordInput,
 InputGroup,
 RadioGroup,
 Checkbox,
 SubmitButton: FormSubmit,
 ResetButton: FormReset,
};
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
chore(clerk-js): Introduce Form.PasswordInput, InputGroup, Checkbox by panteliselef · Pull Request #2087 · clerk/javascript · GitHub
Skip to content
chore(clerk-js): Introduce Form.PasswordInput, InputGroup, Checkbox#2087

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

panteliselef
merged 5 commits into

from

Nov 16, 2023
 Merged


chore(clerk-js): Introduce Form.PasswordInput, InputGroup, Checkbox
#2087
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


5 commits


Select commit
Hold shift + click to select a range
8103254

chore(clerk-js): Introduce Form.PasswordInput, InputGroup, Checkbox


panteliselef Nov 8, 2023
0e6cf82

chore(clerk-js): Use Form.PasswordInput, InputGroup, Checkbox as repl…


panteliselef Nov 8, 2023
771a0e9

chore(clerk-js): Dropping Radio, Checkbox, Password support from Form…


panteliselef Nov 8, 2023
5565130

chore(clerk-js): Add changeset


panteliselef Nov 9, 2023
9cbb4a6

chore(clerk-js): Apply changes to ui.retheme


panteliselef Nov 13, 2023

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/proud-hairs-check.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': patch
---

Refactor of internal input group, password field, and checkbox inputs in forms.

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifiedDomainPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -263,7 +263,7 @@ export const VerifiedDomainPage = withCardStateProvider(() => {

 {allowsEdit && (
 <Form.ControlRow elementId={deletePending.id}>
 <Form.Control {...deletePending.props} />
 <Form.Checkbox {...deletePending.props} />
 </Form.ControlRow>
 )}

Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifyDomainPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -151,11 +151,11 @@ export const VerifyDomainPage = withCardStateProvider(() => {
 >
 <Form.Root onSubmit={onSubmitPrepare}>
 <Form.ControlRow elementId={emailField.id}>
 <Form.Control
 <Form.InputGroup
 {...emailField.props}
 autoFocus
 groupSuffix={`@${domain.name}`}
required
 groupSuffix={emailDomainSuffix}
isRequired
 />
 </Form.ControlRow>
 <FormButtons isDisabled={!canSubmit} />
Expand Down

10 changes: 5 additions & 5 deletions
packages/clerk-js/src/ui.retheme/components/SignIn/ResetPassword.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -88,7 +88,7 @@ export const _ResetPassword = () => {
 return console.error(clerkInvalidFAPIResponse(status, supportEmail));
 }
 } catch (e) {
 handleError(e, [passwordField, confirmField], card.setError);
return handleError(e, [passwordField, confirmField], card.setError);
 }
 };

Expand DownExpand Up@@ -117,14 +117,14 @@ export const _ResetPassword = () => {
 style={{ display: 'none' }}
 />
 <Form.ControlRow elementId={passwordField.id}>
 <Form.Control
 <Form.PasswordInput
 {...passwordField.props}
required
isRequired
 autoFocus
 />
 </Form.ControlRow>
 <Form.ControlRow elementId={confirmField.id}>
 <Form.Control
 <Form.PasswordInput
 {...confirmField.props}
 onChange={e => {
 if (e.target.value) {
Expand All@@ -136,7 +136,7 @@ export const _ResetPassword = () => {
 </Form.ControlRow>
 {!requiresNewPassword && (
 <Form.ControlRow elementId={sessionsField.id}>
 <Form.Control {...sessionsField.props} />
 <Form.Checkbox {...sessionsField.props} />
 </Form.ControlRow>
 )}
 <Form.SubmitButton
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorOnePasswordCard.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -117,7 +117,7 @@ export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps)
 style={{ display: 'none' }}
 />
 <Form.ControlRow elementId={passwordControl.id}>
 <Form.Control
 <Form.PasswordInput
 {...passwordControl.props}
 autoFocus
 />
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui.retheme/components/SignIn/SignInStart.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -368,7 +368,7 @@ const InstantPasswordRow = ({ field }: { field?: FormControlState<'password'> })
 !field.value && !autofilled ? { opacity: 0, height: 0, pointerEvents: 'none', marginTop: '-1rem' } : undefined
 }
 >
 <Form.Control
 <Form.PasswordInput
 {...field.props}
 ref={ref}
 tabIndex={!field.value ? -1 : undefined}
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui.retheme/components/SignUp/SignUpForm.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -82,7 +82,7 @@ export const SignUpForm = (props: SignUpFormProps) => {
 )}
 {shouldShow('password') && (
 <Form.ControlRow elementId='password'>
 <Form.Control
 <Form.PasswordInput
 {...{
 ...formState.password.props,
 isRequired: fields.password!.required,
Expand Down

15 changes: 9 additions & 6 deletions
packages/clerk-js/src/ui.retheme/components/UserProfile/PasswordPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -143,39 +143,42 @@ export const PasswordPage = withCardStateProvider(() => {
 />
 {user.passwordEnabled && (
 <Form.ControlRow elementId={currentPasswordField.id}>
 <Form.Control
 <Form.PasswordInput
 {...currentPasswordField.props}
 minLength={6}
required
isRequired
 autoFocus
 isDisabled={passwordEditDisabled}
 />
 </Form.ControlRow>
 )}
 <Form.ControlRow elementId={passwordField.id}>
 <Form.Control
 <Form.PasswordInput
 {...passwordField.props}
 minLength={6}
required
isRequired
 autoFocus={!user.passwordEnabled}
 isDisabled={passwordEditDisabled}
 />
 </Form.ControlRow>
 <Form.ControlRow elementId={confirmField.id}>
 <Form.Control
 <Form.PasswordInput
 {...confirmField.props}
 onChange={e => {
 if (e.target.value) {
 setConfirmPasswordFeedback(e.target.value);
 }
 return confirmField.props.onChange(e);
 }}
 isRequired
 isDisabled={passwordEditDisabled}
 />
 </Form.ControlRow>
 <Form.ControlRow elementId={sessionsField.id}>
 <Form.Control
 <Form.Checkbox
 {...sessionsField.props}
 //TODO: localize this
 description={'It is advised to logout of all other devices that may user an old password'}
 isDisabled={passwordEditDisabled}
 />
 </Form.ControlRow>
Expand Down

8 changes: 4 additions & 4 deletions
packages/clerk-js/src/ui.retheme/components/UserProfile/__tests__/PasswordPage.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -79,7 +79,7 @@ describe('PasswordPage', () => {

 expect(screen.getByLabelText(/new password/i)).toBeDisabled();
 expect(screen.getByLabelText(/confirm password/i)).toBeDisabled();
 expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).toBeDisabled();
 expect(screen.getByRole('checkbox', { name: /sign out of all other devices/i })).toBeDisabled();

 expect(
 screen.getByText(
Expand DownExpand Up@@ -113,7 +113,7 @@ describe('PasswordPage', () => {

 expect(screen.getByLabelText(/new password/i)).not.toBeDisabled();
 expect(screen.getByLabelText(/confirm password/i)).not.toBeDisabled();
 expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).not.toBeDisabled();
 expect(screen.getByRole('checkbox', { name: /sign out of all other devices/i })).not.toBeDisabled();

 expect(
 screen.queryByText(
Expand DownExpand Up@@ -149,7 +149,7 @@ describe('PasswordPage', () => {
 expect(screen.getByLabelText(/current password/i)).toBeDisabled();
 expect(screen.getByLabelText(/new password/i)).toBeDisabled();
 expect(screen.getByLabelText(/confirm password/i)).toBeDisabled();
 expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).toBeDisabled();
 expect(screen.getByRole('checkbox', { name: /sign out of all other devices/i })).toBeDisabled();

 expect(
 screen.getByText(
Expand DownExpand Up@@ -185,7 +185,7 @@ describe('PasswordPage', () => {
 expect(screen.getByLabelText(/current password/i)).not.toBeDisabled();
 expect(screen.getByLabelText(/new password/i)).not.toBeDisabled();
 expect(screen.getByLabelText(/confirm password/i)).not.toBeDisabled();
 expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).not.toBeDisabled();
 expect(screen.getByRole('checkbox', { name: /sign out of all other devices/i })).not.toBeDisabled();

 expect(
 screen.queryByText(
Expand Down

94 changes: 91 additions & 3 deletions
packages/clerk-js/src/ui.retheme/elements/FieldControl.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -22,7 +22,9 @@ import { useFormControlFeedback } from '../utils';
import { useCardState } from './contexts';
import type { FormFeedbackProps } from './FormControl';
import { FormFeedback } from './FormControl';
import { RadioItem } from './RadioGroup';
import { InputGroup } from './InputGroup';
import { PasswordInput } from './PasswordInput';
import { RadioItem, RadioLabel } from './RadioGroup';

type FormControlProps = Omit<PropsOfComponent<typeof Input>, 'label' | 'placeholder' | 'disabled' | 'required'> &
 ReturnType<typeof useFormControlUtil<FieldId>>['props'];
Expand All@@ -37,7 +39,6 @@ const Root = (props: PropsWithChildren<FormControlProps>) => {
 setInfo,
 setSuccess,
 setWarning,
 setHasPassedComplexity,
 clearFeedback,
 feedbackType,
 feedback,
Expand All@@ -63,7 +64,6 @@ const Root = (props: PropsWithChildren<FormControlProps>) => {
 setSuccess={setSuccess}
 setWarning={setWarning}
 setInfo={setInfo}
 setHasPassedComplexity={setHasPassedComplexity}
 clearFeedback={clearFeedback}
 sx={sx}
 >
Expand DownExpand Up@@ -199,6 +199,66 @@ const FieldFeedback = (props: Pick<FormFeedbackProps, 'elementDescriptors'>) =>
 );
};

const PasswordInputElement = forwardRef<HTMLInputElement>((_, ref) => {
 const { t } = useLocalizations();
 const formField = useFormField();
 const { placeholder, ...inputProps } = sanitizeInputProps(formField, [
 'validatePassword',
 'setError',
 'setWarning',
 'setSuccess',
 'setInfo',
 'setHasPassedComplexity',
 ]);

 return (
 // @ts-expect-error
 <PasswordInput
 ref={ref}
 elementDescriptor={descriptors.formFieldInput}
 elementId={descriptors.formFieldInput.setId(formField.fieldId)}
 {...inputProps}
 placeholder={t(placeholder)}
 />
 );
});

const CheckboxIndicator = forwardRef<HTMLInputElement>((_, ref) => {
 const formField = useFormField();
 const { placeholder, ...inputProps } = sanitizeInputProps(formField);

 return (
 <Input
 ref={ref}
 {...inputProps}
 elementDescriptor={descriptors.formFieldInput}
 elementId={descriptors.formFieldInput.setId(formField.fieldId)}
 focusRing={false}
 sx={t => ({
 width: 'fit-content',
 marginTop: t.space.$0x5,
 })}
 type='checkbox'
 />
 );
});

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

 if (!label) {
 return null;
 }

 return (
 <RadioLabel
 label={label}
 id={id}
 description={props.description}
 />
 );
};

const InputElement = forwardRef<HTMLInputElement>((_, ref) => {
 const { t } = useLocalizations();
 const formField = useFormField();
Expand All@@ -214,12 +274,40 @@ const InputElement = forwardRef<HTMLInputElement>((_, ref) => {
 );
});

const InputGroupElement = forwardRef<
 HTMLInputElement,
 {
 groupPrefix?: string;
 groupSuffix?: string;
 }
>((props, ref) => {
 const { t } = useLocalizations();
 const formField = useFormField();
 const { placeholder, ...inputProps } = sanitizeInputProps(formField);

 return (
 <InputGroup
 ref={ref}
 elementDescriptor={descriptors.formFieldInput}
 elementId={descriptors.formFieldInput.setId(formField.fieldId)}
 {...inputProps}
 groupPrefix={props.groupPrefix}
 groupSuffix={props.groupSuffix}
 placeholder={t(placeholder)}
 />
 );
});

export const Field = {
 Root: Root,
 Label: FieldLabel,
 LabelRow: FieldLabelRow,
 Input: InputElement,
 PasswordInput: PasswordInputElement,
 InputGroup: InputGroupElement,
 RadioItem: RadioItem,
 CheckboxIndicator: CheckboxIndicator,
 CheckboxLabel: CheckboxLabel,
 Action: FieldAction,
 AsOptional: FieldOptionalLabel,
 LabelIcon: FieldLabelIcon,
Expand Down

40 changes: 40 additions & 0 deletions
packages/clerk-js/src/ui.retheme/elements/Form.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -156,6 +156,43 @@ const PlainInput = (props: CommonInputProps) => {
 );
};

const PasswordInput = (props: CommonInputProps) => {
 return (
 <CommonInputWrapper {...props}>
 <Field.PasswordInput />
 </CommonInputWrapper>
 );
};

const InputGroup = (
 props: CommonInputProps & {
 groupPrefix?: string;
 groupSuffix?: string;
 },
) => {
 const { groupSuffix, groupPrefix, ...fieldProps } = props;
 return (
 <CommonInputWrapper {...fieldProps}>
 <Field.InputGroup {...{ groupSuffix, groupPrefix }} />
 </CommonInputWrapper>
 );
};

const Checkbox = (
 props: CommonFieldRootProps & {
 description?: string | LocalizationKey;
 },
) => {
 return (
 <Field.Root {...props}>
 <Flex align='start'>
 <Field.CheckboxIndicator />
 <Field.CheckboxLabel description={props.description} />
 </Flex>
 </Field.Root>
 );
};

const RadioGroup = (
 props: Omit<PropsOfComponent<typeof Field.Root>, 'infoText' | 'type' | 'validatePassword' | 'label' | 'placeholder'>,
) => {
Expand DownExpand Up@@ -189,7 +226,10 @@ export const Form = {
 */
 Control: FormControl,
 PlainInput,
 PasswordInput,
 InputGroup,
 RadioGroup,
 Checkbox,
 SubmitButton: FormSubmit,
 ResetButton: FormReset,
};
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
chore(clerk-js): Introduce Form.PasswordInput, InputGroup, Checkbox by panteliselef · Pull Request #2087 · clerk/javascript · GitHub
Skip to content
chore(clerk-js): Introduce Form.PasswordInput, InputGroup, Checkbox#2087

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

panteliselef
merged 5 commits into

from

Nov 16, 2023
 Merged


chore(clerk-js): Introduce Form.PasswordInput, InputGroup, Checkbox
#2087
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


5 commits


Select commit
Hold shift + click to select a range
8103254

chore(clerk-js): Introduce Form.PasswordInput, InputGroup, Checkbox


panteliselef Nov 8, 2023
0e6cf82

chore(clerk-js): Use Form.PasswordInput, InputGroup, Checkbox as repl…


panteliselef Nov 8, 2023
771a0e9

chore(clerk-js): Dropping Radio, Checkbox, Password support from Form…


panteliselef Nov 8, 2023
5565130

chore(clerk-js): Add changeset


panteliselef Nov 9, 2023
9cbb4a6

chore(clerk-js): Apply changes to ui.retheme


panteliselef Nov 13, 2023

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/proud-hairs-check.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': patch
---

Refactor of internal input group, password field, and checkbox inputs in forms.

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifiedDomainPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -263,7 +263,7 @@ export const VerifiedDomainPage = withCardStateProvider(() => {

 {allowsEdit && (
 <Form.ControlRow elementId={deletePending.id}>
 <Form.Control {...deletePending.props} />
 <Form.Checkbox {...deletePending.props} />
 </Form.ControlRow>
 )}

Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifyDomainPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -151,11 +151,11 @@ export const VerifyDomainPage = withCardStateProvider(() => {
 >
 <Form.Root onSubmit={onSubmitPrepare}>
 <Form.ControlRow elementId={emailField.id}>
 <Form.Control
 <Form.InputGroup
 {...emailField.props}
 autoFocus
 groupSuffix={`@${domain.name}`}
required
 groupSuffix={emailDomainSuffix}
isRequired
 />
 </Form.ControlRow>
 <FormButtons isDisabled={!canSubmit} />
Expand Down

10 changes: 5 additions & 5 deletions
packages/clerk-js/src/ui.retheme/components/SignIn/ResetPassword.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -88,7 +88,7 @@ export const _ResetPassword = () => {
 return console.error(clerkInvalidFAPIResponse(status, supportEmail));
 }
 } catch (e) {
 handleError(e, [passwordField, confirmField], card.setError);
return handleError(e, [passwordField, confirmField], card.setError);
 }
 };

Expand DownExpand Up@@ -117,14 +117,14 @@ export const _ResetPassword = () => {
 style={{ display: 'none' }}
 />
 <Form.ControlRow elementId={passwordField.id}>
 <Form.Control
 <Form.PasswordInput
 {...passwordField.props}
required
isRequired
 autoFocus
 />
 </Form.ControlRow>
 <Form.ControlRow elementId={confirmField.id}>
 <Form.Control
 <Form.PasswordInput
 {...confirmField.props}
 onChange={e => {
 if (e.target.value) {
Expand All@@ -136,7 +136,7 @@ export const _ResetPassword = () => {
 </Form.ControlRow>
 {!requiresNewPassword && (
 <Form.ControlRow elementId={sessionsField.id}>
 <Form.Control {...sessionsField.props} />
 <Form.Checkbox {...sessionsField.props} />
 </Form.ControlRow>
 )}
 <Form.SubmitButton
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui.retheme/components/SignIn/SignInFactorOnePasswordCard.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -117,7 +117,7 @@ export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps)
 style={{ display: 'none' }}
 />
 <Form.ControlRow elementId={passwordControl.id}>
 <Form.Control
 <Form.PasswordInput
 {...passwordControl.props}
 autoFocus
 />
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui.retheme/components/SignIn/SignInStart.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -368,7 +368,7 @@ const InstantPasswordRow = ({ field }: { field?: FormControlState<'password'> })
 !field.value && !autofilled ? { opacity: 0, height: 0, pointerEvents: 'none', marginTop: '-1rem' } : undefined
 }
 >
 <Form.Control
 <Form.PasswordInput
 {...field.props}
 ref={ref}
 tabIndex={!field.value ? -1 : undefined}
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui.retheme/components/SignUp/SignUpForm.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -82,7 +82,7 @@ export const SignUpForm = (props: SignUpFormProps) => {
 )}
 {shouldShow('password') && (
 <Form.ControlRow elementId='password'>
 <Form.Control
 <Form.PasswordInput
 {...{
 ...formState.password.props,
 isRequired: fields.password!.required,
Expand Down

15 changes: 9 additions & 6 deletions
packages/clerk-js/src/ui.retheme/components/UserProfile/PasswordPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -143,39 +143,42 @@ export const PasswordPage = withCardStateProvider(() => {
 />
 {user.passwordEnabled && (
 <Form.ControlRow elementId={currentPasswordField.id}>
 <Form.Control
 <Form.PasswordInput
 {...currentPasswordField.props}
 minLength={6}
required
isRequired
 autoFocus
 isDisabled={passwordEditDisabled}
 />
 </Form.ControlRow>
 )}
 <Form.ControlRow elementId={passwordField.id}>
 <Form.Control
 <Form.PasswordInput
 {...passwordField.props}
 minLength={6}
required
isRequired
 autoFocus={!user.passwordEnabled}
 isDisabled={passwordEditDisabled}
 />
 </Form.ControlRow>
 <Form.ControlRow elementId={confirmField.id}>
 <Form.Control
 <Form.PasswordInput
 {...confirmField.props}
 onChange={e => {
 if (e.target.value) {
 setConfirmPasswordFeedback(e.target.value);
 }
 return confirmField.props.onChange(e);
 }}
 isRequired
 isDisabled={passwordEditDisabled}
 />
 </Form.ControlRow>
 <Form.ControlRow elementId={sessionsField.id}>
 <Form.Control
 <Form.Checkbox
 {...sessionsField.props}
 //TODO: localize this
 description={'It is advised to logout of all other devices that may user an old password'}
 isDisabled={passwordEditDisabled}
 />
 </Form.ControlRow>
Expand Down

8 changes: 4 additions & 4 deletions
packages/clerk-js/src/ui.retheme/components/UserProfile/__tests__/PasswordPage.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -79,7 +79,7 @@ describe('PasswordPage', () => {

 expect(screen.getByLabelText(/new password/i)).toBeDisabled();
 expect(screen.getByLabelText(/confirm password/i)).toBeDisabled();
 expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).toBeDisabled();
 expect(screen.getByRole('checkbox', { name: /sign out of all other devices/i })).toBeDisabled();

 expect(
 screen.getByText(
Expand DownExpand Up@@ -113,7 +113,7 @@ describe('PasswordPage', () => {

 expect(screen.getByLabelText(/new password/i)).not.toBeDisabled();
 expect(screen.getByLabelText(/confirm password/i)).not.toBeDisabled();
 expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).not.toBeDisabled();
 expect(screen.getByRole('checkbox', { name: /sign out of all other devices/i })).not.toBeDisabled();

 expect(
 screen.queryByText(
Expand DownExpand Up@@ -149,7 +149,7 @@ describe('PasswordPage', () => {
 expect(screen.getByLabelText(/current password/i)).toBeDisabled();
 expect(screen.getByLabelText(/new password/i)).toBeDisabled();
 expect(screen.getByLabelText(/confirm password/i)).toBeDisabled();
 expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).toBeDisabled();
 expect(screen.getByRole('checkbox', { name: /sign out of all other devices/i })).toBeDisabled();

 expect(
 screen.getByText(
Expand DownExpand Up@@ -185,7 +185,7 @@ describe('PasswordPage', () => {
 expect(screen.getByLabelText(/current password/i)).not.toBeDisabled();
 expect(screen.getByLabelText(/new password/i)).not.toBeDisabled();
 expect(screen.getByLabelText(/confirm password/i)).not.toBeDisabled();
 expect(screen.getByRole('checkbox', { name: 'Sign out of all other devices' })).not.toBeDisabled();
 expect(screen.getByRole('checkbox', { name: /sign out of all other devices/i })).not.toBeDisabled();

 expect(
 screen.queryByText(
Expand Down

94 changes: 91 additions & 3 deletions
packages/clerk-js/src/ui.retheme/elements/FieldControl.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -22,7 +22,9 @@ import { useFormControlFeedback } from '../utils';
import { useCardState } from './contexts';
import type { FormFeedbackProps } from './FormControl';
import { FormFeedback } from './FormControl';
import { RadioItem } from './RadioGroup';
import { InputGroup } from './InputGroup';
import { PasswordInput } from './PasswordInput';
import { RadioItem, RadioLabel } from './RadioGroup';

type FormControlProps = Omit<PropsOfComponent<typeof Input>, 'label' | 'placeholder' | 'disabled' | 'required'> &
 ReturnType<typeof useFormControlUtil<FieldId>>['props'];
Expand All@@ -37,7 +39,6 @@ const Root = (props: PropsWithChildren<FormControlProps>) => {
 setInfo,
 setSuccess,
 setWarning,
 setHasPassedComplexity,
 clearFeedback,
 feedbackType,
 feedback,
Expand All@@ -63,7 +64,6 @@ const Root = (props: PropsWithChildren<FormControlProps>) => {
 setSuccess={setSuccess}
 setWarning={setWarning}
 setInfo={setInfo}
 setHasPassedComplexity={setHasPassedComplexity}
 clearFeedback={clearFeedback}
 sx={sx}
 >
Expand DownExpand Up@@ -199,6 +199,66 @@ const FieldFeedback = (props: Pick<FormFeedbackProps, 'elementDescriptors'>) =>
 );
};

const PasswordInputElement = forwardRef<HTMLInputElement>((_, ref) => {
 const { t } = useLocalizations();
 const formField = useFormField();
 const { placeholder, ...inputProps } = sanitizeInputProps(formField, [
 'validatePassword',
 'setError',
 'setWarning',
 'setSuccess',
 'setInfo',
 'setHasPassedComplexity',
 ]);

 return (
 // @ts-expect-error
 <PasswordInput
 ref={ref}
 elementDescriptor={descriptors.formFieldInput}
 elementId={descriptors.formFieldInput.setId(formField.fieldId)}
 {...inputProps}
 placeholder={t(placeholder)}
 />
 );
});

const CheckboxIndicator = forwardRef<HTMLInputElement>((_, ref) => {
 const formField = useFormField();
 const { placeholder, ...inputProps } = sanitizeInputProps(formField);

 return (
 <Input
 ref={ref}
 {...inputProps}
 elementDescriptor={descriptors.formFieldInput}
 elementId={descriptors.formFieldInput.setId(formField.fieldId)}
 focusRing={false}
 sx={t => ({
 width: 'fit-content',
 marginTop: t.space.$0x5,
 })}
 type='checkbox'
 />
 );
});

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

 if (!label) {
 return null;
 }

 return (
 <RadioLabel
 label={label}
 id={id}
 description={props.description}
 />
 );
};

const InputElement = forwardRef<HTMLInputElement>((_, ref) => {
 const { t } = useLocalizations();
 const formField = useFormField();
Expand All@@ -214,12 +274,40 @@ const InputElement = forwardRef<HTMLInputElement>((_, ref) => {
 );
});

const InputGroupElement = forwardRef<
 HTMLInputElement,
 {
 groupPrefix?: string;
 groupSuffix?: string;
 }
>((props, ref) => {
 const { t } = useLocalizations();
 const formField = useFormField();
 const { placeholder, ...inputProps } = sanitizeInputProps(formField);

 return (
 <InputGroup
 ref={ref}
 elementDescriptor={descriptors.formFieldInput}
 elementId={descriptors.formFieldInput.setId(formField.fieldId)}
 {...inputProps}
 groupPrefix={props.groupPrefix}
 groupSuffix={props.groupSuffix}
 placeholder={t(placeholder)}
 />
 );
});

export const Field = {
 Root: Root,
 Label: FieldLabel,
 LabelRow: FieldLabelRow,
 Input: InputElement,
 PasswordInput: PasswordInputElement,
 InputGroup: InputGroupElement,
 RadioItem: RadioItem,
 CheckboxIndicator: CheckboxIndicator,
 CheckboxLabel: CheckboxLabel,
 Action: FieldAction,
 AsOptional: FieldOptionalLabel,
 LabelIcon: FieldLabelIcon,
Expand Down

40 changes: 40 additions & 0 deletions
packages/clerk-js/src/ui.retheme/elements/Form.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -156,6 +156,43 @@ const PlainInput = (props: CommonInputProps) => {
 );
};

const PasswordInput = (props: CommonInputProps) => {
 return (
 <CommonInputWrapper {...props}>
 <Field.PasswordInput />
 </CommonInputWrapper>
 );
};

const InputGroup = (
 props: CommonInputProps & {
 groupPrefix?: string;
 groupSuffix?: string;
 },
) => {
 const { groupSuffix, groupPrefix, ...fieldProps } = props;
 return (
 <CommonInputWrapper {...fieldProps}>
 <Field.InputGroup {...{ groupSuffix, groupPrefix }} />
 </CommonInputWrapper>
 );
};

const Checkbox = (
 props: CommonFieldRootProps & {
 description?: string | LocalizationKey;
 },
) => {
 return (
 <Field.Root {...props}>
 <Flex align='start'>
 <Field.CheckboxIndicator />
 <Field.CheckboxLabel description={props.description} />
 </Flex>
 </Field.Root>
 );
};

const RadioGroup = (
 props: Omit<PropsOfComponent<typeof Field.Root>, 'infoText' | 'type' | 'validatePassword' | 'label' | 'placeholder'>,
) => {
Expand DownExpand Up@@ -189,7 +226,10 @@ export const Form = {
 */
 Control: FormControl,
 PlainInput,
 PasswordInput,
 InputGroup,
 RadioGroup,
 Checkbox,
 SubmitButton: FormSubmit,
 ResetButton: FormReset,
};
Expand Down
Loading