added division by tabs, validating nickname before registration, showing server responses using jquery
This commit is contained in:
		@@ -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 {
 | 
			
		||||
    margin-right: auto;
 | 
			
		||||
    margin-left: 75%;
 | 
			
		||||
    margin-bottom: 5%;
 | 
			
		||||
    padding: 2%;
 | 
			
		||||
    font-size: 20;
 | 
			
		||||
.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;
 | 
			
		||||
    width: 95%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.updateForm {
 | 
			
		||||
    margin-left: auto;
 | 
			
		||||
    margin-right: auto;
 | 
			
		||||
    width: 50%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.chat-container {
 | 
			
		||||
    overflow: scroll;
 | 
			
		||||
    border: black solid
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										19
									
								
								public/js/changepassword.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										19
									
								
								public/js/changepassword.js
									
									
									
									
									
										Normal file
									
								
							@@ -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);
 | 
			
		||||
            }
 | 
			
		||||
        });
 | 
			
		||||
    });
 | 
			
		||||
});
 | 
			
		||||
							
								
								
									
										3
									
								
								public/js/index.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										3
									
								
								public/js/index.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,3 @@
 | 
			
		||||
const goToPage = (page) => {
 | 
			
		||||
    window.location.href = `${page}`
 | 
			
		||||
}
 | 
			
		||||
@@ -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);
 | 
			
		||||
            }
 | 
			
		||||
        })
 | 
			
		||||
 
 | 
			
		||||
@@ -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;
 | 
			
		||||
 
 | 
			
		||||
@@ -26,16 +26,37 @@ UserRouter.get(['/', '/login'], async (req, res) => {
 | 
			
		||||
    return res.render("login.pug");
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
UserRouter.get('/index', auth.authenticate, async (req, res) => {
 | 
			
		||||
    if (!req.session.jwt || !jwt.verify(req.session.jwt, process.env.SECRET))
 | 
			
		||||
        return res.redirect("/login");
 | 
			
		||||
UserRouter.get(['/index', '/skin'], auth.authenticate, async (req, res) => {    
 | 
			
		||||
    const username = jwt.decode(req.session.jwt).username;
 | 
			
		||||
 | 
			
		||||
    const decoded = jwt.decode(req.session.jwt);
 | 
			
		||||
 | 
			
		||||
    return res.render('index.pug', {
 | 
			
		||||
        username: decoded.username,
 | 
			
		||||
        can_have_cloak: await UserService.canHaveCloak(decoded.username)
 | 
			
		||||
    return res.render('skin.pug', {
 | 
			
		||||
        username: username,
 | 
			
		||||
        can_have_cloak: await UserService.canHaveCloak(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;
 | 
			
		||||
							
								
								
									
										26
									
								
								views/changepassword.pug
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										26
									
								
								views/changepassword.pug
									
									
									
									
									
										Normal file
									
								
							@@ -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="Сменить")
 | 
			
		||||
    
 | 
			
		||||
							
								
								
									
										16
									
								
								views/chat.pug
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										16
									
								
								views/chat.pug
									
									
									
									
									
										Normal file
									
								
							@@ -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
 | 
			
		||||
							
								
								
									
										11
									
								
								views/header.pug
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										11
									
								
								views/header.pug
									
									
									
									
									
										Normal file
									
								
							@@ -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'") Выйти
 | 
			
		||||
@@ -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") Выйти
 | 
			
		||||
    
 | 
			
		||||
							
								
								
									
										0
									
								
								views/worldmap.pug
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										0
									
								
								views/worldmap.pug
									
									
									
									
									
										Normal file
									
								
							
		Reference in New Issue
	
	Block a user