Initial commit

frontend/scripts/ButtonManager.js

@@ -0,0 +1,27 @@
+class ButtonManager {
+    constructor() {
+        this.buttons = [
+            { id: "homeBtn", route: "/" },
+            { id: "loginBtn", route: "/login" },
+            { id: "registerBtn", route: "/register" },
+            { id: "dashboardBtn", route: "/dashboard" },
+            { id: "lobbyBtn", route: "/dashboard/lobby" },
+            { id: "accountBtn", route: "/dashboard/account" },
+            { id: "logoutBtn", route: "/api/account/logout" },
+            { id: "tutorialBtn", route: "https://www.youtube.com/watch?v=1fkV5rB13jQ" }
+        ];
+
+        this.addEventListener();
+    }
+
+    addEventListener() {
+        this.buttons.forEach(button => {
+            const element = document.getElementById(button.id);
+            if (!element) return;
+
+            element.addEventListener("click", () => { window.location.href = button.route });
+        });
+    }
+}
+
+new ButtonManager();

frontend/scripts/ErrorHandler.js

@@ -0,0 +1,54 @@
+class ErrorHandler {
+    constructor() {
+        this.errorH2 = document.getElementById("errorMsg");
+        
+        this.errorList = [
+            { route: "/login",
+                errors: [
+                    { code: 1, msg: "Du musst ein Username und ein Passwort eingeben!", errorHighligher: ["username", "password"] }, 
+                    { code: 2, msg: "Username oder Passwort falsch!", errorHighligher: ["username", "password"] }
+                ] 
+            },
+            { route: "/register",
+                errors: [
+                    { code: 1, msg: "Du musst zumindest Username und  Passwort angeben!", errorHighligher: ["username", "password"] }, 
+                    { code: 2, msg: "Username ist schon vergeben!", errorHighligher: ["username"] }
+                ] 
+            },
+            { route: "/dashboard/account",
+                errors: [
+                    { code: 1, msg: "Dieser Username ist schon vergeben!", errorHighligher: ["username"] }, 
+                ] 
+            }
+        ];
+
+        this.showPossibleError();
+    }
+
+    showPossibleError() {
+        const route = this.getCurrentRoute();
+        const error = this.checkError();
+        
+        if(!error) return;
+
+        const errorJSON= this.errorList.find(x => x.route === route).errors.find(x => x.code === error);
+
+        this.errorH2.innerText = errorJSON.msg;
+        this.errorH2.style.display = "block";
+
+        errorJSON.errorHighligher.forEach(element => {
+            document.getElementsByName(element)[0].classList.add("important");
+        });
+    }
+
+    getCurrentRoute() {
+        return window.location.pathname.slice(0, -1);
+    }
+
+    checkError() {
+        const urlParams = new URLSearchParams(window.location.search);
+        return parseInt(urlParams.get("error"));
+    }
+}
+
+new ErrorHandler();