diff --git a/frontend/package.json b/frontend/package.json index fc13f2f4..30175db5 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -33,7 +33,8 @@ "react-router-dom": "^6.24.1", "split-type": "^0.3.4", "tailwind-merge": "^2.5.2", - "tailwindcss": "^3.4.4" + "tailwindcss": "^3.4.4", + "zxcvbn": "^4.4.2" }, "devDependencies": { "@types/react": "^18.3.3", diff --git a/frontend/src/components/Pages/Signup.jsx b/frontend/src/components/Pages/Signup.jsx index 106a5933..01170179 100644 --- a/frontend/src/components/Pages/Signup.jsx +++ b/frontend/src/components/Pages/Signup.jsx @@ -5,12 +5,14 @@ import { useNavigate } from "react-router-dom"; import { Link } from "react-router-dom"; import { FaEye } from "react-icons/fa"; import { FaEyeSlash } from "react-icons/fa6"; +import zxcvbn from "zxcvbn"; // Import zxcvbn for password strength check const Signup = () => { const API_URL = import.meta.env.VITE_BACKEND_URL || 'http://localhost:3000'; const navigate = useNavigate(); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); + const [passwordStrength, setPasswordStrength] = useState(0); // State to track password strength const [data, setData] = useState({ name: '', email: '', @@ -20,12 +22,16 @@ const Signup = () => { const handleChange = (e) => { setData({ ...data, [e.target.name]: e.target.value }); + + if (e.target.name === "password") { + const result = zxcvbn(e.target.value); + setPasswordStrength(result.score); // Update password strength score + } }; const handleSubmit = async (e) => { e.preventDefault(); setIsLoading(true); - // Add input validation if (!data.email || !data.password || !data.name) { setError('Please fill in all fields'); setIsLoading(false); @@ -79,6 +85,16 @@ const Signup = () => { window.scrollTo(0, 0); }, []); + const getPasswordStrengthColor = (score) => { + const colors = ["#ff4d4d", "#ff944d", "#ffd24d", "#d2ff4d", "#4dff88"]; + return colors[score]; + }; + + const getPasswordStrengthText = (score) => { + const strengthLevels = ["Very Weak", "Weak", "Okay", "Good", "Strong"]; + return strengthLevels[score]; + }; + return (
login @@ -125,6 +141,15 @@ const Signup = () => { {hidden ? : }
+ + {/* Password Strength Meter */} +
+
+

+ Strength: {getPasswordStrengthText(passwordStrength)} +

+
+ {error && (
{error}