added division by tabs, validating nickname before registration, showing server responses using jquery

public/css/index.css

@@ -55,26 +55,48 @@ canvas {
 }
 
 .content-container {
-    /* margin-left: 15%; */
-    /* width: 50%; */
     width: 65%;
     margin-left: 17.5%;
     margin-right: 17.5%;
-    /* margin-right: 33%; */
-    /* background-color: #1b4c4ccc; */
     background-color: #b3b7b7cc;
     padding-left: 3%;
     padding-right: 3%;
     margin-top: 0%;
     border:solid 2px gray;
-    /* box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); */
     box-shadow: 0px 20px 150px rgba(0, 0, 0, 1);
 }
 
-#exitButton {
+.action-tabs {
+    margin-left: 17.5%;
+    margin-right: 17.5%;
+    padding-left: 3%;
+    padding-right: 3%;
+    width: 65%;
+}
+
+.actionTabButton {
+    font-size: 20pt;
+    background-color: #b3b7b7cc;
+    margin-right: 20px;
+}
+
+.logoutTabButton {
+    float: right;
+}
+
+.content {
+    margin-left: auto;
     margin-right: auto;
-    margin-left: 75%;
-    margin-bottom: 5%;
-    padding: 2%;
-    font-size: 20;
-}
+    width: 95%;
+}
+
+.updateForm {
+    margin-left: auto;
+    margin-right: auto;
+    width: 50%;
+}
+
+.chat-container {
+    overflow: scroll;
+    border: black solid
+}

public/js/changepassword.js

@@ -0,0 +1,19 @@
+$(document).ready(() => {
+    $("#passwordChangeForm").submit(() => {
+        $.ajax({
+            type: "POST",
+            url: "/api/changePassword",
+            contentType: 'application/json',
+            data: JSON.stringify({
+                oldPassword: $("#oldPassword").val(),
+                newPassword: $("#newPassword").val()
+            }),
+            success: () => {
+                alert("Пароль изменён")
+            },
+            error: (xhr) => {
+                alert(xhr.responseText);
+            }
+        });
+    });
+});

public/js/index.js

@@ -0,0 +1,3 @@
+const goToPage = (page) => {
+    window.location.href = `${page}`
+}

public/js/register.js

@@ -1,5 +1,10 @@
 $(document).ready(() => {
     $("#registerForm").submit(() => {
+        if ($("#password").val() != $("#passwordConfirm").val()) {
+            alert("Password dont match!")
+            return;
+        }
+
         $.ajax({
             type: "POST",
             url: "/api/register",
@@ -9,10 +14,10 @@ $(document).ready(() => {
                 inviteToken: $("#inviteToken").val()
             }),
             contentType: 'application/json',
-            success: function() {
+            success: () => {
                 window.location.href = "/index";
             },
-            error: function(xhr) {
+            error: (xhr) => {
                 alert (xhr.responseText);
             }
         })

public/js/skin3d.js

@@ -38,34 +38,9 @@ const uploadCape = async (event) => {
        window.location = window.location.href+'?eraseCache=true';
 }
 
-const changePassword = async (event) => {
-	event.preventDefault();
-
-	const oldPassword = document.getElementById("oldPassword").value
-	const newPassword = document.getElementById("newPassword").value
-
-	if (oldPassword == newPassword) {
-		alert("You cannod change your password to the same!")
-		return;
-	}
-
-	await fetch(`/api/changePassword`, {
-		method: "POST",
-		headers: {
-			"Content-Type": "application/json"
-		},
-		body: JSON.stringify({
-			oldPassword,
-			newPassword
-		})
-	});
-	alert("Password has been changed!");
-}
-
 
 window.onload = async function() {
 	document.getElementById("skinForm").addEventListener("submit", uploadSkin)
-	document.getElementById("passwordChangeForm").addEventListener("submit", changePassword);
 	if (document.getElementById("cape")) {
     	document.getElementById("cape").addEventListener("click", () => { set_cape_type("cape") }, false);
     	document.getElementById("cape").checked = true;