feat: add password visibility toggle to auth pages

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;

client/src/pages/LoginPage.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useContext } from "react";
 import { useNavigate, Link } from "react-router-dom";
+import PasswordInput from "../components/PasswordInput";
 import { ThemeContext } from "../context/ThemeContext";
 import AnimatedBackground from "../components/AnimatedBackground";
 
@@ -67,13 +68,10 @@ function LoginPage() {
             required
             className="p-3 border border-gray-300 dark:border-gray-600 rounded text-gray-900 dark:text-gray-100 placeholder-gray-400 bg-white/80 dark:bg-gray-700/80 backdrop-blur-sm"
           />
-          <input
-            type="password"
-            placeholder="Password"
+          <PasswordInput
             value={password}
             onChange={(e) => setPassword(e.target.value)}
-            required
-            className="p-3 border border-gray-300 dark:border-gray-600 rounded text-gray-900 dark:text-gray-100 placeholder-gray-400 bg-white/80 dark:bg-gray-700/80 backdrop-blur-sm"
+            placeholder="Password"
           />
           {error && <p className="text-red-600">{error}</p>}
           <button

client/src/pages/ResetPassword.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useContext } from 'react';
 import { useSearchParams, useNavigate } from 'react-router-dom';
 import axios from 'axios';
+import PasswordInput from '../components/PasswordInput';
 import { ThemeContext } from '../context/ThemeContext';
 import AnimatedBackground from '../components/AnimatedBackground';
 
@@ -45,21 +46,18 @@ export default function ResetPassword() {
       <div className="max-w-md w-full p-8 bg-white/90 dark:bg-gray-800/90 backdrop-blur-xl rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 relative z-10">
         <h2 className="text-3xl font-bold mb-6 text-center text-gray-900 dark:text-gray-100">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
-            className="p-3 border border-gray-300 dark:border-gray-600 rounded text-gray-900 dark:text-gray-100 placeholder-gray-400 bg-white/80 dark:bg-gray-700/80 backdrop-blur-sm"
+            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
-            className="p-3 border border-gray-300 dark:border-gray-600 rounded text-gray-900 dark:text-gray-100 placeholder-gray-400 bg-white/80 dark:bg-gray-700/80 backdrop-blur-sm"
+            placeholder="Confirm Password"
+            className="p-3 border border-gray-300 rounded"
+
           />
           {message && <p className="text-green-600">{message}</p>}
           {error && <p className="text-red-600">{error}</p>}

client/src/pages/SignupPage.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useContext } from "react";
 import { useNavigate, Link } from "react-router-dom";
+import PasswordInput from "../components/PasswordInput";
 import { ThemeContext } from "../context/ThemeContext";
 import AnimatedBackground from "../components/AnimatedBackground";
 
@@ -99,14 +100,12 @@ function SignupPage() {
             required
             className="p-3 border border-gray-300 dark:border-gray-600 rounded text-gray-900 dark:text-gray-100 placeholder-gray-400 bg-white/80 dark:bg-gray-700/80 backdrop-blur-sm"
           />
-          <input
-            type="password"
+          <PasswordInput
             name="password"
-            placeholder="Password"
             value={form.password}
             onChange={handleChange}
-            required
-            className="p-3 border border-gray-300 dark:border-gray-600 rounded text-gray-900 dark:text-gray-100 placeholder-gray-400 bg-white/80 dark:bg-gray-700/80 backdrop-blur-sm"
+            placeholder="Password"
+            className="p-3 border border-gray-300 rounded text-gray-900 placeholder-gray-400"
           />
 
           {success && <p className="text-green-600">{success}</p>}