Fix the password eye problem

Author: nb-ohad

frontend/src/app/components/login/change-password-form/change-password-form.js

@@ -25,9 +25,9 @@ class ChangePasswordFormViewModel extends BaseViewModel {
 
         this.newPassword = ko.observable()
             .extend({
-                validation: {
-                    validator: pass => pass && (pass.length >= 5),
-                    message: 'Use at least 5 characters'
+                minLength: {
+                    params: 5,
+                    message: 'At least 5 characters'
                 },
                 includesUppercase: true,
                 includesLowercase: true,

frontend/src/app/components/shared/password-field/password-field.html

@@ -1,27 +1,27 @@
 <!-- Copyright (C) 2016 NooBaa -->
 
-<div class="row content-middle" data-bind="
-    validationOptions: { insertMessages: false }
-">
-    <input class="password-input" type="password" autocomplete="off" data-bind="
-        textInput: value,
-        disable: disabled,
-        attr: { type: type, placeholder: placeholder }
-    "/>
-
-    <button class="eye-button icon-btn btn-flat no-outline" type="button" tabindex="-1" data-bind="
-        click: toogleType,
-        tooltip: tooltip,
-        visible: value
-    ">
-        <svg-icon params="name: icon"></svg-icon>
-    </button>
+<div class="input" ko.css.focus="hasFocus">
+    <div class="row content-middle" data-bind="validationOptions: { insertMessages: false }">
+        <input class="password-input" type="password" autocomplete="off"
+            ko.textInput="value"
+            ko.disable="disabled"
+            ko.attr.type="type"
+            ko.attr.placeholder="placeholder",
+            ko.hasFocus="hasFocus"
+        />
+        <button class="icon-btn btn-flat no-outline push-prev" type="button" tabindex="-1"
+            ko.click="toogleType"
+            ko.tooltip="tooltip"
+            ko.visible="value"
+        >
+            <svg-icon params="name: icon"></svg-icon>
+        </button>
+    </div>
 
+    <!-- ko if: isStrengthVisible -->
+    <bar params="values: barValues, emptyColor: emptyColor"></bar>
+    <!-- /ko -->
 </div>
 
-<!-- ko if: isStrengthVisible -->
-<bar params="values: barValues, emptyColor: emptyColor"></bar>
-<!-- /ko -->
-
 <!-- Adding hidden input to control placement of validaiton message -->
-<input type="hidden" data-bind="value: value"></input>
+<input type="hidden" ko.value="value"/>

frontend/src/app/components/shared/password-field/password-field.js

@@ -28,6 +28,7 @@ class PasswordFieldViewModel extends BaseViewModel {
         this.disabled = disabled;
         this.type = ko.observable('password');
         this.placeholder = placeholder;
+        this.hasFocus = ko.observable();
 
         this.icon = ko.pureComputed(
             () => iconMapping[this.type()].icon

frontend/src/app/components/shared/password-field/password-field.less

@@ -1,28 +1,22 @@
 /* Copyright (C) 2016 NooBaa */
 
 password-field {
-    position: relative;
-    display: block;
-
-    &.no-validation-highlight input[type=password] {
-        .no-validation-highlight();
-    }
+    display: inline-block;
 
     /* Must add the :not selectros to get proirity over rules in input.less */;
-    .password-input:not([type=checkbox]):not([type=radio]) {
+/*    .password-input:not([type=checkbox]):not([type=radio]) {
         padding-right: 1.5 * @gutter + 24px;
-    }
+    }*/
 
-    .eye-button {
-        position: absolute;
-        right: @gutter/4;
-        top: 0;
-        margin: @gutter/2;
+    input[type="password"],
+    input[type="text"] {
+        padding: 0;
+        border: none;
     }
 
     bar {
         height: 4px;
-        margin-top: -4px;
+        margin: -5px -@gutter 0 -@gutter;
         border-radius: 0;
     }
 }

frontend/src/app/styles/input.less

@@ -46,6 +46,7 @@
     .placeholder(@color7);
 
     width: @width;
+    height: 42px;
     line-height: 40px;
     border: 1px solid @color7;
     background: none;

frontend/src/app/validations.js

@@ -162,17 +162,17 @@ export default function register(ko) {
 
         includesUppercase:{
             validator: includesUppercase,
-            message: 'Use at least one uppercased letter'
+            message: 'At least one uppercased letter'
         },
 
         includesLowercase:{
             validator: includesLowercase,
-            message: 'Use at least one lowercased letter'
+            message: 'At least one lowercased letter'
         },
 
         includesDigit:{
             validator: includesDigit,
-            message: 'Use at least one digit'
+            message: 'At least one digit'
         },
 
         isJSON: {