02. Toggling multiple passwords fields

Enter your current password and new password below.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<p>Enter your current password and new password below.</p>

<form>
  <div>
    <label class="label" for="username">Username:</label>
    <input autocomplete="off" class="input" type="text" name="username" id="username">
  </div>
  <div>
    <label class="label" for="current-password">Current Password:</label>
    <input autocomplete="off" class="input password" type="password" name="password" id="current-password">
  </div>
  <div>
    <label class="label" for="new-password">New Password:</label>
    <input autocomplete="off" class="input password" type="password" name="password" id="new-password">
  </div>
  <div>
    <label class="label" for="show-password">
      <input class="checkbox" type="checkbox" name="show-passwords" id="show-passwords">
      Show passwords
    </label>
  </div>
  <button class="button" type="submit">Log In</button>
</form>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* When a user clicks on the #show-passwords checkbox, 
it should show the text for the #current-password and #new-password fields 
if it’s checked, and mask it if it’s unchecked. */

const togglePswrd = document.querySelector('#show-passwords');
const passInputs = document.querySelectorAll('.password');

togglePswrd.addEventListener('click', function () {
  if (togglePswrd.checked) {
    Array.prototype.slice.call(passInputs).forEach(passInput => {
      passInput.type = "text";
    });
  } else {
    Array.prototype.slice.call(passInputs).forEach(passInput => {
      passInput.type = "password";
    });
  }
})