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

6 files changed, 78 insertions, 0 deletions

diff --git a/app/assets/icons/icon-visibility-off.svg b/app/assets/icons/icon-visibility-off.svg
new file mode 100644
index 0000000..ddadbdb
--- /dev/null
+++ b/app/assets/icons/icon-visibility-off.svg
@@ -0,0 +1 @@
+<svg data-name="Layer 1" viewBox="0 0 16 16"><path d="M11.85 3.45L15.29 0l.71.71L12.72 4a11.92 11.92 0 0 1 3.35 3.93Q13 13.5 8 13.5a7.68 7.68 0 0 1-3.82-1L.7 16l-.7-.71L3.32 12A11.85 11.85 0 0 1 0 7.93Q3 2.5 8 2.5a7.94 7.94 0 0 1 3.85.95zm-6.93 8.34A6.73 6.73 0 0 0 8 12.5c2.79 0 5.08-1.48 6.91-4.57A10.29 10.29 0 0 0 12 4.71l-1.55 1.55a3 3 0 0 1-4.19 4.18zM4 11.25l1.55-1.51a3 3 0 0 1 4.19-4.18l1.36-1.37A7 7 0 0 0 8 3.5c-2.8 0-5 1.44-6.82 4.43A10.22 10.22 0 0 0 4 11.25zm3-1.53A2 2 0 0 0 9.72 7zM6.28 9L9 6.28A2 2 0 0 0 6.28 9z"/></svg>
\ No newline at end of file
diff --git a/app/assets/icons/icon-visibility-on.svg b/app/assets/icons/icon-visibility-on.svg
new file mode 100644
index 0000000..21058f9
--- /dev/null
+++ b/app/assets/icons/icon-visibility-on.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 16 11"><path d="M8 7.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 1c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z"/><path d="M8 10c2.8 0 5.1-1.5 6.9-4.6C13.1 2.5 10.8 1 8 1 5.2 1 3 2.4 1.2 5.4 2.9 8.6 5.2 10 8 10zM8 0c3.3 0 6 1.8 8.1 5.4C14 9.2 11.3 11 8 11S2 9.2 0 5.5C2 1.9 4.6 0 8 0z"/></svg>
\ No newline at end of file
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
diff --git a/app/index.js b/app/index.js
index 5525aef..32acb66 100644
--- a/app/index.js
+++ b/app/index.js
@@ -63,6 +63,7 @@ import dir_paginate from './common/directives/dirPagination.js';
 import form_input_error from './common/directives/form-input-error.js';
 import icon_provider from './common/directives/icon-provider.js';
 import password_confirmation from './common/directives/password-confirmation.js';
+import password_visibility_toggle from './common/directives/password-visibility-toggle/password-visibility-toggle.js';
 
 import components_index from './common/components/index.js';
 import table_component from './common/components/table/table.js';
diff --git a/app/users/controllers/user-accounts-modal-user.html b/app/users/controllers/user-accounts-modal-user.html
index 7df5ea1..7b380be 100644
--- a/app/users/controllers/user-accounts-modal-user.html
+++ b/app/users/controllers/user-accounts-modal-user.html
@@ -92,6 +92,7 @@
                    autocomplete="new-password"
                    ng-required="modalCtrl.user.new || form.password.$touched || form.passwordConfirm.$touched"
                    ng-model="modalCtrl.user.password"
+                   password-visibility-toggle
                    ng-click="form.password.$setTouched()"
                    placeholder="{{
                     (modalCtrl.user.new ||
@@ -113,6 +114,7 @@
                    autocomplete="new-password"
                    ng-required="modalCtrl.user.new || form.password.$touched || form.passwordConfirm.$touched"
                    ng-model="modalCtrl.user.passwordConfirm"
+                   password-visibility-toggle
                    password-confirm
                    first-password="form.password.$modelValue"
                    ng-click="form.passwordConfirm.$setTouched()"