From 8833018027c2b422c4a780eb0fc16d43ca088fe2 Mon Sep 17 00:00:00 2001
From: Andrew <148278535+andrew-opensignlabs@users.noreply.github.com>
Date: Fri, 26 Sep 2025 17:57:57 +0000
Subject: [PATCH] fix: password validation issue

---
 apps/OpenSign/src/pages/AddAdmin.jsx       |  2 +-
 apps/OpenSign/src/pages/ChangePassword.jsx | 27 ++++++++++++++++-
 apps/OpenSign/src/pages/ForgetPassword.jsx | 34 ++++++++++++++++++++++
 apps/OpenSign/src/pages/Login.jsx          | 27 ++++++++++++++++-
 4 files changed, 87 insertions(+), 3 deletions(-)

diff --git a/apps/OpenSign/src/pages/AddAdmin.jsx b/apps/OpenSign/src/pages/AddAdmin.jsx
index ac3f38d51..217ed6e74 100644
--- a/apps/OpenSign/src/pages/AddAdmin.jsx
+++ b/apps/OpenSign/src/pages/AddAdmin.jsx
@@ -253,7 +253,7 @@ const AddAdmin = () => {
         /[A-Z]/.test(newPassword) &&
         /\d/.test(newPassword)
     );
-    setSpecialCharValid(/[!@#$%^&*()\-_=+{};:,<.>]/.test(newPassword));
+  setSpecialCharValid(/[!@#$%^&*()\-_=+{};:,<.>?]/.test(newPassword));
   };
   const subscribeNewsletter = async () => {
     try {
diff --git a/apps/OpenSign/src/pages/ChangePassword.jsx b/apps/OpenSign/src/pages/ChangePassword.jsx
index b162a4388..a084fc962 100644
--- a/apps/OpenSign/src/pages/ChangePassword.jsx
+++ b/apps/OpenSign/src/pages/ChangePassword.jsx
@@ -4,6 +4,18 @@ import { Navigate } from "react-router";
 import { useTranslation } from "react-i18next";
 
 function ChangePassword() {
+  const [lengthValid, setLengthValid] = useState(false);
+  const [caseDigitValid, setCaseDigitValid] = useState(false);
+  const [specialCharValid, setSpecialCharValid] = useState(false);
+  const handlePasswordChange = (e) => {
+    const value = e.target.value;
+    setnewpassword(value);
+    setLengthValid(value.length >= 8);
+    setCaseDigitValid(
+      /[a-z]/.test(value) && /[A-Z]/.test(value) && /\d/.test(value)
+    );
+    setSpecialCharValid(/[!@#$%^&*()\-_=+{};:,<.>?]/.test(value));
+  };
   const { t } = useTranslation();
   const [currentpassword, setCurrentPassword] = useState("");
   const [newpassword, setnewpassword] = useState("");
@@ -84,13 +96,26 @@ function ChangePassword() {
               type="password"
               name="newpassword"
               value={newpassword}
-              onChange={(e) => setnewpassword(e.target.value)}
+              onChange={handlePasswordChange}
               className="op-input op-input-bordered op-input-sm text-xs w-full"
               placeholder={t("new-password")}
               onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
               onInput={(e) => e.target.setCustomValidity("")}
               required
             />
+            {newpassword.length > 0 && (
+              <div className="mt-1 text-[11px]">
+                <p className={lengthValid ? "text-green-600" : "text-red-600"}>
+                  {lengthValid ? "✓" : "✗"} Password length ≥ 8
+                </p>
+                <p className={caseDigitValid ? "text-green-600" : "text-red-600"}>
+                  {caseDigitValid ? "✓" : "✗"} Uppercase, lowercase, and number
+                </p>
+                <p className={specialCharValid ? "text-green-600" : "text-red-600"}>
+                  {specialCharValid ? "✓" : "✗"} Special character
+                </p>
+              </div>
+            )}
           </div>
           <div>
             <label htmlFor="newpassword" className="text-xs block ml-1">
diff --git a/apps/OpenSign/src/pages/ForgetPassword.jsx b/apps/OpenSign/src/pages/ForgetPassword.jsx
index 12bb2cb49..72c501c80 100644
--- a/apps/OpenSign/src/pages/ForgetPassword.jsx
+++ b/apps/OpenSign/src/pages/ForgetPassword.jsx
@@ -13,6 +13,18 @@ import { useTranslation } from "react-i18next";
 import Loader from "../primitives/Loader";
 
 function ForgotPassword() {
+  const [lengthValid, setLengthValid] = useState(false);
+  const [caseDigitValid, setCaseDigitValid] = useState(false);
+  const [specialCharValid, setSpecialCharValid] = useState(false);
+  const handlePasswordChange = (event) => {
+    let value = event.target.value;
+    setState({ ...state, password: value });
+    setLengthValid(value.length >= 8);
+    setCaseDigitValid(
+      /[a-z]/.test(value) && /[A-Z]/.test(value) && /\d/.test(value)
+    );
+    setSpecialCharValid(/[!@#$%^&*()\-_=+{};:,<.>?]/.test(value));
+  };
   const { t } = useTranslation();
   const dispatch = useDispatch();
   const navigate = useNavigate();
@@ -124,6 +136,28 @@ function ForgotPassword() {
                   </div>
                 </div>
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-center text-xs font-bold">
+                <input
+                  type="password"
+                  name="password"
+                  className="op-input op-input-bordered op-input-sm w-full mt-2"
+                  value={state.password}
+                  onChange={handlePasswordChange}
+                  placeholder="New password"
+                  required
+                />
+                {state.password.length > 0 && (
+                  <div className="mt-1 text-[11px]">
+                    <p className={lengthValid ? "text-green-600" : "text-red-600"}>
+                      {lengthValid ? "✓" : "✗"} Password length ≥ 8
+                    </p>
+                    <p className={caseDigitValid ? "text-green-600" : "text-red-600"}>
+                      {caseDigitValid ? "✓" : "✗"} Uppercase, lowercase, and number
+                    </p>
+                    <p className={specialCharValid ? "text-green-600" : "text-red-600"}>
+                      {specialCharValid ? "✓" : "✗"} Special character
+                    </p>
+                  </div>
+                )}
                   <button type="submit" className="op-btn op-btn-primary">
                     {t("submit")}
                   </button>
diff --git a/apps/OpenSign/src/pages/Login.jsx b/apps/OpenSign/src/pages/Login.jsx
index b57f86aac..e41a3b851 100644
--- a/apps/OpenSign/src/pages/Login.jsx
+++ b/apps/OpenSign/src/pages/Login.jsx
@@ -23,6 +23,18 @@ import { useTranslation } from "react-i18next";
 import SelectLanguage from "../components/pdf/SelectLanguage";
 
 function Login() {
+  const [lengthValid, setLengthValid] = useState(false);
+  const [caseDigitValid, setCaseDigitValid] = useState(false);
+  const [specialCharValid, setSpecialCharValid] = useState(false);
+  const handlePasswordChange = (event) => {
+    let value = event.target.value;
+    setState({ ...state, password: value });
+    setLengthValid(value.length >= 8);
+    setCaseDigitValid(
+      /[a-z]/.test(value) && /[A-Z]/.test(value) && /\d/.test(value)
+    );
+    setSpecialCharValid(/[!@#$%^&*()\-_=+{};:,<.>?]/.test(value));
+  };
   const appName =
     "OpenSign™";
   const { t, i18n } = useTranslation();
@@ -474,7 +486,7 @@ function Login() {
                                 name="password"
                                 value={state.password}
                                 autoComplete="current-password"
-                                onChange={handleChange}
+                                onChange={handlePasswordChange}
                                 onInvalid={(e) =>
                                   e.target.setCustomValidity(
                                     t("input-required")
@@ -495,6 +507,19 @@ function Login() {
                               </span>
                             </div>
                           <div className="relative mt-1">
+                          {state.password.length > 0 && (
+                            <div className="mt-1 text-[11px]">
+                              <p className={lengthValid ? "text-green-600" : "text-red-600"}>
+                                {lengthValid ? "✓" : "✗"} Password length ≥ 8
+                              </p>
+                              <p className={caseDigitValid ? "text-green-600" : "text-red-600"}>
+                                {caseDigitValid ? "✓" : "✗"} Uppercase, lowercase, and number
+                              </p>
+                              <p className={specialCharValid ? "text-green-600" : "text-red-600"}>
+                                {specialCharValid ? "✓" : "✗"} Special character
+                              </p>
+                            </div>
+                          )}
                             <NavLink
                               to="/forgetpassword"
                               className="text-[13px] op-link op-link-primary underline-offset-1 focus:outline-none ml-1"