diff options
Diffstat (limited to 'WebInterface/NodeJSServer/src/modules')
6 files changed, 111 insertions, 16 deletions
diff --git a/WebInterface/NodeJSServer/src/modules/hash.js b/WebInterface/NodeJSServer/src/modules/hash.js new file mode 100644 index 0000000..826c8ee --- /dev/null +++ b/WebInterface/NodeJSServer/src/modules/hash.js @@ -0,0 +1,17 @@ +String.prototype.getHash = async function() { + let data = new ArrayBuffer(this.length * 2); + let bufferView = new Uint16Array(data); + for (let i = 0; i < this.length; i++) { + bufferView[i] = this.charCodeAt(i); + } + + 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 e550bb7..0a257ba 100644 --- a/WebInterface/NodeJSServer/src/modules/server-client.js +++ b/WebInterface/NodeJSServer/src/modules/server-client.js @@ -1,6 +1,5 @@ import * as signalR from '@aspnet/signalr'; import ServerListing from './ui/server-listing.js'; -import ServerCreator from './ui/server-creator.js'; export default class ServerClient { constructor(url, serverListingId, debug = false) { @@ -21,6 +20,8 @@ export default class ServerClient { this.refreshing = false; this.serverListing = new ServerListing(serverListingId); + + this.messageHandling(); //TODO: REMOVE, JUST FOR DEBUGGING } loadServers() { @@ -43,7 +44,11 @@ export default class ServerClient { } createServer(){ + // TODO: Create + } + sendLogin(group, password, username){ + this.connection.invoke('Login', group, username, password); } messageHandling(){ @@ -52,6 +57,7 @@ export default class ServerClient { .replace(/</g, "<") .replace(/>/g, ">"); let encodedMsg = user + " sagt: " + msg; + console.log(encodedMsg); //TODO: REMOVE, JUST FOR DEBUGGING }); } } 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..cb1f2ac --- /dev/null +++ b/WebInterface/NodeJSServer/src/modules/ui/login-modal.js @@ -0,0 +1,67 @@ +import Modal from './modal.js'; +import '../hash.js'; + +export default class LoginModal extends Modal { + 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'); + 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'; + + 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 e1aa8a2..55e38bd 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,11 +26,19 @@ 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', () => { - 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/modules/ui/server-creator.js b/WebInterface/NodeJSServer/src/modules/ui/server-creator.js deleted file mode 100644 index 4203dfe..0000000 --- a/WebInterface/NodeJSServer/src/modules/ui/server-creator.js +++ /dev/null @@ -1,7 +0,0 @@ -import Modal from './modal.js'; - -export default class ServerCreator extends Modal { - constructor() { - super('Neues Spiel') - } -} diff --git a/WebInterface/NodeJSServer/src/modules/ui/server-listing.js b/WebInterface/NodeJSServer/src/modules/ui/server-listing.js index be66573..2c501fd 100644 --- a/WebInterface/NodeJSServer/src/modules/ui/server-listing.js +++ b/WebInterface/NodeJSServer/src/modules/ui/server-listing.js @@ -15,12 +15,14 @@ export default class ServerListing { let serverDiv = document.createElement('div'); let nameSpan = document.createElement('span'); + let rightAlignDiv = document.createElement('div'); let onlineDot = document.createElement('div'); let playerCountSpan = document.createElement('span'); let playerCountStaticSpan = document.createElement('span'); let joinButton = document.createElement('button'); serverDiv.className = 'server'; nameSpan.className = 'server-name'; + rightAlignDiv.className = 'right-aligned-items'; onlineDot.className = 'player-count-dot'; playerCountSpan.className = 'player-count'; playerCountStaticSpan.className = 'player-count-static'; @@ -31,11 +33,12 @@ export default class ServerListing { playerCountStaticSpan.textContent = 'Spieler online'; joinButton.textContent = 'Beitreten'; + rightAlignDiv.appendChild(onlineDot); + rightAlignDiv.appendChild(playerCountSpan); + rightAlignDiv.appendChild(playerCountStaticSpan); + rightAlignDiv.appendChild(joinButton); serverDiv.appendChild(nameSpan); - serverDiv.appendChild(onlineDot); - serverDiv.appendChild(playerCountSpan); - serverDiv.appendChild(playerCountStaticSpan); - serverDiv.appendChild(joinButton); + serverDiv.appendChild(rightAlignDiv) this.serverListing.appendChild(serverDiv); } } |