luci-base: rework reveal/hide CBI password template button

Also add a hidden type password field to prevent browser autocompleters
from entering the login passwords into fields liek the wireless WPA key
field.

Signed-off-by: Jo-Philipp Wich <jo@mein.io>
(cherry picked from commit b6dd0ecd6cc7eb1f4c758a0815f725ff0be4f157)

diff --git a/modules/luci-base/luasrc/view/cbi/value.htm b/modules/luci-base/luasrc/view/cbi/value.htm
index c8c905eb11e1043392eecec54c8f5410d4216aeb..942ab72e773dfe3ceb901c998d17721177b7630c 100644 (file)
--- a/modules/luci-base/luasrc/view/cbi/value.htm
+++ b/modules/luci-base/luasrc/view/cbi/value.htm
@@ -1,10 +1,16 @@
 <%+cbi/valueheader%>
+       <%- if self.password then -%>
+               <input type="password" style="position:absolute; left:-1000px"<%=
+                       attr("name", "password." .. cbid)
+               %> />
+       <%- end -%>
        <input data-update="change"<%=
                attr("id", cbid) ..
                attr("name", cbid) ..
                attr("type", self.password and "password" or "text") ..
                attr("class", self.password and "cbi-input-password" or "cbi-input-text") ..
                attr("value", self:cfgvalue(section) or self.default) ..
+               ifattr(self.password, "autocomplete", "new-password") ..
                ifattr(self.size, "size") ..
                ifattr(self.placeholder, "placeholder") ..
                ifattr(self.readonly, "readonly") ..
@@ -14,5 +20,7 @@
                ifattr(self.combobox_manual, "data-manual", self.combobox_manual) ..
                ifattr(#self.keylist > 0, "data-choices", { self.keylist, self.vallist })
        %> />
-       <% if self.password then %><img src="<%=resource%>/cbi/reload.gif" style="vertical-align:middle" title="<%:Reveal/hide password%>" onclick="var e = document.getElementById('<%=cbid%>'); e.type = (e.type=='password') ? 'text' : 'password';" /><% end %>
+       <%- if self.password then -%>
+               <div class="cbi-button cbi-button-neutral" title="<%:Reveal/hide password%>" onclick="var e = this.previousElementSibling; e.type = (e.type === 'password') ? 'text' : 'password'">∗</div>
+       <% end %>
 <%+cbi/valuefooter%>