If htmx can do it, so can I

Also, this copies in my private versions of htmx and min-otel, which is useful

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 *.js
 !*.test.js
+!public/*.js

public/hny.js

@@ -0,0 +1 @@
+../../hny-otel-web/dist/hny.js

public/htmx.js

@@ -0,0 +1 @@
+../../../bigskysoftware/htmx/src/htmx.js

public/jess.js

@@ -0,0 +1,28 @@
+console.log("JESS I SHERE");
+const elementsOfInterest = document.querySelectorAll("[tron-reveal]");
+console.log(elementsOfInterest);
+elementsOfInterest.forEach((element) => {
+  const revealMe = element.getAttribute("tron-reveal");
+  console.log(`Element ${element.id} will reveal ${revealMe} on hover`);
+  const revealElement = document.querySelector(revealMe);
+  if (!revealElement) {
+    console.error(
+      `Element ${revealMe} not found, so element ${element.id} will not reveal anything`
+    );
+    return;
+  }
+  // check that revealElement is an input
+  if (revealElement.tagName !== "INPUT") {
+    console.error(
+      `Element ${revealMe} is not an input, so element ${element.id} will not reveal anything`
+    );
+    return;
+  }
+  // add a hover listener to element
+  element.addEventListener("mouseenter", () => {
+    revealElement.type = "text";
+  });
+  element.addEventListener("mouseleave", () => {
+    revealElement.type = "password";
+  });
+});

src/HoneycombApiKey.ts

@@ -14,7 +14,7 @@ export function ApiKeyPrompt(apiKey: string | undefined): string {
   return html`<section class="apiKey">
     <form hx-post="/team" hx-target="#stuff" id="apikey-form" hx-indicator="#big-think">
       <div>
-        <label for="apikey">Honeycomb API Key: <span id="reveal-password">👁</span></label>
+        <label for="apikey">Honeycomb API Key: <span id="reveal-password" tron-reveal="#apikey">👁</span></label>
         <input id="apikey" type="password" name="apikey" hx-get="/validate" hx-target="#apikey-opinion" hx-include="#apikey" ></input>
         <button>Check Permissions</button>
       </div>
@@ -25,6 +25,7 @@ export function ApiKeyPrompt(apiKey: string | undefined): string {
     <p class="fine-print">This API key will be sent to the Honeycomb Tricks backend, but we don't save it. We call the Honeycomb auth endpoint,
     and then tell you which team and environment it belongs to, and which permissions it has.
     </p> 
+    <script src="/jess.js"></script>
  </section>`;
 }