diff --git a/customize.dist/src/less2/include/password-input.less b/customize.dist/src/less2/include/password-input.less index a2f2fb044..79824bac7 100644 --- a/customize.dist/src/less2/include/password-input.less +++ b/customize.dist/src/less2/include/password-input.less @@ -9,8 +9,27 @@ flex: 1; min-width: 0; } - label, .fa { - margin-left: 10px; + .fa { + width: 30px; + height: 30px; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + &:hover { + background-color: rgba(0,0,0,0.1); + } + } + } + .cp-password-change-container { + display: flex; + align-items: center; + .cp-password-container { + margin-bottom: 0 !important; + flex: 1; + } + button { + margin: 0 !important; } } } diff --git a/www/common/common-interface.js b/www/common/common-interface.js index 72851a8cc..fbeb6a3cc 100644 --- a/www/common/common-interface.js +++ b/www/common/common-interface.js @@ -590,9 +590,10 @@ define([ }, opts); var input = h('input.cp-password-input', attributes); - var reveal = UI.createCheckbox('cp-password-reveal', Messages.password_show); + //var reveal = UI.createCheckbox('cp-password-reveal', Messages.password_show); var eye = h('span.fa.fa-eye.cp-password-reveal'); + /* $(reveal).find('input').on('change', function () { if($(this).is(':checked')) { $(input).prop('type', 'text'); @@ -602,26 +603,41 @@ define([ $(input).prop('type', 'password'); $(input).focus(); }); + */ - $(eye).mousedown(function () { - $(input).prop('type', 'text'); - $(input).focus(); - }).mouseup(function(){ - $(input).prop('type', 'password'); - $(input).focus(); - }).mouseout(function(){ - $(input).prop('type', 'password'); - $(input).focus(); - }); if (displayEye) { + $(eye).mousedown(function () { + $(input).prop('type', 'text'); + $(input).focus(); + }).mouseup(function(){ + $(input).prop('type', 'password'); + $(input).focus(); + }).mouseout(function(){ + $(input).prop('type', 'password'); + $(input).focus(); + }); + } else { + $(eye).click(function () { + if ($(this).hasClass('fa-eye')) { + $(input).prop('type', 'text'); + $(input).focus(); + $(this).removeClass('fa-eye').addClass('fa-eye-slash'); + return; + } + $(input).prop('type', 'password'); + $(input).focus(); + $(this).removeClass('fa-eye-slash').addClass('fa-eye'); + }); + } + /*if (displayEye) { $(reveal).hide(); } else { $(eye).hide(); - } + }*/ return h('span.cp-password-container', [ input, - reveal, + //reveal, eye ]); }; diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index df8836788..8943f67b5 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -570,7 +570,7 @@ define([ style: 'flex: 1;' }); var passwordOk = h('button', Messages.properties_changePasswordButton); - var changePass = h('span.cp-password-container', [ + var changePass = h('span.cp-password-change-container', [ newPassword, passwordOk ]);