export function changePasswordPage() {
  let passwordInput = () => document.getElementById("current-password");
  let newPasswordInput = () => document.getElementById("new-password");
  let newPasswordConfirmationInput = () => document.getElementById("new-password-confirmation");
  let submitButton = () => document.getElementById("submit");

  let passCharCount = () => document.getElementById("password-char-count");
  let newPassCharCount = () => document.getElementById("new-password-char-count");
  let passMatches = () => document.getElementById("password-confirm-matches");

  function doValidate(e) {
    let password = passwordInput().value;
    let newPassword = newPasswordInput().value;
    let newPasswordConfirmation = newPasswordConfirmationInput().value;
    let errors = false;

    if (password.length < 5) {
      errors = true;
      passCharCount().classList.add("invalid");
    } else {
      passCharCount().classList.remove("invalid");
    }

    if (newPassword.length < 5) {
      errors = true;
      newPassCharCount().classList.add("invalid");
    } else {
      newPassCharCount().classList.remove("invalid");
    }

    if (newPassword != newPasswordConfirmation || newPassword.length < 5) {
      errors = true;
      passMatches().classList.add("invalid");
    } else {
      passMatches().classList.remove("invalid");
    }

    submitButton().disabled = errors;
  }

  doValidate();
  passwordInput().addEventListener("input", doValidate);
  newPasswordInput().addEventListener("input", doValidate);
  newPasswordConfirmationInput().addEventListener("input", doValidate);
}
