Skip to content

Commit fc8ad20

Browse files
andrewdoddsystemcrash
authored andcommitted
luci: Make password reveal work with passsword managers
Password managers (like LastPass etc) tend to add additional elements into the DOM for their own context menus. If this happens between the hide/reveal button and the password input, then the logic to reveal the password breaks. This change updates the onclick handler to look for the first `<input>` element with the class `password-input` that is under the parent of the toggle button, and then to toggle the password/text type on that element. This change deliberately only updates the main ui.js file, not any application files. Signed-off-by: Andrew Dodd <andrew.john.dodd@gmail.com>
1 parent 51a8f8c commit fc8ad20

File tree

1 file changed

+10
-3
lines changed
  • modules/luci-base/htdocs/luci-static/resources

1 file changed

+10
-3
lines changed

modules/luci-base/htdocs/luci-static/resources/ui.js

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -368,7 +368,7 @@ const UITextfield = UIElement.extend(/** @lends LuCI.ui.Textfield.prototype */ {
368368
'id': this.options.id ? `widget.${this.options.id}` : null,
369369
'name': this.options.name,
370370
'type': 'text',
371-
'class': this.options.password ? 'cbi-input-password' : 'cbi-input-text',
371+
'class': `password-input ${this.options.password ? 'cbi-input-password' : 'cbi-input-text'}`,
372372
'readonly': this.options.readonly ? '' : null,
373373
'disabled': this.options.disabled ? '' : null,
374374
'maxlength': this.options.maxlength,
@@ -384,8 +384,15 @@ const UITextfield = UIElement.extend(/** @lends LuCI.ui.Textfield.prototype */ {
384384
'title': _('Reveal/hide password'),
385385
'aria-label': _('Reveal/hide password'),
386386
'click': function(ev) {
387-
const e = this.previousElementSibling;
388-
e.type = (e.type === 'password') ? 'text' : 'password';
387+
// DOM manipulation (e.g. by password managers) may have inserted other
388+
// elements between the reveal button and the input. This searches for
389+
// the first <input> inside the parent of the <button> to use for toggle.
390+
const e = this.parentElement.querySelector('input.password-input')
391+
if (e) {
392+
e.type = (e.type === 'password') ? 'text' : 'password';
393+
} else {
394+
console.error('unable to find input corresponding to reveal/hide button');
395+
}
389396
ev.preventDefault();
390397
}
391398
}, '∗')

0 commit comments

Comments
 (0)