@goldenpine/react-form-builder2 0.20.3-build.32 → 0.20.3-build.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/app.js +1 -1
- package/lib/form-elements/sensitive-input.js +100 -0
- package/lib/form.js +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
(function (window, document) {
|
|
4
|
+
'use strict';
|
|
5
|
+
|
|
6
|
+
var CSS_ID = 'sensitive-input-styles';
|
|
7
|
+
function injectStyles() {
|
|
8
|
+
if (document.getElementById(CSS_ID)) return;
|
|
9
|
+
var css = "\n.sensitive-wrapper { position: relative; }\n.sensitive-wrapper .toggle-password{\n position: absolute;\n right: .75rem;\n top: 50%;\n transform: translateY(-50%);\n cursor: pointer;\n color: #6c757d;\n background: transparent;\n border: none;\n padding: 0;\n font-size: 1rem;\n}\n.sensitive-wrapper input.form-control{\n padding-right: 2.5rem;\n}\n";
|
|
10
|
+
var style = document.createElement('style');
|
|
11
|
+
style.id = CSS_ID;
|
|
12
|
+
style.type = 'text/css';
|
|
13
|
+
style.appendChild(document.createTextNode(css));
|
|
14
|
+
(document.head || document.documentElement).appendChild(style);
|
|
15
|
+
}
|
|
16
|
+
function processWrapper(wrapper) {
|
|
17
|
+
if (!wrapper) return;
|
|
18
|
+
var input = wrapper.querySelector('input');
|
|
19
|
+
if (!input) return;
|
|
20
|
+
|
|
21
|
+
// ensure initial type is password unless explicitly text
|
|
22
|
+
try {
|
|
23
|
+
if (!input.getAttribute('data-initial-type')) {
|
|
24
|
+
input.setAttribute('data-initial-type', input.type || 'password');
|
|
25
|
+
}
|
|
26
|
+
if (!input.type) input.type = 'password';
|
|
27
|
+
} catch (e) {
|
|
28
|
+
// ignore
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
// find existing toggle or create one
|
|
32
|
+
var toggle = wrapper.querySelector('.toggle-password');
|
|
33
|
+
if (!toggle) {
|
|
34
|
+
toggle = document.createElement('button');
|
|
35
|
+
toggle.type = 'button';
|
|
36
|
+
toggle.className = 'toggle-password';
|
|
37
|
+
toggle.setAttribute('aria-pressed', 'false');
|
|
38
|
+
toggle.setAttribute('title', 'Show password');
|
|
39
|
+
// prefer icon if FontAwesome present
|
|
40
|
+
toggle.innerHTML = '<i class="fas fa-eye" aria-hidden="true"></i>';
|
|
41
|
+
wrapper.appendChild(toggle);
|
|
42
|
+
}
|
|
43
|
+
function setShown(shown) {
|
|
44
|
+
try {
|
|
45
|
+
input.type = shown ? 'text' : 'password';
|
|
46
|
+
} catch (err) {
|
|
47
|
+
// some browsers don't allow changing type — replace element as fallback
|
|
48
|
+
var newInput = input.cloneNode(true);
|
|
49
|
+
newInput.type = shown ? 'text' : 'password';
|
|
50
|
+
input.parentNode.replaceChild(newInput, input);
|
|
51
|
+
}
|
|
52
|
+
toggle.setAttribute('aria-pressed', shown ? 'true' : 'false');
|
|
53
|
+
toggle.setAttribute('title', shown ? 'Hide password' : 'Show password');
|
|
54
|
+
// update icon if present
|
|
55
|
+
var i = toggle.querySelector('i');
|
|
56
|
+
if (i) {
|
|
57
|
+
if (shown) {
|
|
58
|
+
i.classList.remove('fa-eye');
|
|
59
|
+
i.classList.add('fa-eye-slash');
|
|
60
|
+
} else {
|
|
61
|
+
i.classList.remove('fa-eye-slash');
|
|
62
|
+
i.classList.add('fa-eye');
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
toggle.addEventListener('click', function (e) {
|
|
67
|
+
e.preventDefault();
|
|
68
|
+
e.stopPropagation();
|
|
69
|
+
var currentlyShown = toggle.getAttribute('aria-pressed') === 'true';
|
|
70
|
+
setShown(!currentlyShown);
|
|
71
|
+
// keep focus in the input for accessibility
|
|
72
|
+
try {
|
|
73
|
+
input.focus();
|
|
74
|
+
} catch (err) {}
|
|
75
|
+
});
|
|
76
|
+
|
|
77
|
+
// initialize state
|
|
78
|
+
setShown(false);
|
|
79
|
+
}
|
|
80
|
+
function init(options) {
|
|
81
|
+
options = options || {};
|
|
82
|
+
if (options.injectStyles !== false) injectStyles();
|
|
83
|
+
var wrappers = document.querySelectorAll('.sensitive-wrapper');
|
|
84
|
+
wrappers.forEach(processWrapper);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
// auto init on DOM ready
|
|
88
|
+
if (document.readyState === 'loading') {
|
|
89
|
+
document.addEventListener('DOMContentLoaded', function () {
|
|
90
|
+
return init();
|
|
91
|
+
});
|
|
92
|
+
} else {
|
|
93
|
+
setTimeout(function () {
|
|
94
|
+
return init();
|
|
95
|
+
}, 0);
|
|
96
|
+
}
|
|
97
|
+
window.SensitiveInput = {
|
|
98
|
+
init: init
|
|
99
|
+
};
|
|
100
|
+
})(window, document);
|
package/lib/form.js
CHANGED