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/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 @@
.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 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()"
