feat(clerk-js): Improve password error feedback animations

.changeset/slimy-singers-glow.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': minor
+---
+
+Greatly improve the UX when users are creating their passwords. The hints below the input fields now have smoother animations and show more types of feedback based on different conditions. Additionally, the password validation is now debounced.

packages/clerk-js/src/core/constants.ts

@@ -20,3 +20,5 @@ export const ERROR_CODES = {
 
 export const SIGN_IN_INITIAL_VALUE_KEYS = ['email_address', 'phone_number', 'username'];
 export const SIGN_UP_INITIAL_VALUE_KEYS = ['email_address', 'phone_number', 'username', 'first_name', 'last_name'];
+
+export const DEBOUNCE_MS = 350;

packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx

@@ -53,19 +53,12 @@ export const InviteMembersForm = (props: InviteMembersFormProps) => {
   const {
     props: {
       /* eslint-disable @typescript-eslint/no-unused-vars */
-      enableErrorAfterBlur,
-      errorText,
-      hasLostFocus,
-      isFocused,
       setError,
       setWarning,
-      setSuccessful,
-      successfulText,
-      warningText,
+      setSuccess,
       validatePassword,
       setHasPassedComplexity,
       hasPassedComplexity,
-      /* eslint-enable @typescript-eslint/no-unused-vars */
       ...restEmailAddressProps
     },
   } = emailAddressField;

packages/clerk-js/src/ui/components/OrganizationProfile/ProfileSettingsPage.tsx

@@ -35,7 +35,7 @@ export const ProfileSettingsPage = withCardStateProvider(() => {
   }
 
   const dataChanged = organization.name !== nameField.value || organization.slug !== slugField.value;
-  const canSubmit = (dataChanged || avatarChanged) && !slugField.errorText;
+  const canSubmit = (dataChanged || avatarChanged) && slugField.feedbackType !== 'error';
 
   // eslint-disable-next-line @typescript-eslint/require-await
   const onSubmit = async (e: React.FormEvent) => {

packages/clerk-js/src/ui/components/OrganizationProfile/VerifyDomainPage.tsx

@@ -48,7 +48,7 @@ export const VerifyDomainPage = withCardStateProvider(() => {
     type: 'text',
     label: localizationKeys('formFieldLabel__organizationDomainEmailAddress'),
     placeholder: localizationKeys('formFieldInputPlaceholder__organizationDomainEmailAddress'),
-    informationText: localizationKeys('formFieldLabel__organizationDomainEmailAddressDescription'),
+    infoText: localizationKeys('formFieldLabel__organizationDomainEmailAddressDescription'),
   });
 
   const affiliationEmailAddressRef = useRef<string>();

packages/clerk-js/src/ui/components/SignIn/ResetPassword.tsx

@@ -5,7 +5,7 @@ import { withRedirectToHomeSingleSessionGuard } from '../../common';
 import { useCoreSignIn, useEnvironment } from '../../contexts';
 import { Col, descriptors, localizationKeys, useLocalizations } from '../../customizables';
 import { Card, CardAlert, Form, Header, useCardState, withCardStateProvider } from '../../elements';
-import { useConfirmPassword, usePasswordComplexity } from '../../hooks';
+import { useConfirmPassword } from '../../hooks';
 import { useSupportEmail } from '../../hooks/useSupportEmail';
 import { useRouter } from '../../router';
 import { createPasswordError, handleError, useFormControl } from '../../utils';
@@ -18,7 +18,6 @@ export const _ResetPassword = () => {
   const {
     userSettings: { passwordSettings },
   } = useEnvironment();
-  const { failedValidationsText } = usePasswordComplexity(passwordSettings);
 
   const { t, locale } = useLocalizations();
 
@@ -38,15 +37,13 @@ export const _ResetPassword = () => {
     label: localizationKeys('formFieldLabel__newPassword'),
     isRequired: true,
     validatePassword: true,
-    informationText: failedValidationsText,
     buildErrorMessage: errors => createPasswordError(errors, { t, locale, passwordSettings }),
   });
 
   const confirmField = useFormControl('confirmPassword', '', {
     type: 'password',
     label: localizationKeys('formFieldLabel__confirmPassword'),
     isRequired: true,
-    enableErrorAfterBlur: true,
   });
 
   const sessionsField = useFormControl('signOutOfOtherSessions', '', {
@@ -55,7 +52,7 @@ export const _ResetPassword = () => {
     defaultChecked: true,
   });
 
-  const { displayConfirmPasswordFeedback, isPasswordMatch } = useConfirmPassword({
+  const { setConfirmPasswordFeedback, isPasswordMatch } = useConfirmPassword({
     passwordField,
     confirmPasswordField: confirmField,
   });
@@ -64,7 +61,7 @@ export const _ResetPassword = () => {
 
   const validateForm = () => {
     if (passwordField.value) {
-      displayConfirmPasswordFeedback(confirmField.value);
+      setConfirmPasswordFeedback(confirmField.value);
     }
   };
 
@@ -130,7 +127,9 @@ export const _ResetPassword = () => {
             <Form.Control
               {...confirmField.props}
               onChange={e => {
-                displayConfirmPasswordFeedback(e.target.value);
+                if (e.target.value) {
+                  setConfirmPasswordFeedback(e.target.value);
+                }
                 return confirmField.props.onChange(e);
               }}
             />

packages/clerk-js/src/ui/components/SignIn/__tests__/ResetPassword.test.tsx

@@ -118,14 +118,13 @@ describe('ResetPassword', () => {
         await userEvent.type(screen.getByLabelText(/new password/i), 'testewrewr');
         const confirmField = screen.getByLabelText(/confirm password/i);
         await userEvent.type(confirmField, 'testrwerrwqrwe');
-        fireEvent.blur(confirmField);
         await waitFor(() => {
-          screen.getByText(`Passwords don't match.`);
+          expect(screen.getByText(`Passwords don't match.`)).toBeInTheDocument();
         });
 
         await userEvent.clear(confirmField);
         await waitFor(() => {
-          screen.getByText(`Passwords don't match.`);
+          expect(screen.getByText(`Passwords don't match.`)).toBeInTheDocument();
         });
       });
     }, 10000);

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

@@ -15,7 +15,7 @@ import {
   withCardStateProvider,
 } from '../../elements';
 import { useCardState } from '../../elements/contexts';
-import { useLoadingStatus, usePasswordComplexity } from '../../hooks';
+import { useLoadingStatus } from '../../hooks';
 import { useRouter } from '../../router';
 import type { FormControlState } from '../../utils';
 import { createPasswordError } from '../../utils';
@@ -49,7 +49,6 @@ function _SignUpStart(): JSX.Element {
   const {
     userSettings: { passwordSettings },
   } = useEnvironment();
-  const { failedValidationsText } = usePasswordComplexity(passwordSettings);
 
   const formState = {
     firstName: useFormControl('firstName', signUp.firstName || initialValues.firstName || '', {
@@ -81,7 +80,6 @@ function _SignUpStart(): JSX.Element {
       type: 'password',
       label: localizationKeys('formFieldLabel__password'),
       placeholder: localizationKeys('formFieldInputPlaceholder__password'),
-      informationText: failedValidationsText,
       validatePassword: true,
       buildErrorMessage: errors => createPasswordError(errors, { t, locale, passwordSettings }),
     }),

packages/clerk-js/src/ui/components/UserProfile/PasswordPage.tsx

@@ -13,7 +13,7 @@ import {
   useCardState,
   withCardStateProvider,
 } from '../../elements';
-import { useConfirmPassword, useNavigateToFlowStart, usePasswordComplexity } from '../../hooks';
+import { useConfirmPassword, useNavigateToFlowStart } from '../../hooks';
 import { createPasswordError, handleError, useFormControl } from '../../utils';
 import { UserProfileBreadcrumbs } from './UserProfileNavbar';
 
@@ -59,23 +59,19 @@ export const PasswordPage = withCardStateProvider(() => {
   const {
     userSettings: { passwordSettings },
   } = useEnvironment();
-  const { failedValidationsText } = usePasswordComplexity(passwordSettings);
 
   const passwordField = useFormControl('newPassword', '', {
     type: 'password',
     label: localizationKeys('formFieldLabel__newPassword'),
     isRequired: true,
-    enableErrorAfterBlur: true,
     validatePassword: true,
-    informationText: failedValidationsText,
     buildErrorMessage: errors => createPasswordError(errors, { t, locale, passwordSettings }),
   });
 
   const confirmField = useFormControl('confirmPassword', '', {
     type: 'password',
     label: localizationKeys('formFieldLabel__confirmPassword'),
     isRequired: true,
-    enableErrorAfterBlur: true,
   });
 
   const sessionsField = useFormControl('signOutOfOtherSessions', '', {
@@ -84,7 +80,7 @@ export const PasswordPage = withCardStateProvider(() => {
     defaultChecked: true,
   });
 
-  const { displayConfirmPasswordFeedback, isPasswordMatch } = useConfirmPassword({
+  const { setConfirmPasswordFeedback, isPasswordMatch } = useConfirmPassword({
     passwordField,
     confirmPasswordField: confirmField,
   });
@@ -98,7 +94,7 @@ export const PasswordPage = withCardStateProvider(() => {
 
   const validateForm = () => {
     if (passwordField.value) {
-      displayConfirmPasswordFeedback(confirmField.value);
+      setConfirmPasswordFeedback(confirmField.value);
     }
   };
 
@@ -169,7 +165,9 @@ export const PasswordPage = withCardStateProvider(() => {
             <Form.Control
               {...confirmField.props}
               onChange={e => {
-                displayConfirmPasswordFeedback(e.target.value);
+                if (e.target.value) {
+                  setConfirmPasswordFeedback(e.target.value);
+                }
                 return confirmField.props.onChange(e);
               }}
               isDisabled={passwordEditDisabled}

packages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordPage.test.tsx

@@ -269,22 +269,25 @@ describe('PasswordPage', () => {
 
     it(`Displays "Password match" when password match and removes it if they stop`, async () => {
       const { wrapper } = await createFixtures(initConfig);
+
       await runFakeTimers(async () => {
         const { userEvent } = render(<PasswordPage />, { wrapper });
         const passwordField = screen.getByLabelText(/new password/i);
 
         await userEvent.type(passwordField, 'testewrewr');
         const confirmField = screen.getByLabelText(/confirm password/i);
-        expect(screen.queryByText(`Passwords match.`)).not.toBeInTheDocument();
+        await waitFor(() => {
+          expect(screen.queryByText(`Passwords match.`)).not.toBeInTheDocument();
+        });
 
         await userEvent.type(confirmField, 'testewrewr');
         await waitFor(() => {
-          screen.getByText(`Passwords match.`);
+          expect(screen.getByText(`Passwords match.`)).toBeInTheDocument();
         });
 
         await userEvent.type(confirmField, 'testrwerrwqrwe');
         await waitFor(() => {
-          expect(screen.queryByText(`Passwords match.`)).not.toBeInTheDocument();
+          expect(screen.queryByText(`Passwords match.`)).not.toBeVisible();
         });
 
         await userEvent.type(passwordField, 'testrwerrwqrwe');

packages/clerk-js/src/ui/elements/CodeControl.tsx

@@ -19,7 +19,7 @@ export const useCodeControl = (formControl: FormControlState, options?: UseCodeI
   const otpControlRef = React.useRef<any>();
   const userOnCodeEnteredCallback = React.useRef<onCodeEntryFinishedCallback>();
   const defaultValue = formControl.value;
-  const { errorText, onChange } = formControl;
+  const { feedback, feedbackType, onChange } = formControl;
   const { length = 6 } = options || {};
   const [values, setValues] = React.useState(() =>
     defaultValue ? defaultValue.split('').slice(0, length) : Array.from({ length }, () => ''),
@@ -40,7 +40,7 @@ export const useCodeControl = (formControl: FormControlState, options?: UseCodeI
     }
   }, [values.toString()]);
 
-  const otpInputProps = { length, values, setValues, errorText, ref: otpControlRef };
+  const otpInputProps = { length, values, setValues, feedback, feedbackType, ref: otpControlRef };
   return { otpInputProps, onCodeEntryFinished, reset: () => otpControlRef.current?.reset() };
 };
 
@@ -55,7 +55,7 @@ export const CodeControl = React.forwardRef<{ reset: any }, CodeControlProps>((p
   const [disabled, setDisabled] = React.useState(false);
   const refs = React.useRef<Array<HTMLInputElement | null>>([]);
   const firstClickRef = React.useRef(false);
-  const { values, setValues, isDisabled, errorText, isSuccessfullyFilled, isLoading, length } = props;
+  const { values, setValues, isDisabled, feedback, feedbackType, isSuccessfullyFilled, isLoading, length } = props;
 
   React.useImperativeHandle(ref, () => ({
     reset: () => {
@@ -70,10 +70,10 @@ export const CodeControl = React.forwardRef<{ reset: any }, CodeControlProps>((p
   }, []);
 
   React.useEffect(() => {
-    if (errorText) {
+    if (feedback) {
       setDisabled(true);
     }
-  }, [errorText]);
+  }, [feedback]);
 
   const handleMultipleCharValue = ({ eventValue, inputPosition }: { eventValue: string; inputPosition: number }) => {
     const eventValues = (eventValue || '').split('');
@@ -168,12 +168,12 @@ export const CodeControl = React.forwardRef<{ reset: any }, CodeControlProps>((p
     <Flex
       elementDescriptor={descriptors.otpCodeField}
       isLoading={isLoading}
-      hasError={!!errorText}
+      hasError={feedbackType === 'error'}
       direction='col'
     >
       <Flex
         isLoading={isLoading}
-        hasError={!!errorText}
+        hasError={feedbackType === 'error'}
         elementDescriptor={descriptors.otpCodeFieldInputs}
         gap={2}
         align='center'
@@ -194,7 +194,7 @@ export const CodeControl = React.forwardRef<{ reset: any }, CodeControlProps>((p
             autoComplete='one-time-code'
             aria-label={`${index === 0 ? 'Enter verification code. ' : ''} Digit ${index + 1}`}
             isDisabled={isDisabled || isLoading || disabled || isSuccessfullyFilled}
-            hasError={!!errorText}
+            hasError={feedbackType === 'error'}
             isSuccessfullyFilled={isSuccessfullyFilled}
             type='text'
             inputMode='numeric'
@@ -209,7 +209,8 @@ export const CodeControl = React.forwardRef<{ reset: any }, CodeControlProps>((p
         )}
       </Flex>
       <FormFeedback
-        errorText={errorText}
+        feedback={feedback}
+        feedbackType={feedbackType}
         elementDescriptors={{
           error: descriptors.otpCodeFieldErrorText,
         }}