DRAFT: Fix typeerror when changing type back to password

[dan-jensen]

WARNING: This is a draft. The changes to the .js file have not yet been reflected in the min.js file.

Description

After the password input has been converted to text, there is no
input matching type=password. However, the JS assumed there is which
resuled in a TypeError due to a null result when it looked for the
input. This fixes the problem by selecting by class instead.

Motivation and Context

This fixes a bug that occurs when you click to convert a text input back into a password input.

How Has This Been Tested?

Tested locally.

Screenshots (if appropriate)

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist

• My code follows the code style of this project.

[dan-jensen]

@coliff what do you think of these changes?

[dan-jensen]

The behavior was actually still a little buggy. Specifically, the button could get out of sync, so clicking would have no effect. This fixes the bugginess by eliminating the nested onclick. So if you're willing to make a bigger change to the JS (although still non-breaking) I would recommend this:

const passwordInput = document.querySelector("[type='password']");
const passwordToggle = document.getElementById("toggle-password");

passwordInput.classList.add("input-password");
passwordToggle.classList.remove("d-none");

passwordToggle.onclick = function () {
  if (passwordInput.type === "password") {
    passwordInput.type = "text";
    passwordToggle.setAttribute("aria-label", "Obscure the value.");
  } else {
    passwordInput.type = "password";
    passwordToggle.setAttribute("aria-label", "Reveal the value.");
  }
  passwordInput.focus();
};