slawk0/web-chat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added CSS and JWT token age is now 30 days

Browse Source
This commit is contained in:
slawk0
2024-08-25 18:09:59 +02:00
parent c4e355dee6
commit ead833b5dd
6 changed files with 91 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/js/chat.js
View File

@@ -7,7 +7,7 @@ const logoutButton = document.getElementById('logout');
let currentRecipient = null; let currentRecipient = null;
window.onload = function() { window.onload = () => {
document.getElementById('recipient').focus(); document.getElementById('recipient').focus();
} }
@@ -32,6 +32,7 @@ async function getToken() {
const response = await fetch('/auth/token'); const response = await fetch('/auth/token');
if (!response.ok) { if (!response.ok) {
console.log('Network response was not ok'); console.log('Network response was not ok');
return null;
} }
return await response.text(); return await response.text();
} catch (error) { } catch (error) {

4
frontend/js/login.js
View File

@@ -1,3 +1,7 @@
window.onload = () => {
document.getElementById('username').focus();
}
function showPasswd() { function showPasswd() {
let x = document.getElementById("password"); let x = document.getElementById("password");
if(x.type == "password"){ if(x.type == "password"){

4
frontend/js/signup.js
View File

@@ -1,3 +1,7 @@
window.onload = () => {
document.getElementById('username').focus();
}
function showPasswd() { function showPasswd() {
let x = document.getElementById("password"); let x = document.getElementById("password");
let y = document.getElementById("sPassword"); let y = document.getElementById("sPassword");

15
frontend/routes/chat.html
View File

@@ -3,20 +3,7 @@
<head> <head>
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Chat</title> <title>Chat</title>
<style> <link rel="stylesheet" href="static/stylesheet/chat.css">
body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
#form, #recipientForm { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
#form { position: fixed; bottom: 0; left: 0; right: 0; }
#recipientForm { position: fixed; top: 0; left: 0; right: 0; }
#input, #recipient { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
#input:focus, #recipient:focus { outline: none; }
#form > button, #recipientForm > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
#messages { list-style-type: none; margin: 3rem 0; padding: 0; }
#messages > li { padding: 0.5rem 1rem; }
#messages > li:nth-child(odd) { background: #efefef; }
</style>
</head> </head>
<body> <body>
<form id="recipientForm"> <form id="recipientForm">

73
frontend/stylesheet/chat.css Normal file
View File

@@ -0,0 +1,73 @@
body {
margin: 0;
padding-bottom: 3rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: #f9f9f9;
color: #333;
}
#form, #recipientForm {
background: rgba(255, 255, 255, 0.9);
padding: 0.5rem;
display: flex;
align-items: center;
box-sizing: border-box;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
z-index: 1000;
}
#form {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
#recipientForm {
position: fixed;
top: 0;
left: 0;
right: 0;
}
#input, #recipient {
border: 1px solid #ddd;
padding: 0.5rem 1rem;
flex-grow: 1;
border-radius: 20px;
margin-right: 0.5rem;
font-size: 1rem;
transition: border-color 0.3s ease;
}
#input:focus, #recipient:focus {
outline: none;
border-color: #007bff;
}
#form > button, #recipientForm > button {
background: #007bff;
border: none;
padding: 0.5rem 1rem;
margin: 0.25rem;
border-radius: 20px;
color: #fff;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s ease;
}
#form > button:hover, #recipientForm > button:hover {
background-color: #0056b3;
}
#logout {
background-color: #dc3545;
}
#logout:hover {
background-color: #c82333;
}
#messages

12
index.js
View File

@@ -161,11 +161,16 @@ async function loginUser(req, res) {
if (result.rows.length > 0) { if (result.rows.length > 0) {
// Compare password // Compare password
const match = await bcrypt.compare(password, result.rows[0].password); const match = await bcrypt.compare(password, result.rows[0].password);
if (match) { if (!match) {
res.send('Incorrect Username or Password!');
}
const token = jwt.sign({ username }, jwtSecret, { const token = jwt.sign({ username }, jwtSecret, {
expiresIn: '30d' // token expires in 30 days expiresIn: '30d' // token expires in 30 days
}); });
res.cookie('token', token); res.cookie('token', token, {
httpOnly: true,
maxAge: 30 * 24 * 60 * 60 * 1000 // 30 days
});
req.session.loggedin = true; req.session.loggedin = true;
req.session.username = username; req.session.username = username;
res.send(` res.send(`
@@ -177,9 +182,6 @@ async function loginUser(req, res) {
}, 1500); }, 1500);
</script> </script>
`); `);
} else {
res.send('Incorrect Username or Password!');
}
} else { } else {
res.send('Incorrect Username or Password!'); res.send('Incorrect Username or Password!');
} }