From af8f856a32c45649812ab53c781fdf1bd5ce0f3d Mon Sep 17 00:00:00 2001
From: Shrey Hirapara <shreypatel25907@gmail.com>
Date: Fri, 22 May 2026 00:31:27 +0530
Subject: [PATCH 1/2] feat: add password visibility toggle to login form

---
 src/pages/Login/Login.tsx | 42 ++++++++++++++++++++++++---------------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx
index 92b7073..1ede3c2 100644
--- a/src/pages/Login/Login.tsx
+++ b/src/pages/Login/Login.tsx
@@ -2,6 +2,7 @@ import React, { useState, ChangeEvent, FormEvent, useContext } from "react";
 import axios from "axios";
 import { useNavigate, Link } from "react-router-dom";
 import { ThemeContext } from "../../context/ThemeContext";
+import { Eye, EyeOff } from "lucide-react";
 import type { ThemeContextType } from "../../context/ThemeContext";
 
 const backendUrl = import.meta.env.VITE_BACKEND_URL;
@@ -15,6 +16,7 @@ const Login: React.FC = () => {
   const [formData, setFormData] = useState<LoginFormData>({ email: "", password: "" });
   const [message, setMessage] = useState<string>("");
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [showPassword, setShowPassword] = useState(false);
 
   const navigate = useNavigate();
   const themeContext = useContext(ThemeContext) as ThemeContextType;
@@ -106,22 +108,30 @@ const Login: React.FC = () => {
               />
             </div>
 
-            <div className="relative">
-              <input
-                type="password"
-                name="password"
-                autoComplete="current-password"
-                placeholder="Enter your password"
-                value={formData.password}
-                onChange={handleChange}
-                required
-                className={`w-full pl-4 pr-4 py-4 rounded-2xl focus:outline-none transition-all ${
-                  mode === "dark"
-                    ? "bg-white/5 border border-white/10 text-white placeholder-slate-400 focus:ring-2 focus:ring-purple-500"
-                    : "bg-gray-100 border border-gray-300 text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-purple-400"
-                }`}
-              />
-            </div>
+           <div className="relative">
+  <input
+    type={showPassword ? "text" : "password"}
+    name="password"
+    autoComplete="current-password"
+    placeholder="Enter your password"
+    value={formData.password}
+    onChange={handleChange}
+    required
+    className={`w-full pl-4 pr-12 py-4 rounded-2xl focus:outline-none transition-all ${
+      mode === "dark"
+        ? "bg-white/5 border border-white/10 text-white placeholder-slate-400 focus:ring-2 focus:ring-purple-500"
+        : "bg-gray-100 border border-gray-300 text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-purple-400"
+    }`}
+  />
+
+  <button
+    type="button"
+    onClick={() => setShowPassword(!showPassword)}
+    className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500"
+  >
+    {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
+  </button>
+</div>
 
             <button
               type="submit"

From c2a278669ea67d5c0a47a9164dd00d7f134eb78a Mon Sep 17 00:00:00 2001
From: Shrey Hirapara <shreypatel25907@gmail.com>
Date: Fri, 22 May 2026 01:01:54 +0530
Subject: [PATCH 2/2] fix: improve password toggle accessibility

---
 src/pages/Login/Login.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx
index 1ede3c2..265c304 100644
--- a/src/pages/Login/Login.tsx
+++ b/src/pages/Login/Login.tsx
@@ -124,11 +124,13 @@ const Login: React.FC = () => {
     }`}
   />
 
-  <button
-    type="button"
-    onClick={() => setShowPassword(!showPassword)}
-    className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500"
-  >
+ <button
+  type="button"
+  onClick={() => setShowPassword(!showPassword)}
+  aria-label={showPassword ? "Hide password" : "Show password"}
+  aria-pressed={showPassword}
+  className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500"
+>
     {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
   </button>
 </div>