From 47fc5f78efe326cdb5407358d2be66082d3ebb58 Mon Sep 17 00:00:00 2001
From: Tim Wilkinson <tim.j.wilkinson@gmail.com>
Date: Tue, 2 Aug 2022 16:55:08 -0700
Subject: [PATCH] Password visible toggle (#469)

* Add toggle to show password fields

* Fix permissions
---
 files/www/cgi-bin/setup |  38 ++++++++++++++++++++++++++++++++++----
 files/www/viz.png       | Bin 0 -> 1684 bytes
 2 files changed, 34 insertions(+), 4 deletions(-)
 create mode 100644 files/www/viz.png

diff --git a/files/www/cgi-bin/setup b/files/www/cgi-bin/setup
index d864efe2..e75416f5 100755
--- a/files/www/cgi-bin/setup
+++ b/files/www/cgi-bin/setup
@@ -1020,7 +1020,7 @@ html.print([[
 <td>Node Name</td>
 <td><input type=text name=nodetac value=']] .. nodetac .. [[' tabindex=1 size='50'></td>
 <td align=right>Password</td>
-<td><input type=password name=passwd1 value=']] .. passwd1 .. [[' size=8 tabindex=2></td>
+<td><input class='password-input' type=password name=passwd1 value=']] .. passwd1 .. [[' size=8 tabindex=2><i class='password-toggle'></i></td>
 ]])
 html.print([[
 </tr>
@@ -1031,7 +1031,7 @@ html.print([[
 hidden[#hidden + 1] = "<input type=hidden name=config value='mesh'>"
 html.print([[
 <td>Verify Password</td>
-<td><input type=password name=passwd2 value=']] .. passwd2 .. [[' size=8 tabindex=3></td>
+<td><input class='password-input' type=password name=passwd2 value=']] .. passwd2 .. [[' size=8 tabindex=3><i class='password-toggle'></i></td>
 </tr>
 </table>
 </td></tr>
@@ -1268,7 +1268,7 @@ if (phycount > 1 and (wifi_enable ~= "1" or wifi3_enable ~= "1")) or (phycount =
     html.print("<tr><td>Encryption</td><td><select name=wifi2_encryption>")
     html.print("<option value='psk2'".. (wifi2_encryption == "psk2" and " selected" or "") .. ">WPA2 PSK</option>")
     html.print("<option value='psk'".. (wifi2_encryption == "psk" and " selected" or "") .. ">WPA PSK</option>")
-    html.print("</select></td></tr><tr><td>Password</td><td><input type=password size=15 name=wifi2_key value='" .. wifi2_key .. "'></td></tr>")
+    html.print("</select></td></tr><tr><td>Password</td><td><input class='password-input' type=password size=15 name=wifi2_key value='" .. wifi2_key .. "'><i class='password-toggle'></i></td></tr>")
 else
     hidden[#hidden + 1] = "<input type=hidden name=wifi2_enable     value='" .. (wifi2_enable or "") .. "'>"
     hidden[#hidden + 1] = "<input type=hidden name=wifi2_ssid       value='" .. (wifi2_ssid or "") .. "'>"
@@ -1349,7 +1349,7 @@ if (phycount > 1 and (wifi_enable ~= "1" or wifi2_enable ~= "1")) or (phycount =
     end
 
     html.print("<tr><td>SSID</td><td><input type=text name=wifi3_ssid size=15 value='" .. wifi3_ssid .."'></select></td></tr>")
-    html.print("<tr><td>Password</td><td><input type=password size=15 name=wifi3_key value='" .. wifi3_key .. "'></td></tr>")
+    html.print("<tr><td>Password</td><td><input class='password-input' type=password size=15 name=wifi3_key value='" .. wifi3_key .. "'><i class='password-toggle'></i></td></tr>")
 else
     hidden[#hidden + 1] = "<input type=hidden name=wifi3_enable     value='" .. wifi3_enable .. "'>"
     hidden[#hidden + 1] = "<input type=hidden name=wifi3_ssid       value='" .. wifi3_ssid .. "'>"
@@ -1395,6 +1395,36 @@ do
 end
 
 html.print("</form></center>")
+html.print([[<style>
+.password-input {
+padding-right: 21px;
+}
+.password-toggle {
+display: inline-block;
+width: 21px;
+height: 15px;
+margin-left: -24px;
+cursor: pointer;
+background-image: url(/viz.png);
+background-size: contain;
+vertical-align: text-bottom;
+}
+</style>
+<script>
+function togglePassword(e) {
+    var target = e.target.previousSibling;
+    if (target.type === "password") {
+        target.type = "text";
+    }
+    else {
+        target.type = "password";
+    }
+}
+var fields = document.querySelectorAll(".password-toggle");
+for (var i = 0; i < fields.length; i++) {
+    fields[i].addEventListener("click", togglePassword);
+}
+</script>]])
 html.footer()
 html.print("</body></html>")
 http_footer()
diff --git a/files/www/viz.png b/files/www/viz.png
new file mode 100644
index 0000000000000000000000000000000000000000..f9ccd37c788be3a9a20a605a01bbdf33d1494db4
GIT binary patch
literal 1684
zcmeAS@N?(olHy`uVBq!ia0vp^azHG~!3HD)zsDs4DVB6cUq=Rpjs4tz5?O(Kg=CK)
zUj~LMH3o);76yi2K%s^g3=E|P3=FRl7#OT(FffQ0%-I!a1C*#pjqptK^<~fkvN;%7
z7=;*^fh<NKWMGtH0GS44G1xIm!`W`_nG7sYaX%mp0v<pNQU{@#7ce4BS-=EWEw_Lf
z&K3n}3*uj~7)WszctjR6FmMZlFeAgPIT8#EOp`K0B1$5BeXNr6bM+Ea@{>~aDsl@z
zx)^LKtboki)RIJnirk#MVyg;UC9n!BAR8pCucQE0Qj%?}6yY17;GAESs$iyPpl6_D
z$EBd4U{jQmW)<Y(2GtJa*(zm}loVL$>z9|8>y;bp<rk&v8(Lag>Khp88yV>WRp=I1
z=9MH?=;jqGLkxkL<C0pOT$EW*l9`{U05Uf*DZjMDR!IqD5gb6=S(2HCuqm$?>MfuL
z^+7WFhI$72*tDfqWa7{Ul7VOg`wL>74ahL7$e`5X{G3vdv+T@`Y``|42qN4E(GY=6
z1F|5x2LGbWRA7*RZ7_sdfGmcj9^_7|fXs^2oCuf9+|;~ckgH5AZ1k~8plfu_&&e+e
zE=WvHwFBA%)`BF2t{QAjBra=^B%m5?^g*$P6pN4~0u}|P5j!p$eRz7a<Kka<NE?_s
zUwFDWhIsHE4cqViDp17!6!UQorwghF|1mAUQ##RU!ZIF_jrI#S#&~sv6<#~2CLJ?N
ziiv%$P`a<l(g5dR$Bs?E-#xcES9^cOH23p-G4FrgJ8${C`25cOTQqgQbe`C7HqH1&
zg2955DNgzM`6)-=mRYY|vu48OmnPf7?(jrSi5I)OqCn`-^XKWS!d90Q7dwZChnG}V
zX1-bDr6ID&LBYXpe!rQy`N@X`206W{TeoLEh&^_KO>)8d5UrB3GPk8cCx5(o_pa!}
z)~%*;(tPb9tFONJ^XJZumcxlw78VNo@8>5eKC@=r*rAsE_2o;?r9qlL9k=h@n|JBv
zs=V#1<>cj$-uWWI%r-m2B<qiWvp(-_&z!<TQ5!i5%FCB4P2{j<Z+0xLtz8=z7k8xR
z_s^PjQoU^EFTxsiYaVoWDvKpKwJ=)=>x*%}Satoi=3cuu1tld*e*LxU?><~&724|L
zs4B!cS+t~wvAILHhM%ARCZD08v{Fojx12=(@vQ9ZZr;r|*PQ(H_3PA+7c-W8`~IC*
z(P+||36cgk9FDNxOgEDJcJto7um=qdla1Soii!@gRT)dV&y;17m6tc3=c5+7`fAV(
z_KXXLY(+OXR$l%7<;#?hC04mwhmJfgn#s6V`u<t3RgDigc>b(D%gST6Vd|O|nW-0!
z_ZAj7W|+-h8KHBm`D@i&_M?s+-A9!k|E!r;n8M2AYsA9#sJokcn_ztB()WzV9)H}y
zw0!U7mlMjAeEs6qhyR|m)8>cse;XT{4ZC*jI%RuKMNh)Sa(>g@`}e!0zZVJS=Hy&B
zcaHCAk!9BQ+bQw!@##Sm?%%t&$xtg%bo%L|^Q(#r)^9#2RM^ZXc;;={=k0$y)}(Fr
z+*P#1Sgrr~;_SswH=DY3E{XY{+Uv;EwDf(}$ye^@Hon>Oe&5c5-!Hd5yZzzt+14Ou
zmCsA>U9Dg7f6`-D&%cjfw@l}WT%>p`eEsGAy~pJ{zWV&EIdw4pmc4+0bIH%0(>WhJ
dw*FuImu=tAg+BM@WmtpCT~Aj(mvv4FO#l`0Z5#jq

literal 0
HcmV?d00001