From 2f6d80a4d3765666c9cb80753ed7a8b595e94e94 Mon Sep 17 00:00:00 2001
From: AdithaBuwaneka <adithabuwaneka0@gmail.com>
Date: Tue, 22 Jul 2025 23:04:41 +0530
Subject: [PATCH] feat: add password visibility toggle for login and
 registration forms

---
 src/app/login/page.tsx    | 122 +++++++++++++++++++-----
 src/app/register/page.tsx | 191 +++++++++++++++++++++++++++++++-------
 2 files changed, 254 insertions(+), 59 deletions(-)

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index d5312d0b..022d06bf 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -40,6 +40,9 @@ const Login = () => {
   }>({});
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [isGoogleLoading, setIsGoogleLoading] = useState<boolean>(false);
+  
+  // Password visibility state
+  const [showPassword, setShowPassword] = useState<boolean>(false);
 
   // Redirect if already logged in
   useEffect(() => {
@@ -106,24 +109,24 @@ const Login = () => {
       );
 
       //  If user is suspended, show the popup and abort
-if (result.suspended) {
-  showSuspendedPopup(result.message, result.suspensionDetails);
-  return;
-}
+      if (result.suspended) {
+        showSuspendedPopup(result.message, result.suspensionDetails);
+        return;
+      }
 
-if (result.success) {
-  showToast('Login successful! Redirecting...', 'success');
-  // …redirect logic…
-  const redirectUrl = sessionStorage.getItem('redirectAfterLogin');
-      if (redirectUrl) {
-        sessionStorage.removeItem('redirectAfterLogin');
-        router.push(redirectUrl);
+      if (result.success) {
+        showToast('Login successful! Redirecting...', 'success');
+        // …redirect logic…
+        const redirectUrl = sessionStorage.getItem('redirectAfterLogin');
+        if (redirectUrl) {
+          sessionStorage.removeItem('redirectAfterLogin');
+          router.push(redirectUrl);
+        } else {
+          router.push('/dashboard');
+        }
       } else {
-        router.push('/dashboard');
+        showToast(result.message || 'Login failed', 'error');
       }
-} else {
-  showToast(result.message || 'Login failed', 'error');
-}
  
     } catch (error) {
       showToast('An error occurred. Please try again.', 'error');
@@ -149,14 +152,14 @@ if (result.success) {
       console.log('Google login result:', result);
 
       // 2 Suspension check
-    if (result.suspended) {
-      showSuspendedPopup(
-        result.message,
-        result.suspensionDetails,
-        () => console.log('User closed suspension popup')
-      );
-      return; // stop here
-    }
+      if (result.suspended) {
+        showSuspendedPopup(
+          result.message,
+          result.suspensionDetails,
+          () => console.log('User closed suspension popup')
+        );
+        return; // stop here
+      }
 
       if (result.success) {
         // Cancel any remaining Google prompts to prevent additional popups
@@ -196,6 +199,11 @@ if (result.success) {
     showToast(error, 'error');
   };
 
+  // Toggle password visibility
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
   // Show loading state while checking auth status
   if (authLoading) {
     return (
@@ -273,14 +281,62 @@ if (result.success) {
                 <input
                   id="password"
                   name="password"
-                  type="password"
-                  className={`pl-10 block w-full p-2.5 border ${errors.password ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-black placeholder-gray-400`}
+                  type={showPassword ? "text" : "password"}
+                  className={`pl-10 pr-10 block w-full p-2.5 border ${errors.password ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-black placeholder-gray-400 password-input`}
                   placeholder="********"
                   value={formData.password}
                   onChange={handleChange}
                   aria-invalid={errors.password ? 'true' : 'false'}
                   aria-describedby={errors.password ? "password-error" : undefined}
+                  style={{
+                    WebkitAppearance: 'none',
+                    MozAppearance: 'textfield'
+                  }}
                 />
+                <button
+                  type="button"
+                  className="absolute inset-y-0 right-0 pr-3 flex items-center focus:outline-none"
+                  onClick={togglePasswordVisibility}
+                  tabIndex={-1}
+                >
+                  {showPassword ? (
+                    <svg
+                      className="h-5 w-5 text-gray-400 hover:text-gray-600"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21"
+                      />
+                    </svg>
+                  ) : (
+                    <svg
+                      className="h-5 w-5 text-gray-400 hover:text-gray-600"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                      />
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                      />
+                    </svg>
+                  )}
+                </button>
               </div>
               {errors.password && (
                 <p className="mt-1 text-sm text-red-600" id="password-error">{errors.password}</p>
@@ -351,6 +407,22 @@ if (result.success) {
           </div>
         </div>
       </div>
+
+      <style jsx>{`
+        /* Hide browser default password reveal button */
+        .password-input::-ms-reveal,
+        .password-input::-ms-clear {
+          display: none;
+        }
+        
+        .password-input::-webkit-credentials-auto-fill-button {
+          display: none !important;
+          visibility: hidden;
+          pointer-events: none;
+          position: absolute;
+          right: 0;
+        }
+      `}</style>
     </div>
   );
 };
diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx
index 4e0f14f3..b8e042dc 100644
--- a/src/app/register/page.tsx
+++ b/src/app/register/page.tsx
@@ -8,10 +8,6 @@ import { useAuth } from "@/lib/context/AuthContext";
 import { useToast } from "@/lib/context/ToastContext";
 import { handleSuspensionApiResponse } from '@/components/ui/SuspendedPopup'
 
-
-
-
-
 interface FormErrors {
   firstName?: string;
   lastName?: string;
@@ -41,6 +37,10 @@ const Register = () => {
   const [errors, setErrors] = useState<FormErrors>({});
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [agreeToTerms, setAgreeToTerms] = useState<boolean>(false);
+  
+  // Password visibility states
+  const [showPassword, setShowPassword] = useState<boolean>(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState<boolean>(false);
 
   const validateForm = () => {
     const newErrors: FormErrors = {};
@@ -150,9 +150,6 @@ const Register = () => {
     try {
       const result = await register(formData);
 
- 
-
-
       // Check if the response indicates the user is suspended
       if (handleSuspensionApiResponse(result)) {
         // User is suspended, popup has been shown
@@ -192,6 +189,16 @@ const Register = () => {
     }
   };
 
+  // Toggle password visibility
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
+  // Toggle confirm password visibility
+  const toggleConfirmPasswordVisibility = () => {
+    setShowConfirmPassword(!showConfirmPassword);
+  };
+
   return (
     <div className="min-h-screen flex flex-col items-center justify-center bg-light-blue-100 p-4">
       <div className="flex flex-col md:flex-row max-w-5xl mx-auto bg-white rounded-xl shadow-lg w-[90%]">
@@ -357,19 +364,69 @@ const Register = () => {
               >
                 Password
               </label>
-              <input
-                id="password"
-                name="password"
-                type="password"
-                className={`mt-1 block w-full p-2 border ${errors.password ? "border-red-500" : "border-gray-300"} rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 text-black placeholder-gray-400 text-sm`}
-                placeholder="********"
-                value={formData.password}
-                onChange={handleChange}
-                aria-invalid={errors.password ? "true" : "false"}
-                aria-describedby={
-                  errors.password ? "password-error" : undefined
-                }
-              />
+              <div className="relative mt-1">
+                <input
+                  id="password"
+                  name="password"
+                  type={showPassword ? "text" : "password"}
+                  className={`block w-full p-2 pr-10 border ${errors.password ? "border-red-500" : "border-gray-300"} rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 text-black placeholder-gray-400 text-sm password-input`}
+                  placeholder="********"
+                  value={formData.password}
+                  onChange={handleChange}
+                  aria-invalid={errors.password ? "true" : "false"}
+                  aria-describedby={
+                    errors.password ? "password-error" : undefined
+                  }
+                  style={{
+                    WebkitAppearance: 'none',
+                    MozAppearance: 'textfield'
+                  }}
+                />
+                <button
+                  type="button"
+                  className="absolute inset-y-0 right-0 pr-3 flex items-center focus:outline-none"
+                  onClick={togglePasswordVisibility}
+                  tabIndex={-1}
+                >
+                  {showPassword ? (
+                    <svg
+                      className="h-5 w-5 text-gray-400 hover:text-gray-600"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21"
+                      />
+                    </svg>
+                  ) : (
+                    <svg
+                      className="h-5 w-5 text-gray-400 hover:text-gray-600"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                      />
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                      />
+                    </svg>
+                  )}
+                </button>
+              </div>
               {errors.password && (
                 <p className="mt-1 text-sm text-red-600" id="password-error">
                   {errors.password}
@@ -384,19 +441,69 @@ const Register = () => {
               >
                 Confirm Password
               </label>
-              <input
-                id="confirmPassword"
-                name="confirmPassword"
-                type="password"
-                className={`mt-1 block w-full p-2 border ${errors.confirmPassword ? "border-red-500" : "border-gray-300"} rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 text-black placeholder-gray-400 text-sm`}
-                placeholder="********"
-                value={formData.confirmPassword}
-                onChange={handleChange}
-                aria-invalid={errors.confirmPassword ? "true" : "false"}
-                aria-describedby={
-                  errors.confirmPassword ? "confirmPassword-error" : undefined
-                }
-              />
+              <div className="relative mt-1">
+                <input
+                  id="confirmPassword"
+                  name="confirmPassword"
+                  type={showConfirmPassword ? "text" : "password"}
+                  className={`block w-full p-2 pr-10 border ${errors.confirmPassword ? "border-red-500" : "border-gray-300"} rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 text-black placeholder-gray-400 text-sm password-input`}
+                  placeholder="********"
+                  value={formData.confirmPassword}
+                  onChange={handleChange}
+                  aria-invalid={errors.confirmPassword ? "true" : "false"}
+                  aria-describedby={
+                    errors.confirmPassword ? "confirmPassword-error" : undefined
+                  }
+                  style={{
+                    WebkitAppearance: 'none',
+                    MozAppearance: 'textfield'
+                  }}
+                />
+                <button
+                  type="button"
+                  className="absolute inset-y-0 right-0 pr-3 flex items-center focus:outline-none"
+                  onClick={toggleConfirmPasswordVisibility}
+                  tabIndex={-1}
+                >
+                  {showConfirmPassword ? (
+                    <svg
+                      className="h-5 w-5 text-gray-400 hover:text-gray-600"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21"
+                      />
+                    </svg>
+                  ) : (
+                    <svg
+                      className="h-5 w-5 text-gray-400 hover:text-gray-600"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                      />
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                      />
+                    </svg>
+                  )}
+                </button>
+              </div>
               {errors.confirmPassword && (
                 <p
                   className="mt-1 text-sm text-red-600"
@@ -487,8 +594,24 @@ const Register = () => {
           </div>
         </div>
       </div>
+
+      <style jsx>{`
+        /* Hide browser default password reveal button */
+        .password-input::-ms-reveal,
+        .password-input::-ms-clear {
+          display: none;
+        }
+        
+        .password-input::-webkit-credentials-auto-fill-button {
+          display: none !important;
+          visibility: hidden;
+          pointer-events: none;
+          position: absolute;
+          right: 0;
+        }
+      `}</style>
     </div>
   );
 };
 
-export default Register;
+export default Register;
\ No newline at end of file