<p>Enter your username and password to login.</p>

<form>
  <div>
    <label for="username">Username</label>
    <input type="text" name="username" id="username">
  </div>

  <div>
    <label for="password">Password</label>
    <input type="password" name="password" id="password">
  </div>

  <div>
    <label for="show-password">
      <input type="checkbox" name="show-passwords" id="show-password">
      Show password
    </label>
  </div>

  <p>
    <button type="submit">Log In</button>
  </p>
</form>

<script async>

  // Variables
  var password = document.querySelector('#password');
  var passwordToggle = document.querySelector('#show-password');

  // Methods
  var togglePassword = function (event) {
    if (event.target != passwordToggle) return;
    password.type = passwordToggle.checked ? 'text' : 'password';
  };

  // Listeners
  document.addEventListener('click', function (event) {
    togglePassword(event);
  });

</script>