Integrated simple-keyboard from hodged as a on-screen keyboard #14
This commit is contained in:
parent
6c72b5059f
commit
0ab45c6e68
9 changed files with 145 additions and 92 deletions
|
@ -1,7 +1,6 @@
|
|||
(() => {
|
||||
|
||||
// Define variables
|
||||
|
||||
let usernameInputElement;
|
||||
let passwordInputElement;
|
||||
let submitButton;
|
||||
|
@ -11,77 +10,43 @@
|
|||
let pinpadButtons;
|
||||
let userlistContainerElement;
|
||||
|
||||
|
||||
// Add event listeners after DOM Content loaded
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
|
||||
// elements
|
||||
|
||||
usernameInputElement = document.getElementById("id_username");
|
||||
passwordInputElement = document.getElementById("id_password");
|
||||
submitButton = document.getElementById("submit_login");
|
||||
passwordOverlayElement = document.getElementById("passwordoverlaycontainer");
|
||||
pwOverlayCancelButton = document.getElementById("pwocancel");
|
||||
userlistContainerElement = document.getElementById("userlistcontainer");
|
||||
|
||||
userlistButtons = document.getElementsByClassName("userlistbutton");
|
||||
pinpadButtons = document.getElementsByClassName("pinpadbtn");
|
||||
|
||||
// event listeners
|
||||
|
||||
// [...<html-collection>] converts an html collection to an array
|
||||
|
||||
[...userlistButtons].forEach(element => {
|
||||
element.addEventListener("click", () => {
|
||||
set_username(element.dataset.username);
|
||||
show_password_overlay();
|
||||
})
|
||||
});
|
||||
|
||||
[...pinpadButtons].forEach(element => {
|
||||
element.addEventListener("click", () => {
|
||||
pinpad_press(element.dataset.btn);
|
||||
})
|
||||
})
|
||||
|
||||
pwOverlayCancelButton.addEventListener("click", () => {
|
||||
hide_password_overlay();
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
|
||||
function set_username(username) {
|
||||
usernameInputElement.value = username;
|
||||
}
|
||||
|
||||
function show_password_overlay() {
|
||||
|
||||
window.scrollTo(0, 0);
|
||||
passwordOverlayElement.classList.remove("nodisplay");
|
||||
userlistContainerElement.classList.add("nodisplay");
|
||||
|
||||
}
|
||||
|
||||
function hide_password_overlay() {
|
||||
|
||||
passwordOverlayElement.classList.add("nodisplay");
|
||||
userlistContainerElement.classList.remove("nodisplay");
|
||||
passwordInputElement.value = "";
|
||||
|
||||
}
|
||||
|
||||
function pinpad_press(key) {
|
||||
if (key == "enter") {
|
||||
submitButton.click();
|
||||
}
|
||||
else if (key == "x") {
|
||||
passwordInputElement.value = "";
|
||||
}
|
||||
else {
|
||||
passwordInputElement.value += key;
|
||||
}
|
||||
}
|
||||
|
||||
})()
|
Loading…
Add table
Add a link
Reference in a new issue