Merge pull request #741: Add show/hide password toggle to auth page

Author: devanshi14malhotra

.DS_Store

@@ -32,3 +32,4 @@ instance/
 *.db
 # Virtual Environment
 venv/
+.venv/

.gitignore

@@ -3410,7 +3410,7 @@ async function handleAuth(event) {
     const mode = form.dataset.mode || 'login';
 
     const email = document.getElementById("email").value;
-    const password = form.querySelector('input[type="password"]').value;
+    const password = document.getElementById("password").value;
     const usernameInput = document.getElementById("username");
 
     // Helper to reset button state on failure

frontend/js/app.js

@@ -202,6 +202,26 @@
 
         .input-group {
             margin: 0;
+            position: relative;
+        }
+
+        .password-toggle-icon {
+            position: absolute;
+            right: 1.05rem;
+            top: 50%;
+            transform: translateY(-50%);
+            cursor: pointer;
+            color: var(--text-muted);
+            transition: color 0.2s ease;
+            z-index: 10;
+        }
+
+        .password-toggle-icon:hover {
+            color: var(--text-main);
+        }
+
+        .auth-input.password-input {
+            padding-right: 2.75rem;
         }
 
         .auth-input {
@@ -395,8 +415,10 @@ <h2 id="authTitle">Welcome Back</h2>
                     </div>
 
                     <div class="input-group">
-                        <input type="password" id="password" class="auth-input" placeholder="Password" value="demo123"
-                            required autocomplete="current-password">
+                        <input type="password" id="password" class="auth-input password-input" placeholder="Password"
+                            value="demo123" required autocomplete="current-password">
+                        <i class="fa-solid fa-eye password-toggle-icon" id="togglePassword" title="Show Password"
+                            aria-label="Show password" role="button" tabindex="0"></i>
                     </div>
 
                     <!-- 
@@ -530,6 +552,35 @@ <h3 style="color: var(--text-main) !important;">Ambient Sanctuary</h3>
                 }
             });
         }
+
+        const togglePassword = document.getElementById('togglePassword');
+        if (togglePassword && passwordInput) {
+            const toggleVisibility = () => {
+                const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
+                passwordInput.setAttribute('type', type);
+
+                if (type === 'password') {
+                    togglePassword.classList.remove('fa-eye-slash');
+                    togglePassword.classList.add('fa-eye');
+                    togglePassword.setAttribute('title', 'Show Password');
+                    togglePassword.setAttribute('aria-label', 'Show password');
+                } else {
+                    togglePassword.classList.remove('fa-eye');
+                    togglePassword.classList.add('fa-eye-slash');
+                    togglePassword.setAttribute('title', 'Hide Password');
+                    togglePassword.setAttribute('aria-label', 'Hide password');
+                }
+            };
+
+            togglePassword.addEventListener('click', toggleVisibility);
+
+            togglePassword.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    toggleVisibility();
+                }
+            });
+        }
     </script>
     <script src="../js/pwa.js"></script>
     <script>