add: Message sending

public/css/main.css

@@ -185,7 +185,7 @@ body {
 
 .empty-label {
     width: 100%;
-    margin: 16px 0px;
+    margin-top: 16px;
     text-align: center;
     font-size: 16pt;
     font-weight: 500;
@@ -237,17 +237,17 @@ body {
     color: #555;
 }
 
-.add-form {
+.input-form {
     display: flex;
     flex-direction: row;
 }
 
-.add-form .text-input {
+.input-form .text-input {
     margin: 16px 0px 16px 16px;
     height: 56px;
 }
 
-.add-form .button {
+.input-form .button {
     margin: 16px;
     width: 84px;
     height: 56px;
@@ -377,12 +377,12 @@ body {
         font-size: 12pt;
     }
 
-    .add-form .text-input {
+    .input-form .text-input {
         margin: 12px 0px 12px 12px;
         height: 48px;
     }
     
-    .add-form .button {
+    .input-form .button {
         margin: 12px;
         width: 72px;
         height: 48px;
@@ -480,12 +480,12 @@ body {
         font-size: 11pt;
     }
 
-    .add-form .text-input {
+    .input-form .text-input {
         margin: 10px 0px 10px 10px;
         height: 40px;
     }
     
-    .add-form .button {
+    .input-form .button {
         margin: 10px;
         width: 60px;
         height: 40px;
@@ -583,12 +583,12 @@ body {
         font-size: 10pt;
     }
 
-    .add-form .text-input {
+    .input-form .text-input {
         margin: 8px 0px 8px 8px;
         height: 32px;
     }
     
-    .add-form .button {
+    .input-form .button {
         margin: 8px;
         width: 48px;
         height: 32px;

src/routes/chat.js

@@ -43,4 +43,25 @@ router.get("/chat/:chat_id", async (req, res) => {
     }
 });
 
+router.post("/chat/:chat_id", async (req, res) => {
+    if (req.user) {
+        try {
+            const user = await db.one("SELECT id FROM users WHERE username = $1", [ req.params.chat_id ]);
+            const chat = await db.one("SELECT id FROM chats WHERE (user1_id = $1 AND user2_id = $2) OR (user1_id = $2 AND user2_id = $1)", [ req.user.id, user?.id ]);
+            await db.none("INSERT INTO messages (chat_id, user_id, text, timestamp) VALUES ($1, $2, $3, $4)", [
+                chat?.id,
+                req.user.id,
+                req.body.text,
+                new Date().toISOString()
+            ]);
+        } catch (err) {
+            console.log(err);
+        } finally {
+            res.redirect(`/chat/${req.params.chat_id}`);
+        }
+    } else {
+        res.redirect("/login");
+    }
+});
+
 module.exports = router;

src/views/add.ejs

@@ -6,7 +6,7 @@
         <span class="chat-title">Add SvinChat</span>
     </div>
     <div class="chat-list">
-        <form method="POST" action="/add" class="add-form">
+        <form method="POST" action="/add" class="input-form">
             <input type="username" name="username" placeholder="Enter username..." class="text-input" required />
             <input type="submit" value="Add" class="button" />
         </form>

src/views/chat.ejs

@@ -17,6 +17,10 @@
             </div>
         <% }); %>
     </div>
+    <form method="POST" action="/chat/<%- title %>" class="input-form">
+        <input type="text" name="text" placeholder="Enter message..." class="text-input" required />
+        <input type="submit" value="Send" class="button" />
+    </form>
 </div>
 <script>
     var timestamps = document.getElementsByClassName("message-datetime")