improved password toggle

js/custom.js

@@ -193,6 +193,26 @@ function loadWifiStations(refresh) {
 
 $(".js-reload-wifi-stations").on("click", loadWifiStations(true));
 
+$(document).on("click", ".js-toggle-password", function(e) {
+    var button = $(e.target)
+    var field  = $(button.data("target"));
+    if (field.is(":input")) {
+        e.preventDefault();
+
+        if (!button.data("__toggle-with-initial")) {
+            button.data("__toggle-with-initial", button.text())
+        }
+
+        if (field.attr("type") === "password") {
+            button.text(button.data("toggle-with"));
+            field.attr("type", "text");
+        } else {
+            button.text(button.data("__toggle-with-initial"));
+            field.attr("type", "password");
+        }
+    }
+});
+
 $(document)
     .ajaxSend(setCSRFTokenHeader)
     .ready(contentLoaded)

templates/configure_client.php

@@ -21,14 +21,3 @@
     </div><!-- /.panel-primary -->
   </div><!-- /.col-lg-12 -->
 </div><!-- /.row -->
-
-<script>
-  function showPassword(index) {
-      var x = document.getElementsByName("passphrase"+index)[0];
-      if (x.type === "password") {
-          x.type = "text";
-      } else {
-          x.type = "password";
-      }
-  }
-</script>

templates/wifi_stations.php

@@ -69,7 +69,7 @@
             <?php } else { ?>
               <input type="password" class="form-control" aria-describedby="passphrase" name="passphrase<?php echo $index ?>" value="<?php echo $network['passphrase'] ?>" onKeyUp="CheckPSK(this, 'update<?php echo $index?>')" >
               <span class="input-group-btn">
-                <button class="btn btn-default" onclick="showPassword(<?php echo $index; ?>)" type="button">Show</button>
+                <button class="btn btn-default js-toggle-password" type="button" data-target="[name=passphrase<?php echo $index ?>]" data-toggle-with="<?php echo _("Hide") ?>">Show</button>
               </span>
             <?php } ?>
         </div>