2 files changed, 205 insertions, 0 deletions
diff --git a/WebInterface/src/js/modules/ui/components/modal/login-modal.js b/WebInterface/src/js/modules/ui/components/modal/login-modal.js
new file mode 100644
index 0000000..941fd84
--- /dev/null
+++ b/WebInterface/src/js/modules/ui/components/modal/login-modal.js
@@ -0,0 +1,139 @@
+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/src/js/modules/ui/components/modal/modal.js b/WebInterface/src/js/modules/ui/components/modal/modal.js
new file mode 100644
index 0000000..c4c5119
--- /dev/null
+++ b/WebInterface/src/js/modules/ui/components/modal/modal.js
@@ -0,0 +1,66 @@
+/**
+ * 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;
+  }
+}