Added functionality to login modal

7 files changed, 59 insertions, 11 deletions

diff --git a/WebInterface/NodeJSServer/src/index.js b/WebInterface/NodeJSServer/src/index.js
index 0377a75..9a06504 100644
--- a/WebInterface/NodeJSServer/src/index.js
+++ b/WebInterface/NodeJSServer/src/index.js
@@ -2,7 +2,6 @@ import Backdrop from './modules/ui/backdrop.js';
 import BannerController from './modules/ui/notification-banner.js';
 import ServerClient from './modules/server-client.js'
 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();
@@ -15,4 +14,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 LoginModal('The Crew');
+new LoginModal('The Crew', client);
diff --git a/WebInterface/NodeJSServer/src/modules/hash.js b/WebInterface/NodeJSServer/src/modules/hash.js
index 29be0af..826c8ee 100644
--- a/WebInterface/NodeJSServer/src/modules/hash.js
+++ b/WebInterface/NodeJSServer/src/modules/hash.js
@@ -5,5 +5,13 @@ String.prototype.getHash = async function() {
     bufferView[i] = this.charCodeAt(i);
   }
 
-  return await crypto.subtle.digest('SHA-256', bufferView);
+  let encrypted = await crypto.subtle.digest('SHA-256', bufferView);
+  let byteArray = new Uint8Array(encrypted);
+  let base64String = '';
+
+  for (let byte of byteArray) {
+    base64String += String.fromCharCode(byte);
+  }
+
+  return btoa(base64String);
 }
diff --git a/WebInterface/NodeJSServer/src/modules/server-client.js b/WebInterface/NodeJSServer/src/modules/server-client.js
index 86ea336..96fbaba 100644
--- a/WebInterface/NodeJSServer/src/modules/server-client.js
+++ b/WebInterface/NodeJSServer/src/modules/server-client.js
@@ -45,6 +45,10 @@ export default class ServerClient {
     // TODO: Create
   }
 
+  sendLogin(group, password, username){
+    this.connection.invoke('Login', group, username, password);
+  }
+
   messageHandling(){
     this.connection.on('ReceiveMessage', (user, message) => {
       let msg = message.replace(/&/g, "&")
diff --git a/WebInterface/NodeJSServer/src/modules/ui/login-modal.js b/WebInterface/NodeJSServer/src/modules/ui/login-modal.js
index eeb98cb..cb1f2ac 100644
--- a/WebInterface/NodeJSServer/src/modules/ui/login-modal.js
+++ b/WebInterface/NodeJSServer/src/modules/ui/login-modal.js
@@ -1,11 +1,15 @@
 import Modal from './modal.js';
+import '../hash.js';
 
 export default class LoginModal extends Modal {
-  constructor(serverName) {
-    super('Login: ' + serverName);
+  constructor(serverName, serverClient) {
+    super(serverName);
+    this.serverName = serverName;
+    this.serverClient = serverClient;
 
     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');
@@ -26,13 +30,38 @@ export default class LoginModal extends Modal {
     nameInput.autocomplete = 'on';
     nameInput.placeholder = 'Name';
 
+    let sendButton = document.createElement('button');
+    sendButton.className = 'btn';
+    sendButton.textContent = 'Login';
+    sendButton.id = 'login-button';
+
 
     passBox.appendChild(passwordLabel);
     passBox.appendChild(passwordInput);
     nameBox.appendChild(nameLabel);
     nameBox.appendChild(nameInput);
+    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.registerLoginBtn();
+  }
+
+  registerLoginBtn() {
+    this.loginButton.addEventListener('click', () => {
+      console.log('button pressed')
+      let userName = this.nameInput.value;
+      this.passwordInput.value.getHash()
+          .then((result) => {
+            this.serverClient.sendLogin(this.serverName, result, userName);
+            this.close();
+          });
+    });
   }
 }
diff --git a/WebInterface/NodeJSServer/src/modules/ui/modal.js b/WebInterface/NodeJSServer/src/modules/ui/modal.js
index 31e6397..55e38bd 100644
--- a/WebInterface/NodeJSServer/src/modules/ui/modal.js
+++ b/WebInterface/NodeJSServer/src/modules/ui/modal.js
@@ -31,10 +31,14 @@ export default class Modal {
     });
 
     this.bg.addEventListener('click', () => {
-      this.bg.classList.add('hidden');
-      this.bg.addEventListener('transitionend', () => {
-        document.body.removeChild(this.bg);
-      });
+      this.close();
+    });
+  }
+
+  close() {
+    this.bg.classList.add('hidden');
+    this.bg.addEventListener('transitionend', () => {
+      document.body.removeChild(this.bg);
     });
   }
 
diff --git a/WebInterface/NodeJSServer/src/style/partials/modal/_base.scss b/WebInterface/NodeJSServer/src/style/partials/modal/_base.scss
index 1665003..006c241 100644
--- a/WebInterface/NodeJSServer/src/style/partials/modal/_base.scss
+++ b/WebInterface/NodeJSServer/src/style/partials/modal/_base.scss
@@ -15,7 +15,7 @@
   }
 
   .modal {
-    background-color: $secondary;
+    background-color: $primary;
     margin: auto;
     padding: 1rem;
     border-style: none;
diff --git a/WebInterface/NodeJSServer/src/style/partials/modal/_login.scss b/WebInterface/NodeJSServer/src/style/partials/modal/_login.scss
index 7aa1bf8..eed978f 100644
--- a/WebInterface/NodeJSServer/src/style/partials/modal/_login.scss
+++ b/WebInterface/NodeJSServer/src/style/partials/modal/_login.scss
@@ -7,7 +7,7 @@
   .modal-body {
     display: grid;
     grid-template-columns: 10em 1fr;
-    grid-template-rows: 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
     grid-row-gap: 0.5rem;
 
     div {
@@ -25,6 +25,10 @@
         flex-basis: calc(70% - 2rem);
         grid-column: 2 3;
       }
+
+      button {
+        grid-column: 1 / 3;
+      }
     }
   }
 }