From 0e2ed000f9be900c4356bfb6554a62e75398ec85 Mon Sep 17 00:00:00 2001 From: yakovlevanton Date: Thu, 15 Aug 2024 01:07:59 +0300 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=D1=8B=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D0=B8=20=D1=83?= =?UTF-8?q?=D0=B4=D0=B0=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F=20=D1=87=D0=B0=D1=82?= =?UTF-8?q?=D0=BE=D0=B2,=20=D1=83=D1=87=D0=B0=D1=81=D1=82=D0=BD=D0=B8?= =?UTF-8?q?=D0=BA=D0=BE=D0=B2=20=D1=87=D0=B0=D1=82=D0=B0,=20=D0=B8=D0=B7?= =?UTF-8?q?=D0=BC=D0=B5=D0=BD=D0=B5=D0=BD=20=D0=B4=D0=B8=D0=B7=D0=B0=D0=B9?= =?UTF-8?q?=D0=BD=20=D0=BD=D0=B5=D0=BA=D0=BE=D1=82=D0=BE=D1=80=D1=8B=D1=85?= =?UTF-8?q?=20=D1=8D=D0=BB=D0=B5=D0=BC=D0=B5=D0=BD=D1=82=D0=BE=D0=B2,=20?= =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=BE=20api?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/chat.css | 20 +++ assets/css/list-rooms.css | 66 ++++++++- assets/css/profile.css | 33 +++-- assets/html/chat.html | 35 +++-- assets/html/list-rooms.html | 37 +++-- assets/html/profile.html | 10 +- assets/html/registration.html | 26 ++-- assets/js/chat.js | 247 ++++++++++++++++--------------- assets/js/list-rooms.js | 264 +++++++++++++++++++++------------- assets/js/profile.js | 18 +-- assets/js/registration.js | 122 ++++++++-------- 11 files changed, 514 insertions(+), 364 deletions(-) diff --git a/assets/css/chat.css b/assets/css/chat.css index 353c44f..abafc9a 100644 --- a/assets/css/chat.css +++ b/assets/css/chat.css @@ -164,6 +164,26 @@ body { margin-top: 10px; text-decoration: none; color: black; + +} +.members-list-body a:hover { + text-decoration: underline; + color: #0088cc; +} +.members-list-body button { + padding: 5px 10px; + border: none; + background-color: #dc2e45; + color: white; + border-radius: 20px; + position: absolute; + left: 300px; + margin-top: 20px; + cursor: pointer; + transition: background-color 0.3s ease; +} +.members-list-body button:hover { + background-color: #881527; } .overlay { display: none; diff --git a/assets/css/list-rooms.css b/assets/css/list-rooms.css index ef42b66..0fa8ff2 100644 --- a/assets/css/list-rooms.css +++ b/assets/css/list-rooms.css @@ -70,13 +70,28 @@ h1 { border: none; border-radius: 5px; position: absolute; - margin-left: 500px; + margin-left: 502px; cursor: pointer; transition: background-color 0.3s ease; } .add-members-button:hover { background-color: #006509 } +.delete-chat-button { + background-color: #dc2e45; + border: none; + color: white; + font-size: 16px; + border-radius: 5px; + position: absolute; + cursor: pointer; + transition: background-color 0.3s ease; + padding: 10px 15px; + margin-left: 380px; +} +.delete-chat-button:hover { + background-color: #881527; +} #newMemberLogin { width: 93.5%; padding: 10px; @@ -185,13 +200,49 @@ h1 { height: 18%; position: fixed; } - -#error { - color: red; - font-size: 15px; - margin-top: 10px; +.overlay .delete-chat { + background-color: white; + padding: 30px; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + max-width: 400px; + width: 100%; + height: 18%; + position: fixed; +} +.delete-close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; + cursor: pointer; +} +.delete-chat-header { text-align: center; - display: none; +} +.confirm { + background-color: #1609ab; + padding: 20px 70px; + font-size: 16px; + color: white; + border: none; + border-radius: 5px; + position: absolute; + margin-left: 20px; + cursor: pointer; + transition: background-color 0.3s ease; +} +.cancel { + background-color: #1609ab; + padding: 20px 70px; + font-size: 16px; + color: white; + border: none; + border-radius: 5px; + position: absolute; + margin-left: 220px; + cursor: pointer; + transition: background-color 0.3s ease; } .close { color: #aaa; @@ -199,3 +250,4 @@ h1 { font-size: 28px; font-weight: bold; cursor: pointer; +} \ No newline at end of file diff --git a/assets/css/profile.css b/assets/css/profile.css index 6147869..c60dbf5 100644 --- a/assets/css/profile.css +++ b/assets/css/profile.css @@ -27,17 +27,25 @@ body { position: relative; } .return { - background-image: url("/assets/img/return.svg"); - background-repeat: no-repeat; + background-color: #f0f0f0; cursor: pointer; - width: 30px; + width: 100px; + text-decoration: none; + color: black; + display: flex; + justify-content: center; + align-items: center; height: 30px; border-radius: 10px; position: absolute; left: 20px; - top: 30px; + top: 25px; border: none; } +.return:hover{ + text-decoration: underline; + color: #0088cc; +} form { display: flex; flex-direction: column; @@ -58,14 +66,16 @@ form { align-items: center; } .add { - background-image: url("/assets/img/add_photo.svg"); - background-size: cover; - width: 30px; - height: 30px; - border: none; + width: 100px; + height: 40px; + border-width: 2px; cursor: pointer; + font-size: 16px; border-radius: 10px; } +.add:hover { + background-color: #007bb5; +} .image-button:hover { opacity: 0.8; } @@ -108,10 +118,11 @@ form { border-radius: 15px; border-color: #2F4F4F; height: 40px; - color: white; - background-color: #0088cc; width: 150px; } +.save:hover { + background-color: #007bb5; +} .avatar { border-radius: 50%; object-fit: cover; diff --git a/assets/html/chat.html b/assets/html/chat.html index 056cce1..5d888f7 100644 --- a/assets/html/chat.html +++ b/assets/html/chat.html @@ -7,33 +7,32 @@ -
-
- Веб чат - -
-
- -
-
- - -
+
+
+ Веб чат +
-
+
+ +
+
+ + +
+
+
×

Все участники

-
-
- +
+ diff --git a/assets/html/list-rooms.html b/assets/html/list-rooms.html index 27d751f..4a041f5 100644 --- a/assets/html/list-rooms.html +++ b/assets/html/list-rooms.html @@ -35,20 +35,31 @@
-
-
- × -

Добавить участников

-
-
- -
-
- -
-
+
+
+ × +

Добавить участников

+
+
+ +
+
+ +
+
+
+
+
+
+ × +

Вы уверены, что хотите удалить чат?

+
+
+ + +
+
- diff --git a/assets/html/profile.html b/assets/html/profile.html index bec192a..135a34f 100644 --- a/assets/html/profile.html +++ b/assets/html/profile.html @@ -8,15 +8,15 @@
-

Профиль пользователя

- +

Профиль пользователя

+ Назад

-
+

@@ -32,6 +32,6 @@
- + - + \ No newline at end of file diff --git a/assets/html/registration.html b/assets/html/registration.html index c196ad8..9cd441b 100644 --- a/assets/html/registration.html +++ b/assets/html/registration.html @@ -4,22 +4,22 @@ Страница Регистрации - + -
-

Вход

- -
-
-
- -
- -
+
+

Вход

+
+
+
+
+ +
+
+
- + - + \ No newline at end of file diff --git a/assets/js/chat.js b/assets/js/chat.js index 1366efa..259c984 100644 --- a/assets/js/chat.js +++ b/assets/js/chat.js @@ -1,86 +1,45 @@ +let members = [ + { username: 'Адель', nickname: 'cold_siemens52', avatar: 'https://sun9-59.userapi.com/impg/t8GhZ7FkynVifY1FQCnaf31tGprbV_rfauZzgg/fSq4lyc6V0U.jpg?size=1280x1280&quality=96&sign=e3c309a125cb570d2e18465eba65f940&type=album' }, + { username: 'Антон', nickname: 'antyak_01', avatar: 'https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png' }, + { username: 'Владимир', nickname: 'kkrkk2006', avatar: 'https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png' } +]; let currentHistoryId = 0; - let currentChatID = null; +let currentChatID = null; +function renderMembersList() { + const membersListBody = document.getElementById('members-list-body'); + membersListBody.innerHTML = ''; - document.addEventListener("DOMContentLoaded", async function() { - currentChatID = await getChatID(); + members.forEach((member, index) => { + const memberItem = document.createElement('li'); + memberItem.innerHTML = ` + ${member.username} + ${member.username} + + `; + membersListBody.appendChild(memberItem); }); +} - async function sendMessage() { - const chatMessages = document.getElementById('chat-messages'); - const chatInput = document.getElementById('chat-input'); - const message = chatInput.value; +function deleteMember(index) { + members.splice(index, 1); + renderMembersList(); +} - if (message.trim() !== '') { - const request = { - 'chatId': currentChatID, - 'LocalHistoryId': currentHistoryId, - 'content': { - 'text': message - } - }; +async function sendMessage() { + const chatMessages = document.getElementById('chat-messages'); + const chatInput = document.getElementById('chat-input'); + const message = chatInput.value; - const response = await fetch("/internalapi/sendMessage", { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify(request) - }); - - const res = await response.json(); - - if (res.update) { - const update = res.update[0]; - currentHistoryId = update.HistoryId; - - const messageElement = document.createElement('div'); - messageElement.classList.add('chat-message'); - - const avatarElement = document.createElement('div'); - avatarElement.classList.add('avatar'); - - const avatarImage = document.createElement('img'); - avatarImage.src = 'https://sun9-59.userapi.com/impg/t8GhZ7FkynVifY1FQCnaf31tGprbV_rfauZzgg/fSq4lyc6V0U.jpg?size=1280x1280&quality=96&sign=e3c309a125cb570d2e18465eba65f940&type=album'; - avatarElement.appendChild(avatarImage); - - const messageContentElement = document.createElement('div'); - messageContentElement.classList.add('message-content'); - - const usernameElement = document.createElement('div'); - usernameElement.classList.add('username'); - usernameElement.textContent = await getUserName(); - - const textElement = document.createElement('div'); - textElement.classList.add('text'); - textElement.textContent = message; - - messageContentElement.appendChild(usernameElement); - messageContentElement.appendChild(textElement); - - messageElement.appendChild(avatarElement); - messageElement.appendChild(messageContentElement); - - chatMessages.appendChild(messageElement); - - chatInput.value = ''; - chatMessages.scrollTop = chatMessages.scrollHeight; - } - } - } - - document.getElementById('chat-input').addEventListener('keydown', function (event) { - if (event.key === 'Enter') { - sendMessage(); - } - }); - - async function getUserName() { - const userID = await getUserID(); + if (message.trim() !== '') { const request = { - "id": userID + 'chatId': currentChatID, + 'LocalHistoryId': currentHistoryId, + 'content': { + 'text': message + } }; - const response = await fetch('/internalapi/getUserInfo', { + const response = await fetch("/internalapi/sendMessage", { method: 'POST', headers: { 'Content-Type': 'application/json' @@ -89,75 +48,115 @@ let currentHistoryId = 0; }); const res = await response.json(); - return res.content.name; - } - async function getUserID() { - const response = await fetch('/internalapi/mirror', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({}) - }); + if (res.update) { + const update = res.update[0]; + currentHistoryId = update.HistoryId; - const res = await response.json(); - return res.id; - } + const messageElement = document.createElement('div'); + messageElement.classList.add('chat-message'); - async function getChatID() { - const chatNickname = window.location.pathname.split('/').pop(); - const response = await fetch('/internalapi/getChatList', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({}) - }); + const avatarElement = document.createElement('div'); + avatarElement.classList.add('avatar'); - const res = await response.json(); - for (const chat of res.chats) { - if (chat.content.nickname === chatNickname) { - return chat.id; - } - } - return -1; - } + const avatarImage = document.createElement('img'); + avatarImage.src = 'https://sun9-59.userapi.com/impg/t8GhZ7FkynVifY1FQCnaf31tGprbV_rfauZzgg/fSq4lyc6V0U.jpg?size=1280x1280&quality=96&sign=e3c309a125cb570d2e18465eba65f940&type=album'; + avatarElement.appendChild(avatarImage); - async function editMessage(new_message) { - const req = { - 'chatId': currentChatID, - 'LocalHistoryId': currentHistoryId, - 'id': getUserID(), - 'content': { - 'text': new_message - } - }; - const res = await fetch('/internalapi/editMessage', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify(req) - }); + const messageContentElement = document.createElement('div'); + messageContentElement.classList.add('message-content'); - const response = await res.json(); - if (response.update) { - currentHistoryId = response.update[0].HistoryId; + const usernameElement = document.createElement('div'); + usernameElement.classList.add('username'); + usernameElement.textContent = await getUserName(); + + const textElement = document.createElement('div'); + textElement.classList.add('text'); + textElement.textContent = message; + + messageContentElement.appendChild(usernameElement); + messageContentElement.appendChild(textElement); + + messageElement.appendChild(avatarElement); + messageElement.appendChild(messageContentElement); + + chatMessages.appendChild(messageElement); + + chatInput.value = ''; + chatMessages.scrollTop = chatMessages.scrollHeight; } } +} function openMembersList() { + renderMembersList(); document.getElementById("members-list").style.display = "block"; document.getElementById("overlay").style.display = "flex"; - } + function closeMembersList() { document.getElementById("members-list").style.display = "none"; document.getElementById("overlay").style.display = "none"; } + document.getElementById('chat-input').addEventListener('keydown', function (event) { if (event.key === 'Enter') { sendMessage(); } }); + +async function getUserID() { + const response = await fetch('/internalapi/mirror', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({}) + }); + + const res = await response.json(); + return res.id; +} +async function getChatID() { + const chatNickname = window.location.pathname.split('/').pop(); + const response = await fetch('/internalapi/getChatList', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({}) + }); + + const res = await response.json(); + for (const chat of res.chats) { + if (chat.content.nickname === chatNickname) { + return chat.id; + } + } + return -1; +} +async function editMessage(new_message) { + const req = { + 'chatId': currentChatID, + 'LocalHistoryId': currentHistoryId, + 'id': getUserID(), + 'content': { + 'text': new_message + } + }; + const res = await fetch('/internalapi/editMessage', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(req) + }); + + const response = await res.json(); + if (response.update) { + currentHistoryId = response.update[0].HistoryId; + } +} +document.addEventListener("DOMContentLoaded", async function() { + currentChatID = await getChatID(); +}); \ No newline at end of file diff --git a/assets/js/list-rooms.js b/assets/js/list-rooms.js index 542135e..bf2b8c0 100644 --- a/assets/js/list-rooms.js +++ b/assets/js/list-rooms.js @@ -1,113 +1,136 @@ +let rooms = {}; +let roomToDelete = null; let currentRoom = null; - let currentHistoryId = 0; +let currentHistoryId = 0; - function openModal(roomName) { - currentRoom = roomName; - document.getElementById('passwordModal').style.display = 'block'; +function openRoom(currentRoom) { + alert('Вы вошли в комнату: ' + currentRoom); +} + +function closeAdd() { + document.getElementById('add_members').style.display = 'none'; +} + +function openAdd() { + document.getElementById('add_members').style.display = 'flex'; +} + +function openConfirm(roomNickname) { + roomToDelete = roomNickname; + document.getElementById("delete-chat").style.display = "flex"; +} + +function closeConfirm() { + roomToDelete = null; + document.getElementById("delete-chat").style.display = "none"; +} + +function deleteChat() { + if (roomToDelete && rooms[roomToDelete]) { + delete rooms[roomToDelete]; + removeRoomFromList(roomToDelete); + closeConfirm(); + } else { + alert("Не удалось найти выбранную комнату."); + } +} + +function addMember() { + const login = document.getElementById('newMemberLogin').value; + if (login) { + alert(`Участник с никнеймом '${login}' добавлен`); + closeAdd(); + } else { + alert('Пожалуйста, введите логин участника'); + } +} + +function openCreateRoomModal() { + document.getElementById('createRoomModal').style.display = 'block'; +} + +function closeCreateRoomModal() { + document.getElementById('createRoomModal').style.display = 'none'; +} + +async function createRoom() { + const errorElement = document.getElementById('error'); + const roomName = document.getElementById('newRoomName').value.trim(); + const roomNickname = document.getElementById('newRoomNickname').value.trim(); + + + errorElement.style.display = 'none'; + errorElement.textContent = ''; + + if (roomName === '' || roomNickname === '') { + errorElement.textContent = 'Пожалуйста, заполните все поля'; + errorElement.style.display = 'block'; + return; } - function closeModal() { - document.getElementById('passwordModal').style.display = 'none'; - } - - function openCreateRoomModal() { - document.getElementById('createRoomModal').style.display = 'block'; - } - - function closeCreateRoomModal() { - document.getElementById('createRoomModal').style.display = 'none'; - } - - async function createRoom() { - const errorElement = document.getElementById('error'); - const roomName = document.getElementById('newRoomName').value.trim(); - const roomNickname = document.getElementById('newRoomNickname').value.trim(); - - - errorElement.style.display = 'none'; - errorElement.textContent = ''; - - if (roomName === '' || roomNickname === '') { - errorElement.textContent = 'Пожалуйста, заполните все поля'; - errorElement.style.display = 'block'; - return; + const request = { + LocalHistoryId: currentHistoryId, + content: { + name: roomName, + nickname: roomNickname } + }; - const request = { - LocalHistoryId: currentHistoryId, - content: { - name: roomName, - nickname: roomNickname - } - }; + try { + const response = await fetch('/internalapi/createChat', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(request) + }); - try { - const response = await fetch('/internalapi/createChat', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify(request) - }); + const res = await response.json(); - const res = await response.json(); - - if (res.status === 0) { - addRoomToList(roomName, roomNickname); - closeCreateRoomModal(); - currentHistoryId = res.update.LocalHistoryId; - window.location.href = '/chat/' + roomNickname; - } else { - throw new Error(res.error || 'Ошибка'); - } - } catch (error) { - alert('Ошибка создания чата: ' + error.message); + if (res.status === 0) { + addRoomToList(roomName, roomNickname); + rooms[roomNickname] = true; + closeCreateRoomModal(); + currentHistoryId = res.update.LocalHistoryId; + window.location.href = '/chat/' + roomNickname; + } else { + throw new Error(res.error || 'Ошибка'); } + } catch (error) { + alert('Ошибка создания чата: ' + error.message); + } +} + +function addRoomToList(roomName) { + const roomList = document.querySelector('.room-list'); + const existingRoomItem = Array.from(roomList.children).find(item => item.querySelector('.room-name').textContent === roomName); + if (existingRoomItem) { + existingRoomItem.remove(); } - function addRoomToList(roomName, roomNickname) { - const roomList = document.querySelector('.room-list'); + const roomItem = document.createElement('li'); + roomItem.classList.add('room-item'); - const existingRoomItem = Array.from(roomList.children).find(item => item.querySelector('.room-name').textContent === roomName); - if (existingRoomItem) { - existingRoomItem.remove(); - } + roomItem.innerHTML = ` + ${roomName} + + + + `; - const roomItem = document.createElement('li'); - roomItem.classList.add('room-item'); - roomItem.innerHTML = ` - ${roomName} - - `; - roomList.appendChild(roomItem); + roomList.appendChild(roomItem); +} + +function removeRoomFromList(roomName, roomNickname) { + const roomList = document.querySelector('.room-list'); + const roomItem = Array.from(roomList.children).find(item => item.querySelector('.room-name').textContent === roomName); + if (roomItem) { + roomList.removeChild(roomItem); } +} - async function initializeRoomList() { - try { - const response = await fetch('/internalapi/getChatList', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({}) - }); - - const res = await response.json(); - - if (res.status === 0) { - res.chats.forEach(chat => { - addRoomToList(chat.content.name, chat.content.nickname); - }); - } else { - throw new Error(res.error || 'Неизвестная ошибка'); - } - } catch (error) { - alert('Ошибка загрузки списка чатов: ' + error.message); - } - } - - async function getChatID() { - const chatNickname = window.location.pathname.split('/').pop(); +async function initializeRoomList() { + try { const response = await fetch('/internalapi/getChatList', { method: 'POST', headers: { @@ -117,12 +140,47 @@ let currentRoom = null; }); const res = await response.json(); - for (const chat of res.chats) { - if (chat.content.nickname === chatNickname) { - return chat.id; - } - } - return -1; - } - document.addEventListener('DOMContentLoaded', initializeRoomList); + if (res.status === 0) { + res.chats.forEach(chat => { + addRoomToList(chat.content.name, chat.content.nickname); + }); + } else { + throw new Error(res.error || 'Неизвестная ошибка'); + } + } catch (error) { + alert('Ошибка загрузки списка чатов: ' + error.message); + } +} + + +async function getChatID() { + const chatNickname = window.location.pathname.split('/').pop(); + const response = await fetch('/internalapi/getChatList', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({}) + }); + + const res = await response.json(); + for (const chat of res.chats) { + if (chat.content.nickname === chatNickname) { + return chat.id; + } + } + return -1; +} +window.onclick = function(event) { + if (event.target === document.getElementById('createRoomModal')) { + closeCreateRoomModal(); + } +} + +document.getElementById('newRoomName').addEventListener('keydown', function(event) { + if (event.key === 'Enter') { + createRoom(); + } +}); +document.addEventListener('DOMContentLoaded', initializeRoomList); \ No newline at end of file diff --git a/assets/js/profile.js b/assets/js/profile.js index 79750dd..fc92988 100644 --- a/assets/js/profile.js +++ b/assets/js/profile.js @@ -1,10 +1,10 @@ document.getElementById('fileInput').addEventListener('change', function(event) { - const file = event.target.files[0]; - if (file) { - const reader = new FileReader(); - reader.onload = function(e) { - document.getElementById('avatar').src = e.target.result; - }; - reader.readAsDataURL(file); - } - }); \ No newline at end of file + const file = event.target.files[0]; + if (file) { + const reader = new FileReader(); + reader.onload = function(e) { + document.getElementById('avatar').src = e.target.result; + }; + reader.readAsDataURL(file); + } +}); \ No newline at end of file diff --git a/assets/js/registration.js b/assets/js/registration.js index 33e546e..e12f4de 100644 --- a/assets/js/registration.js +++ b/assets/js/registration.js @@ -1,68 +1,68 @@ document.addEventListener('DOMContentLoaded', function() { - const form = document.querySelector('form'); - const submitButton = form.querySelector('button[type="submit"]'); - const errorElement = document.getElementById('error'); + const form = document.querySelector('form'); + const submitButton = form.querySelector('button[type="submit"]'); + const errorElement = document.getElementById('error'); - form.addEventListener('keydown', function(event) { - const activeElement = document.activeElement; - const formElements = Array.from(form.elements); - const currentIndex = formElements.indexOf(activeElement); + form.addEventListener('keydown', function(event) { + const activeElement = document.activeElement; + const formElements = Array.from(form.elements); + const currentIndex = formElements.indexOf(activeElement); - if (activeElement.tagName === 'INPUT') { - if (event.key === 'Enter') { - event.preventDefault(); - if (currentIndex === formElements.length - 1) { - submitButton.focus(); - } else if (currentIndex !== -1 && formElements[currentIndex + 1]) { - formElements[currentIndex + 1].focus(); - } + if (activeElement.tagName === 'INPUT') { + if (event.key === 'Enter') { + event.preventDefault(); + if (currentIndex === formElements.length - 1) { + submitButton.focus(); + } else if (currentIndex !== -1 && formElements[currentIndex + 1]) { + formElements[currentIndex + 1].focus(); } } - }); - - submitButton.addEventListener('focus', function() { - submitButton.classList.add('focus-visible'); - }); - - submitButton.addEventListener('blur', function() { - submitButton.classList.remove('focus-visible'); - }); - - form.addEventListener('submit', function(event) { - event.preventDefault(); - validateForm(); - }); - - async function validateForm() { - const name = document.getElementById('name').value.trim(); - const nickname = document.getElementById('nickname').value.trim(); - - if (name === '' || nickname === '') { - errorElement.textContent = 'Пожалуйста, заполните все поля'; - errorElement.style.display = 'block'; - return false; - } - try { - // Отправка данных для регистрации - let response = await fetch('/login', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({name, nickname}) - }); - - const result = await response.json(); - - if (result.status === 0) { - window.location.href = '/'; - } else { - throw Error(result.error); - } - } catch(error) { - errorElement.textContent = 'Попробуйте еще раз'; - errorElement.style.display = 'block'; - } - } }); + + submitButton.addEventListener('focus', function() { + submitButton.classList.add('focus-visible'); + }); + + submitButton.addEventListener('blur', function() { + submitButton.classList.remove('focus-visible'); + }); + + form.addEventListener('submit', function(event) { + event.preventDefault(); + validateForm(); + }); + + async function validateForm() { + const name = document.getElementById('name').value.trim(); + const nickname = document.getElementById('nickname').value.trim(); + + if (name === '' || nickname === '') { + errorElement.textContent = 'Пожалуйста, заполните все поля'; + errorElement.style.display = 'block'; + return false; + } + try { + // Отправка данных для регистрации + let response = await fetch('/login', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({name, nickname}) + }); + + const result = await response.json(); + + if (result.status === 0) { + window.location.href = '/'; + } else { + throw Error(result.error); + } + } catch(error) { + errorElement.textContent = 'Попробуйте еще раз'; + errorElement.style.display = 'block'; + } + + } +});