86 lines
3.1 KiB
JavaScript
86 lines
3.1 KiB
JavaScript
function pinMeBB(
|
|
elID,
|
|
data = {
|
|
limit: 5,
|
|
minChar: 5,
|
|
show: 0,
|
|
}
|
|
) {
|
|
if ((data.minChar || data.limit) > data.limit) data.limit = data.minChar;
|
|
var el = document.getElementById(elID);
|
|
el.insertAdjacentHTML(
|
|
"beforeend",
|
|
`
|
|
<form autocomplete="off">
|
|
<input id='displayPass' readonly type="text" autocomplete="off" maxlength="${data.limit}"/></br>
|
|
<input type='hidden' id="password" maxlength="${data.limit}"/>
|
|
<input type="button" value="1" id="1" class="pinButton calc"/>
|
|
<input type="button" value="2" id="2" class="pinButton calc"/>
|
|
<input type="button" value="3" id="3" class="pinButton calc"/><br>
|
|
<input type="button" value="4" id="4" class="pinButton calc"/>
|
|
<input type="button" value="5" id="5" class="pinButton calc"/>
|
|
<input type="button" value="6" id="6" class="pinButton calc"/><br>
|
|
<input type="button" value="7" id="7" class="pinButton calc"/>
|
|
<input type="button" value="8" id="8" class="pinButton calc"/>
|
|
<input type="button" value="9" id="9" class="pinButton calc"/><br>
|
|
<input type="button" value="clear" id="clear" class="pinButton clear"/>
|
|
<input type="button" value="0" id="0 " class="pinButton calc"/>
|
|
<input type="button" value="enter" id="enter" class="pinButton enter"/>
|
|
</form>
|
|
`
|
|
);
|
|
|
|
const input_value = document.getElementById("password");
|
|
const display_value = document.getElementById("displayPass");
|
|
|
|
const eventEnter = new CustomEvent("onEnter", {
|
|
bubbles: true,
|
|
detail: { password: () => input_value.value },
|
|
});
|
|
|
|
const eventMaxed = new CustomEvent("onMaxChar",{
|
|
detail: { password: () => input_value.value },
|
|
});
|
|
const eventEmpty = new CustomEvent("onEmpty",{
|
|
detail: { password: () => input_value.value },
|
|
});
|
|
|
|
function field(value) {
|
|
if (input_value.value.length >= data.limit) {
|
|
el.dispatchEvent(eventMaxed);
|
|
} else {
|
|
input_value.value = input_value.value + value;
|
|
// TODO if show == 1 display_value.value = display_value.value + value;
|
|
display_value.value += data.show === 1 ? value : "*";
|
|
}
|
|
}
|
|
|
|
document
|
|
.getElementById("enter")
|
|
.addEventListener("click", (e) =>
|
|
el.dispatchEvent(
|
|
input_value.value.length < (data.minChar || data.limit)
|
|
? eventEmpty
|
|
: eventEnter
|
|
)
|
|
);
|
|
document.getElementById("clear").addEventListener("click", (e) => {
|
|
input_value.value = "";
|
|
display_value.value = "";
|
|
});
|
|
|
|
var pads = document.getElementsByClassName("calc");
|
|
for (var i = 0; i < pads.length; i++) {
|
|
pads[i].addEventListener("click", (e) => {
|
|
field(e.target.value);
|
|
});
|
|
pads[i].addEventListener("keydown", (e) => {
|
|
if (e.keyCode === 13) {
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
}
|
|
|
|
return el;
|
|
}
|