Added basic layout for login modal

Shows form for inputting password and name.

6 files changed, 79 insertions, 2 deletions

diff --git a/WebInterface/NodeJSServer/src/index.js b/WebInterface/NodeJSServer/src/index.js
index 8e615f2..0377a75 100644
--- a/WebInterface/NodeJSServer/src/index.js
+++ b/WebInterface/NodeJSServer/src/index.js
@@ -1,7 +1,8 @@
 import Backdrop from './modules/ui/backdrop.js';
 import BannerController from './modules/ui/notification-banner.js';
 import ServerClient from './modules/server-client.js'
-import Modal from './modules/ui/modal.js'; // TODO: DEBUGGING
+import LoginModal from './modules/ui/login-modal.js'; // TODO: JUST FOR DEBUGGING
+import './modules/hash.js';
 
 let backdrop = new Backdrop('menu', 'front-layer', 'show-menu');
 backdrop.register();
@@ -14,4 +15,4 @@ let client = new ServerClient('http://89.183.8.51:5000/chatHub', 'server-list',
 document.getElementById('refresh-button')
     .addEventListener('click', client.loadServers.bind(client));
 
-new Modal('Test Titel');
+// new LoginModal('The Crew');
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', () => {
diff --git a/WebInterface/NodeJSServer/src/style/index.scss b/WebInterface/NodeJSServer/src/style/index.scss
index 285a47b..04c896a 100644
--- a/WebInterface/NodeJSServer/src/style/index.scss
+++ b/WebInterface/NodeJSServer/src/style/index.scss
@@ -7,3 +7,4 @@
 @import 'partials/front-layer/server-listing';
 @import 'partials/front-layer/copyright';
 @import 'partials/modal/base';
+@import 'partials/modal/login';
diff --git a/WebInterface/NodeJSServer/src/style/partials/modal/_base.scss b/WebInterface/NodeJSServer/src/style/partials/modal/_base.scss
index 1e7742e..1665003 100644
--- a/WebInterface/NodeJSServer/src/style/partials/modal/_base.scss
+++ b/WebInterface/NodeJSServer/src/style/partials/modal/_base.scss
@@ -24,7 +24,9 @@
   }
 
   .modal-title {
+    max-width: 85vw;
     margin: 1rem;
+    text-align: center;
   }
 
   .modal-body {
diff --git a/WebInterface/NodeJSServer/src/style/partials/modal/_login.scss b/WebInterface/NodeJSServer/src/style/partials/modal/_login.scss
new file mode 100644
index 0000000..7aa1bf8
--- /dev/null
+++ b/WebInterface/NodeJSServer/src/style/partials/modal/_login.scss
@@ -0,0 +1,30 @@
+.modal {
+  .modal-title {
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .modal-body {
+    display: grid;
+    grid-template-columns: 10em 1fr;
+    grid-template-rows: 1fr 1fr;
+    grid-row-gap: 0.5rem;
+
+    div {
+      display: contents;
+      font-size: 1.25rem;
+
+      label {
+        flex-basis: 30%;
+        margin-right: 2rem;
+
+        grid-column: 1 2;
+      }
+
+      input {
+        flex-basis: calc(70% - 2rem);
+        grid-column: 2 3;
+      }
+    }
+  }
+}