Fix locker icon misalignment and enhance password visibility toggle feature (#761)

Co-authored-by: Ritik Singh <[email protected]>

Author: ritiksingh-01

login.css

@@ -104,23 +104,6 @@ form.sign-in-form {
   padding-right: 2.5rem;
 
 }
-.toggle-password {
-  position: absolute;
-  right: 15px; /* Align the icon to the right */
-  cursor: pointer;
-}
-
-.toggle-password i {
-  color: #acacac; /* Style for the eye icon */
-  font-size: 1.1rem;
-  transition: color 0.3s ease;
-}
-
-/* Hover effect for eye icon */
-.toggle-password:hover i {
-  color: #333;
-}
-
 .social-text {
   padding: 0.7rem 0;
   font-size: 1rem;
@@ -431,24 +414,6 @@ form.sign-in-form {
   transition: 0.3s;
   text-decoration: none;
 }
-
-.input-field-password {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-.input-field-password input[type="password"] {
-  width: 100%;
-  padding-right: 2.5rem; /* Add some space for the eye icon */
-}
-
 .toggle-password {
-  position: absolute;
-  right: 10px; /* Position the icon inside the input */
   cursor: pointer;
-}
-
-.toggle-password i {
-  color: #333; /* Icon color */
-}
+}

login.html

@@ -19,12 +19,9 @@ <h2 class="title">Sign in</h2>
               <i class="fas fa-user"></i>
               <input type="text" placeholder="Username" />
             </div>
-            <div class="input-field input-field-password">
-              <i class="fas fa-lock"></i>
-              <input type="password" id="password" placeholder="&nbsp;&nbsp;&nbsp;Password" />
-              <span class="toggle-password">
-                <i class="fas fa-eye" id="togglePassword"></i>
-              </span>
+            <div class="input-field">
+              <i class="fas fa-lock toggle-password" id="toggle-password"></i>
+              <input type="password" id="password-input" placeholder="Password" />
             </div>
 
             <input type="submit" value="Login" class="btn solid" />
@@ -47,14 +44,10 @@ <h2 class="title">Sign up</h2>
               <i class="fas fa-envelope"></i>
               <input type="email" placeholder="Email" />
             </div>
-            <div class="input-field input-field-password">
-              <i class="fas fa-lock"></i>
-              <input type="password" id="password" placeholder="&nbsp;&nbsp;&nbsp; Password" />
-              <span class="toggle-password">
-                <i class="fas fa-eye" id="togglePassword"></i>
-              </span>
+            <div class="input-field">
+              <i class="fas fa-lock toggle-password" id="toggle-password"></i>
+              <input type="password" id="password-input" placeholder="Password" />
             </div>
-            
             <input type="submit" class="btn" value="Sign up" />
             <p class="social-text">Or Sign up with social platforms</p>
             <div class="social-media">

login.js

@@ -1,24 +1,6 @@
 // Wait until the DOM is fully loaded before executing
 document.addEventListener('DOMContentLoaded', () => {
 
-  // Toggle password visibility for both sign-in and sign-up forms
-  const togglePasswordIcons = document.querySelectorAll('.toggle-password');
-
-  togglePasswordIcons.forEach(iconWrapper => {
-    iconWrapper.addEventListener('click', function () {
-      const passwordField = this.previousElementSibling;
-      const icon = this.querySelector('i');
-
-      // Toggle password visibility
-      const isPasswordVisible = passwordField.type === 'password';
-      passwordField.type = isPasswordVisible ? 'text' : 'password';
-
-      // Toggle icon between eye and eye-slash
-      icon.classList.toggle('fa-eye', !isPasswordVisible);
-      icon.classList.toggle('fa-eye-slash', isPasswordVisible);
-    });
-  });
-
   // Toggle between sign-in and sign-up mode
   const sign_in_btn = document.querySelector("#sign-in-btn");
   const sign_up_btn = document.querySelector("#sign-up-btn");
@@ -75,6 +57,26 @@ document.addEventListener('DOMContentLoaded', () => {
     window.location.href = 'index.html';
   });
 
+  // Toggle password visibility for sign-up form
+  const forms = document.querySelectorAll('form');
+
+  forms.forEach(form => {
+    const togglePassword = form.querySelector('#toggle-password');
+    const passwordInput = form.querySelector('#password-input');
+  
+    togglePassword.addEventListener('click', () => {
+      if (passwordInput.type === 'password') {
+        passwordInput.type = 'text';
+        togglePassword.classList.add('fa-lock-open');
+        togglePassword.classList.remove('fa-lock');
+      } else {
+        passwordInput.type = 'password';
+        togglePassword.classList.add('fa-lock');
+        togglePassword.classList.remove('fa-lock-open');
+      }
+    });
+  });
+
   // Check password strength for sign-up form
   function checkPasswordStrength() {
     const password = document.querySelector(".sign-up-form input[type='password']").value;
@@ -104,4 +106,4 @@ document.addEventListener('DOMContentLoaded', () => {
   // Monitor password input on the sign-up form to check password strength
   document.querySelector(".sign-up-form input[type='password']").addEventListener('input', checkPasswordStrength);
 
-});
+});