diff options
author | Dennis Kobert <d-kobert@web.de> | 2019-06-12 21:51:39 +0200 |
---|---|---|
committer | Dennis Kobert <d-kobert@web.de> | 2019-06-12 21:51:39 +0200 |
commit | 9e9c1c822a64c0a65033b7eed07ea661a385cecc (patch) | |
tree | ee699d4e93bb4204f5f4e04cd14f6d77365b81b4 /WebInterface/NodeJSServer/src/js/modules/ui/components/modal | |
parent | 304437b834e8c87687f68333ae67a13ee1377a73 (diff) | |
parent | 3a3d0fc3d4733f8908e23a03f860d76340479ec4 (diff) |
Merge remote-tracking branch 'origin/master'
Diffstat (limited to 'WebInterface/NodeJSServer/src/js/modules/ui/components/modal')
-rw-r--r-- | WebInterface/NodeJSServer/src/js/modules/ui/components/modal/login-modal.js | 139 | ||||
-rw-r--r-- | WebInterface/NodeJSServer/src/js/modules/ui/components/modal/modal.js | 66 |
2 files changed, 0 insertions, 205 deletions
diff --git a/WebInterface/NodeJSServer/src/js/modules/ui/components/modal/login-modal.js b/WebInterface/NodeJSServer/src/js/modules/ui/components/modal/login-modal.js deleted file mode 100644 index 941fd84..0000000 --- a/WebInterface/NodeJSServer/src/js/modules/ui/components/modal/login-modal.js +++ /dev/null @@ -1,139 +0,0 @@ -import Modal from './modal'; -import '../../../networking/hash'; - -/** - * Class to implement a login modal from the parent modal class - */ -export default class LoginModal extends Modal { - /** - * Creates necessary elements for login modal - * @param {Interface} iface Interface for Interactions with other Objects - * @param {string} serverName Name of the server to connect to - */ - constructor(iface, serverName) { - super(serverName); - this.serverName = serverName; - - iface.addObject(this, 'modal', ['loginFailed', 'close']); - this.iface = iface; - - let passBox = document.createElement('div'); - let nameBox = document.createElement('div'); - let sendBox = document.createElement('div'); - - let passwordLabel = document.createElement('label'); - let passwordInput = document.createElement('input'); - let passwordInvalid = document.createElement('span'); - passwordLabel.setAttribute('for', 'password-input'); - passwordLabel.textContent = 'Passwort:'; - passwordLabel.title = 'Das Passwort des Spiels'; - passwordInput.id = 'password-input'; - passwordInput.type = 'password'; - passwordInput.placeholder = 'Passwort'; - passwordInput.title = 'Das Passwort des Spiels'; - passwordInvalid.className = 'invalid hidden'; - passwordInvalid.textContent = 'Das eingegebene Passwort ist falsch.'; - - let nameLabel = document.createElement('label'); - let nameInput = document.createElement('input'); - let nameInvalid = document.createElement('span'); - nameLabel.setAttribute('for', 'name-input'); - nameLabel.textContent = 'Benutzername:'; - nameLabel.title = 'Dein Anzeigename'; - nameInput.id = 'name-input'; - nameInput.type = 'text'; - nameInput.autocomplete = 'on'; - nameInput.placeholder = 'Name'; - nameInput.title = 'Dein Anzeigename'; - nameInvalid.className = 'invalid hidden'; - nameInvalid.textContent = - 'Der eingegebene Nutzername ist bereits vergeben.'; - - let sendButton = document.createElement('button'); - sendButton.className = 'btn'; - sendButton.textContent = 'Login'; - sendButton.id = 'login-button'; - - passBox.appendChild(passwordLabel); - passBox.appendChild(passwordInput); - passBox.appendChild(passwordInvalid); - nameBox.appendChild(nameLabel); - nameBox.appendChild(nameInput); - nameBox.appendChild(nameInvalid); - sendBox.appendChild(sendButton); - - this.body.appendChild(passBox); - this.body.appendChild(nameBox); - this.body.appendChild(sendBox); - - this.nameInput = nameInput; - this.passwordInput = passwordInput; - this.loginButton = sendButton; - - this.passwordInvalid = passwordInvalid; - this.nameInvalid = nameInvalid; - - this.registerLoginBtnEvent(); - } - - /** - * Method that gets called, if login fails - * @param {number} result Error Code - */ - loginFailed(result) { - if (result == 1) { - this.invalid('Name'); - this.loginButton.addEventListener('click', this.event); - } else if (result == 2) { - this.invalid('Pass'); - this.loginButton.addEventListener('click', this.event); - } else { - this.iface.callMethod('notifications', 'show', 'failed', - 'Ein unbekannter Fehler ist aufgetreten'); - this.close(); - } - } - - /** - * Registers event to send login, on button press - */ - registerLoginBtnEvent() { - this.event = () => { - this.invalid(); // Remove 'invalid' messages - this.loginButton.removeEventListener('click', this.event); - this.userName = this.nameInput.value; - this.passwordInput.value.getHash() - .then((result) => { - this.iface.callMethod('login', 'sendLogin', this.serverName, - result, this.userName); - }); - }; - this.loginButton.addEventListener('click', this.event); - } - - /** - * Displays text under invalid password / username - * @param {string} inv Which field to display under (Pass / Name) - * Blank inv will hide both - */ - invalid(inv) { - this.body.classList.remove('frst-warning'); - this.body.classList.remove('scnd-warning'); - - this.passwordInvalid.classList.add('hidden'); - this.nameInvalid.classList.add('hidden'); - - this.passwordInput.style.borderColor = 'none'; - this.nameInput.style.borderColor = 'none'; - - if (inv == 'Pass') { - this.body.classList.add('frst-warning'); - this.passwordInvalid.classList.remove('hidden'); - this.passwordInput.style.borderColor = '#ef5350'; - } else if (inv == 'Name') { - this.body.classList.add('scnd-warning'); - this.nameInvalid.classList.remove('hidden'); - this.nameInput.style.borderColor = '#ef5350'; - } - } -} diff --git a/WebInterface/NodeJSServer/src/js/modules/ui/components/modal/modal.js b/WebInterface/NodeJSServer/src/js/modules/ui/components/modal/modal.js deleted file mode 100644 index c4c5119..0000000 --- a/WebInterface/NodeJSServer/src/js/modules/ui/components/modal/modal.js +++ /dev/null @@ -1,66 +0,0 @@ -/** - * Parent class to create Modals on the screen - * Contains no content, as that is implemented by child classes - */ -export default class Modal { - /** - * Creates a new modal with a title and empty content - * @param {string} titleString Title to show at the top of the modal - */ - constructor(titleString) { - let modalBackground = document.createElement('div'); - let modal = document.createElement('div'); - let title = document.createElement('h1'); - let body = document.createElement('div'); - - modalBackground.className = 'modal-container'; - modal.className = 'modal'; - title.className = 'modal-title'; - body.className = 'modal-body'; - title.textContent = titleString; - - modal.appendChild(title); - modal.appendChild(body); - modalBackground.appendChild(modal); - document.body.appendChild(modalBackground); - - this.bg = modalBackground; - this.modal = modal; - this.title = title; - this.body = body; - - this.registerEvents(); - } - - /** - * Register event to close if clicked outside of modal - * Clicking on the modal itself should not close it though - */ - registerEvents() { - this.modal.addEventListener('click', (e) => { - e.stopPropagation(); - }); - - this.bg.addEventListener('click', () => { - this.close(); - }); - } - - /** - * Fades modal out and removes it from the flow of the document - */ - close() { - this.bg.classList.add('hidden'); - this.bg.addEventListener('transitionend', () => { - document.body.removeChild(this.bg); - }); - } - - /** - * Puts text in the body - * @param {string} text Text to put into the body - */ - setBodyText(text) { - this.body.textContent = text; - } -} |