1 files changed, 101 insertions, 9 deletions

diff --git a/WebInterface/NodeJSServer/src/modules/ui/login-modal.js b/WebInterface/NodeJSServer/src/modules/ui/login-modal.js
index 4c7b872..0bfd70d 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,92 @@ export default class LoginModal extends Modal {
    * Registers event to send login, on button press
    */
   registerLoginBtn() {
-    let eventListener = () => {
+    let eventListener;
+    let loginCallBack = (result, connection) => {
+      console.log(result);
+      if (result == 0) {
+        this.redirectToPlay(connection);
+        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.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,
+                this.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 {HubConnection} connection Connection to the server
+   */
+  redirectToPlay(connection) {
+    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(/<script src=".*"><\/script>/, '');
+        console.log(htmlString);
+        htmlString = htmlString.replace(
+            /<remove_if_redirected>((.)|\n)*?<\/remove_if_redirected>/g, '');
+        document.open();
+        document.write(htmlString);
+        document.close();
+
+        for (let ui of this.pageUI) {
+          ui.refresh();
+        }
+
+        import(/* webpackChunkName: "/playModule" */ '../playModule')
+            .then(({default: GameClient}) => {
+              let gameClient = new GameClient(this.userName, connection);
+              gameClient.registerChat('chat');
+            });
+      });
+    });
+  }
 }