Better login system + view links as a real link

index.js

@@ -4,14 +4,34 @@ const http = require('http');
 const server = http.createServer(app);
 const { Server } = require("socket.io");
 const io = new Server(server);
+const session = require('express-session');
+
 app.set('view engine', 'ejs');
+app.use(express.urlencoded({ extended: false }));
+app.use(session({
+  secret: 'put-a-really-secret-key-here',
+  resave: false,
+  saveUninitialized: true
+}));
 
 app.get('/', (req, res) => {
-    res.render('index');
+    res.redirect('/login');
+});
+
+app.get('/login', (req, res) => {
+    res.render('login');
+});
+
+app.post('/login', (req, res) => {
+    req.session.username = req.body.username;
+    res.redirect('/chat');
 });
 
-app.get('/chat/:username', (req, res) => {
-    res.render('chat', { username: req.params.username });
+app.get('/chat', (req, res) => {
+    if (req.session.username == null) {
+        res.redirect('/login');
+    }
+    res.render('chat', { username: req.session.username });
 });
 
 app.use(express.static('static'))

package.json

@@ -5,6 +5,7 @@
     "dependencies": {
         "ejs": "^3.1.8",
         "express": "^4.18.1",
+        "express-session": "^1.17.3",
         "mongodb": "^4.7.0",
         "socket.io": "^4.5.1"
     }

static/script/script.js

@@ -13,6 +13,7 @@ function gotMessage(msg, id) {
     username.textContent = id;
     username.className = "username";
     message.textContent = msg;
+    message.innerHTML = message.innerHTML.replace(/(\b(https?|ftp|file):\/\/([-A-Z0-9+&@#%?=~_|!:,.;]*)[-A-Z0-9+&@#%?\/=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig, "<a href='$1' target='_blank'>$1</a>");
     message.className = "message";
     row.appendChild(username);
     row.appendChild(message);

views/index.ejs → views/login.ejs

@@ -20,8 +20,8 @@
             </tr>
         </tbody>
     </table>
-    <form id="form" action="">
-        <input id="input" autocomplete="off" /><button>Enter</button>
+    <form id="form" method="post">
+        <input id="input" autocomplete="off" name="username"/><button>Enter</button>
     </form>
 </body>