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-right: auto;
+    margin-left: 17.5%;
-    margin-left: 75%;
+    margin-right: 17.5%;
-    margin-bottom: 5%;
+    padding-left: 3%;
-    padding: 2%;
+    padding-right: 3%;
-    font-size: 20;
+    width: 65%;
+}
+
+.actionTabButton {
+    font-size: 20pt;
+    background-color: #b3b7b7cc;
+    margin-right: 20px;
+}
+
+.logoutTabButton {
+    float: right;
+}
+
+.content {
+    margin-left: auto;
+    margin-right: auto;
+    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;

src/routers/user.js

@@ -26,16 +26,37 @@ UserRouter.get(['/', '/login'], async (req, res) => {
     return res.render("login.pug");
 });
 
-UserRouter.get('/index', auth.authenticate, async (req, res) => {
+UserRouter.get(['/index', '/skin'], auth.authenticate, async (req, res) => {    
-    if (!req.session.jwt || !jwt.verify(req.session.jwt, process.env.SECRET))
+    const username = jwt.decode(req.session.jwt).username;
-        return res.redirect("/login");
 
-    const decoded = jwt.decode(req.session.jwt);
+    return res.render('skin.pug', {
-
+        username: username,
-    return res.render('index.pug', {
+        can_have_cloak: await UserService.canHaveCloak(username)
-        username: decoded.username,
+    });
-        can_have_cloak: await UserService.canHaveCloak(decoded.username)
+});
+
+UserRouter.get('/changepassword', auth.authenticate, async (req, res) => {
+    const username = jwt.decode(req.session.jwt).username;
+
+    return res.render('changepassword.pug', {
+        can_have_cloak: await UserService.canHaveCloak(username)
+    });
+});
+
+UserRouter.get('/chat', auth.authenticate, async (req, res) => {
+    const username = jwt.decode(req.session.jwt).username;
+
+    return res.render('chat.pug', {
+        can_have_cloak: await UserService.canHaveCloak(username)
+    });
+});
+
+UserRouter.get('/worldmap', auth.authenticate, async (req, res) => {
+    const username = jwt.decode(req.session.jwt).username;
+
+    return res.render('worldmap.pug', {
+        can_have_cloak: await UserService.canHaveCloak(username)
+    });
 });
-})
 
 export default UserRouter;

views/changepassword.pug

@@ -0,0 +1,26 @@
+html
+    head
+        meta(name="viewport" content="width=device-width, initial-scale=1.0") 
+        title Личный кабинет | Смена пароля
+        link(href="css/index.css" rel="stylesheet")
+    body
+        script(src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer")
+        script(type="text/javascript" src="js/changepassword.js")
+        
+        iframe(name="hiddenFrame" style="position:absolute; top:-1px; left:-1px; width:1px; height:1px;")
+        include header.pug
+        div(class="content-container")
+            div(class="content")
+                h1 Смена пароля
+                div(class="updateForm")
+                    form(target="hiddenFrame" id="passwordChangeForm")
+                        label(for="oldPassword") Старый пароль
+                        br()
+                        input(type="password", name="oldPassword", id="oldPassword")
+                        br()
+                        label(for="oldPassword") Новый пароль
+                        br()
+                        input(type="password", name="newPassword", id="newPassword")
+                        br()
+                        input(type="submit" value="Сменить")
+    

views/chat.pug

@@ -0,0 +1,16 @@
+html
+    head
+        meta(name="viewport" content="width=device-width, initial-scale=1.0") 
+        title Личный кабинет | Чат
+        link(href="css/index.css" rel="stylesheet")
+    body
+        iframe(name="hiddenFrame" style="position:absolute; top:-1px; left:-1px; width:1px; height:1px;")
+        include header.pug
+
+        div(class="content-container")
+            div(class="content")
+                h1 Чат
+                div(class="chat-container")
+                    p 1
+                    p 2
+                    p 3

views/header.pug

@@ -0,0 +1,11 @@
+script(type="text/javascript" src="js/index.js")
+
+div(class="action-tabs")
+    if (can_have_cloak)
+        button(class="actionTabButton" id="skinsTabButton" onclick="goToPage('/index')") Скин и Плащ
+    else 
+        button(class="actionTabButton" id="skinsTabButton" onclick="goToPage('/index')") Скин
+    button(class="actionTabButton" id="passwordChangeTabButton" onclick="goToPage('/changepassword')") Сменить пароль
+    button(class="actionTabButton" id="chatTabButton" onclick="goToPage('/chat')") Чат
+    button(class="actionTabButton" id="chatTabButton" onclick="goToPage('/worldmap')") Карта мира
+    button(class="actionTabButton logoutTabButton" id="logoutTabButton" onclick="window.location.href='/api/logout'") Выйти

views/skin.pug

@@ -1,16 +1,18 @@
 html
     head
         meta(name="viewport" content="width=device-width, initial-scale=1.0") 
-        title Личный кабинет
+        title Личный кабинет | Скин
         link(href="css/index.css" rel="stylesheet")
     script(type="module" src="js/skinview3d.bundle.js")
     script(type="module" src="js/skin3d.js")
     body
 
         iframe(name="hiddenFrame" style="position:absolute; top:-1px; left:-1px; width:1px; height:1px;")
+        include header.pug
+
         div(class="content-container")
             div(class="content")
-                h1 Личный кабинет
+                h1 Скин
                 canvas(id="skin_container")
                 if can_have_cloak
                     div(class="cape_type")
@@ -28,13 +30,4 @@ html
                     form(target="hiddenFrame" id="capeForm")
                         input(type="file" name="file" id="capeFile")
                         input(type="submit" value="Загрузить")
-                form(target="hiddenFrame" id="passwordChangeForm")
-                    input(type="password", name="oldPassword", id="oldPassword")
-                    label(for="oldPassword") Старый пароль
-                    br()
-                    input(type="password", name="newPassword", id="newPassword")
-                    label(for="oldPassword") Новый пароль
-                    br()
-                    input(type="submit" value="Сменить")
-                button(onclick="window.location.href='/api/logout'" value="Выйти" id="exitButton") Выйти