From 556c16e3f293e91d37c76b4a41a95273cd613b44 Mon Sep 17 00:00:00 2001 From: lenovo Date: Wed, 7 Dec 2022 15:42:36 +0100 Subject: [PATCH] wip chat rooms can now create new room with prompt --- README.md | 4 ++ tests_hugo/chat_node/chat_client/chat.html | 40 +++++++++---------- .../chat_node/chat_client/chat_add_room.js | 3 ++ .../chat_node/chat_client/chat_create_room.js | 5 +++ .../chat_node/chat_client/chat_update_room.js | 4 -- .../chat_client/event_updaterooms.js | 30 ++++++++++++++ .../chat_client/style/action_board.css | 18 +++++++++ .../chat_node/chat_client/style/chat.css | 11 ++--- .../chat_client/style/msg_thread.css | 2 +- .../chat_node/chat_server/event_adduser.js | 4 +- .../chat_node/chat_server/event_createroom.js | 9 +++++ tests_hugo/chat_node/chat_server/server.js | 16 ++++++-- 12 files changed, 111 insertions(+), 35 deletions(-) create mode 100644 tests_hugo/chat_node/chat_client/chat_add_room.js create mode 100644 tests_hugo/chat_node/chat_client/chat_create_room.js delete mode 100644 tests_hugo/chat_node/chat_client/chat_update_room.js create mode 100644 tests_hugo/chat_node/chat_client/event_updaterooms.js create mode 100644 tests_hugo/chat_node/chat_client/style/action_board.css create mode 100644 tests_hugo/chat_node/chat_server/event_createroom.js diff --git a/README.md b/README.md index 13761e6f..92fd07b9 100644 --- a/README.md +++ b/README.md @@ -110,4 +110,8 @@ - [separation of concern](https://adamwathan.me/css-utility-classes-and-separation-of-concerns/) - [decoupling css and html](https://www.smashingmagazine.com/2012/04/decoupling-html-from-css/) +### security +- [xss attack with innerHTML](https://gomakethings.com/a-safer-alternative-to-innerhtml-with-vanilla-js/) +- [xss attack innerHTML prevention](https://stackoverflow.com/questions/30661497/xss-prevention-and-innerhtml) +- [xss attack prevention with createTextNode](https://stackoverflow.com/questions/11654555/is-createtextnode-completely-safe-from-html-injection-xss) diff --git a/tests_hugo/chat_node/chat_client/chat.html b/tests_hugo/chat_node/chat_client/chat.html index d98b1448..4f4dd59a 100644 --- a/tests_hugo/chat_node/chat_client/chat.html +++ b/tests_hugo/chat_node/chat_client/chat.html @@ -14,38 +14,33 @@
- +
-

list

-
- -

directs chats

- - -

rooms

- - - +

rooms

+
+ + + +
- +

create

- - + +

room

- +
-
- +

join

@@ -55,9 +50,13 @@

chat

-
+
+
- + +
+ +
@@ -86,9 +85,10 @@ + - + diff --git a/tests_hugo/chat_node/chat_client/chat_add_room.js b/tests_hugo/chat_node/chat_client/chat_add_room.js new file mode 100644 index 00000000..fd63d128 --- /dev/null +++ b/tests_hugo/chat_node/chat_client/chat_add_room.js @@ -0,0 +1,3 @@ +//const add_room = (rooms, newroom) => { +// +//}; diff --git a/tests_hugo/chat_node/chat_client/chat_create_room.js b/tests_hugo/chat_node/chat_client/chat_create_room.js new file mode 100644 index 00000000..eabce045 --- /dev/null +++ b/tests_hugo/chat_node/chat_client/chat_create_room.js @@ -0,0 +1,5 @@ +let create_room = () => { + let room_name = prompt("room name ?"); + + socket.emit('createroom', room_name); +}; diff --git a/tests_hugo/chat_node/chat_client/chat_update_room.js b/tests_hugo/chat_node/chat_client/chat_update_room.js deleted file mode 100644 index 4e8dd205..00000000 --- a/tests_hugo/chat_node/chat_client/chat_update_room.js +++ /dev/null @@ -1,4 +0,0 @@ -//socket.on('updateroom', (from, data) => { -// add_new_message(from, data); -//}); - diff --git a/tests_hugo/chat_node/chat_client/event_updaterooms.js b/tests_hugo/chat_node/chat_client/event_updaterooms.js new file mode 100644 index 00000000..f6499266 --- /dev/null +++ b/tests_hugo/chat_node/chat_client/event_updaterooms.js @@ -0,0 +1,30 @@ +socket.on('updaterooms', (rooms) => { + let div_rooms = document.getElementById("rooms"); + + console.log("rooms: "); + console.log(rooms); + +// let div_room_count = div_rooms.childElementCount; +// let div_room_list = document.getElementsByClassName("room_name"); +// console.log(".div_room_list: "); +// console.log(div_room_list); +// for(let room of div_room_list) { +// console.log(room); +// console.log(room.innerHTML); +// } + + div_rooms.innerHTML = ""; + for (let room of rooms) { + //console.log(room.name); + const label = document.createElement("label"); + const p = document.createElement("p"); + const p_content = document.createTextNode(room.name); + label.setAttribute('for', "input_outside"); + p.className = "room_name"; + p.appendChild(p_content); + label.appendChild(p); + div_rooms.appendChild(label); + } + +}); + diff --git a/tests_hugo/chat_node/chat_client/style/action_board.css b/tests_hugo/chat_node/chat_client/style/action_board.css new file mode 100644 index 00000000..50a3f4b1 --- /dev/null +++ b/tests_hugo/chat_node/chat_client/style/action_board.css @@ -0,0 +1,18 @@ +.chat_box .chat_item.main_window .action_board { + /* + display: none; + */ + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + background-color: white; +} + + +/* * * * * * * * * * * * * * + INFO WINDOW +*/ + + diff --git a/tests_hugo/chat_node/chat_client/style/chat.css b/tests_hugo/chat_node/chat_client/style/chat.css index c5ea6b7a..ac97d6f7 100644 --- a/tests_hugo/chat_node/chat_client/style/chat.css +++ b/tests_hugo/chat_node/chat_client/style/chat.css @@ -1,4 +1,5 @@ +@import 'action_board.css'; @import 'msg_thread.css'; @import 'msg_write.css'; @import 'msg_controls.css'; @@ -28,7 +29,7 @@ } .chat_box .chat_item.controls_area { grid-area: controls;} .chat_box .chat_item.open_close { grid-area: open_close;} -.chat_box .chat_item.msg_thread { grid-area: msg_thread;} +.chat_box .chat_item.main_window { grid-area: main_window;} .chat_box .chat_item.msg_write { grid-area: msg_write;} .chat_box .chat_item.msg_send { grid-area: msg_send;} .chat_box { @@ -37,10 +38,10 @@ right: 20px; display: grid; grid: - ' controls open_close ' auto - ' msg_thread msg_thread ' 1fr - ' msg_write msg_send ' auto - / 1fr auto; + ' controls open_close ' auto + ' main_window main_window ' 1fr + ' msg_write msg_send ' auto + / 1fr auto; gap: 0px; padding: 0px; width: auto; diff --git a/tests_hugo/chat_node/chat_client/style/msg_thread.css b/tests_hugo/chat_node/chat_client/style/msg_thread.css index 9d1892fa..ed636136 100644 --- a/tests_hugo/chat_node/chat_client/style/msg_thread.css +++ b/tests_hugo/chat_node/chat_client/style/msg_thread.css @@ -1,4 +1,4 @@ -.chat_box .chat_item.msg_thread { +.chat_box .chat_item.main_window { flex-direction: column-reverse; overflow: scroll; border: 1px solid blue; diff --git a/tests_hugo/chat_node/chat_server/event_adduser.js b/tests_hugo/chat_node/chat_server/event_adduser.js index e749fd21..4e9a9f82 100644 --- a/tests_hugo/chat_node/chat_server/event_adduser.js +++ b/tests_hugo/chat_node/chat_server/event_adduser.js @@ -1,4 +1,4 @@ -const add_user = (socket, username, usernames) => { +const add_user = (socket, username, usernames, rooms) => { //console.log(`adduser: ${username}, ${usernames[username]}`); @@ -14,7 +14,7 @@ const add_user = (socket, username, usernames) => { socket.emit('updatemsg', 'SERVER', 'you have connected to room1'); // echo to room 1 that a person has connected to their room socket.broadcast.to('room1').emit('updatemsg', 'SERVER', username + ' has connected to this room'); - socket.emit('updaterooms', rooms, 'room1'); + socket.emit('updaterooms', rooms); }; module.exports = add_user; diff --git a/tests_hugo/chat_node/chat_server/event_createroom.js b/tests_hugo/chat_node/chat_server/event_createroom.js new file mode 100644 index 00000000..88c10f08 --- /dev/null +++ b/tests_hugo/chat_node/chat_server/event_createroom.js @@ -0,0 +1,9 @@ +const create_room = (room_name) => { + //console.log('createroom'); + let last_room = rooms[rooms.length - 1]; + rooms.push({ name: room_name, id: last_room.id + 1 }); + socket.emit('updaterooms', rooms); +}; + +module.exports = create_room; + diff --git a/tests_hugo/chat_node/chat_server/server.js b/tests_hugo/chat_node/chat_server/server.js index aaf11542..09cc7410 100644 --- a/tests_hugo/chat_node/chat_server/server.js +++ b/tests_hugo/chat_node/chat_server/server.js @@ -13,23 +13,33 @@ const io = new Server(server, { }); const send_msg = require('./event_sendmsg'); const add_user = require('./event_adduser'); +const create_room = require('./event_createroom'); let usernames = {}; -let rooms = ['room1', 'room2', 'room3']; +let rooms = [ + { name: 'room1', id: 1 }, + { name: 'room2', id: 2 }, + { name: 'room3', id: 3 } +]; +let last_room = 0; io.on('connection', (socket) => { socket.on('adduser', (username) => { - add_user(socket, username, usernames); + add_user(socket, username, usernames, rooms); }); socket.on('sendmsg', (msg) => { send_msg(socket, msg); }); + socket.on('createroom', (room_name) => { + create_room(room_name); + }); + socket.on('joinlastroom', () => { if (socket.room !== null) - socket.emit('updateroom', socket.room); + socket.emit('updaterooms', socket.room); }); socket.on('switchroom', function(newroom){