fixed more error handling for password checks & translations

frontend/src/components/signup/UserInfoStep.tsx

@@ -39,14 +39,15 @@ interface UserInfoStepProps {
 }
 
 type Errors = {
-  tooShort?: string,
-  tooLong?: string,
-  upperCase?: string,
-  lowerCase?: string,
-  number?: string,
-  specialChar?: string,
-  repeatedChar?: string,
-  breachedPassword?: string
+  tooShort?: string;
+  tooLong?: string;
+  upperCase?: string;
+  lowerCase?: string;
+  number?: string;
+  specialChar?: string;
+  repeatedChar?: string;
+  isBeachedPassword?: string;
+  isCommonPassword?: string;
 };
 
 /**
@@ -73,7 +74,7 @@ export default function UserInfoStep({
   setOrganizationName,
   attributionSource,
   setAttributionSource,
-  providerAuthToken,
+  providerAuthToken
 }: UserInfoStepProps): JSX.Element {
   const { data: commonPasswords } = useGetCommonPasswords();
   const [nameError, setNameError] = useState(false);
@@ -101,7 +102,7 @@ export default function UserInfoStep({
     } else {
       setOrganizationNameError(false);
     }
-    
+
     errorCheck = await checkPassword({
       password,
       commonPasswords,
@@ -176,7 +177,7 @@ export default function UserInfoStep({
                 salt: result.salt,
                 verifier: result.verifier,
                 organizationName,
-                attributionSource,
+                attributionSource
               });
 
               // unset signup JWT token and set JWT token
@@ -193,7 +194,7 @@ export default function UserInfoStep({
               });
 
               const userOrgs = await fetchOrganizations();
-            
+
               const orgId = userOrgs[0]?._id;
               const project = await ProjectService.initProject({
                 organizationId: orgId,
@@ -217,13 +218,15 @@ export default function UserInfoStep({
   };
 
   return (
-    <div className="h-full mx-auto mb-36 w-max rounded-xl md:px-8 md:mb-16">
-      <p className="mx-8 mb-6 flex justify-center text-xl font-bold text-medium md:mx-16 text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200">
+    <div className="mx-auto mb-36 h-full w-max rounded-xl md:mb-16 md:px-8">
+      <p className="text-medium mx-8 mb-6 flex justify-center bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-xl font-bold text-transparent md:mx-16">
         {t("signup.step3-message")}
       </p>
-      <div className="h-full mx-auto mb-36 w-max rounded-xl py-6 md:px-8 md:mb-16 md:border md:border-mineshaft-600 md:bg-mineshaft-800">
-        <div className="relative z-0 lg:w-1/6 w-1/4 min-w-[20rem] flex flex-col items-center justify-end w-full py-2 rounded-lg">
-          <p className='text-left w-full text-sm text-bunker-300 mb-1 ml-1 font-medium'>Your Name</p>
+      <div className="mx-auto mb-36 h-full w-max rounded-xl py-6 md:mb-16 md:border md:border-mineshaft-600 md:bg-mineshaft-800 md:px-8">
+        <div className="relative z-0 flex w-1/4 w-full min-w-[20rem] flex-col items-center justify-end rounded-lg py-2 lg:w-1/6">
+          <p className="mb-1 ml-1 w-full text-left text-sm font-medium text-bunker-300">
+            Your Name
+          </p>
           <Input
             placeholder="Jane Doe"
             onChange={(e) => setName(e.target.value)}
@@ -232,10 +235,16 @@ export default function UserInfoStep({
             autoComplete="given-name"
             className="h-12"
           />
-          {nameError && <p className='text-left w-full text-xs text-red-600 mt-1 ml-1'>Please, specify your name</p>}
+          {nameError && (
+            <p className="mt-1 ml-1 w-full text-left text-xs text-red-600">
+              Please, specify your name
+            </p>
+          )}
         </div>
-        <div className="relative z-0 lg:w-1/6 w-1/4 min-w-[20rem] flex flex-col items-center justify-end w-full py-2 rounded-lg">
-          <p className='text-left w-full text-sm text-bunker-300 mb-1 ml-1 font-medium'>Organization Name</p>
+        <div className="relative z-0 flex w-1/4 w-full min-w-[20rem] flex-col items-center justify-end rounded-lg py-2 lg:w-1/6">
+          <p className="mb-1 ml-1 w-full text-left text-sm font-medium text-bunker-300">
+            Organization Name
+          </p>
           <Input
             placeholder="Infisical"
             onChange={(e) => setOrganizationName(e.target.value)}
@@ -243,10 +252,16 @@ export default function UserInfoStep({
             isRequired
             className="h-12"
           />
-          {organizationNameError && <p className='text-left w-full text-xs text-red-600 mt-1 ml-1'>Please, specify your organization name</p>}
+          {organizationNameError && (
+            <p className="mt-1 ml-1 w-full text-left text-xs text-red-600">
+              Please, specify your organization name
+            </p>
+          )}
         </div>
-        <div className="relative z-0 lg:w-1/6 w-1/4 min-w-[20rem] flex flex-col items-center justify-end w-full py-2 rounded-lg">
-          <p className='text-left w-full text-sm text-bunker-300 mb-1 ml-1 font-medium'>Where did you hear about us? <span className="font-light">(optional)</span></p>
+        <div className="relative z-0 flex w-1/4 w-full min-w-[20rem] flex-col items-center justify-end rounded-lg py-2 lg:w-1/6">
+          <p className="mb-1 ml-1 w-full text-left text-sm font-medium text-bunker-300">
+            Where did you hear about us? <span className="font-light">(optional)</span>
+          </p>
           <Input
             placeholder=""
             onChange={(e) => setAttributionSource(e.target.value)}
@@ -254,7 +269,7 @@ export default function UserInfoStep({
             className="h-12"
           />
         </div>
-        <div className="mt-2 flex lg:w-1/6 w-1/4 min-w-[20rem] max-h-60 w-full flex-col items-center justify-center rounded-lg py-2">
+        <div className="mt-2 flex max-h-60 w-1/4 w-full min-w-[20rem] flex-col items-center justify-center rounded-lg py-2 lg:w-1/6">
           <InputField
             label={t("section.password.password")}
             onChangeHandler={(pass: string) => {
@@ -274,23 +289,20 @@ export default function UserInfoStep({
           />
           {Object.keys(errors).length > 0 && (
             <div className="mt-4 flex w-full flex-col items-start rounded-md bg-white/5 px-2 py-2">
-              <div className="mb-2 text-sm text-gray-400">{t("section.password.validate-base")}</div> 
+              <div className="mb-2 text-sm text-gray-400">
+                {t("section.password.validate-base")}
+              </div>
               {Object.keys(errors).map((key) => {
                 if (errors[key as keyof Errors]) {
                   return (
-                    <div 
-                      className="ml-1 flex flex-row items-top justify-start"
-                      key={key}
-                    >
+                    <div className="items-top ml-1 flex flex-row justify-start" key={key}>
                       <div>
-                        <FontAwesomeIcon 
-                          icon={faXmark} 
-                          className="text-md text-red ml-0.5 mr-2.5"
+                        <FontAwesomeIcon
+                          icon={faXmark}
+                          className="text-md ml-0.5 mr-2.5 text-red"
                         />
                       </div>
-                      <p className="text-gray-400 text-sm">
-                        {errors[key as keyof Errors]} 
-                      </p>
+                      <p className="text-sm text-gray-400">{errors[key as keyof Errors]}</p>
                     </div>
                   );
                 }
@@ -300,18 +312,21 @@ export default function UserInfoStep({
             </div>
           )}
         </div>
-        <div className="flex flex-col items-center justify-center lg:w-[19%] w-1/4 min-w-[20rem] mt-2 max-w-xs md:max-w-md mx-auto text-sm text-center md:text-left">
-          <div className="text-l py-1 text-lg w-full">
+        <div className="mx-auto mt-2 flex w-1/4 min-w-[20rem] max-w-xs flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-[19%]">
+          <div className="text-l w-full py-1 text-lg">
             <Button
               type="submit"
               onClick={signupErrorCheck}
               size="sm"
               isFullWidth
-              className='h-14'
+              className="h-14"
               colorSchema="primary"
               variant="outline_bg"
               isLoading={isLoading}
-            > {String(t("signup.signup"))} </Button>
+            >
+              {" "}
+              {String(t("signup.signup"))}{" "}
+            </Button>
           </div>
         </div>
       </div>

frontend/src/components/utilities/checks/PasswordCheck.ts

@@ -6,9 +6,12 @@ interface PasswordCheckProps {
   errorCheck: boolean;
   setPasswordErrorTooShort: (value: boolean) => void;
   setPasswordErrorTooLong: (value: boolean) => void;
-  setPasswordErrorNumber: (value: boolean) => void;
+  setPasswordErrorUpperCase: (value: boolean) => void;
   setPasswordErrorLowerCase: (value: boolean) => void;
-  setPasswordErrorIsBreached: (value: boolean) => void;
+  setPasswordErrorNumber: (value: boolean) => void;
+  setPasswordErrorSpecialChar: (value: boolean) => void;
+  setPasswordErrorRepeatedChar: (value: boolean) => void;
+  setPasswordErrorIsBreachedPassword: (value: boolean) => void;
 }
 
 /**
@@ -18,11 +21,15 @@ const passwordCheck = async ({
   password,
   setPasswordErrorTooShort,
   setPasswordErrorTooLong,
-  setPasswordErrorNumber,
+  setPasswordErrorUpperCase,
   setPasswordErrorLowerCase,
-  setPasswordErrorIsBreached,
+  setPasswordErrorNumber,
+  setPasswordErrorSpecialChar,
+  setPasswordErrorRepeatedChar,
+  setPasswordErrorIsBreachedPassword,
   errorCheck
 }: PasswordCheckProps) => {
+  // tooShort
   if (!password || password.length < 14) {
     setPasswordErrorTooShort(true);
     errorCheck = true;
@@ -30,6 +37,7 @@ const passwordCheck = async ({
     setPasswordErrorTooShort(false);
   }
 
+  // tooLong
   if (password.length > 100) {
     setPasswordErrorTooLong(true);
     errorCheck = true;
@@ -37,51 +45,54 @@ const passwordCheck = async ({
     setPasswordErrorTooLong(false);
   }
 
-  if (!/\d/.test(password)) {
+  // upperCase
+  if (!/[A-Z]/.test(password)) {
+    setPasswordErrorUpperCase(true);
+    errorCheck = true;
+  } else {
+    setPasswordErrorUpperCase(false);
+  }
+
+  // lowerCase
+  if (!/[a-z]/.test(password)) {
+    setPasswordErrorLowerCase(true);
+    errorCheck = true;
+  } else {
+    setPasswordErrorLowerCase(false);
+  }
+
+  // number
+  if (!/[0-9]/.test(password)) {
     setPasswordErrorNumber(true);
     errorCheck = true;
   } else {
     setPasswordErrorNumber(false);
   }
 
-  if (!/[a-z]/.test(password)) {
-    setPasswordErrorLowerCase(true);
+  // specialChar
+  if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
+    setPasswordErrorSpecialChar(true);
     errorCheck = true;
-    // } else if (/(.)(?:(?!\1).){1,2}/.test(password)) {
-    // 	console.log(111)
-    // 	setPasswordError(true);
-    // 	setPasswordErrorMessage("Password should not contain repeating characters.");
-    // 	errorCheck = true;
-    // } else if (RegExp(`[${email}]`).test(password)) {
-    // 	console.log(222)
-    // 	setPasswordError(true);
-    // 	setPasswordErrorMessage("Password should not contain your email.");
-    // 	errorCheck = true;
   } else {
-    setPasswordErrorLowerCase(false);
+    setPasswordErrorSpecialChar(false);
   }
 
+  // repeatedChar
+  if (/([A-Za-z0-9])\1\1\1/.test(password)) {
+    setPasswordErrorRepeatedChar(true);
+    errorCheck = true;
+  } else {
+    setPasswordErrorRepeatedChar(false);
+  }
+
+  // breachedPassword
   if (await checkIsPasswordBreached(password)) {
-    setPasswordErrorIsBreached(true);
+    setPasswordErrorIsBreachedPassword(true);
     errorCheck = true;
   } else {
-    setPasswordErrorIsBreached(false);
+    setPasswordErrorIsBreachedPassword(false);
   }
 
-  // if (!/[A-Z]/.test(password)) {
-  // 	setPasswordErrorUpperCase(true);
-  // 	errorCheck = true;
-  // } else {
-  // 	setPasswordErrorUpperCase(false);
-  // }
-
-  // if (!/(?=.*[!@#$%^&*])/.test(password)) {
-  // 	setPasswordErrorSpecialChar(true);
-  // 		// "Please add at least 1 special character (*, !, #, %)."
-  // 	errorCheck = true;
-  // } else {
-  // 	setPasswordErrorSpecialChar(false);
-  // }
   return errorCheck;
 };
 

frontend/src/components/utilities/checks/checkPassword.ts

@@ -8,8 +8,8 @@ type Errors = {
   number?: string;
   specialChar?: string;
   repeatedChar?: string;
-  commonPassword?: string;
-  breachedPassword?: string;
+  isBreachedPassword?: string;
+  isCommonPassword?: string;
 };
 
 interface CheckPasswordParams {
@@ -20,12 +20,15 @@ interface CheckPasswordParams {
 
 /**
  * Validate that the password [password]:
- * - Contains at least 14 characters long
- * - Contains at most 100 characters long
+ * - Contains at least 14 characters
+ * - Contains at most 100 characters
  * - Contains at least 1 uppercase character (A-Z)
  * - Contains at least 1 lowercase character (a-z)
  * - Contains at least 1 number (0-9)
+ * - Contains at least 1 special character
  * - Does not contain 3 repeat, consecutive characters
+ * - Is not in a database of breached passwords
+ * - Is not in a list of common passwords
  *
  * The function returns whether or not the password [password]
  * passes the minimum requirements above. It sets errors on
@@ -42,41 +45,50 @@ const checkPassword = async ({
 }: CheckPasswordParams): Promise<boolean> => {
   const errors: Errors = {};
 
+  // tooShort
   if (password.length < 14) {
     errors.tooShort = "at least 14 characters";
   }
 
+  // toolong
   if (password.length > 100) {
     errors.tooLong = "at most 100 characters";
   }
 
+  // upperCase
   if (!/[A-Z]/.test(password)) {
     errors.upperCase = "at least 1 uppercase character (A-Z)";
   }
 
+  // lowerCase
   if (!/[a-z]/.test(password)) {
     errors.lowerCase = "at least 1 lowercase character (a-z)";
   }
 
+  // number
   if (!/[0-9]/.test(password)) {
     errors.number = "at least 1 number (0-9)";
   }
 
+  // specialChar
   if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
     errors.specialChar = "at least 1 special character (!@#$%^&*(),.?)";
   }
 
+  // repeatedChar
   if (/([A-Za-z0-9])\1\1\1/.test(password)) {
     errors.repeatedChar = "No 3 repeat, consecutive characters";
   }
 
+  // breachedPassword
   if (await checkIsPasswordBreached(password)) {
-    errors.breachedPassword =
+    errors.isBreachedPassword =
       "The password you provided is in a list of passwords commonly used on other websites. Please try again with a stronger password.";
   }
 
+  // commonPassword
   if (commonPasswords.includes(password)) {
-    errors.commonPassword = "No common passwords";
+    errors.isCommonPassword = "No common passwords";
   }
 
   setErrors(errors);