Hide/Show Password

[x32x01]

The "Hide/Show Password" feature enhances user experience by allowing individuals to toggle between obscured and visible passwords. This functionality aids in preventing typing errors while maintaining security. It’s especially useful on mobile devices, where users can confirm their input easily, striking a balance between convenience and safeguarding sensitive information.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<div class="pass">
  <label for="password">password</label>
  <input type="password" name="password" id="password" required>
  <i class="far fa-eye" id="togglePassword"></i>
</div>

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10% auto;
  font-size: 1.3rem;
}

.pass input {
  margin-top: 10px;
  width: 20rem;
  padding: 0.7rem;
  border-radius: 5px;
  box-shadow: 1px 1px 4px #00000040;
  border: none;
  font-size: 1.2rem;
  transition: all 0.3s ease-in-out;
}

.pass input:focus {
  outline: none;
  border: none;
  box-shadow: 1px 1px 4px #83c5be;
}

#togglePassword {
  margin-left: -35px;
  cursor: pointer;
  font-size: 1rem;
  color: #555;
}

#togglePassword:hover {
  color: #000;
}

const togglePassword = document.querySelector('#togglePassword');
const password = document.querySelector('#password');
 
togglePassword.addEventListener('click', function (e) {
    // toggle the type attribute
    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
    password.setAttribute('type', type);
    // toggle the eye slash icon
    this.classList.toggle('fa-eye-slash');
});