From e3935c9760e6760009db8d6aa0ba5e59b566dc19 Mon Sep 17 00:00:00 2001
From: Kshitij <kshitijk@tuta.io>
Date: Fri, 18 Jul 2025 02:47:16 +0530
Subject: [PATCH] Added confirm password text box and show/hide password
 toggles in both password fields.

---
 Frontend/src/pages/Login/SignupPage.jsx | 73 ++++++++++++++++++++-----
 1 file changed, 59 insertions(+), 14 deletions(-)

diff --git a/Frontend/src/pages/Login/SignupPage.jsx b/Frontend/src/pages/Login/SignupPage.jsx
index 7d8113c..997fd5d 100644
--- a/Frontend/src/pages/Login/SignupPage.jsx
+++ b/Frontend/src/pages/Login/SignupPage.jsx
@@ -13,10 +13,14 @@ const SignupPage = (props) => {
   const lastNameElement = useRef();
   const emailElement = useRef();
   const passwordElement = useRef();
+  const confirmPasswordElement = useRef();
 
   const [error, setError] = useState("");
   const [passwordStrength, setPasswordStrength] = useState("");
   const [loading, setLoading] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+
   const navigate = useNavigate();
 
   const evaluatePasswordStrength = (password) => {
@@ -34,7 +38,7 @@ const SignupPage = (props) => {
 
   const handlePasswordChange = (e) => {
     const pwd = e.target.value;
-    passwordElement.current.value = pwd; // sync with ref
+    passwordElement.current.value = pwd;
     setPasswordStrength(evaluatePasswordStrength(pwd));
   };
 
@@ -43,6 +47,7 @@ const SignupPage = (props) => {
     setError("");
 
     const password = passwordElement.current.value;
+    const confirmPassword = confirmPasswordElement.current.value;
 
     const strongPasswordRegex =
       /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&]).{8,}$/;
@@ -54,6 +59,11 @@ const SignupPage = (props) => {
       return;
     }
 
+    if (password !== confirmPassword) {
+      setError("Passwords do not match.");
+      return;
+    }
+
     setLoading(true);
     try {
       const pwned = await isPasswordPwned(password);
@@ -99,6 +109,7 @@ const SignupPage = (props) => {
     lastNameElement.current.value = "";
     emailElement.current.value = "";
     passwordElement.current.value = "";
+    confirmPasswordElement.current.value = "";
     setPasswordStrength("");
     setLoading(false);
   };
@@ -123,7 +134,7 @@ const SignupPage = (props) => {
                   type="text"
                   id="firstName"
                   ref={firstNameElement}
-                  className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+                  className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5"
                   placeholder={t("signup_first_name_placeholder", language)}
                   required
                 />
@@ -136,7 +147,7 @@ const SignupPage = (props) => {
                   type="text"
                   id="lastName"
                   ref={lastNameElement}
-                  className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+                  className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5"
                   placeholder={t("signup_last_name_placeholder", language)}
                   required
                 />
@@ -151,27 +162,37 @@ const SignupPage = (props) => {
                 type="email"
                 id="email"
                 ref={emailElement}
-                className="bg-gray-50 border border-gray-300 text-black text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+                className="bg-gray-50 border border-gray-300 text-black text-sm rounded-lg block w-full p-2.5"
                 placeholder={t("signup_email_placeholder", language)}
                 required
               />
             </div>
 
+            {/* Password */}
             <div>
               <label htmlFor="password" className="block mb-2 text-sm font-medium text-gray-100">
                 {t("signup_password_label", language)}
               </label>
-              <input
-                type="password"
-                id="password"
-                ref={passwordElement}
-                onChange={handlePasswordChange}
-                className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-                placeholder={t("signup_password_placeholder", language)}
-                required
-              />
+              <div className="relative">
+                <input
+                  type={showPassword ? "text" : "password"}
+                  id="password"
+                  ref={passwordElement}
+                  onChange={handlePasswordChange}
+                  className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 pr-10"
+                  placeholder={t("signup_password_placeholder", language)}
+                  required
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword((prev) => !prev)}
+                  className="absolute right-2 top-2 text-sm text-blue-500"
+                >
+                  {showPassword ? "Hide" : "Show"}
+                </button>
+              </div>
 
-              {/* Password Strength UI */}
+              {/* Password Strength */}
               {passwordStrength && (
                 <>
                   <div className="mt-2 text-sm font-medium">
@@ -203,6 +224,30 @@ const SignupPage = (props) => {
               )}
             </div>
 
+            {/* Confirm Password */}
+            <div>
+              <label htmlFor="confirmPassword" className="block mb-2 text-sm font-medium text-gray-100">
+                Confirm Password
+              </label>
+              <div className="relative">
+                <input
+                  type={showConfirmPassword ? "text" : "password"}
+                  id="confirmPassword"
+                  ref={confirmPasswordElement}
+                  className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 pr-10"
+                  placeholder="Re-enter your password"
+                  required
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowConfirmPassword((prev) => !prev)}
+                  className="absolute right-2 top-2 text-sm text-blue-500"
+                >
+                  {showConfirmPassword ? "Hide" : "Show"}
+                </button>
+              </div>
+            </div>
+
             {error && <p className="text-red-500 text-sm font-medium">{error}</p>}
 
             {loading && (