Add password visibility toggle

This commit will add a new password visibility toggle directive.
The new directive was added to the local user management,
user modal password input fields.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I4e2baf53eec04aaff1bba26948779de6e447e3e7

2 files changed, 73 insertions, 0 deletions

diff --git a/app/common/directives/password-visibility-toggle/password-visibility-toggle.js b/app/common/directives/password-visibility-toggle/password-visibility-toggle.js
new file mode 100644
index 0000000..2302c18
--- /dev/null
+++ b/app/common/directives/password-visibility-toggle/password-visibility-toggle.js
@@ -0,0 +1,46 @@
+window.angular && (function(angular) {
+  'use strict';
+
+  /**
+   * Password visibility toggle
+   *
+   * This attribute directive will toggle an input type
+   * from password/text to show/hide the value of a password
+   * input field.
+   *
+   * To use:
+   * <input type="password" password-visibility-toggle />
+   */
+  angular.module('app.common.directives')
+      .directive('passwordVisibilityToggle', [
+        '$compile',
+        function($compile) {
+          return {
+            restrict: 'A',
+            link: function(scope, element) {
+              const instanceScope = scope.$new();
+              const buttonTemplate = `
+              <button type="button"
+                      aria-hidden="true"
+                      class="btn  btn-tertiary btn-password-toggle"
+                      ng-class="{
+                        'password-visible': visible,
+                        'password-hidden': !visible
+                      }"
+                ng-click="toggleField()">
+                <icon ng-if="!visible" file="icon-visibility-on.svg"></icon>
+                <icon ng-if="visible" file="icon-visibility-off.svg"></icon>
+              </button>`;
+
+              instanceScope.visible = false;
+              instanceScope.toggleField = () => {
+                instanceScope.visible = !instanceScope.visible;
+                const type = instanceScope.visible ? 'text' : 'password';
+                element.attr('type', type);
+              };
+              element.after($compile(buttonTemplate)(instanceScope));
+            }
+          };
+        }
+      ]);
+})(window.angular);
diff --git a/app/common/styles/base/buttons.scss b/app/common/styles/base/buttons.scss
index 25e5a91..6337b33 100644
--- a/app/common/styles/base/buttons.scss
+++ b/app/common/styles/base/buttons.scss
@@ -149,4 +149,31 @@ optional actions given on a page.
   .icon {
     fill: $btn-tertiary__txt;
   }
+}
+
+.btn-password-toggle {
+  position: absolute;
+  right: 0;
+  margin-top: -34px;
+  height: 32px;
+  width: 52px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  padding-right: 0;
+  .icon {
+    margin-right: 0;
+  }
+  &.password-visible {
+    .icon {
+      fill: $btn-tertiary__txt--disabled;
+    }
+  }
+  &.password-hidden {
+    .icon {
+      // Adding tweaks to make sure the icons
+      // are in the same place when toggling show/hide
+      margin-right: 1px;
+      width: 20px;
+    }
+  }
 }
\ No newline at end of file