Merge pull request #2173 from techy4shri/contact

feat: Add alphanumeric password check and password strength indicator

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 (
     <div className="md:min-h-screen h-[120vh] bg-[#f9efe4]">
       {/* Main content */}
@@ -326,11 +352,16 @@ const AuthForm = () => {
                       <div className="relative">
                         <FaPhone className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
                         <input
-                          type="tel"
+                          type="text"
                           placeholder="Phone Number"
                           className="w-full p-2 pl-10 rounded bg-white text-black"
                           value={phone}
-                          onChange={(e) => setPhone(e.target.value)}
+                          onChange={(e) => {
+                            const value = e.target.value;
+                            if (/^\d*$/.test(value)) {
+                              setPhone(value);
+                            }
+                          }}
                           required
                         />
                       </div>
@@ -341,17 +372,37 @@ 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
                         />
                         <button
                           type="button"
                           onClick={() => setShowSignupPassword(!showSignupPassword)}
                           className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"
                         >
-                          {showSignupPassword ? "Hide" : "Show"}
+                          {showSignupPassword ? <FaEyeSlash /> : <FaEye />}
                         </button>
                       </div>
+                      <div className="relative">
+                        <div className="w-full bg-gray-200 rounded-full h-2 mt-2"> {/*passward strength check*/}
+                          <div
+                            className={`h-full rounded-full ${
+                              passwordStrength === 3 ? "bg-green-500" : 
+                              passwordStrength === 2 ? "bg-yellow-500" : 
+                              passwordStrength === 1 ? "bg-red-500" : "bg-gray-400"
+                            }`}
+                            style={{ width: `${(passwordStrength / 3) * 100}%` }}
+                          ></div>
+                        </div>
+                        <p className="text-xs text-gray-500 mt-1">
+                          {passwordStrength === 3 ? "Strong" : 
+                          passwordStrength === 2 ? "Medium" : 
+                          passwordStrength === 1 ? "Weak" : "Very Weak"}
+                        </p>
+                      </div>
                       <div className="relative">
                         <FaLock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
                         <input