From 6f162dcf90a6aa671eb351dc25cb01e2d9cbd3cb Mon Sep 17 00:00:00 2001 From: TrueKuehli Date: Mon, 1 Oct 2018 18:10:37 +0200 Subject: A lot of changes I shoud have written a better commit, I know! --- .../NodeJSServer/src/modules/ui/login-modal.js | 103 +++++++++++++++++++-- 1 file changed, 95 insertions(+), 8 deletions(-) (limited to 'WebInterface/NodeJSServer/src/modules/ui/login-modal.js') diff --git a/WebInterface/NodeJSServer/src/modules/ui/login-modal.js b/WebInterface/NodeJSServer/src/modules/ui/login-modal.js index 4c7b872..d2a88c4 100644 --- a/WebInterface/NodeJSServer/src/modules/ui/login-modal.js +++ b/WebInterface/NodeJSServer/src/modules/ui/login-modal.js @@ -11,11 +11,16 @@ export default class LoginModal extends Modal { * in title * @param {ServerClient} serverClient Server client object used to send the * login + * @param {BannerController} notificationManager Object controlling the main + * notification banners + * @param {array} ui UI elements to call refresh method on after login */ - constructor(serverName, serverClient) { + constructor(serverName, serverClient, notificationManager, ui) { super(serverName); this.serverName = serverName; this.serverClient = serverClient; + this.notificationManager = notificationManager; + this.pageUI = ui; let passBox = document.createElement('div'); let nameBox = document.createElement('div'); @@ -23,15 +28,20 @@ export default class LoginModal extends Modal { 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'; @@ -39,17 +49,22 @@ export default class LoginModal extends Modal { 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); @@ -60,6 +75,9 @@ export default class LoginModal extends Modal { this.passwordInput = passwordInput; this.loginButton = sendButton; + this.passwordInvalid = passwordInvalid; + this.nameInvalid = nameInvalid; + this.registerLoginBtn(); } @@ -67,18 +85,87 @@ export default class LoginModal extends Modal { * Registers event to send login, on button press */ registerLoginBtn() { - let eventListener = () => { + let eventListener; + let loginCallBack = (result, client) => { + console.log(result); + if (result == 0) { + this.redirectToPlay(client); + this.close(); + } else if (result == 1) { + this.invalid('Name'); + this.loginButton.addEventListener('click', eventListener); + } else if (result == 2) { + this.invalid('Pass'); + this.loginButton.addEventListener('click', eventListener); + } else { + this.notificationManager.show('unknownLoginErr', + 'Ein unbekannter Fehler ist aufgetreten'); + this.close(); + } + }; + + eventListener = () => { + this.invalid(); // Remove 'invalid' messages this.loginButton.removeEventListener('click', eventListener); let userName = this.nameInput.value; this.passwordInput.value.getHash() .then((result) => { - this.serverClient.sendLogin(this.serverName, result, userName); - - // TODO: Wait for response, if error keep window intact, - // and reenable event listener - this.close(); + this.serverClient.sendLogin(this.serverName, result, + userName, loginCallBack); }); }; this.loginButton.addEventListener('click', eventListener); } + + /** + * 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'; + } + } + + /** + * Loads play site + * @param {ServerClient} serverClient Main server client + */ + redirectToPlay(serverClient) { + window.history.pushState('object or string', 'Game Page', + 'play#game=' + this.serverName); + fetch('play').then((response) => { + response.text().then((htmlString) => { + htmlString = htmlString.replace(/\.\.\//g, './'); + htmlString = htmlString.replace(/