Merge pull request #424 from RNAdvani/feature/toggle-show-password

feat: add toggle for password visibility

public/css/login_style.css

@@ -219,3 +219,23 @@ button:hover {
   border: 1px solid #f5c6cb;
   display: none;
 }
+
+
+.password-container {
+  position: relative;
+  width: 100%;
+  margin-bottom: 15px;
+}
+
+#toggle-password {
+  position: absolute;
+  top: 0%;
+  right: 10px;
+  transform: translateY(50%);
+  cursor: pointer;
+}
+
+#toggle-password img {
+  width: 20px;
+  height: 20px;
+}

public/login.html

@@ -44,7 +44,12 @@ <h4 style="text-align: center; margin: 10px 0px 6px 0px;font-size: 22px;">(for R
                 <label for="email">Email:</label>
                 <input type="email" id="email" name="email" placeholder="Enter your email" required>
                 <label for="password">Password:</label>
-                <input type="password" id="password" name="password" placeholder="Enter your password" required>
+                <div class="password-container">
+                    <input type="password" id="password" name="password" placeholder="Enter your password" required>
+                    <span id="toggle-password">
+                        <img src="images/eye-closed.png" id="eye-icon" alt="Show/Hide Password" style="cursor: pointer;">
+                    </span>
+                </div>
                 <a href="password_reset.html">Forgot Password?</a>
                 <button type="button" onclick="login()">Login</button>
                 <div class="register">
@@ -77,6 +82,21 @@ <h4 style="text-align: center; margin: 10px 0px 6px 0px;font-size: 22px;">(for R
             return allowedDomains.includes(domain);
         }
 
+        const togglePassword = document.getElementById('toggle-password');
+        const passwordInput = document.getElementById('password');
+        const eyeIcon = document.getElementById('eye-icon');
+
+        togglePassword.onclick = function () {
+            if (passwordInput.type === 'password') {
+                passwordInput.type = 'text';
+                eyeIcon.src = 'images/eye-open.png';
+            } else {
+                passwordInput.type = 'password';
+                eyeIcon.src = 'images/eye-closed.png'; 
+            }
+        }
+
+
         async function login() {
             let email = document.getElementById("email").value;
             let password = document.getElementById("password").value;

public/signup.html

@@ -76,7 +76,12 @@ <h4 style="text-align: center; margin: 6px 0px 10px 0px;font-size: 22px;">(for R
           Icloud, or Tutanota.</span>
 
         <label for="password">Password:</label>
-        <input type="password" id="password" name="password" placeholder="Enter the Password" required>
+        <div class="password-container">
+          <input type="password" id="password" name="password" placeholder="Enter your password" required>
+          <span id="toggle-password">
+              <img src="images/eye-closed.png" id="eye-icon" alt="Show/Hide Password" style="cursor: pointer;">
+          </span>
+      </div>
         <ul id="password-criteria" class="criteria">
           <li id="length">At least 8 characters long</li>
           <li id="uppercase">At least 1 uppercase letter (A-Z)</li>
@@ -199,6 +204,20 @@ <h4 style="text-align: center; margin: 6px 0px 10px 0px;font-size: 22px;">(for R
       });
     });
 
+    const togglePassword = document.getElementById('toggle-password');
+        const passwordInput = document.getElementById('password');
+        const eyeIcon = document.getElementById('eye-icon');
+
+        togglePassword.onclick = function () {
+            if (passwordInput.type === 'password') {
+                passwordInput.type = 'text';
+                eyeIcon.src = 'images/eye-open.png';
+            } else {
+                passwordInput.type = 'password';
+                eyeIcon.src = 'images/eye-closed.png'; 
+            }
+        }
+
     document.getElementById('registrationForm').addEventListener('submit', async function (event) {
       event.preventDefault();