Added basic layout for login modal

Shows form for inputting password and name.

2 files changed, 43 insertions, 0 deletions

diff --git a/WebInterface/NodeJSServer/src/modules/ui/login-modal.js b/WebInterface/NodeJSServer/src/modules/ui/login-modal.js
new file mode 100644
index 0000000..eeb98cb
--- /dev/null
+++ b/WebInterface/NodeJSServer/src/modules/ui/login-modal.js
@@ -0,0 +1,38 @@
+import Modal from './modal.js';
+
+export default class LoginModal extends Modal {
+  constructor(serverName) {
+    super('Login: ' + serverName);
+
+    let passBox = document.createElement('div');
+    let nameBox = document.createElement('div');
+
+    let passwordLabel = document.createElement('label');
+    let passwordInput = document.createElement('input');
+    passwordLabel.setAttribute('for', 'password-input');
+    passwordLabel.textContent = 'Passwort:';
+    passwordLabel.title = 'Das Passwort des Spiels'
+    passwordInput.id = 'password-input';
+    passwordInput.type = 'password';
+    passwordInput.placeholder = 'Passwort';
+
+    let nameLabel = document.createElement('label');
+    let nameInput = document.createElement('input');
+    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';
+
+
+    passBox.appendChild(passwordLabel);
+    passBox.appendChild(passwordInput);
+    nameBox.appendChild(nameLabel);
+    nameBox.appendChild(nameInput);
+
+    this.body.appendChild(passBox);
+    this.body.appendChild(nameBox);
+  }
+}
diff --git a/WebInterface/NodeJSServer/src/modules/ui/modal.js b/WebInterface/NodeJSServer/src/modules/ui/modal.js
index e1aa8a2..31e6397 100644
--- a/WebInterface/NodeJSServer/src/modules/ui/modal.js
+++ b/WebInterface/NodeJSServer/src/modules/ui/modal.js
@@ -13,6 +13,7 @@ export default class Modal {
     title.textContent = titleString;
 
     modal.appendChild(title);
+    modal.appendChild(body);
     modalBackground.appendChild(modal);
     document.body.appendChild(modalBackground);
 
@@ -25,6 +26,10 @@ export default class Modal {
   }
 
   registerEvents() {
+    this.modal.addEventListener('click', (e) => {
+      e.stopPropagation();
+    });
+
     this.bg.addEventListener('click', () => {
       this.bg.classList.add('hidden');
       this.bg.addEventListener('transitionend', () => {