Add option to toggle password fields
Change-Id: I07a16697d2cbf9215176995b1d65ecfcc1094141
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index be58b60..eb41f35 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -438,6 +438,11 @@
}
/**
+ * Initialize password toggle.
+ */
+ initTogglePwdVisibility();
+
+ /**
* Initialize Plugin registry.
*/
let pe;
diff --git a/dev/js/src/util.js b/dev/js/src/util.js
index 0fea33f..b8be33b 100644
--- a/dev/js/src/util.js
+++ b/dev/js/src/util.js
@@ -86,6 +86,30 @@
};
+/**
+ * Add option to show passwords.
+ */
+function initTogglePwdVisibility () {
+ const el = document.querySelectorAll("input[type=password].show-pwd");
+ for (let x = 0; x < el.length; x++) {
+ const pwd = el[x];
+
+ const a = document.createElement('a');
+ a.classList.add('showPWD');
+ a.addEventListener('click', function () {
+ if (pwd.getAttribute("type") === "password") {
+ pwd.setAttribute("type", "text");
+ a.classList.add('hide');
+ return;
+ };
+ pwd.setAttribute("type", "password");
+ a.classList.remove('hide');
+ });
+ pwd.parentNode.insertBefore(a, pwd.nextSibling);
+ };
+};
+
+
define(function () {
// Todo: That's double now!
KorAP.API = KorAP.API || {};
diff --git a/dev/scss/base/base.scss b/dev/scss/base/base.scss
index d5b646d..5e095a2 100644
--- a/dev/scss/base/base.scss
+++ b/dev/scss/base/base.scss
@@ -8,6 +8,7 @@
@import "view";
@import "menu";
@import "banner";
+@import "showPWD";
/**
* Basic global CSS rules for Kalamar
@@ -137,4 +138,4 @@
}
}
}
-}
\ No newline at end of file
+}
diff --git a/dev/scss/base/icons.scss b/dev/scss/base/icons.scss
index 24ee8eb..0a0c109 100644
--- a/dev/scss/base/icons.scss
+++ b/dev/scss/base/icons.scss
@@ -36,3 +36,5 @@
$fa-redo: "\f01e";
$fa-warn: "\f071";
$fa-token: "\1f511";
+$fa-show: "\1f441";
+$fa-hide: "\f070";
diff --git a/dev/scss/base/showPWD.scss b/dev/scss/base/showPWD.scss
new file mode 100644
index 0000000..75a6991
--- /dev/null
+++ b/dev/scss/base/showPWD.scss
@@ -0,0 +1,13 @@
+@import "icons";
+
+a.showPWD::after {
+ position: absolute;
+ @include icon-font;
+ width: 1em;
+ content: $fa-show;
+ cursor: pointer;
+ margin-left: -1em;
+}
+a.showPWD.hide::after {
+ content: $fa-hide;
+}
diff --git a/lib/Kalamar/Plugin/Auth/templates/auth/client.html.ep b/lib/Kalamar/Plugin/Auth/templates/auth/client.html.ep
index d42bf93..b8f5212 100644
--- a/lib/Kalamar/Plugin/Auth/templates/auth/client.html.ep
+++ b/lib/Kalamar/Plugin/Auth/templates/auth/client.html.ep
@@ -40,7 +40,7 @@
% foreach (@{$c->stash('tokens')}) {
<li class="token">
%= label_for 'token' => loc('Auth_accessToken')
- %= text_field '', value => $_->{token}, readonly => 'readonly', class => 'show-pwd copy-to-clipboard'
+ %= password_field '', value => $_->{token}, readonly => 'readonly', class => 'show-pwd copy-to-clipboard'
<p name="created"><%== loc('Auth_createdAt', date => $_->{created_date}) %></p>
<p name="expires"><%== loc('Auth_expiresIn', seconds => $_->{expires_in}) %></p>
% if ($_->{scope}) {