fix(clerk-js): Wait for zxcvbn before showing success message

clerk · Oct 17, 2023 · b629fd3 · b629fd3
1 parent 201ec00
commit b629fd3
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 11 deletions.
diff --git a/packages/clerk-js/src/ui/elements/PasswordInput.tsx b/packages/clerk-js/src/ui/elements/PasswordInput.tsx
@@ -41,6 +41,7 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>((p
         if (inputRef.current === document.activeElement) {
           formControlProps?.setInfo?.(message);
         } else {
+          // Turn the suggestion into an error if not focused.
           formControlProps?.setError?.(message);
         }
       },
@@ -72,11 +73,13 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>((p
         onChange={onChange}
         onBlur={e => {
           rest.onBlur?.(e);
-          onChange(e);
+          // Call validate password because to calculate the new feedbackType as the element is now blurred
+          validatePassword(e.target.value);
         }}
         onFocus={e => {
           rest.onFocus?.(e);
-          onChange(e);
+          // Call validate password because to calculate the new feedbackType as the element is now focused
+          validatePassword(e.target.value);
         }}
         //@ts-expect-error
         ref={mergeRefs(ref, inputRef)}

diff --git a/packages/clerk-js/src/ui/utils/useFormControl.ts b/packages/clerk-js/src/ui/utils/useFormControl.ts
@@ -2,7 +2,6 @@ import type { ClerkAPIError } from '@clerk/types';
 import type { HTMLInputTypeAttribute } from 'react';
 import { useState } from 'react';
 
-import { DEBOUNCE_MS } from '../../core/constants';
 import { useDebounce } from '../hooks';
 import type { LocalizationKey } from '../localization';
 import { useLocalizations } from '../localization';
@@ -182,9 +181,7 @@ type DebouncingOption = {
 export const useFormControlFeedback = (opts?: DebouncingOption): DebouncedFeedback => {
   const { feedback = '', delayInMs = 100, feedbackType = 'info', isFocused = false } = opts || {};
 
-  const debouncedFocused = useDebounce(isFocused, DEBOUNCE_MS);
-
-  const shouldHide = debouncedFocused ? false : ['info', 'warning'].includes(feedbackType);
+  const shouldHide = isFocused ? false : ['info', 'warning'].includes(feedbackType);
 
   const debouncedState = useDebounce(
     { feedback: shouldHide ? '' : feedback, feedbackType: shouldHide ? 'info' : feedbackType },

diff --git a/packages/clerk-js/src/utils/passwords/password.ts b/packages/clerk-js/src/utils/passwords/password.ts
@@ -23,7 +23,7 @@ export const createValidatePassword = (config: UsePasswordConfig, callbacks?: Va
   const { show_zxcvbn, validatePassword: validatePasswordProp } = config;
   const getComplexity = createValidateComplexity(config);
   const getScore = createValidatePasswordStrength(config);
-  let result = {} satisfies PasswordValidation;
+  let result: PasswordValidation = {} satisfies PasswordValidation;
 
   return (password: string, internalCallbacks?: ValidatePasswordCallbacks) => {
     const {
@@ -65,9 +65,10 @@ export const createValidatePassword = (config: UsePasswordConfig, callbacks?: Va
       });
     }
 
-    internalOnValidation({
-      ...result,
-      complexity: failedValidationsComplexity,
-    });
+    if (result.complexity && Object.keys(result.complexity).length === 0 && show_zxcvbn) {
+      return;
+    }
+
+    internalOnValidation(result);
   };
 };