diff --git a/src/User/pages/UserAuth/UserAuth.jsx b/src/User/pages/UserAuth/UserAuth.jsx index 1b8201165..91d87f11b 100644 --- a/src/User/pages/UserAuth/UserAuth.jsx +++ b/src/User/pages/UserAuth/UserAuth.jsx @@ -6,6 +6,8 @@ import { FaLock, FaUser, FaPhone, + FaEye, + FaEyeSlash, } from "react-icons/fa"; import { useNavigate } from "react-router-dom"; import axios from "axios"; @@ -16,6 +18,10 @@ import { SlLogin } from "react-icons/sl"; import { MdAssignmentInd } from "react-icons/md"; import { Link } from "react-router-dom"; + + + + const AuthForm = () => { const [isFlipped, setIsFlipped] = useState(false); const [loading, setLoading] = useState(false); @@ -35,7 +41,9 @@ const AuthForm = () => { const [confirmPassword, setConfirmPassword] = useState(""); const [showSignupPassword, setShowSignupPassword] = useState(false); // New state for signup password visibility const [showConfirmPassword, setShowConfirmPassword] = useState(false); // New state for confirm password visibility + const [passwordStrength, setPasswordStrength] = useState(0); + const isPhoneValid = (number) => /^\d+$/.test(number) && number.length == 10; //checking phone number's validity const handleLogin = async (e) => { e.preventDefault(); setLoading(true); @@ -117,6 +125,16 @@ const AuthForm = () => { setLoading(false); return; } + if (!isPhoneValid(phone)) { //checking phone number's validity + Swal.fire({ + title: "Invalid phone number", + text: "Phone number must be of 10 digits.", + icon: "error", + confirmButtonText: "Ok", + }); + setLoading(false); + return; + } try { await axios.post("https://vigybag-backend.onrender.com/api/auth/signup", { @@ -148,6 +166,14 @@ const AuthForm = () => { window.location.href = `https://vigybag-backend.onrender.com/auth/${provider}`; }; + const checkPasswordStrength = (password) => { //checking password strength + const lengthCriteria = password.length >= 8; + const numberCriteria = /\d/.test(password); + const letterCriteria = /[a-zA-Z]/.test(password); + const strength = (lengthCriteria ? 1 : 0) + (numberCriteria ? 1 : 0) + (letterCriteria ? 1 : 0); + + return strength; + }; return (
{/* Main content */} @@ -326,11 +352,16 @@ const AuthForm = () => {
setPhone(e.target.value)} + onChange={(e) => { + const value = e.target.value; + if (/^\d*$/.test(value)) { + setPhone(value); + } + }} required />
@@ -341,7 +372,10 @@ const AuthForm = () => { placeholder="Password" className="w-full p-2 pl-10 rounded bg-white text-black" value={signupPassword} - onChange={(e) => setSignupPassword(e.target.value)} + onChange={(e) => { + setSignupPassword(e.target.value); + setPasswordStrength(checkPasswordStrength(e.target.value)); {/*password strength check */} + }} required />
+
+
{/*passward strength check*/} +
+
+

+ {passwordStrength === 3 ? "Strong" : + passwordStrength === 2 ? "Medium" : + passwordStrength === 1 ? "Weak" : "Very Weak"} +

+