Add password reveal eyes in various places (#1333)

files/app/main/firstuse.ut

@@ -74,18 +74,18 @@ if (request.env.REQUEST_METHOD === "PUT") {
                     </div>
                     <div class="cols">
                         <div>New Password</div>
-                        <div><input type="password" name="passwd1" required pattern="`[^#'"]+" minlength="4"></div>
+                        <div><input class="password-toggle" type="password" name="passwd1" required pattern="`[^#'"]+" minlength="4"><button class="icon eye"></div>
                     </div>
                     <div class="cols">
                         <div>Retype Password</div>
-                        <div><input type="password" name="passwd2" required pattern="" minlength="4"></div>
+                        <div><input class="password-toggle" type="password" name="passwd2" required pattern="" minlength="4"><button class="icon eye"></div>
                     </div>
                     <div>
                         <small>Enter a password, twice, to assign to your node for access to configuration information later</small>
                     </div>
                     <div class="cols">
                         <div></div>
-                        <div><button disabled>Save &amp; Reboot</button></div>
+                        <div><button class="save" disabled>Save &amp; Reboot</button></div>
                     </div>
                 </div>
             </div>
@@ -107,17 +107,17 @@ if (request.env.REQUEST_METHOD === "PUT") {
             passwd2.required = passwd1.value ? "required" : "";
             passwd2.pattern = passwd1.value;
             if (name.validity.valid && passwd1.validity.valid && passwd2.validity.valid) {
-                htmx.find("button").disabled = false;
+                htmx.find("button.save").disabled = false;
             }
             else {
-                htmx.find("button").disabled = true;
+                htmx.find("button.save").disabled = true;
             }
         }
         htmx.on("input[name=name]", "keyup", change);
         htmx.on("input[name=passwd1]", "keyup", change);
         htmx.on("input[name=passwd2]", "keyup", change);
         htmx.on("button", "click", _ => {
-            htmx.find("button").disabled = true;
+            htmx.find("button.save").disabled = true;
             htmx.ajax("PUT", "{{request.env.REQUEST_URI}}", {
                 values: {
                     name: htmx.find("input[name=name]").value,
@@ -128,5 +128,6 @@ if (request.env.REQUEST_METHOD === "PUT") {
         });
     })();
     </script>
+    {{_R("password-ctrl")}}
 </body>
 </html>

files/app/main/status/e/basics.ut

@@ -206,7 +206,7 @@ if (request.env.REQUEST_METHOD === "DELETE") {
                     <div class="m">Change the node password</div>
                 </div>
                 <div>
-                    <input name="passwd1" type="password" pattern="[^#'"]+"><button class="icon eye"></button>
+                    {{_R("password", { name: "passwd1", pattern: "[^#'\"]+" })}}
                 </div>
             </div>
             <div class="cols">
@@ -215,7 +215,7 @@ if (request.env.REQUEST_METHOD === "DELETE") {
                     <div class="m">Passwords must match</div>
                 </div>
                 <div>
-                    <input name="passwd2" type="password" pattern=""><button class="icon eye"></button>
+                    {{_R("password", { name: "passwd2" })}}
                 </div>
             </div>
             {{_H("Set a new password for this device by entering it twice in the boxes. Don't use the # or any quote character. This password
@@ -280,14 +280,6 @@ if (request.env.REQUEST_METHOD === "DELETE") {
                 });
             }
         });
-        function toggle()
-        {
-            const t = htmx.find("dialog input[name=passwd1]").type;
-            htmx.find("dialog input[name=passwd1]").type = t === "text" ? "password" : "text";
-            htmx.find("dialog input[name=passwd2]").type = t === "text" ? "password" : "text";
-        }
-        htmx.on("dialog input[name=passwd1] + button", "click", toggle);
-        htmx.on("dialog input[name=passwd2] + button", "click", toggle);
         {% if (includeAdvanced) { %}
         htmx.on("dialog input[name=ssh_add]", "change", e => {
             htmx.find("dialog select[name=ssh_remove]").value = "-";
@@ -337,4 +329,5 @@ if (request.env.REQUEST_METHOD === "DELETE") {
         {% } %}
     })();
     </script>
+    {{_R("password-ctrl")}}
 </div>

files/app/main/status/e/radio-and-antenna.ut

@@ -363,7 +363,7 @@ if (request.env.REQUEST_METHOD === "DELETE") {
                                 <div class="m">Hotspot password</div>
                             </div>
                             <div style="flex:0">
-                                <input hx-put="{{request.env.REQUEST_URI}}" name="radio_lan_password" type="password" required size="10" maxlength="32" value="{{hexdec(wlan[w].modes[2].key) || "AREDN"}}">
+                                <input class="password-toggle" hx-put="{{request.env.REQUEST_URI}}" name="radio_lan_password" type="password" required size="10" maxlength="32" value="{{hexdec(wlan[w].modes[2].key) || "AREDN"}}"><button class="icon eye"></button>
                             </div>
                         </div>
                     </div>
@@ -387,7 +387,7 @@ if (request.env.REQUEST_METHOD === "DELETE") {
                         <div class="m">Client password</div>
                     </div>
                     <div style="flex:0">
-                        <input hx-put="{{request.env.REQUEST_URI}}" name="radio_wan_password" type="password" size="10" maxlength="32" value="{{hexdec(wlan[w].modes[3].key)}}">
+                        <input class="password-toggle" hx-put="{{request.env.REQUEST_URI}}" name="radio_wan_password" type="password" size="10" maxlength="32" value="{{hexdec(wlan[w].modes[3].key)}}"><button class="icon eye"></button>
                     </div>
                 </div>
             </div>
@@ -593,4 +593,5 @@ if (request.env.REQUEST_METHOD === "DELETE") {
     {% } %}
     })();
     </script>
+    {{_R("password-ctrl")}}
 </div>

files/app/partial/password-ctrl.ut

@@ -0,0 +1,16 @@
+<script>
+(function(){
+    function toggle()
+    {
+        const p = htmx.findAll("input.password-toggle");
+        const t = p[0].type === "text" ? "password" : "text";
+        for (let i = 0; i < p.length; i++) {
+            p[i].type = t;
+        }
+    }
+    const b = htmx.findAll("input.password-toggle + button.icon.eye");
+    for (let i = 0; i < b.length; i++) {
+        htmx.on(b[i], "click", toggle);
+    }
+})();
+</script>

files/app/partial/password.ut

@@ -0,0 +1 @@
+<input class="password-toggle" name="{{inner.name}}" type="password" pattern="{{inner.pattern || ""}}"><button class="icon eye"></button>

files/app/partial/radio-and-antenna.ut

@@ -100,11 +100,10 @@
                 <div class="t">{{r.channel}}</div>
                 <div class="s">channel</div>
             </div>
-            <div>
+            <div style="flex:2">
                 <div class="t">{{r.ssid}}</div>
                 <div class="s">ssid</div>
             </div>
-            <div></div>
         </div>
     </div>
     {% }
@@ -113,7 +112,7 @@
     <div class="section-title">WAN Client</div>
     <div class="section">
         <div class="cols">
-            <div>
+            <div style="flex:2">
                 <div class="t">{{r.ssid}}</div>
                 <div class="s">ssid</div>
             </div>

files/app/resource/css/admin.css

@@ -315,27 +315,32 @@ label.switch
 {
     text-transform: capitalize;
 }
-#ctrl-modal .basics .password .cols div:last-child
+
+/* basics end */
+
+/* password start */
+
+div:has(> input.password-toggle)
 {
     position: relative;
     flex: 0;
 }
-#ctrl-modal .basics .password input
+input.password-toggle
 {
-    padding-right: 30px;
+    padding-right: 30px !important;
 }
-#ctrl-modal .basics .password input + button
+input.password-toggle + button.icon.eye
 {
-    position: absolute;
+    position: absolute !important;
     right: 2px;
-    border: 0;
-    border-radius: 12px;
-    scale: 0.8;
-    background-color: transparent;
+    border: 0 !important;
+    border-radius: 12px !important;
+    scale: 0.8 !important;
+    background-color: transparent !important;
     filter: var(--icon-filter);
 }
 
-/* basics end */
+/* password end */
 
 /* tools start */
 
@@ -878,7 +883,7 @@ label.switch
     border: 1px solid black;
     outline: none;
 }
-.firstuse input[type=password]
+.firstuse input.password-toggle
 {
     width: 200px;
 }
@@ -891,7 +896,7 @@ label.switch
 {
     font-size: 16px;
 }
-.firstuse button
+.firstuse button.save
 {
     width: 200px;
     padding: 10px;
@@ -901,7 +906,7 @@ label.switch
     color: white;
     font: inherit;
 }
-.firstuse button:disabled
+.firstuse button.save:disabled
 {
     background-color: #e0e0e0;
     color: #c0c0c0;
@@ -925,6 +930,14 @@ label.switch
     font: inherit;
     font-size: 12px;
 }
+.firstuse input.password-toggle + button.icon.eye
+{
+    top: 6px;
+    right: 6px;
+    width: 30px;
+    height: 30px;
+    filter: none;
+}
 
 /* reboot and firstuse end */