From d297a33b3f2397e9c49ecb5fda2cdda04556ae2d Mon Sep 17 00:00:00 2001
From: 0xferrous <0xferrous@proton.me>
Date: Wed, 6 May 2026 20:14:36 +0530
Subject: [PATCH] feat(auth): add password toggle button (#1963)

---
 client/html/auth.html | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/client/html/auth.html b/client/html/auth.html
index 0010f4bc..f45ae000 100644
--- a/client/html/auth.html
+++ b/client/html/auth.html
@@ -134,6 +134,16 @@
             .checkbox-wrapper input[type="checkbox"] {
                 margin: 0;
             }
+
+            .password-field {
+                display: flex;
+                gap: 0.5rem;
+                align-items: center;
+            }
+
+            .password-field input {
+                flex: 1;
+            }
         </style>
     </head>
 
@@ -160,7 +170,10 @@
                     </div>
                     <div>
                         <label for="password">Password</label>
-                        <input id="password" name="password" type="password" />
+                        <div class="password-field">
+                            <input id="password" name="password" type="password" />
+                            <button id="togglePassword" type="button">Show</button>
+                        </div>
                     </div>
                     <div class="checkbox-wrapper">
                         <input
@@ -198,6 +211,15 @@ navigator.serviceWorker.register(workerURL, {
   console.log("Service worker registered");
 });
 
+const passwordInput = document.getElementById("password");
+const togglePasswordButton = document.getElementById("togglePassword");
+
+togglePasswordButton.addEventListener("click", () => {
+  const showPassword = passwordInput.type === "password";
+  passwordInput.type = showPassword ? "text" : "password";
+  togglePasswordButton.textContent = showPassword ? "Hide" : "Show";
+});
+
 document.getElementById("login").addEventListener("submit", (e) => {
   const enableEncryption = document.getElementById('clientEncryption').checked;
   const params = new URLSearchParams();