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
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 @@
.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