From b1d401ae9d100782ef47acc1c77135840ded7965 Mon Sep 17 00:00:00 2001
From: catmoreak <sujnanddevadiga@gmail.com>
Date: Fri, 1 Aug 2025 22:49:13 +0530
Subject: [PATCH] feat: add password visibility toggle to auth pages

---
 client/src/components/PasswordInput.jsx | 76 +++++++++++++++++++++++++
 client/src/pages/LoginPage.jsx          |  8 +--
 client/src/pages/ResetPassword.jsx      | 13 ++---
 client/src/pages/SignupPage.jsx         | 10 ++--
 4 files changed, 88 insertions(+), 19 deletions(-)
 create mode 100644 client/src/components/PasswordInput.jsx

diff --git a/client/src/components/PasswordInput.jsx b/client/src/components/PasswordInput.jsx
new file mode 100644
index 00000000..b3e10dd6
--- /dev/null
+++ b/client/src/components/PasswordInput.jsx
@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+
+const PasswordInput = ({ 
+  value, 
+  onChange, 
+  placeholder = "Password", 
+  name = "password",
+  required = true,
+  className = "p-3 border border-gray-300 rounded text-gray-900 placeholder-gray-400"
+}) => {
+  const [showPassword, setShowPassword] = useState(false);
+
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
+  return (
+    <div className="relative w-full">
+      <input
+        type={showPassword ? "text" : "password"}
+        name={name}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        required={required}
+        className={`${className} pr-12`}
+      />
+      <button
+        type="button"
+        onClick={togglePasswordVisibility}
+        className="absolute inset-y-0 right-0 flex items-center px-3 text-gray-600 hover:text-gray-800 focus:outline-none"
+        aria-label={showPassword ? "Hide password" : "Show password"}
+      >
+        {showPassword ? (
+          <svg
+            className="w-5 h-5"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <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="w-5 h-5"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <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>
+  );
+};
+
+export default PasswordInput;
diff --git a/client/src/pages/LoginPage.jsx b/client/src/pages/LoginPage.jsx
index 7a0e93f5..3c99a686 100644
--- a/client/src/pages/LoginPage.jsx
+++ b/client/src/pages/LoginPage.jsx
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { useNavigate, Link } from "react-router-dom";
+import PasswordInput from "../components/PasswordInput";
 
 function LoginPage() {
   const navigate = useNavigate();
@@ -57,13 +58,10 @@ function LoginPage() {
             required
             className="p-3 border border-gray-300 rounded text-gray-900 placeholder-gray-400"
           />
-          <input
-            type="password"
-            placeholder="Password"
+          <PasswordInput
             value={password}
             onChange={(e) => setPassword(e.target.value)}
-            required
-            className="p-3 border border-gray-300 rounded text-gray-900 placeholder-gray-400"
+            placeholder="Password"
           />
           {error && <p className="text-red-600">{error}</p>}
           <button
diff --git a/client/src/pages/ResetPassword.jsx b/client/src/pages/ResetPassword.jsx
index 0d539802..415508ab 100644
--- a/client/src/pages/ResetPassword.jsx
+++ b/client/src/pages/ResetPassword.jsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useSearchParams, useNavigate } from 'react-router-dom';
 import axios from 'axios';
+import PasswordInput from '../components/PasswordInput';
 
 export default function ResetPassword() {
   const [searchParams] = useSearchParams();
@@ -38,20 +39,16 @@ export default function ResetPassword() {
       <div className="max-w-md w-full p-8 bg-white rounded-lg shadow-xl border border-gray-200">
         <h2 className="text-3xl font-bold mb-6 text-center text-gray-900">Reset Password</h2>
         <form onSubmit={handleReset} className="flex flex-col gap-5">
-          <input
-            type="password"
-            placeholder="New Password"
+          <PasswordInput
             value={newPassword}
             onChange={(e) => setNewPassword(e.target.value)}
-            required
+            placeholder="New Password"
             className="p-3 border border-gray-300 rounded"
           />
-          <input
-            type="password"
-            placeholder="Confirm Password"
+          <PasswordInput
             value={confirmPassword}
             onChange={(e) => setConfirmPassword(e.target.value)}
-            required
+            placeholder="Confirm Password"
             className="p-3 border border-gray-300 rounded"
           />
           {message && <p className="text-green-600">{message}</p>}
diff --git a/client/src/pages/SignupPage.jsx b/client/src/pages/SignupPage.jsx
index 78f87993..b91532ef 100644
--- a/client/src/pages/SignupPage.jsx
+++ b/client/src/pages/SignupPage.jsx
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { useNavigate, Link } from "react-router-dom";
+import PasswordInput from "../components/PasswordInput";
 
 function SignupPage() {
   const navigate = useNavigate();
@@ -89,15 +90,12 @@ function SignupPage() {
             required
             className="p-3 border border-gray-300 rounded text-gray-900 placeholder-gray-400"
           />
-          <input
-            type="password"
+          <PasswordInput
             name="password"
-            placeholder="Password"
             value={form.password}
             onChange={handleChange}
-            required
-            className="p-3 border border-gray-300 rounded"
-
+            placeholder="Password"
+            className="p-3 border border-gray-300 rounded text-gray-900 placeholder-gray-400"
           />
          
           {success && <p className="text-green-600">{success}</p>}