Improve password prompt UI

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;
         }
     }
 }

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
         ]);
     };

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
                     ]);