From a6295a6e56ebafc40fe9b702220aa9def6ab5293 Mon Sep 17 00:00:00 2001
From: prafull-opensignlabs <prafull.navkar@nxglabs.com>
Date: Thu, 30 Nov 2023 18:08:32 +0530
Subject: [PATCH] add password validation

---
 apps/OpenSign/src/routes/Pgsignup.js |  67 ++++++--
 apps/OpenSign/src/routes/Signup.js   | 243 ++++++++++++++++++---------
 2 files changed, 221 insertions(+), 89 deletions(-)

diff --git a/apps/OpenSign/src/routes/Pgsignup.js b/apps/OpenSign/src/routes/Pgsignup.js
index 79f033a6c..5a48be5f8 100644
--- a/apps/OpenSign/src/routes/Pgsignup.js
+++ b/apps/OpenSign/src/routes/Pgsignup.js
@@ -21,6 +21,9 @@ const PgSignUp = (props) => {
   });
   const [validationMessage, setValidationMessage] = useState("");
   const [isLoader, setIsLoader] = useState(true);
+  const [lengthValid, setLengthValid] = useState(false);
+  const [caseDigitValid, setCaseDigitValid] = useState(false);
+  const [specialCharValid, setSpecialCharValid] = useState(false);
 
   // below useEffect is used to fetch App data and save to redux state
   useEffect(() => {
@@ -104,21 +107,23 @@ const PgSignUp = (props) => {
   // "handleSubmit" is used to save user details signup him/her who come from plan-pricing page
   const handleSubmit = (e) => {
     e.preventDefault();
-    setIsLoader(true);
-    if (formData.password === formData.confirmPassword) {
-      const url = window.location.href;
-      let paramString = url.split("?")[1];
-      let queryString = new URLSearchParams(paramString);
-      // console.log("url ", queryString);
+    if (lengthValid && caseDigitValid && specialCharValid) {
+      setIsLoader(true);
+      if (formData.password === formData.confirmPassword) {
+        const url = window.location.href;
+        let paramString = url.split("?")[1];
+        let queryString = new URLSearchParams(paramString);
+        // console.log("url ", queryString);
 
-      let obj = { ...formData };
-      for (let pair of queryString.entries()) {
-        // console.log("Key is: " + pair[0]);
-        // console.log("Value is: " + pair[1]);
-        obj = { ...obj, [pair[0]]: pair[1] };
+        let obj = { ...formData };
+        for (let pair of queryString.entries()) {
+          // console.log("Key is: " + pair[0]);
+          // console.log("Value is: " + pair[1]);
+          obj = { ...obj, [pair[0]]: pair[1] };
+        }
+        saveUser(obj);
+        // console.log("obj ", obj);}
       }
-      saveUser(obj);
-      // console.log("obj ", obj);}
     }
   };
   const saveUser = async (obj) => {
@@ -194,6 +199,15 @@ const PgSignUp = (props) => {
     const newPassword = e.target.value;
     setFormData({ ...formData, [e.target.name]: e.target.value });
     validatePasswords(newPassword, formData.confirmPassword);
+
+    // Check conditions separately
+    setLengthValid(newPassword.length >= 8);
+    setCaseDigitValid(
+      /[a-z]/.test(newPassword) &&
+        /[A-Z]/.test(newPassword) &&
+        /\d/.test(newPassword)
+    );
+    setSpecialCharValid(/[!@#$%^&*()\-_=+{};:,<.>]/.test(newPassword));
   };
   const handleConFirmPassowordChange = (e) => {
     const newConfirmPassword = e.target.value;
@@ -485,6 +499,33 @@ const PgSignUp = (props) => {
             >
               {validationMessage}
             </div>
+            {formData.password.length > 0 && (
+              <div className="mt-1 text-[11px]">
+                <p
+                  className={`${
+                    lengthValid ? "text-green-600" : "text-red-600"
+                  }`}
+                >
+                  {lengthValid ? "✓" : "✗"} Password should be 8 characters long
+                </p>
+                <p
+                  className={`${
+                    caseDigitValid ? "text-green-600" : "text-red-600"
+                  }`}
+                >
+                  {caseDigitValid ? "✓" : "✗"} Password should contain uppercase
+                  letter, lowercase letter, digit
+                </p>
+                <p
+                  className={`${
+                    specialCharValid ? "text-green-600" : "text-red-600"
+                  }`}
+                >
+                  {specialCharValid ? "✓" : "✗"} Password should contain special
+                  character
+                </p>
+              </div>
+            )}
             <div className="clearfix">
               <button type="submit" className="signupbtn">
                 Submit
diff --git a/apps/OpenSign/src/routes/Signup.js b/apps/OpenSign/src/routes/Signup.js
index 72a80588e..faf0e2081 100644
--- a/apps/OpenSign/src/routes/Signup.js
+++ b/apps/OpenSign/src/routes/Signup.js
@@ -25,92 +25,138 @@ const Signup = (props) => {
     toastDescription: ""
   });
   const [showPassword, setShowPassword] = useState(false);
+  const [lengthValid, setLengthValid] = useState(false);
+  const [caseDigitValid, setCaseDigitValid] = useState(false);
+  const [specialCharValid, setSpecialCharValid] = useState(false);
+
   const togglePasswordVisibility = () => setShowPassword(!showPassword);
   const image = props.appInfo.applogo;
 
+  const clearStorage = async () => {
+    if (Parse.User.current()) {
+      await Parse.User.logOut();
+    }
+    let baseUrl = localStorage.getItem("BaseUrl12");
+    let appid = localStorage.getItem("AppID12");
+    let applogo = localStorage.getItem("appLogo");
+    let domain = localStorage.getItem("domain");
+    let appversion = localStorage.getItem("appVersion");
+    let appTitle = localStorage.getItem("appTitle");
+    let defaultmenuid = localStorage.getItem("defaultmenuid");
+    let PageLanding = localStorage.getItem("PageLanding");
+    let _appName = localStorage.getItem("_appName");
+    let _app_objectId = localStorage.getItem("_app_objectId");
+    let appName = localStorage.getItem("appName");
+    let userSettings = localStorage.getItem("userSettings");
+
+    localStorage.clear();
+
+    localStorage.setItem("BaseUrl12", baseUrl);
+    localStorage.setItem("AppID12", appid);
+    localStorage.setItem("appLogo", applogo);
+    localStorage.setItem("domain", domain);
+    localStorage.setItem("appversion", appversion);
+    localStorage.setItem("appTitle", appTitle);
+    localStorage.setItem("defaultmenuid", defaultmenuid);
+    localStorage.setItem("PageLanding", PageLanding);
+    localStorage.setItem("_appName", _appName);
+    localStorage.setItem("_app_objectId", _app_objectId);
+    localStorage.setItem("appName", appName);
+    localStorage.setItem("userSettings", userSettings);
+    localStorage.setItem("baseUrl", baseUrl);
+    localStorage.setItem("parseAppId", appid);
+  };
   const handleSubmit = (event) => {
-    setState({ loading: true });
-    const userDetails = {
-      name: name,
-      email: email,
-      phone: phone,
-      company: company,
-      jobTitle: jobTitle
-    };
-    localStorage.setItem("userDetails", JSON.stringify(userDetails));
-    try {
-      event.preventDefault();
-      Parse.serverURL = parseBaseUrl;
-      Parse.initialize(parseAppId);
-      event.preventDefault();
-      var user = new Parse.User();
-      user.set("name", name);
-      user.set("email", email);
-      user.set("password", password);
-      user.set("phone", phone);
-      user.set("username", email);
-      let res = user.save();
-      res
-        .then(async (r) => {
-          if (r) {
-            let roleData = props.appInfo.settings;
-            if (roleData && roleData.length > 0) {
-              const params = {
-                userDetails: {
-                  jobTitle: jobTitle,
-                  company: company,
-                  name: name,
-                  email: email,
-                  phone: phone,
-                  role: props.appInfo.defaultRole
+    event.preventDefault();
+    if (lengthValid && caseDigitValid && specialCharValid) {
+      clearStorage();
+      setState({ loading: true });
+      const userDetails = {
+        name: name,
+        email: email,
+        phone: phone,
+        company: company,
+        jobTitle: jobTitle
+      };
+      localStorage.setItem("userDetails", JSON.stringify(userDetails));
+      try {
+        Parse.serverURL = parseBaseUrl;
+        Parse.initialize(parseAppId);
+        event.preventDefault();
+        var user = new Parse.User();
+        user.set("name", name);
+        user.set("email", email);
+        user.set("password", password);
+        user.set("phone", phone);
+        user.set("username", email);
+        let res = user.save();
+        res
+          .then(async (r) => {
+            if (r) {
+              let roleData = props.appInfo.settings;
+              if (roleData && roleData.length > 0) {
+                const params = {
+                  userDetails: {
+                    jobTitle: jobTitle,
+                    company: company,
+                    name: name,
+                    email: email,
+                    phone: phone,
+                    role: props.appInfo.defaultRole
+                  }
+                };
+                try {
+                  const usersignup = await Parse.Cloud.run(
+                    "usersignup",
+                    params
+                  );
+                  if (usersignup) {
+                    handleNavigation(r.getSessionToken());
+                  }
+                } catch (err) {
+                  alert(err.message);
+                  setState({ loading: false });
                 }
-              };
-              try {
-                const usersignup = await Parse.Cloud.run("usersignup", params);
-                if (usersignup) {
-                  handleNavigation(r.getSessionToken());
+              }
+            }
+          })
+          .catch(async (err) => {
+            if (err.code === 202) {
+              const params = { email: email };
+              const res = await Parse.Cloud.run("getUserDetails", params);
+              // console.log("Res ", res);
+              if (res) {
+                alert("User already exists with this username!");
+                setState({ loading: false });
+              } else {
+                let baseUrl = localStorage.getItem("BaseUrl12");
+                let parseAppId = localStorage.getItem("AppID12");
+                // console.log("state.email ", email);
+                try {
+                  Parse.serverURL = baseUrl;
+                  Parse.initialize(parseAppId);
+                  await Parse.User.requestPasswordReset(email).then(
+                    async function (res1) {
+                      if (res1.data === undefined) {
+                        alert(
+                          "Verification mail has been sent to your E-mail!"
+                        );
+                      }
+                    }
+                  );
+                } catch (err) {
+                  console.log(err);
                 }
-              } catch (err) {
-                alert(err.message);
                 setState({ loading: false });
               }
-            }
-          }
-        })
-        .catch(async (err) => {
-          if (err.code === 202) {
-            const params = { email: email };
-            const res = await Parse.Cloud.run("getUserDetails", params);
-            // console.log("Res ", res);
-            if (res) {
-              alert("User already exists with this username!");
-              setState({ loading: false });
             } else {
-              let baseUrl = localStorage.getItem("BaseUrl12");
-              let parseAppId = localStorage.getItem("AppID12");
-              // console.log("state.email ", email);
-              try {
-                Parse.serverURL = baseUrl;
-                Parse.initialize(parseAppId);
-                await Parse.User.requestPasswordReset(email).then(
-                  async function (res1) {
-                    if (res1.data === undefined) {
-                      alert("Verification mail has been sent to your E-mail!");
-                    }
-                  }
-                );
-              } catch (err) {
-                console.log(err);
-              }
+              alert(err.message);
               setState({ loading: false });
             }
-          } else {
-            alert(err.message);
-            setState({ loading: false });
-          }
-        });
-    } catch (error) {
-      console.log("err ", error);
+          });
+      } catch (error) {
+        console.log("err ", error);
+      }
     }
   };
 
@@ -396,6 +442,19 @@ const Signup = (props) => {
     // eslint-disable-next-line
   }, []);
 
+  const handlePasswordChange = (e) => {
+    const newPassword = e.target.value;
+    setPassword(newPassword);
+
+    // Check conditions separately
+    setLengthValid(newPassword.length >= 8);
+    setCaseDigitValid(
+      /[a-z]/.test(newPassword) &&
+        /[A-Z]/.test(newPassword) &&
+        /\d/.test(newPassword)
+    );
+    setSpecialCharValid(/[!@#$%^&*()\-_=+{};:,<.>]/.test(newPassword));
+  };
   return (
     <div className="bg-white">
       {state.loading && (
@@ -508,7 +567,7 @@ const Signup = (props) => {
                           className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
                           name="password"
                           value={password}
-                          onChange={(e) => setPassword(e.target.value)}
+                          onChange={(e) => handlePasswordChange(e)}
                           required
                         />
                         <span
@@ -524,6 +583,38 @@ const Signup = (props) => {
                           )}
                         </span>
                       </div>
+                      {password.length > 0 && (
+                        <div className="mt-1 text-[11px]">
+                          <p
+                            className={`${
+                              lengthValid ? "text-green-600" : "text-red-600"
+                            }`}
+                          >
+                            {lengthValid ? "✓" : "✗"} Password should be 8
+                            characters long
+                          </p>
+                          <p
+                            className={`${
+                              caseDigitValid ? "text-green-600" : "text-red-600"
+                            }`}
+                          >
+                            {caseDigitValid ? "✓" : "✗"} Password should contain
+                            uppercase letter, lowercase letter, digit
+                          </p>
+                          <p
+                            className={`${
+                              specialCharValid
+                                ? "text-green-600"
+                                : "text-red-600"
+                            }`}
+                          >
+                            {specialCharValid ? "✓" : "✗"} Password should
+                            contain special character
+                          </p>
+                          {/* </>
+                          )} */}
+                        </div>
+                      )}
                     </div>
                   </div>
                   <div className="flex flex-col md:flex-row justify-between items-stretch gap-8 text-center text-xs font-bold mt-2">