diff --git a/web/css/main.css b/web/css/main.css index 11633e7e..8aca5aab 100644 --- a/web/css/main.css +++ b/web/css/main.css @@ -1276,3 +1276,21 @@ label:active { padding: 2px 0 1px 2px; } +.hide-password { + color: #2361a1; + padding-left: 3px; + margin-left: -36px; +} + +.hide-password:hover { + color: #F79B44; +} + +.toggle-psw-visibility-icon { + cursor: pointer; + opacity: 0.4; +} + +.show-passwords-enabled-action { + opacity: 1; +} diff --git a/web/js/events.js b/web/js/events.js index 881eadcf..fd2f1bc7 100644 --- a/web/js/events.js +++ b/web/js/events.js @@ -122,3 +122,49 @@ VE.helpers.createConfirmationDialog = function(elm, dialog_title, confirmed_loca VE.helpers.warn = function(msg) { alert('WARNING: ' + msg); } + +VE.helpers.extendPasswordFields = function() { + var references = ['.password']; + + $(document).ready(function() { + $(references).each(function(i, ref) { + VE.helpers.initAdditionalPasswordFieldElements(ref); + }); + }); +} + +VE.helpers.initAdditionalPasswordFieldElements = function(ref) { + var enabled = $.cookie('hide_passwords') == '1' ? true : false; + if (enabled) { + VE.helpers.hidePasswordFieldText(ref); + } + + $(ref).prop('autocomplete', 'off'); + + var enabled_html = enabled ? '' : 'show-passwords-enabled-action'; + var html = ''; + $(ref).after(html); +} + +VE.helpers.hidePasswordFieldText = function(ref) { + $.cookie('hide_passwords', '1', { expires: 365, path: '/' }); + $(ref).prop('type', 'password'); +} + +VE.helpers.revealPasswordFieldText = function(ref) { + $.cookie('hide_passwords', '0', { expires: 365, path: '/' }); + $(ref).prop('type', 'text'); +} + +VE.helpers.toggleHiddenPasswordText = function(ref, triggering_elm) { + $(triggering_elm).toggleClass('show-passwords-enabled-action'); + + if ($(ref).prop('type') == 'text') { + VE.helpers.hidePasswordFieldText(ref); + } + else { + VE.helpers.revealPasswordFieldText(ref); + } +} + +VE.helpers.extendPasswordFields();