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);

frontend/src/pages/password-reset.tsx

@@ -30,9 +30,12 @@ export default function PasswordReset() {
   const [backupKeyError, setBackupKeyError] = useState(false);
   const [passwordErrorTooShort, setPasswordErrorTooShort] = useState(false);
   const [passwordErrorTooLong, setPasswordErrorTooLong] = useState(false);
-  const [passwordErrorNumber, setPasswordErrorNumber] = useState(false);
+  const [passwordErrorUpperCase, setPasswordErrorUpperCase] = useState(false);
   const [passwordErrorLowerCase, setPasswordErrorLowerCase] = useState(false);
-  const [passwordErrorIsBreached, setPasswordErrorIsBreached] = useState(false);
+  const [passwordErrorNumber, setPasswordErrorNumber] = useState(false);
+  const [passwordErrorSpecialChar, setPasswordErrorSpecialChar] = useState(false);
+  const [passwordErrorRepeatedChar, setPasswordErrorRepeatedChar] = useState(false);
+  const [passwordErrorIsBreachedPassword, setPasswordErrorIsBreachedPassword] = useState(false);
 
   const router = useRouter();
 
@@ -43,7 +46,7 @@ export default function PasswordReset() {
   const token = parsedUrl.token as string;
   const email = (parsedUrl.to as string)?.replace(" ", "+").trim();
 
-  // Unencrypt the private key with a backup key
+  // Decrypt the private key with a backup key
   const getEncryptedKeyHandler = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     try {
@@ -71,9 +74,12 @@ export default function PasswordReset() {
       password: newPassword,
       setPasswordErrorTooShort,
       setPasswordErrorTooLong,
-      setPasswordErrorNumber,
+      setPasswordErrorUpperCase,
       setPasswordErrorLowerCase,
-      setPasswordErrorIsBreached,
+      setPasswordErrorNumber,
+      setPasswordErrorSpecialChar,
+      setPasswordErrorRepeatedChar,
+      setPasswordErrorIsBreachedPassword,
       errorCheck: false
     });
 
@@ -229,9 +235,12 @@ export default function PasswordReset() {
               password,
               setPasswordErrorTooShort,
               setPasswordErrorTooLong,
-              setPasswordErrorNumber,
+              setPasswordErrorUpperCase,
               setPasswordErrorLowerCase,
-              setPasswordErrorIsBreached,
+              setPasswordErrorNumber,
+              setPasswordErrorSpecialChar,
+              setPasswordErrorRepeatedChar,
+              setPasswordErrorIsBreachedPassword,
               errorCheck: false
             });
           }}
@@ -241,9 +250,12 @@ export default function PasswordReset() {
           error={
             passwordErrorTooShort &&
             passwordErrorTooLong &&
-            passwordErrorNumber &&
+            passwordErrorUpperCase &&
             passwordErrorLowerCase &&
-            passwordErrorIsBreached
+            passwordErrorNumber &&
+            passwordErrorSpecialChar &&
+            passwordErrorRepeatedChar &&
+            passwordErrorIsBreachedPassword
           }
           autoComplete="new-password"
           id="new-password"
@@ -251,9 +263,12 @@ export default function PasswordReset() {
       </div>
       {passwordErrorTooShort ||
       passwordErrorTooLong ||
-      passwordErrorNumber ||
+      passwordErrorUpperCase ||
       passwordErrorLowerCase ||
-      passwordErrorIsBreached ? (
+      passwordErrorNumber ||
+      passwordErrorSpecialChar ||
+      passwordErrorRepeatedChar ||
+      passwordErrorIsBreachedPassword ? (
         <div className="mx-2 mt-3 mb-2 flex w-full max-w-md flex-col items-start rounded-md bg-white/5 px-2 py-2">
           <div className="mb-1 text-sm text-gray-400">Password should contain:</div>
           <div className="ml-1 flex flex-row items-center justify-start">
@@ -277,13 +292,15 @@ export default function PasswordReset() {
             </div>
           </div>
           <div className="ml-1 flex flex-row items-center justify-start">
-            {passwordErrorNumber ? (
+            {passwordErrorUpperCase ? (
               <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
             ) : (
               <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
             )}
-            <div className={`${passwordErrorNumber ? "text-gray-400" : "text-gray-600"} text-sm`}>
-              at least 1 number
+            <div
+              className={`${passwordErrorUpperCase ? "text-gray-400" : "text-gray-600"} text-sm`}
+            >
+              at least 1 uppercase character
             </div>
           </div>
           <div className="ml-1 flex flex-row items-center justify-start">
@@ -297,14 +314,54 @@ export default function PasswordReset() {
             >
               at least 1 lowercase character
             </div>
+          </div>
+          <div className="ml-1 flex flex-row items-center justify-start">
+            {passwordErrorNumber ? (
+              <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+            ) : (
+              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+            )}
+            <div className={`${passwordErrorNumber ? "text-gray-400" : "text-gray-600"} text-sm`}>
+              at least 1 number
+            </div>
             <div className="ml-1 flex flex-row items-center justify-start">
-              {passwordErrorIsBreached ? (
+              {passwordErrorSpecialChar ? (
                 <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
               ) : (
                 <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
               )}
               <div
-                className={`${passwordErrorIsBreached ? "text-gray-400" : "text-gray-600"} text-sm`}
+                className={`${
+                  passwordErrorSpecialChar ? "text-gray-400" : "text-gray-600"
+                } text-sm`}
+              >
+                at least 1 special character
+              </div>
+            </div>
+            <div className="ml-1 flex flex-row items-center justify-start">
+              {passwordErrorRepeatedChar ? (
+                <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+              ) : (
+                <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+              )}
+              <div
+                className={`${
+                  passwordErrorRepeatedChar ? "text-gray-400" : "text-gray-600"
+                } text-sm`}
+              >
+                at most 2 repeated characters
+              </div>
+            </div>
+            <div className="ml-1 flex flex-row items-center justify-start">
+              {passwordErrorIsBreachedPassword ? (
+                <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+              ) : (
+                <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+              )}
+              <div
+                className={`${
+                  passwordErrorIsBreachedPassword ? "text-gray-400" : "text-gray-600"
+                } text-sm`}
               >
                 The password you provided is in a list of passwords commonly used on other websites.
                 Please try again with a stronger password.

frontend/src/views/Settings/PersonalSettingsPage/ChangePasswordSection/ChangePasswordSection.tsx

@@ -21,8 +21,8 @@ type Errors = {
   number?: string;
   specialChar?: string;
   repeatedChar?: string;
-  commonPassword?: string;
-  breachedPassword?: string;
+  isBreachedPassword?: string;
+  isCommonPassword?: string;
 };
 
 const schema = yup

frontend/src/views/Signup/components/UserInfoSSOStep/UserInfoSSOStep.tsx

@@ -1,4 +1,3 @@
-
 import crypto from "crypto";
 
 import React, { useEffect, useState } from "react";
@@ -25,24 +24,25 @@ import ProjectService from "@app/services/ProjectService";
 const client = new jsrp.client();
 
 type Props = {
-    setStep: (step: number) => void;
-    email: string;
-    password: string;
-    setPassword: (value: string) => void;
-    name: string;
-    providerOrganizationName: string;
-    providerAuthToken?: string;
-}
+  setStep: (step: number) => void;
+  email: string;
+  password: string;
+  setPassword: (value: string) => void;
+  name: string;
+  providerOrganizationName: string;
+  providerAuthToken?: string;
+};
 
 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;
 };
 
 /**
@@ -65,7 +65,7 @@ export const UserInfoSSOStep = ({
   password,
   setPassword,
   setStep,
-  providerAuthToken,
+  providerAuthToken
 }: Props) => {
   const { data: commonPasswords } = useGetCommonPasswords();
   const [nameError, setNameError] = useState(false);
@@ -99,7 +99,7 @@ export const UserInfoSSOStep = ({
     } else {
       setOrganizationNameError(false);
     }
-    
+
     errorCheck = await checkPassword({
       password,
       commonPasswords,
@@ -212,15 +212,17 @@ export const UserInfoSSOStep = ({
       setIsLoading(false);
     }
   };
-  
+
   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"
             value={name}
@@ -229,11 +231,17 @@ export const UserInfoSSOStep = ({
             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>
         {providerOrganizationName === undefined && (
-          <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"
               value={organizationName}
@@ -242,12 +250,18 @@ export const UserInfoSSOStep = ({
               className="h-12"
               disabled
             />
-            {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>
         )}
         {providerOrganizationName === undefined && (
-          <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)}
@@ -256,12 +270,12 @@ export const UserInfoSSOStep = ({
             />
           </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="Infisical Password"
-            onChangeHandler={(pass: string) => {
+            onChangeHandler={async (pass: string) => {
               setPassword(pass);
-              checkPassword({
+              await checkPassword({
                 password: pass,
                 commonPasswords,
                 setErrors
@@ -274,26 +288,27 @@ export const UserInfoSSOStep = ({
             autoComplete="new-password"
             id="new-password"
           />
-          <div className="mt-2 w-min min-w-[20rem] max-h-60 flex-col items-center justify-center rounded-md px-1.5 bg-mineshaft-500 text-mineshaft-300 text-xs p-1.5"><FontAwesomeIcon icon={faInfoCircle} className="mr-1.5" />Infisical Password is used as part of the encryption mechanism so that even the authentication provider is not able to access your secrets.</div>
+          <div className="mt-2 max-h-60 w-min min-w-[20rem] flex-col items-center justify-center rounded-md bg-mineshaft-500 p-1.5 px-1.5 text-xs text-mineshaft-300">
+            <FontAwesomeIcon icon={faInfoCircle} className="mr-1.5" />
+            Infisical Password is used as part of the encryption mechanism so that even the
+            authentication provider is not able to access your secrets.
+          </div>
           {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>
                   );
                 }
@@ -303,21 +318,24 @@ export const UserInfoSSOStep = ({
             </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-12'
+              className="h-12"
               colorSchema="primary"
               variant="outline_bg"
               isLoading={isLoading}
-            > {String(t("signup.signup"))} </Button>
+            >
+              {" "}
+              {String(t("signup.signup"))}{" "}
+            </Button>
           </div>
         </div>
       </div>
     </div>
   );
-}
+};