Add option to toggle password fields (2) - Added spec
Change-Id: I67b542d5b1231b427f7b0be48fbe0ed2abde9498
diff --git a/dev/js/spec/utilSpec.js b/dev/js/spec/utilSpec.js
index b42102a..895a5e9 100644
--- a/dev/js/spec/utilSpec.js
+++ b/dev/js/spec/utilSpec.js
@@ -15,5 +15,26 @@
expect('korap test'.slugify()).toEqual('korap-test');
expect('Korap Test'.slugify()).toEqual('korap-test');
});
- })
+ });
+
+ describe('KorAP.util.initTogllePwdVisibility', function () {
+ it('should toggle', function () {
+ const div = document.createElement('div');
+ let input = div.addE('input');
+ input.setAttribute('type', 'password');
+ input.setAttribute('class', 'show-pwd');
+
+ expect(div.children.length).toEqual(1);
+ initTogglePwdVisibility(div);
+ expect(div.children.length).toEqual(2);
+ expect(div.lastChild.tagName).toEqual("A");
+ expect(div.lastChild.classList.contains("hide")).toBeFalsy();
+ expect(input.getAttribute("type")).toEqual("password");
+
+ div.lastChild.click();
+
+ expect(input.getAttribute("type")).toEqual("text");
+ expect(div.lastChild.classList.contains("hide")).toBeTruthy();
+ });
+ });
});
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index eb41f35..98dc54a 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -440,7 +440,7 @@
/**
* Initialize password toggle.
*/
- initTogglePwdVisibility();
+ initTogglePwdVisibility(d);
/**
* Initialize Plugin registry.
diff --git a/dev/js/src/util.js b/dev/js/src/util.js
index b8be33b..14480bc 100644
--- a/dev/js/src/util.js
+++ b/dev/js/src/util.js
@@ -89,13 +89,13 @@
/**
* Add option to show passwords.
*/
-function initTogglePwdVisibility () {
- const el = document.querySelectorAll("input[type=password].show-pwd");
+function initTogglePwdVisibility (element) {
+ const el = element.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.classList.add('show-pwd');
a.addEventListener('click', function () {
if (pwd.getAttribute("type") === "password") {
pwd.setAttribute("type", "text");
diff --git a/dev/scss/base/icons.scss b/dev/scss/base/icons.scss
index 0a0c109..ab8bcc0 100644
--- a/dev/scss/base/icons.scss
+++ b/dev/scss/base/icons.scss
@@ -35,6 +35,6 @@
$fa-referto: "\f0c5";
$fa-redo: "\f01e";
$fa-warn: "\f071";
-$fa-token: "\1f511";
-$fa-show: "\1f441";
+$fa-token: "\f084";
+$fa-show: "\f06e";
$fa-hide: "\f070";
diff --git a/dev/scss/base/showPWD.scss b/dev/scss/base/showPWD.scss
index 75a6991..77de2c1 100644
--- a/dev/scss/base/showPWD.scss
+++ b/dev/scss/base/showPWD.scss
@@ -1,13 +1,20 @@
@import "icons";
-a.showPWD::after {
+input.show-pwd {
+ padding-right: 2em;
+}
+
+a.show-pwd::after {
position: absolute;
@include icon-font;
width: 1em;
content: $fa-show;
cursor: pointer;
- margin-left: -1em;
+ margin-left: -1.5em;
+ margin-top: .6em;
+ font-size: 130%;
}
-a.showPWD.hide::after {
+
+a.show-pwd.hide::after {
content: $fa-hide;
}