confirm-password test cases

form-like and form with password, confirm-password and nearby junk fields

by sfoster

HTML

<!DOCTYPE html><html>
<head>
  <meta charset="utf-8">
</head><body>

<h1>Confirm password forms</h1>

<div class="container">
  <h2>A form-like, both using ac=new-password</h2>
  <p>
    <label>User: <input type="text" name="username"></label>
  </p>
  <p>
    <label>Password: <input type="password" name="password" autocomplete="new-password"></label>
    <button class="toggle">👁</button><button class="help">?</button>
  </p>
  <input type="hidden" name="somejunk">
  <input type="hidden" name="somejunk">
  <input type="hidden" name="somejunk">
  <input type="hidden" name="somejunk">
  <input type="hidden" name="somejunk">
  <p>
    <label>Private thing: <input type="password" name="private-thing"></label>
    <label>Other private thing: <input type="password" name="private-thing2"></label>
  </p>
  <p>
    <label>Confirm Password: <input type="password" name="confirm-password" autocomplete="new-password"></label>
    <button class="toggle">👁</button><button class="help">?</button>
  </p>
  <p>
    <input type="button" value="Login" onclick="submitForm(this)">
  </p>
</div>

<form class="container" action="./">
  <h2>A form, no autocomplete attributes</h2>
  <p>
    <label>User: <input type="text" name="username"></label>
  </p>
  <p>
    <label>Password: <input type="password" name="password"></label>
    <button class="toggle">👁</button><button class="help">?</button>
  </p>
  <input type="hidden" name="somejunk">
  <input type="hidden" name="somejunk">
  <input type="hidden" name="somejunk">
  <input type="hidden" name="somejunk">
  <input type="hidden" name="somejunk">
  <p>
    <label>Confirm Password: <input type="password" name="confirm-password"></label>
    <button class="toggle">👁</button><button class="help">?</button>
  </p>
  <p>
    <label>Some other private thing: <input type="password" name="private-thing"></label>
  </p>
  <p>
    <input type="button" value="Login" onclick="submitForm(this)">
  </p>
</form>
</body></html>

CSS

.container {
      border: 3px solid grey;
      border-radius: 5px;
      padding: 2px 10px;
      margin: 0.75em;
    }
    .container.valid {
      border-color: green;
    }
    .container.invalid {
      border-color: red;
    }

JavaScript

function submitForm(elm) {
    return false;
  }
  Array.from(document.querySelectorAll("input[name='password'], input[name='confirm-password']")).forEach(function(inp) {
    inp.addEventListener("change", function(event) {
      let container = event.target.closest(".container");
      let passwordInput = container.querySelector("input[name='password']");
      let confirmInput = container.querySelector("input[name='confirm-password']");
      console.log("handling change:", passwordInput.value, confirmInput.value, passwordInput.value === confirmInput.value);
      container.classList.toggle("valid", confirmInput.value == passwordInput.value);
      container.classList.toggle("invalid", confirmInput.value !== passwordInput.value);
    });
  });
  document.body.onclick = function(event) {
    if (event.target.classList.contains("toggle")) {
      let container = event.target.parentNode;
      let passwordInput = container.querySelector("input[name*='password']");
      if (passwordInput.type == "password") {
        passwordInput.type = "text";
      } else if (passwordInput.type == "text") {
        passwordInput.type = "password";
      }
      event.preventDefault();
      event.stopPropagation();
    }
  }