diff --git a/assets/HypertextPages/chat.html b/assets/HypertextPages/chat.html index 61255d5..5d888f7 100644 --- a/assets/HypertextPages/chat.html +++ b/assets/HypertextPages/chat.html @@ -1,25 +1,38 @@ - - - - - - Веб-Чат - - - -
-
- Веб чат -
-
- -
-
- - -
-
- - - - + + + + + + Веб-Чат + + + +
+
+ Веб чат + +
+
+ +
+
+ + +
+
+
+
+
+ × +

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

+
+
+
    + +
+
+
+
+ + + diff --git a/assets/HypertextPages/list-rooms.html b/assets/HypertextPages/list-rooms.html new file mode 100644 index 0000000..4a041f5 --- /dev/null +++ b/assets/HypertextPages/list-rooms.html @@ -0,0 +1,65 @@ + + + + + + Список Чат-Комнат + + + +
+

Выберите Чат-Комнату

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

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

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

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

+
+
+ + +
+
+
+ + + diff --git a/assets/HypertextPages/list-rooms.nytl.html b/assets/HypertextPages/list-rooms.nytl.html deleted file mode 100644 index 5b0ff2a..0000000 --- a/assets/HypertextPages/list-rooms.nytl.html +++ /dev/null @@ -1,54 +0,0 @@ -{% ELDEF main JSON pres %} - - - - - - {% WRITE pres.phr.decl.list-of-chat-rooms %} - - - -
-

{% WRITE pres.phr.decl.select-chat-room %}

- - -
- - - - - - - - - -{% ENDELDEF %} diff --git a/assets/HypertextPages/profile.html b/assets/HypertextPages/profile.html index 31523d2..135a34f 100644 --- a/assets/HypertextPages/profile.html +++ b/assets/HypertextPages/profile.html @@ -8,14 +8,15 @@
-

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

+

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

+ Назад

-
+

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

Вход

- -
-
-
- -
- -
+
+

Вход

+
+
+
+
+ +
+
+
- + - + \ No newline at end of file diff --git a/assets/css/chat.css b/assets/css/chat.css index d408af1..abafc9a 100644 --- a/assets/css/chat.css +++ b/assets/css/chat.css @@ -21,13 +21,33 @@ body { } .chat-header { - background-color: #0088cc; + background-color: #007bb5; color: white; - padding: 15px; - text-align: center; - font-size: 20px; + padding: 25px; + display: flex; + justify-content: center; + align-items: center; + position: relative; +} +.room-name { + position: absolute; + left: 50%; + font-size: 24px; +} +.members { + border: none; + position: absolute; + left: 80%; + border-radius: 10px; + cursor: pointer; + width: 150px; + background-color: #f7f7f7; + height: 25px; + transition: background-color 0.3s ease; +} +.members:hover { + background-color: #218838; } - .chat-messages { flex: 1; padding: 15px; @@ -97,7 +117,86 @@ body { cursor: pointer; outline: none; } +.members-list { + display: none; + position: fixed; + background-color: #fff; + margin: 10% auto; + padding: 20px; + border: 1px solid #888; + width: 80%; + max-width: 400px; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); +} +.members-list-header { + display: flex; +} +.all-members { + position: absolute; + left: 32%; + top: 0%; + margin-bottom: 30px; + font-family: Arial, sans-serif; +} +.close { + position: absolute; + right: 5%; + font-size: 24px; + font-weight: bold; +} +.members-list span { + cursor: pointer; +} +.members-list-body ul { + list-style-type: none; + left: 0%; +} +.members-list-body img { + margin-top: 10px; + left: 0%; + height: 30px; + width: 30px; + border-radius: 50%; +} +.members-list-body a { + margin-left: 5px; + 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; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + justify-content: center; + align-items: center; + z-index: 1000; +} .chat-send-button:hover { background-color: #007bb5; } \ No newline at end of file diff --git a/assets/css/list-rooms.css b/assets/css/list-rooms.css index 4a4643a..0fa8ff2 100644 --- a/assets/css/list-rooms.css +++ b/assets/css/list-rooms.css @@ -7,7 +7,7 @@ body { .container { max-width: 800px; - margin: 30px auto; + margin: 30px auto; padding: 20px; background-color: #007bff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); @@ -16,7 +16,7 @@ body { h1 { text-align: center; - color: #fff; + color: #fff; } .room-list { @@ -55,7 +55,62 @@ h1 { cursor: pointer; transition: background-color 0.3s ease; } - +.add-members-header { + text-align: center; +} +.add-members-footer { + text-align: right; + margin-top: 5px; +} +.add-members-button { + background-color: #218838; + padding: 10px 15px; + font-size: 16px; + color: white; + border: none; + border-radius: 5px; + position: absolute; + 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; + margin: 10px 0; + border: 1px solid #ddd; + border-radius: 5px; +} +.add-member-button { + background-color: #218838; + padding: 10px 15px; + font-size: 16px; + color: white; + border: none; + border-radius: 5px; + position: absolute; + margin-left: -105px; + cursor: pointer; + transition: background-color 0.3s ease; +} .join-button:hover { background-color: #0056b3; } @@ -74,7 +129,7 @@ h1 { .modal-content { background-color: #fff; - margin: 10% auto; + margin: 10% auto; padding: 20px; border: 1px solid #888; width: 80%; @@ -96,19 +151,6 @@ h1 { text-align: right; } -.close { - color: #aaa; - float: right; - font-size: 28px; - font-weight: bold; -} - -.close:hover, .close:focus { - color: black; - text-decoration: none; - cursor: pointer; -} - .modal input { width: 93.5%; padding: 10px; @@ -134,3 +176,78 @@ h1 { .create-room-button:hover { background-color: #218838; } + +.overlay { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + justify-content: center; + align-items: center; + z-index: 1000; +} + +.overlay .add-members { + 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; +} +.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; +} +.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; + float: right; + 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 47c1390..c60dbf5 100644 --- a/assets/css/profile.css +++ b/assets/css/profile.css @@ -24,6 +24,27 @@ body { border-color: antiquewhite; background-color: #0088cc; border-radius: 10px; + position: relative; +} +.return { + background-color: #f0f0f0; + cursor: pointer; + 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: 25px; + border: none; +} +.return:hover{ + text-decoration: underline; + color: #0088cc; } form { display: flex; @@ -45,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; } @@ -95,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/img/add_photo.svg b/assets/img/add_photo.svg deleted file mode 100644 index 4b915d7..0000000 --- a/assets/img/add_photo.svg +++ /dev/null @@ -1 +0,0 @@ -Created by VMfrom the Noun Project \ No newline at end of file diff --git a/assets/js/chat.js b/assets/js/chat.js index 12cb5a4..259c984 100644 --- a/assets/js/chat.js +++ b/assets/js/chat.js @@ -1,44 +1,162 @@ -function sendMessage() { +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; +function renderMembersList() { + const membersListBody = document.getElementById('members-list-body'); + membersListBody.innerHTML = ''; + + members.forEach((member, index) => { + const memberItem = document.createElement('li'); + memberItem.innerHTML = ` + ${member.username} + ${member.username} + + `; + membersListBody.appendChild(memberItem); + }); +} + +function deleteMember(index) { + members.splice(index, 1); + renderMembersList(); +} + +async function sendMessage() { const chatMessages = document.getElementById('chat-messages'); const chatInput = document.getElementById('chat-input'); const message = chatInput.value; + if (message.trim() !== '') { - const messageElement = document.createElement('div'); - messageElement.classList.add('chat-message'); + const request = { + 'chatId': currentChatID, + 'LocalHistoryId': currentHistoryId, + 'content': { + 'text': message + } + }; - const avatarElement = document.createElement('div'); - avatarElement.classList.add('avatar'); + const response = await fetch("/internalapi/sendMessage", { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(request) + }); - 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 res = await response.json(); - const messageContentElement = document.createElement('div'); - messageContentElement.classList.add('message-content'); + if (res.update) { + const update = res.update[0]; + currentHistoryId = update.HistoryId; - const usernameElement = document.createElement('div'); - usernameElement.classList.add('username'); - usernameElement.textContent = 'Адель'; + const messageElement = document.createElement('div'); + messageElement.classList.add('chat-message'); - const textElement = document.createElement('div'); - textElement.classList.add('text'); - textElement.textContent = message; + const avatarElement = document.createElement('div'); + avatarElement.classList.add('avatar'); - messageContentElement.appendChild(usernameElement); - messageContentElement.appendChild(textElement); + 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); - messageElement.appendChild(avatarElement); - messageElement.appendChild(messageContentElement); + const messageContentElement = document.createElement('div'); + messageContentElement.classList.add('message-content'); - chatMessages.appendChild(messageElement); + const usernameElement = document.createElement('div'); + usernameElement.classList.add('username'); + usernameElement.textContent = await getUserName(); - chatInput.value = ''; - chatMessages.scrollTop = chatMessages.scrollHeight; + 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 081634c..bf2b8c0 100644 --- a/assets/js/list-rooms.js +++ b/assets/js/list-rooms.js @@ -1,21 +1,47 @@ let rooms = {}; +let roomToDelete = null; +let currentRoom = null; +let currentHistoryId = 0; -function openModal(roomName) { - currentRoom = roomName; - document.getElementById('passwordModal').style.display = 'block'; +function openRoom(currentRoom) { + alert('Вы вошли в комнату: ' + currentRoom); } -function closeModal() { - document.getElementById('passwordModal').style.display = 'none'; +function closeAdd() { + document.getElementById('add_members').style.display = 'none'; } -function validatePassword() { - const enteredPassword = document.getElementById('roomPassword').value; - if (enteredPassword === rooms[currentRoom]) { - alert('Вы вошли в комнату: ' + currentRoom); - closeModal(); +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('Неверный пароль. Попробуйте снова.'); + alert("Не удалось найти выбранную комнату."); + } +} + +function addMember() { + const login = document.getElementById('newMemberLogin').value; + if (login) { + alert(`Участник с никнеймом '${login}' добавлен`); + closeAdd(); + } else { + alert('Пожалуйста, введите логин участника'); } } @@ -27,28 +53,56 @@ function closeCreateRoomModal() { document.getElementById('createRoomModal').style.display = 'none'; } -function createRoom() { +async function createRoom() { + const errorElement = document.getElementById('error'); const roomName = document.getElementById('newRoomName').value.trim(); - const roomPassword = document.getElementById('newRoomPassword').value.trim(); - - if (roomName === '' || roomPassword === '') { - alert('Пожалуйста, заполните все поля.'); + const roomNickname = document.getElementById('newRoomNickname').value.trim(); + + + errorElement.style.display = 'none'; + errorElement.textContent = ''; + + if (roomName === '' || roomNickname === '') { + errorElement.textContent = 'Пожалуйста, заполните все поля'; + errorElement.style.display = 'block'; return; } - if (rooms[roomName]) { - alert('Комната с таким названием уже существует.'); - return; - } + const request = { + LocalHistoryId: currentHistoryId, + content: { + name: roomName, + nickname: roomNickname + } + }; - rooms[roomName] = roomPassword; - addRoomToList(roomName); - closeCreateRoomModal(); + try { + const response = await fetch('/internalapi/createChat', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(request) + }); + + const res = await response.json(); + + 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(); @@ -59,25 +113,74 @@ function addRoomToList(roomName) { roomItem.innerHTML = ` ${roomName} - + + + `; roomList.appendChild(roomItem); } -function initializeRoomList() { - Object.keys(rooms).forEach(roomName => { - addRoomToList(roomName); - }); +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); + } } -initializeRoomList(); +async function initializeRoomList() { + try { + const response = await fetch('/internalapi/getChatList', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({}) + }); -window.onclick = function(event) { - if (event.target === document.getElementById('passwordModal')) { - closeModal(); + 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(); + 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 dc27d59..e12f4de 100644 --- a/assets/js/registration.js +++ b/assets/js/registration.js @@ -1,50 +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) { - if (!validateForm()) { - event.preventDefault(); - } - }); - - function validateForm() { - const username = document.getElementById('username').value.trim(); - const login = document.getElementById('login').value.trim(); - const password = document.getElementById('password').value.trim(); - - if (username === '' || login === '' || password === '') { - errorElement.textContent = 'Пожалуйста, заполните все поля'; - errorElement.style.display = 'block'; - return false; - } - - return true; } }); + + 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'; + } + + } +}); diff --git a/src/web_chat/iu9_ca_web_chat_lib/run.cpp b/src/web_chat/iu9_ca_web_chat_lib/run.cpp index 534548f..b55ce98 100644 --- a/src/web_chat/iu9_ca_web_chat_lib/run.cpp +++ b/src/web_chat/iu9_ca_web_chat_lib/run.cpp @@ -29,7 +29,7 @@ namespace iu9cawebchat { een9::StaticAssetManagerSlaveModule samI; samI.update({ een9::StaticAssetManagerRule{assets_dir + "/css", "/assets/css", {{".css", "text/css"}} }, - een9::StaticAssetManagerRule{assets_dir + "/js", "/assets/js", {{".js", "text/js"}} }, + een9::StaticAssetManagerRule{assets_dir + "/js", "/assets/js", {{".js", "text/javascript"}} }, een9::StaticAssetManagerRule{assets_dir + "/img", "/assets/img", { {".jpg", "image/jpg"}, {".png", "image/png"}, {".svg", "image/svg+xml"} } }, @@ -70,7 +70,7 @@ namespace iu9cawebchat { return een9::form_http_server_response_200("text/html", page); }; if (req.uri_path == "/" || req.uri_path == "/list-rooms") { - return rteee("list-rooms", true); + return rteee("list-rooms", false); } if (req.uri_path == "/chat") { return rteee("chat", false);