From ff8f94a851f9b3cfd45b35699d49b915692210a9 Mon Sep 17 00:00:00 2001
From: PavanTeja2005 <98730339+PavanTeja2005@users.noreply.github.com>
Date: Sun, 13 Oct 2024 07:52:35 +0530
Subject: [PATCH 1/4] Update Signup.jsx

Resolved conflicts
---
 frontend/src/components/Pages/Signup.jsx | 38 ++++++++++++++++--------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/Pages/Signup.jsx b/frontend/src/components/Pages/Signup.jsx
index 106a5933..acd462cc 100644
--- a/frontend/src/components/Pages/Signup.jsx
+++ b/frontend/src/components/Pages/Signup.jsx
@@ -1,10 +1,10 @@
-
-import { useState , useEffect } from "react";
+import { useState, useEffect } from "react";
 import photo from "../../assets/login.png";
 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";
 
 const Signup = () => {
   const API_URL = import.meta.env.VITE_BACKEND_URL || 'http://localhost:3000';
@@ -16,16 +16,21 @@ const Signup = () => {
     email: '',
     password: '',
   });
-  const [hidden, setHidden] = useState(true)
+  const [hidden, setHidden] = useState(true);
+  const [passwordStrength, setPasswordStrength] = useState(null);
 
   const handleChange = (e) => {
     setData({ ...data, [e.target.name]: e.target.value });
+
+    if (e.target.name === "password") {
+      const strength = zxcvbn(e.target.value);
+      setPasswordStrength(strength);
+    }
   };
 
   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);
@@ -66,7 +71,6 @@ const Signup = () => {
         return;
       }
 
-      // Handle successful registration
       alert('Registered successfully! Please log in.');
       navigate('/');
     } catch (error) {
@@ -75,9 +79,9 @@ const Signup = () => {
     }
   };
 
-    useEffect(() => {
-      window.scrollTo(0, 0);
-    }, []);
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
 
   return (
     <div className="w-screen h-screen flex items-center justify-center pt-10">
@@ -118,13 +122,23 @@ const Signup = () => {
             type={hidden ? "password" : "text"}
             onChange={(e) => handleChange(e)}
           />
-          <button className="absolute top-1/2 -translate-y-1/2 right-4" onClick={(e)=>{
-            e.preventDefault()
-            setHidden(!hidden)
+          <button className="absolute top-1/2 -translate-y-1/2 right-4" onClick={(e) => {
+            e.preventDefault();
+            setHidden(!hidden);
           }}>
-            {hidden ? <FaEyeSlash/> : <FaEye/>}
+            {hidden ? <FaEyeSlash /> : <FaEye />}
           </button>
         </div>
+        {passwordStrength && (
+          <div className="w-full mt-2">
+            <div className={`password-strength strength-${passwordStrength.score}`}>
+              Password Strength: {["Very Weak", "Weak", "Okay", "Good", "Strong"][passwordStrength.score]}
+            </div>
+            <div className="progress-bar bg-gray-200 h-2 rounded">
+              <div className={`progress bg-${["red", "orange", "yellow", "green", "blue"][passwordStrength.score]} h-full rounded`} style={{ width: `${(passwordStrength.score + 1) * 20}%` }}></div>
+            </div>
+          </div>
+        )}
         {error && (
           <div className="w-full p-2 bg-red-100 text-red-700 border border-red-400 rounded-md">
             {error}

From 292d499ed3115a9486a6be2d24aaadb543ef8e11 Mon Sep 17 00:00:00 2001
From: Ramakrushna Biswal
 <125277258+RamakrushnaBiswal@users.noreply.github.com>
Date: Sun, 13 Oct 2024 07:56:43 +0530
Subject: [PATCH 2/4] Update Signup.jsx

---
 frontend/src/components/Pages/Signup.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Pages/Signup.jsx b/frontend/src/components/Pages/Signup.jsx
index acd462cc..ccf7055f 100644
--- a/frontend/src/components/Pages/Signup.jsx
+++ b/frontend/src/components/Pages/Signup.jsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import React,{ useState, useEffect } from "react";
 import photo from "../../assets/login.png";
 import { useNavigate } from "react-router-dom";
 import { Link } from "react-router-dom";

From a8a06e445fedec9fec7e4ac07c4fbe4ee6f50a95 Mon Sep 17 00:00:00 2001
From: PavanTeja2005 <98730339+PavanTeja2005@users.noreply.github.com>
Date: Sun, 13 Oct 2024 08:19:44 +0530
Subject: [PATCH 3/4] Update package.json

---
 frontend/package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

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

From 88a35cb57a51b09b4419379f722ac345e077599e Mon Sep 17 00:00:00 2001
From: PavanTeja2005 <98730339+PavanTeja2005@users.noreply.github.com>
Date: Sun, 13 Oct 2024 10:53:35 +0530
Subject: [PATCH 4/4] Please retry

---
 frontend/src/components/Pages/Signup.jsx | 57 ++++++++++++++----------
 1 file changed, 34 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/Pages/Signup.jsx b/frontend/src/components/Pages/Signup.jsx
index ccf7055f..01170179 100644
--- a/frontend/src/components/Pages/Signup.jsx
+++ b/frontend/src/components/Pages/Signup.jsx
@@ -1,30 +1,31 @@
-import React,{ useState, useEffect } from "react";
+
+import { useState , useEffect } from "react";
 import photo from "../../assets/login.png";
 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 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: '',
     password: '',
   });
-  const [hidden, setHidden] = useState(true);
-  const [passwordStrength, setPasswordStrength] = useState(null);
+  const [hidden, setHidden] = useState(true)
 
   const handleChange = (e) => {
     setData({ ...data, [e.target.name]: e.target.value });
 
     if (e.target.name === "password") {
-      const strength = zxcvbn(e.target.value);
-      setPasswordStrength(strength);
+      const result = zxcvbn(e.target.value);
+      setPasswordStrength(result.score); // Update password strength score
     }
   };
 
@@ -71,6 +72,7 @@ const Signup = () => {
         return;
       }
 
+      // Handle successful registration
       alert('Registered successfully! Please log in.');
       navigate('/');
     } catch (error) {
@@ -79,9 +81,19 @@ const Signup = () => {
     }
   };
 
-  useEffect(() => {
-    window.scrollTo(0, 0);
-  }, []);
+    useEffect(() => {
+      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 (
     <div className="w-screen h-screen flex items-center justify-center pt-10">
@@ -122,23 +134,22 @@ const Signup = () => {
             type={hidden ? "password" : "text"}
             onChange={(e) => handleChange(e)}
           />
-          <button className="absolute top-1/2 -translate-y-1/2 right-4" onClick={(e) => {
-            e.preventDefault();
-            setHidden(!hidden);
+          <button className="absolute top-1/2 -translate-y-1/2 right-4" onClick={(e)=>{
+            e.preventDefault()
+            setHidden(!hidden)
           }}>
-            {hidden ? <FaEyeSlash /> : <FaEye />}
+            {hidden ? <FaEyeSlash/> : <FaEye/>}
           </button>
         </div>
-        {passwordStrength && (
-          <div className="w-full mt-2">
-            <div className={`password-strength strength-${passwordStrength.score}`}>
-              Password Strength: {["Very Weak", "Weak", "Okay", "Good", "Strong"][passwordStrength.score]}
-            </div>
-            <div className="progress-bar bg-gray-200 h-2 rounded">
-              <div className={`progress bg-${["red", "orange", "yellow", "green", "blue"][passwordStrength.score]} h-full rounded`} style={{ width: `${(passwordStrength.score + 1) * 20}%` }}></div>
-            </div>
-          </div>
-        )}
+
+        {/* Password Strength Meter */}
+        <div className="w-full mt-2">
+          <div className="h-2 rounded-full" style={{ backgroundColor: getPasswordStrengthColor(passwordStrength), width: `${(passwordStrength + 1) * 20}%` }}></div>
+          <p className="text-sm text-[#666] mt-1">
+            Strength: {getPasswordStrengthText(passwordStrength)}
+          </p>
+        </div>
+
         {error && (
           <div className="w-full p-2 bg-red-100 text-red-700 border border-red-400 rounded-md">
             {error}