From c5125c8fafaf1f05fa18f78d4a37ec81ac9125fd Mon Sep 17 00:00:00 2001 From: slawk0 Date: Mon, 26 Aug 2024 00:00:20 +0200 Subject: [PATCH] dark mode, messages are not duplicating, display sender username --- backend/socket.js | 61 ++++++++++++++---------------------- frontend/js/chat.js | 8 ++++- frontend/js/login.js | 4 +++ frontend/stylesheet/chat.css | 53 ++++++++++++++++++++----------- 4 files changed, 69 insertions(+), 57 deletions(-) diff --git a/backend/socket.js b/backend/socket.js index 4778dc8..9da3904 100644 --- a/backend/socket.js +++ b/backend/socket.js @@ -51,6 +51,11 @@ function initializeSocket(server) { }); io.on('connection', (socket) => { + createTables() + .catch((err) => { + console.error('Error creating tables:', err); + }); + if (!socket.user) { console.log('User not authenticated'); socket.disconnect(); @@ -62,7 +67,6 @@ function initializeSocket(server) { // Join a room with the user's username socket.join(username); - //loadInitialMessages(socket); // chat message event socket.on('chat message', async (msgData) => { @@ -94,23 +98,23 @@ function initializeSocket(server) { console.error('Error fetching inserted message:', err); } - - if (!socket.recovered) { - try { - const query = 'SELECT id, content, username, recipient FROM messages WHERE id > $1 ORDER BY id ASC'; - const values = [socket.handshake.auth.serverOffset || 0]; - const result = await db.query(query, values); - //const newMessage = result.rows[0]; - for (const row of result.rows) { - if (row.username === username || row.recipient === username) { - io.to(username).to(recipient).emit('chat message', { username: row.username, recipient: row.recipient, content: row.content }); - - } - } - } catch (e) { - console.error('Error retrieving messages:', e); - } - } + // i think this is not needed? (it cause duplicate messages with loading messages history) + // if (!socket.recovered) { + // try { + // const query = 'SELECT id, content, username, recipient FROM messages WHERE id > $1 ORDER BY id ASC'; + // const values = [socket.handshake.auth.serverOffset || 0]; + // const result = await db.query(query, values); + // //const newMessage = result.rows[0]; + // for (const row of result.rows) { + // if (row.username === username || row.recipient === username) { + // io.to(username).to(recipient).emit('chat message', { username: row.username, recipient: row.recipient, content: row.content }); + // + // } + // } + // } catch (e) { + // console.error('Error retrieving messages:', e); + // } + // } }); socket.on('get messages', async (recipient) => { const username = socket.user.username; @@ -127,6 +131,8 @@ function initializeSocket(server) { //const { username: sender, recipient: receiver, content: content, id: id } = result.rows; console.log('Sending messages:', result.rows); socket.emit('messages history', result.rows); + } else { + io.emit('no messages', ); } } catch (e) { console.error('Error retrieving messages:', e); @@ -142,23 +148,4 @@ function initializeSocket(server) { return io; } -async function loadInitialMessages(socket) { - const username = socket.user.username; - try { - const query = 'SELECT id, content, username, recipient FROM messages WHERE username = $1 OR recipient = $1 ORDER BY id DESC LIMIT 50'; - const result = await db.query(query, [username]); - - for (const row of result.rows.reverse()) { - socket.emit('chat message',row.username, row.recipient, row.content); - } - - // Set the server offset to the latest message id - if (result.rows.length > 0) { - socket.handshake.auth.serverOffset = result.rows[result.rows.length - 1].id; - } - } catch (e) { - console.error('Error retrieving initial messages:', e); - } -} - module.exports = { initializeSocket }; \ No newline at end of file diff --git a/frontend/js/chat.js b/frontend/js/chat.js index eae0fd6..c0c24b4 100644 --- a/frontend/js/chat.js +++ b/frontend/js/chat.js @@ -4,13 +4,14 @@ const recipientForm = document.getElementById('recipientForm'); const recipientInput = document.getElementById('recipient'); const messages = document.getElementById('messages'); const logoutButton = document.getElementById('logout'); - +document.getElementById('input').placeholder = `Send message as: ${localStorage.getItem('username')}`; let currentRecipient = null; window.onload = () => { document.getElementById('recipient').focus(); } + logoutButton.onclick = logout; function logout() { fetch('/auth/logout', { @@ -19,6 +20,7 @@ function logout() { }) .then(response => { if (response.ok) { + localStorage.clear(); window.location.href = '/login'; } }) @@ -82,6 +84,10 @@ async function initializeSocket() { window.scrollTo(0, document.body.scrollHeight); } }); + socket.on('no messages', () => { + console.log('No previous messages found'); + messages.innerHTML = '

No messages found

'; + }); recipientForm.addEventListener('submit', (e) => { e.preventDefault(); if (recipientInput.value) { diff --git a/frontend/js/login.js b/frontend/js/login.js index 2ec34bc..837fb2b 100644 --- a/frontend/js/login.js +++ b/frontend/js/login.js @@ -13,3 +13,7 @@ function showPasswd() { } } +document.querySelector('form').addEventListener('submit', () => { + const username = document.getElementById('username').value; + localStorage.setItem('username', username); +}) diff --git a/frontend/stylesheet/chat.css b/frontend/stylesheet/chat.css index e4c612a..de7bad8 100644 --- a/frontend/stylesheet/chat.css +++ b/frontend/stylesheet/chat.css @@ -1,24 +1,27 @@ +/* CSS BY chatGPT ( */ body, html, form, button, input { font-family: "Lucida Console", "Lucida Sans Typewriter", monaco, "Bitstream Vera Sans Mono", monospace; } #input::placeholder, #recipient::placeholder { font-family: "Lucida Console", "Lucida Sans Typewriter", monaco, "Bitstream Vera Sans Mono", monospace; + color: #999; } + body { margin: 0; padding-bottom: 3rem; - background-color: #f9f9f9; - color: #333; + background-color: #121212; + color: #e0e0e0; } #form, #recipientForm { - background: rgba(255, 255, 255, 0.9); + background: rgba(30, 30, 30, 0.95); padding: 0.5rem; display: flex; align-items: center; box-sizing: border-box; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); z-index: 1000; } @@ -38,60 +41,64 @@ body { } #input, #recipient { - border: 1px solid #ddd; + border: 1px solid #555; padding: 0.5rem 1rem; flex-grow: 1; border-radius: 20px; margin-right: 0.5rem; font-size: 1rem; transition: border-color 0.3s ease; + background-color: #1f1f1f; + color: #e0e0e0; } #input:focus, #recipient:focus { outline: none; - border-color: #007bff; + border-color: #1a73e8; } button { - font-family: "Lucida Console" ; - background-color: #349237; - color: white; + font-family: "Lucida Console"; + background-color: #2c7a2e; + color: #e0e0e0; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; - margin: 0 10px; /* Add margin to separate buttons */ + margin: 0 10px; } button:hover { - background-color: #45a049; + background-color: #368f39; } + #form #recipientForm { - background: #007bff; + background: #1a73e8; / border: none; padding: 0.5rem 1rem; margin: 0.25rem; border-radius: 20px; - color: #fff; + color: #e0e0e0; font-size: 1rem; cursor: pointer; transition: background-color 0.3s ease; } -#form #recipientForm { - background-color: #0056b3; +#form #recipientForm:hover { + background-color: #155bb5; } #logout { - background-color: #dc3545; + background-color: #d32f2f; } #logout:hover { - background-color: #c82333; + background-color: #b71c1c; } #messages { + font-weight: lighter; list-style-type: none; margin: 5rem 0 3rem 0; padding: 0; @@ -104,10 +111,18 @@ button:hover { padding: 0.75rem 1.5rem; margin: 0.5rem 0; border-radius: 20px; - background: #e9ecef; + background: #1e1e1e; max-width: 80%; + word-wrap: break-word; } #messages > li:nth-child(odd) { - background: #d4edda; + background: #2c7a2e; +} + + +p { + text-align: center; + font-size: 20px; + color: #e0e0e0; }