From 9a2c8a6ecae956f821e3b1375ec4cf6d4c5ef658 Mon Sep 17 00:00:00 2001 From: leca Date: Sun, 2 Feb 2025 19:19:12 +0300 Subject: [PATCH] added division by tabs, validating nickname before registration, showing server responses using jquery --- public/css/index.css | 44 ++++++++++++++++++++++++++--------- public/js/changepassword.js | 19 +++++++++++++++ public/js/index.js | 3 +++ public/js/register.js | 9 +++++-- public/js/skin3d.js | 25 -------------------- src/routers/user.js | 39 ++++++++++++++++++++++++------- views/changepassword.pug | 26 +++++++++++++++++++++ views/chat.pug | 16 +++++++++++++ views/header.pug | 11 +++++++++ views/{index.pug => skin.pug} | 15 ++++-------- views/worldmap.pug | 0 11 files changed, 149 insertions(+), 58 deletions(-) create mode 100644 public/js/changepassword.js create mode 100644 public/js/index.js create mode 100644 views/changepassword.pug create mode 100644 views/chat.pug create mode 100644 views/header.pug rename views/{index.pug => skin.pug} (66%) create mode 100644 views/worldmap.pug diff --git a/public/css/index.css b/public/css/index.css index d4aeb78..53bbef6 100644 --- a/public/css/index.css +++ b/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; -} \ No newline at end of file + width: 95%; +} + +.updateForm { + margin-left: auto; + margin-right: auto; + width: 50%; +} + +.chat-container { + overflow: scroll; + border: black solid +} diff --git a/public/js/changepassword.js b/public/js/changepassword.js new file mode 100644 index 0000000..9c49bb6 --- /dev/null +++ b/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); + } + }); + }); +}); \ No newline at end of file diff --git a/public/js/index.js b/public/js/index.js new file mode 100644 index 0000000..9f24e7e --- /dev/null +++ b/public/js/index.js @@ -0,0 +1,3 @@ +const goToPage = (page) => { + window.location.href = `${page}` +} \ No newline at end of file diff --git a/public/js/register.js b/public/js/register.js index 1cc7d16..0ab00d0 100644 --- a/public/js/register.js +++ b/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); } }) diff --git a/public/js/skin3d.js b/public/js/skin3d.js index 1606767..e2f461b 100644 --- a/public/js/skin3d.js +++ b/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; diff --git a/src/routers/user.js b/src/routers/user.js index b24c7cc..277318e 100644 --- a/src/routers/user.js +++ b/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) => { - if (!req.session.jwt || !jwt.verify(req.session.jwt, process.env.SECRET)) - return res.redirect("/login"); - - const decoded = jwt.decode(req.session.jwt); +UserRouter.get(['/index', '/skin'], auth.authenticate, async (req, res) => { + const username = jwt.decode(req.session.jwt).username; - 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; \ No newline at end of file diff --git a/views/changepassword.pug b/views/changepassword.pug new file mode 100644 index 0000000..da41875 --- /dev/null +++ b/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="Сменить") + \ No newline at end of file diff --git a/views/chat.pug b/views/chat.pug new file mode 100644 index 0000000..0aec001 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/views/header.pug b/views/header.pug new file mode 100644 index 0000000..ac2cddd --- /dev/null +++ b/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'") Выйти \ No newline at end of file diff --git a/views/index.pug b/views/skin.pug similarity index 66% rename from views/index.pug rename to views/skin.pug index d2179e2..09b76a9 100644 --- a/views/index.pug +++ b/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") Выйти \ No newline at end of file diff --git a/views/worldmap.pug b/views/worldmap.pug new file mode 100644 index 0000000..e69de29