fix: password validation issue

This commit is contained in:
Andrew
2025-09-26 17:57:57 +00:00
parent d1c405912b
commit 8833018027
4 changed files with 87 additions and 3 deletions
+1 -1
View File
@@ -253,7 +253,7 @@ const AddAdmin = () => {
/[A-Z]/.test(newPassword) &&
/\d/.test(newPassword)
);
setSpecialCharValid(/[!@#$%^&*()\-_=+{};:,<.>]/.test(newPassword));
setSpecialCharValid(/[!@#$%^&*()\-_=+{};:,<.>?]/.test(newPassword));
};
const subscribeNewsletter = async () => {
try {
+26 -1
View File
@@ -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">
@@ -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>
+26 -1
View File
@@ -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"