From 21814df1d8fb3abe0b78ba885222e8f8b27b51e8 Mon Sep 17 00:00:00 2001
From: karrisanthoshigayatri <karrisanthoshigayatri@gmail.com>
Date: Tue, 9 Jun 2026 17:34:58 +0530
Subject: [PATCH] added password visibility

---
 index.html | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index e0c921c6..e96c3643 100644
--- a/index.html
+++ b/index.html
@@ -22,7 +22,12 @@ <h2 id="auth-title" style="margin:0 0 8px; font-size:22px; font-weight:700;">Wel
 
     <input id="auth-email" type="email" placeholder="Email address" style="width:100%; padding:12px; border:1px solid #ddd; border-radius:8px; font-size:14px; margin-bottom:12px; box-sizing:border-box;">
     
-    <input id="auth-password" type="password" placeholder="Password" style="width:100%; padding:12px; border:1px solid #ddd; border-radius:8px; font-size:14px; margin-bottom:20px; box-sizing:border-box;">
+    <div style="position:relative; margin-bottom:20px;">
+      <input id="auth-password" type="password" placeholder="Password" style="width:100%; padding:12px 44px 12px 12px; border:1px solid #ddd; border-radius:8px; font-size:14px; box-sizing:border-box;">
+      <button type="button" id="password-toggle-btn" aria-label="Show password" aria-pressed="false" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); border:none; background:transparent; cursor:pointer; color:#4b5563; font-size:16px; display:flex; align-items:center; justify-content:center; padding:4px;">
+        <i class="fa-regular fa-eye" aria-hidden="true"></i>
+      </button>
+    </div>
 
     <button id="auth-submit-btn" style="width:100%; padding:12px; background:#4f46e5; color:white; border:none; border-radius:8px; font-size:15px; font-weight:600; cursor:pointer;">
     Sign In
@@ -372,6 +377,22 @@ <h3 style="font-size:12px; font-weight:700; text-transform:uppercase; color:var(
   <script>
   let isLogin = true;
 
+  const passwordToggleBtn = document.getElementById('password-toggle-btn');
+  const authPasswordInput = document.getElementById('auth-password');
+
+  if (passwordToggleBtn && authPasswordInput) {
+    passwordToggleBtn.addEventListener('click', () => {
+      const isVisible = authPasswordInput.type === 'text';
+      authPasswordInput.type = isVisible ? 'password' : 'text';
+      const icon = passwordToggleBtn.querySelector('i');
+      if (icon) {
+        icon.className = isVisible ? 'fa-regular fa-eye' : 'fa-regular fa-eye-slash';
+      }
+      passwordToggleBtn.setAttribute('aria-label', isVisible ? 'Show password' : 'Hide password');
+      passwordToggleBtn.setAttribute('aria-pressed', (!isVisible).toString());
+    });
+  }
+
   document.getElementById('auth-toggle-btn').addEventListener('click', (e) => {
     e.preventDefault();
     isLogin = !isLogin;