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

This commit is contained in:
leca 2025-02-02 19:19:12 +03:00
parent 0803970233
commit 9a2c8a6eca
11 changed files with 149 additions and 58 deletions

View File

@ -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
}

View 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
View File

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

View File

@ -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);
}
})

View File

@ -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;

View File

@ -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
View 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
View 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
View 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'") Выйти

View File

@ -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
View File