From 66ffaf22fa0451d0f07652233d4b9d3ae933a68e Mon Sep 17 00:00:00 2001 From: TrueKuehli Date: Sun, 30 Sep 2018 21:48:00 +0200 Subject: Added functionality to login modal --- WebInterface/NodeJSServer/src/index.js | 3 +- WebInterface/NodeJSServer/src/modules/hash.js | 10 ++++++- .../NodeJSServer/src/modules/server-client.js | 4 +++ .../NodeJSServer/src/modules/ui/login-modal.js | 33 ++++++++++++++++++++-- WebInterface/NodeJSServer/src/modules/ui/modal.js | 12 +++++--- .../src/style/partials/modal/_base.scss | 2 +- .../src/style/partials/modal/_login.scss | 6 +++- 7 files changed, 59 insertions(+), 11 deletions(-) (limited to 'WebInterface/NodeJSServer/src') 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; + } } } } -- cgit v1.2.3-54-g00ecf