Password must be strong with specific rules issue#337

package.json

@@ -42,6 +42,7 @@
     "reactive-button": "^1.3.15",
     "rodal": "^2.1.0",
     "tailwind-merge": "^2.2.2",
+    "validator": "^13.12.0",
     "web-vitals": "^2.1.4",
     "webpack": "^5.91.0"
   },

src/pages/user/UserRegistration.jsx

@@ -3,6 +3,7 @@ import { useLocation } from "react-router-dom";
 import InputField from "../../Components/shared/InputField";
 import ReactiveButton from "reactive-button";
 import Background from "../../Components/shared/Background";
+import Validator from 'validator';
 import {
   googleLogin,
   googleSignup,
@@ -44,7 +45,19 @@ function LoginRegisterForm() {
     width: "fit-content",
     margin: "0px",
   };
-
+  const validate=(value)=>{
+    console.log(value)
+
+    if(Validator.isStrongPassword(value,{
+      minLength:8,minLowercase:1,minUppercase:1,minNumbers:1,minSymbols:1
+    })){
+      setErrorMessage('Is Strong Password')
+      // setPassword(value);
+    }else{
+      setErrorMessage('Is Not Strong Password , Should contain atleast one lowecase letter and atleast one uppercase letter and atleast one number and atleast one symbol and min length should be 8')
+    }
+  }
+  const [errorMessage,setErrorMessage]=useState("");
   const [name, setname] = useState("");
   const [phone_number, setPhone_number] = useState("");
   const [email, setEmail] = useState("");
@@ -116,11 +129,13 @@ function LoginRegisterForm() {
               placeholder="Password"
               value={password}
               onChange={(e) => {
-                setError("");
+                validate(e.target.value)
+                // setError("");
                 setPassword(e.target.value);
               }}
               required
-            />
+              />
+              {errorMessage==''?null:<span style={{fontWeight:'bold',color:'red'}}>{errorMessage}</span>}
 
             {!isLogin && (
               <>
@@ -133,13 +148,15 @@ function LoginRegisterForm() {
                     successText="Logging In"
                     errorText="Register"
                     messageDuration={3000}
+                    disabled={errorMessage==='Is Not Strong Password , Should contain atleast one lowecase letter and atleast one uppercase letter and atleast one number and atleast one symbol and min length should be 8'}
                     onClick={async () =>
                       registration(
                         name,
                         phone_number,
                         email,
                         password,
                         setError,
+                        setErrorMessage,
                         setButtonState
                       )
                     }