pmcelhaney/private-input.html

## private-input.html
<html>
  <body>
    <p>This is a quick proof of concept that turns any native input into a "private" input when we add `is="wh-secret"`. I may make it more realistic when I have some time. The button is supposed to be an eye icon.  </p>

    <label for="text">Text:</label
    ><input id="text" is="wh-secret" type="text" value="hello world" /><br />
    <label for="date">Date:</label
    ><input id="date" is="wh-secret" type="date" value="2022-08-11" /><br />
    <label for="time">Time:</label
    ><input id="time" is="wh-secret" type="time" value="12:00" /><br />
    <label for="month">Month:</label
    ><input id="month" is="wh-secret" type="month" value="1" /><br />
    <label for="color">Color:</label
    ><input id="color" is="wh-secret" type="color" value="#aa0000" /><br />

    <script type="text/javascript">

      const ICON = "(-)";
      const ICON_HIDE = "(/)";

      class PrivateInput extends HTMLInputElement {
        constructor() {
          super();
          const button = document.createElement("button");

          const originalType = this.type;

          this.type = "password";

          this.style.width = "200px";
          this.style.borderRadius = "5px";
          this.style.fontSize = "1.2em";

          button.innerText = ICON;
          button.style.fontSize = "1.2em";
          button.addEventListener("click", () => {
            if (this.type === "password") {
              this.type = originalType;
              button.innerText = ICON_HIDE;
            } else {
              this.type = "password";
              button.innerText = ICON;
            }
          });
          this.insertAdjacentElement("afterend", button);
        }
      }

      customElements.define("wh-secret", PrivateInput, { extends: "input" });
    </script>
  </body>
</html>
	<html>
	<body>
	<p>This is a quick proof of concept that turns any native input into a "private" input when we add `is="wh-secret"`. I may make it more realistic when I have some time. The button is supposed to be an eye icon. </p>

	<label for="text">Text:</label
	><input id="text" is="wh-secret" type="text" value="hello world" /><br />
	<label for="date">Date:</label
	><input id="date" is="wh-secret" type="date" value="2022-08-11" /><br />
	<label for="time">Time:</label
	><input id="time" is="wh-secret" type="time" value="12:00" /><br />
	<label for="month">Month:</label
	><input id="month" is="wh-secret" type="month" value="1" /><br />
	<label for="color">Color:</label
	><input id="color" is="wh-secret" type="color" value="#aa0000" /><br />

	<script type="text/javascript">

	const ICON = "(-)";
	const ICON_HIDE = "(/)";

	class PrivateInput extends HTMLInputElement {
	constructor() {
	super();
	const button = document.createElement("button");

	const originalType = this.type;

	this.type = "password";

	this.style.width = "200px";
	this.style.borderRadius = "5px";
	this.style.fontSize = "1.2em";

	button.innerText = ICON;
	button.style.fontSize = "1.2em";
	button.addEventListener("click", () => {
	if (this.type === "password") {
	this.type = originalType;
	button.innerText = ICON_HIDE;
	} else {
	this.type = "password";
	button.innerText = ICON;
	}
	});
	this.insertAdjacentElement("afterend", button);
	}
	}

	customElements.define("wh-secret", PrivateInput, { extends: "input" });
	</script>
	</body>
	</html>