From b37c894ffce12d9529569e83966e6198bde3db3f Mon Sep 17 00:00:00 2001
From: Isaac Connor <iconnor@connortechnology.com>
Date: Wed, 29 Dec 2021 18:25:21 -0500
Subject: [PATCH] Add toggle_password_visibility which is used in options for
 MQTT password

---
 web/skins/classic/js/skin.js | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/web/skins/classic/js/skin.js b/web/skins/classic/js/skin.js
index a12005e76..2d51bd9b2 100644
--- a/web/skins/classic/js/skin.js
+++ b/web/skins/classic/js/skin.js
@@ -103,7 +103,9 @@ window.addEventListener("DOMContentLoaded", function onSkinDCL() {
 
 // 'data-on-click-this' calls the global function in the attribute value with the element when a click happens.
 function dataOnClickThis() {
-  document.querySelectorAll("a[data-on-click-this], button[data-on-click-this], input[data-on-click-this]").forEach(function attachOnClick(el) {
+console.log("Looking for data-on-click-this");
+  document.querySelectorAll("a[data-on-click-this], button[data-on-click-this], input[data-on-click-this], span[data-on-click-this]").forEach(function attachOnClick(el) {
+console.log(el);
     var fnName = el.getAttribute("data-on-click-this");
     if ( !window[fnName] ) {
       console.error("Nothing found to bind to " + fnName + " on element " + el.name);
@@ -986,3 +988,18 @@ function closeFullscreen() {
     document.msExitFullscreen();
   }
 }
+
+function toggle_password_visibility(element) {
+  input = document.getElementById(element.getAttribute('data-password-input'));
+  if (!input) {
+    console.log("Input not found! " + element.getAttribute('data-password-input'));
+    return;
+  }
+  if (element.innerHTML=='visibility') {
+    input.type = 'text';
+    element.innerHTML = 'visibility_off';
+  } else {
+    input.type = 'password';
+    element.innerHTML='visibility';
+  }
+}