42/42_INT_14_transcendence
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip chat rooms can now create new room with prompt

Browse Source
This commit is contained in:
lenovo
2022-12-07 15:42:36 +01:00
parent 3b60f3952c
commit 556c16e3f2
12 changed files with 111 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

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

40
tests_hugo/chat_node/chat_client/chat.html
View File

@@ -14,38 +14,33 @@
<div class="chat_box">
<div class="chat_item controls_area">
<!-- MENU -------------- -->
<div class="control list drop_down">
<p class="_title" tabindex=0>list</p>
<div class="_items" tabindex=0>
<p class="_section">directs chats</p>
<label for="input_outside"><p class="_subsection">test1</p></label>
<label for="input_outside"><p class="_subsection">test2</p></label>
<p class="_section">rooms</p>
<label for="input_outside"><p class="_subsection">test1</p></label>
<label for="input_outside"><p class="_subsection">test2</p></label>
<p class="_title" tabindex=0>rooms</p>
<div class="_items" tabindex=0 id="rooms">
<label for="input_outside"><p class="room_name">test1</p></label>
<label for="input_outside"><p class="room_name">test2</p></label>
<label for="input_outside"><p class="room_name">test1</p></label>
<label for="input_outside"><p class="room_name">test2</p></label>
</div>
</div>
<!-- MENU -------------- -->
<div class="control create drop_down">
<p class="_title" tabindex=0>create</p>
<div class="_items" tabindex=0>
<label for="input_outside"><p onclick="">direct chat</p></label>
<label for="input_outside"><p onclick="create_room()">direct chat</p></label>
<!-- SUBMENU ----------- -->
<div class="drop_down _push">
<p class="_title" tabindex=0>room</p>
<div class="_items" tabindex=0>
<label for="input_outside"><p onclick="">public</p></label>
<label for="input_outside"><p onclick="">privte</p></label>
<label for="input_outside"><p onclick="">private</p></label>
<label for="input_outside"><p onclick="">protected</p></label>
</div>
</div>
</div>
</div>
<!-- MENU -------------- -->
<div class="control join">
<p>join</p>
</div>
@@ -55,9 +50,13 @@
<p>chat</p>
</label>
<div class="chat_item msg_thread">
<div class="chat_item main_window">
<!-- THREAD ------------ -->
<div class="msg_box" id="msg_thread">
<!-- messages go there -->
<!-- messages go there -->
</div>
<!-- INFO WINDOW ------- -->
<div class="action_board">
</div>
</div>
@@ -86,9 +85,10 @@
<script src="./chat_connection.js"></script>
<script src="./chat_send_msg.js"></script>
<script src="./chat_add_msg.js"></script>
<script src="./chat_create_room.js"></script>
<script src="./event_updatemsg.js"></script>
<script src="./chat_update_room.js"></script>
<script src="./event_updaterooms.js"></script>
</body>
</html>

3
tests_hugo/chat_node/chat_client/chat_add_room.js Normal file
View File

@@ -0,0 +1,3 @@
//const add_room = (rooms, newroom) => {
//
//};

5
tests_hugo/chat_node/chat_client/chat_create_room.js Normal file
View File

@@ -0,0 +1,5 @@
let create_room = () => {
let room_name = prompt("room name ?");
socket.emit('createroom', room_name);
};

4
tests_hugo/chat_node/chat_client/chat_update_room.js
View File

@@ -1,4 +0,0 @@
//socket.on('updateroom', (from, data) => {
// add_new_message(from, data);
//});

30
tests_hugo/chat_node/chat_client/event_updaterooms.js Normal file
View File

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

18
tests_hugo/chat_node/chat_client/style/action_board.css Normal file
View File

@@ -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
*/

11
tests_hugo/chat_node/chat_client/style/chat.css
View File

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

2
tests_hugo/chat_node/chat_client/style/msg_thread.css
View File

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

4
tests_hugo/chat_node/chat_server/event_adduser.js
View File

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

9
tests_hugo/chat_node/chat_server/event_createroom.js Normal file
View File

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

16
tests_hugo/chat_node/chat_server/server.js
View File

@@ -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){