fix: password validation issue

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 {

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">

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>

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"