summaryrefslogtreecommitdiff
path: root/WebInterface/NodeJSServer/src/js/modules/ui/components/modal
diff options
context:
space:
mode:
authorDennis Kobert <d-kobert@web.de>2019-06-11 23:53:30 +0200
committerDennis Kobert <d-kobert@web.de>2019-06-11 23:53:30 +0200
commit3a3d0fc3d4733f8908e23a03f860d76340479ec4 (patch)
treecf4b82f61d01d2a24836e9820d73972436847982 /WebInterface/NodeJSServer/src/js/modules/ui/components/modal
parentc28c9fafa2c74b101f7ce777aac722dcdeecefc6 (diff)
Reorganize Project structure
Diffstat (limited to 'WebInterface/NodeJSServer/src/js/modules/ui/components/modal')
-rw-r--r--WebInterface/NodeJSServer/src/js/modules/ui/components/modal/login-modal.js139
-rw-r--r--WebInterface/NodeJSServer/src/js/modules/ui/components/modal/modal.js66
2 files changed, 0 insertions, 205 deletions
diff --git a/WebInterface/NodeJSServer/src/js/modules/ui/components/modal/login-modal.js b/WebInterface/NodeJSServer/src/js/modules/ui/components/modal/login-modal.js
deleted file mode 100644
index 941fd84..0000000
--- a/WebInterface/NodeJSServer/src/js/modules/ui/components/modal/login-modal.js
+++ /dev/null
@@ -1,139 +0,0 @@
-import Modal from './modal';
-import '../../../networking/hash';
-
-/**
- * Class to implement a login modal from the parent modal class
- */
-export default class LoginModal extends Modal {
- /**
- * Creates necessary elements for login modal
- * @param {Interface} iface Interface for Interactions with other Objects
- * @param {string} serverName Name of the server to connect to
- */
- constructor(iface, serverName) {
- super(serverName);
- this.serverName = serverName;
-
- iface.addObject(this, 'modal', ['loginFailed', 'close']);
- this.iface = iface;
-
- 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');
- let passwordInvalid = document.createElement('span');
- passwordLabel.setAttribute('for', 'password-input');
- passwordLabel.textContent = 'Passwort:';
- passwordLabel.title = 'Das Passwort des Spiels';
- passwordInput.id = 'password-input';
- passwordInput.type = 'password';
- passwordInput.placeholder = 'Passwort';
- passwordInput.title = 'Das Passwort des Spiels';
- passwordInvalid.className = 'invalid hidden';
- passwordInvalid.textContent = 'Das eingegebene Passwort ist falsch.';
-
- let nameLabel = document.createElement('label');
- let nameInput = document.createElement('input');
- let nameInvalid = document.createElement('span');
- 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';
- nameInput.title = 'Dein Anzeigename';
- nameInvalid.className = 'invalid hidden';
- nameInvalid.textContent =
- 'Der eingegebene Nutzername ist bereits vergeben.';
-
- let sendButton = document.createElement('button');
- sendButton.className = 'btn';
- sendButton.textContent = 'Login';
- sendButton.id = 'login-button';
-
- passBox.appendChild(passwordLabel);
- passBox.appendChild(passwordInput);
- passBox.appendChild(passwordInvalid);
- nameBox.appendChild(nameLabel);
- nameBox.appendChild(nameInput);
- nameBox.appendChild(nameInvalid);
- 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.passwordInvalid = passwordInvalid;
- this.nameInvalid = nameInvalid;
-
- this.registerLoginBtnEvent();
- }
-
- /**
- * Method that gets called, if login fails
- * @param {number} result Error Code
- */
- loginFailed(result) {
- if (result == 1) {
- this.invalid('Name');
- this.loginButton.addEventListener('click', this.event);
- } else if (result == 2) {
- this.invalid('Pass');
- this.loginButton.addEventListener('click', this.event);
- } else {
- this.iface.callMethod('notifications', 'show', 'failed',
- 'Ein unbekannter Fehler ist aufgetreten');
- this.close();
- }
- }
-
- /**
- * Registers event to send login, on button press
- */
- registerLoginBtnEvent() {
- this.event = () => {
- this.invalid(); // Remove 'invalid' messages
- this.loginButton.removeEventListener('click', this.event);
- this.userName = this.nameInput.value;
- this.passwordInput.value.getHash()
- .then((result) => {
- this.iface.callMethod('login', 'sendLogin', this.serverName,
- result, this.userName);
- });
- };
- this.loginButton.addEventListener('click', this.event);
- }
-
- /**
- * Displays text under invalid password / username
- * @param {string} inv Which field to display under (Pass / Name)
- * Blank inv will hide both
- */
- invalid(inv) {
- this.body.classList.remove('frst-warning');
- this.body.classList.remove('scnd-warning');
-
- this.passwordInvalid.classList.add('hidden');
- this.nameInvalid.classList.add('hidden');
-
- this.passwordInput.style.borderColor = 'none';
- this.nameInput.style.borderColor = 'none';
-
- if (inv == 'Pass') {
- this.body.classList.add('frst-warning');
- this.passwordInvalid.classList.remove('hidden');
- this.passwordInput.style.borderColor = '#ef5350';
- } else if (inv == 'Name') {
- this.body.classList.add('scnd-warning');
- this.nameInvalid.classList.remove('hidden');
- this.nameInput.style.borderColor = '#ef5350';
- }
- }
-}
diff --git a/WebInterface/NodeJSServer/src/js/modules/ui/components/modal/modal.js b/WebInterface/NodeJSServer/src/js/modules/ui/components/modal/modal.js
deleted file mode 100644
index c4c5119..0000000
--- a/WebInterface/NodeJSServer/src/js/modules/ui/components/modal/modal.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * Parent class to create Modals on the screen
- * Contains no content, as that is implemented by child classes
- */
-export default class Modal {
- /**
- * Creates a new modal with a title and empty content
- * @param {string} titleString Title to show at the top of the modal
- */
- constructor(titleString) {
- let modalBackground = document.createElement('div');
- let modal = document.createElement('div');
- let title = document.createElement('h1');
- let body = document.createElement('div');
-
- modalBackground.className = 'modal-container';
- modal.className = 'modal';
- title.className = 'modal-title';
- body.className = 'modal-body';
- title.textContent = titleString;
-
- modal.appendChild(title);
- modal.appendChild(body);
- modalBackground.appendChild(modal);
- document.body.appendChild(modalBackground);
-
- this.bg = modalBackground;
- this.modal = modal;
- this.title = title;
- this.body = body;
-
- this.registerEvents();
- }
-
- /**
- * Register event to close if clicked outside of modal
- * Clicking on the modal itself should not close it though
- */
- registerEvents() {
- this.modal.addEventListener('click', (e) => {
- e.stopPropagation();
- });
-
- this.bg.addEventListener('click', () => {
- this.close();
- });
- }
-
- /**
- * Fades modal out and removes it from the flow of the document
- */
- close() {
- this.bg.classList.add('hidden');
- this.bg.addEventListener('transitionend', () => {
- document.body.removeChild(this.bg);
- });
- }
-
- /**
- * Puts text in the body
- * @param {string} text Text to put into the body
- */
- setBodyText(text) {
- this.body.textContent = text;
- }
-}