Fix review

trilitech · Sep 26, 2024 · b6d5638 · b6d5638
1 parent 16efe96
commit b6d5638
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 39 deletions.
diff --git a/apps/desktop/src/components/ChangePassword/ChangePasswordForm.tsx b/apps/desktop/src/components/ChangePassword/ChangePasswordForm.tsx
@@ -79,9 +79,9 @@ export const ChangePasswordForm = () => {
 
             <FormControl isInvalid={!!errors.newPassword} marginY={6}>
               <PasswordInput
-                checkPasswordStrength
                 data-testid="new-password"
                 inputName="newPassword"
+                isCheckPasswordStrengthEnabled
                 label="New Password"
                 placeholder="Enter new password"
                 required="New password is required"

diff --git a/apps/desktop/src/components/Onboarding/masterPassword/password/EnterAndConfirmPassword.tsx b/apps/desktop/src/components/Onboarding/masterPassword/password/EnterAndConfirmPassword.tsx
@@ -40,9 +40,9 @@ export const EnterAndConfirmPassword = ({
         <form onSubmit={handleSubmit(onSubmit)} style={{ width: "100%" }}>
           <FormControl isInvalid={!!errors.password}>
             <PasswordInput
-              checkPasswordStrength
               data-testid="password"
               inputName="password"
+              isCheckPasswordStrengthEnabled
               placeholder="Enter master password"
             />
             {errors.password && <FormErrorMessage>{errors.password.message}</FormErrorMessage>}

diff --git a/apps/desktop/src/components/PasswordInput.tsx b/apps/desktop/src/components/PasswordInput.tsx
@@ -21,7 +21,7 @@ type PasswordInputProps<T extends FieldValues, U extends Path<T>> = {
   inputName: U;
   label?: string;
   placeholder?: string;
-  checkPasswordStrength?: boolean;
+  isCheckPasswordStrengthEnabled?: boolean;
   required?: string | boolean;
   minLength?: RegisterOptions<T, U>["minLength"];
   validate?: (val: string) => string | boolean;
@@ -33,29 +33,29 @@ export const PasswordInput = <T extends FieldValues, U extends Path<T>>({
   label = "Password",
   placeholder = "Enter your password",
   required = "Password is required",
-  checkPasswordStrength = false,
+  isCheckPasswordStrengthEnabled = false,
   minLength = MIN_LENGTH,
   validate,
   ...rest
 }: PasswordInputProps<T, U>) => {
   const { register } = useFormContext<T>();
   const [showPassword, setShowPassword] = useState<boolean>(false);
-  const { validatePassword, PasswordStrengthBar } = usePasswordValidation({
-    colorScheme: colors.gray[500],
+  const { validatePasswordStrength, PasswordStrengthBar } = usePasswordValidation({
+    color: colors.gray[500],
     inputName,
   });
 
   const handleValidate = (val: string) => {
     if (validate) {
-      const validateResult = validate(val);
+      const validationResult = validate(val);
 
-      if (checkPasswordStrength && validateResult === true) {
-        return validatePassword(val);
+      if (isCheckPasswordStrengthEnabled && validationResult === true) {
+        return validatePasswordStrength(val);
       }
 
-      return validateResult;
-    } else if (checkPasswordStrength) {
-      return validatePassword(val);
+      return validationResult;
+    } else if (isCheckPasswordStrengthEnabled) {
+      return validatePasswordStrength(val);
     }
   };
 
@@ -91,7 +91,7 @@ export const PasswordInput = <T extends FieldValues, U extends Path<T>>({
           </Button>
         </InputRightElement>
       </InputGroup>
-      {checkPasswordStrength && PasswordStrengthBar}
+      {isCheckPasswordStrengthEnabled && PasswordStrengthBar}
     </>
   );
 };
diff --git a/apps/desktop/src/setupTests.tsx b/apps/desktop/src/setupTests.tsx
@@ -29,7 +29,7 @@ jest.mock("./env", () => ({ IS_DEV: false }));
 jest.mock("@umami/components", () => ({
   ...jest.requireActual("@umami/components"),
   usePasswordValidation: () => ({
-    validatePassword: () => true,
+    validatePasswordStrength: () => true,
     PasswordStrengthBar: <div>PasswordStrengthBar</div>,
   }),
 }));

diff --git a/apps/web/src/components/Menu/ChangePasswordMenu/ChangePasswordMenu.tsx b/apps/web/src/components/Menu/ChangePasswordMenu/ChangePasswordMenu.tsx
@@ -43,9 +43,9 @@ export const ChangePasswordMenu = () => {
             />
             <Divider />
             <PasswordInput
-              checkPasswordStrength
               data-testid="new-password"
               inputName="newPassword"
+              isCheckPasswordStrengthEnabled
               label="New Password"
               placeholder="New password"
               required="New password is required"

diff --git a/apps/web/src/components/Onboarding/SetupPassword/SetupPassword.tsx b/apps/web/src/components/Onboarding/SetupPassword/SetupPassword.tsx
@@ -198,8 +198,8 @@ export const SetupPassword = ({ mode }: SetupPasswordProps) => {
           <ModalBody>
             <Flex flexDirection="column" gap="24px">
               <PasswordInput
-                checkPasswordStrength={!isPasswordSet}
                 inputName="password"
+                isCheckPasswordStrengthEnabled={!isPasswordSet}
                 label={isPasswordSet ? "Password" : "Set Password"}
                 required="Password is required"
               />

diff --git a/apps/web/src/components/PasswordInput/PasswordInput.tsx b/apps/web/src/components/PasswordInput/PasswordInput.tsx
@@ -24,7 +24,7 @@ type PasswordInputProps<T extends FieldValues, U extends Path<T>> = {
   label?: string;
   placeholder?: string;
   required?: string | boolean;
-  checkPasswordStrength?: boolean;
+  isCheckPasswordStrengthEnabled?: boolean;
   minLength?: RegisterOptions<T, U>["minLength"];
   validate?: (val: string) => string | boolean;
 } & InputProps & {
@@ -37,7 +37,7 @@ export const PasswordInput = <T extends FieldValues, U extends Path<T>>({
   placeholder = "Enter your password",
   required = "Password is required",
   minLength = MIN_LENGTH,
-  checkPasswordStrength = false,
+  isCheckPasswordStrengthEnabled = false,
   validate,
   ...rest
 }: PasswordInputProps<T, U>) => {
@@ -46,7 +46,7 @@ export const PasswordInput = <T extends FieldValues, U extends Path<T>>({
     formState: { errors },
   } = useFormContext<T>();
   const [showPassword, setShowPassword] = useState<boolean>(false);
-  const { validatePassword, PasswordStrengthBar } = usePasswordValidation({
+  const { validatePasswordStrength, PasswordStrengthBar } = usePasswordValidation({
     inputName,
   });
 
@@ -59,13 +59,13 @@ export const PasswordInput = <T extends FieldValues, U extends Path<T>>({
     if (validate) {
       const validateResult = validate(val);
 
-      if (checkPasswordStrength && validateResult === true) {
-        return validatePassword(val);
+      if (isCheckPasswordStrengthEnabled && validateResult === true) {
+        return validatePasswordStrength(val);
       }
 
       return validateResult;
-    } else if (checkPasswordStrength) {
-      return validatePassword(val);
+    } else if (isCheckPasswordStrengthEnabled) {
+      return validatePasswordStrength(val);
     }
   };
 
@@ -108,7 +108,7 @@ export const PasswordInput = <T extends FieldValues, U extends Path<T>>({
           />
         </InputRightElement>
       </InputGroup>
-      {checkPasswordStrength && PasswordStrengthBar}
+      {isCheckPasswordStrengthEnabled && PasswordStrengthBar}
       {error && (
         <FormErrorMessage data-testid={`${rest["data-testid"]}-error`}>
           {errorMessage}

diff --git a/packages/components/src/hooks/usePasswordValidation.test.tsx b/packages/components/src/hooks/usePasswordValidation.test.tsx
@@ -11,7 +11,7 @@ const password = {
 };
 
 const TestComponent = () => {
-  const { validatePassword, PasswordStrengthBar } = usePasswordValidation();
+  const { validatePasswordStrength, PasswordStrengthBar } = usePasswordValidation();
   const { register } = useFormContext();
 
   return (
@@ -21,7 +21,7 @@ const TestComponent = () => {
         id="password"
         type="text"
         {...register("password", {
-          validate: validatePassword,
+          validate: validatePasswordStrength,
         })}
       />
       {PasswordStrengthBar}

diff --git a/packages/components/src/hooks/usePasswordValidation.tsx b/packages/components/src/hooks/usePasswordValidation.tsx
@@ -4,18 +4,23 @@ import { useFormContext } from "react-hook-form";
 import zxcvbn from "zxcvbn";
 
 const DEFAULT_SCORE = 0;
-const DEFAULT_COLOR_SCHEME = "gray.100";
+const DEFAULT_COLOR = "gray.100";
 
 type PasswordStrengthBarProps = {
   score: number;
-  colorScheme: string;
+  color: string;
   inputName: string;
 };
 
-const PasswordStrengthBar = ({ score, colorScheme, inputName }: PasswordStrengthBarProps) => {
+type UsePasswordValidationProps = {
+  color?: string;
+  inputName?: string;
+};
+
+const PasswordStrengthBar = ({ score, color, inputName }: PasswordStrengthBarProps) => {
   const form = useFormContext();
 
-  const colors = [colorScheme, "red.500", "yellow.500", "green.500"];
+  const colors = [color, "red.500", "yellow.500", "green.500"];
   const passwordError = form.formState.errors[inputName];
 
   const getColor = (index: number) => {
@@ -75,13 +80,8 @@ const PasswordStrengthBar = ({ score, colorScheme, inputName }: PasswordStrength
   );
 };
 
-type UsePasswordValidationProps = {
-  colorScheme?: string;
-  inputName?: string;
-};
-
 export const usePasswordValidation = ({
-  colorScheme = DEFAULT_COLOR_SCHEME,
+  color = DEFAULT_COLOR,
   inputName = "password",
 }: UsePasswordValidationProps = {}) => {
   const [passwordScore, setPasswordScore] = useState(DEFAULT_SCORE);
@@ -95,7 +95,7 @@ export const usePasswordValidation = ({
     }
   }, [passwordError]);
 
-  const validatePassword = (value: string) => {
+  const validatePasswordStrength = (value: string) => {
     const result = zxcvbn(value);
 
     setPasswordScore(result.score);
@@ -107,9 +107,9 @@ export const usePasswordValidation = ({
   };
 
   return {
-    validatePassword,
+    validatePasswordStrength,
     PasswordStrengthBar: (
-      <PasswordStrengthBar colorScheme={colorScheme} inputName={inputName} score={passwordScore} />
+      <PasswordStrengthBar color={color} inputName={inputName} score={passwordScore} />
     ),
   };
 };