update

src/components/ChangePassword/ChangePasswordForm.tsx

@@ -85,7 +85,7 @@ const ChagnePasswordForm: React.FC<PasswordRulesProps> = ({ pwRules:rules }) =>
       } else if (index === 3 && rules.number && !/[0-9]/.test(inputValue)) {
         //testing for numbers
         return "red";
-      } else if (index === 4 && rules.specialChar && !/[!@#$%^&-=+_*(),.?":{}|<>]/.test(inputValue)) {
+      } else if (index === 4 && rules.specialChar && !/[-!@#$%^&=+_*(),.?":{}|<>]/.test(inputValue)) {
         //testing for special characters
         return "red";
       } else {
@@ -94,6 +94,10 @@ const ChagnePasswordForm: React.FC<PasswordRulesProps> = ({ pwRules:rules }) =>
     });
   };
 
+  if (!/[-!@#$%^&=+_*(),.?":{}|<>]/.test('12')) {
+    console.log(!/[-!@#$%^&=+_*(),.?":{}|<>]/.test('12'))
+  }
+
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     // Update the theme with the new color based on the input value
     const newInputValue = event.target.value;
@@ -187,7 +191,9 @@ const ChagnePasswordForm: React.FC<PasswordRulesProps> = ({ pwRules:rules }) =>
                     component: (props) => {
                       return (
                         <FormHelperText {...props}>
-                          {(props.children as string[]).map((line, index) => (
+                          {(props.children as string[]).map((line, index) => {
+                            console.log(index, getColorFromInput(inputValue, msgList)[index])
+                            return (
                             <span
                               key={index}
                               style={{
@@ -204,11 +210,12 @@ const ChagnePasswordForm: React.FC<PasswordRulesProps> = ({ pwRules:rules }) =>
                               )}
                               {line}
                               {index <
-                                (props.children as string[]).length - 1 && (
+                                (props.children as string[]).length && (
                                 <br />
                               )}
                             </span>
-                          ))}
+                          )}
+                          )}
                         </FormHelperText>
                       );
                     },