From 1b3bc22a6585688b7076797ec26ded6149f22ff3 Mon Sep 17 00:00:00 2001
From: Arne van Iterson <arne@arnweb.nl>
Date: Wed, 21 Aug 2019 22:07:24 +0200
Subject: [PATCH] Going to add the ARNweb look tomorrow

---
 index.html | 52 +++++++++++++++++++++++++++++++++-------------------
 index.js   | 16 ++++++++++------
 2 files changed, 43 insertions(+), 25 deletions(-)
diff --git a/index.html b/index.html
index 7270b28..6152702 100644
--- a/index.html
+++ b/index.html
@@ -2,18 +2,9 @@
 <html>
   <head>
     <title>Socket.IO chat</title>
-    <style>
-      * { margin: 0; padding: 0; box-sizing: border-box; }
-      body { font: 13px Helvetica, Arial; }
-      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
-      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
-      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
-      #messages { list-style-type: none; margin: 0; padding: 0; }
-      #messages li { padding: 5px 10px; }
-      #messages li:nth-child(odd) { background: #eee; }
-    </style>
     <script src="/socket.io/socket.io.js"></script>
     <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
+    <link rel="stylesheet" type="text/css" href="//use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
     <script>
         $(function () {
             // Create socket
@@ -30,24 +21,47 @@
             // Send data to server on form submit
             $('form').submit(function(e){
                 e.preventDefault();
-                socket.emit('message_send', $('#message').val());
-                $('#message').val('');
+                socket.emit('message_send', $('.input_container input[name="message"]').val());
+                $('.input_container input[name="message"]').val('');
                 return false;
               });
 
             // Receive messages from server
             socket.on('message_receive', function(msg){
-                $('#messages').append($('<li>').text(msg.username + ': ' + msg.message));
+                $('.message_container').append($('<span>').html(msg.username + ': ' + msg.message));
+                $('.message_container').append($('<br>'));
             });
         });
     </script>
   </head>
   <body>
-    <ul id="messages"></ul>
-    <form action="">
-      <input id="username" autocomplete="off" />
-      <input id="message" autocomplete="off" />
-      <button>Send</button>
-    </form>
+    <style>
+      div.chat_container {
+        border: 1px solid black;
+        width: 500px;
+      }
+      div.message_container {
+        border: 1px solid black;
+        height: 500px;
+        overflow: auto;
+      }
+      div.input_container {
+        border: 1px solid black;
+      }
+      div.input_container > form > input, div.input_container > button {
+        margin: 10px;
+      }
+    </style>
+    <div class="chat_container">
+      <div class="message_container">
+        <!-- JS will push messages here -->
+      </div>
+      <div class="input_container">
+        <form action="">
+          <input type="text" name="message"/>
+          <button type="submit"><i class="fas fa-paper-plane"></i> Send</button>
+        </form>
+      </div>
+    </div>
   </body>
 </html>
\ No newline at end of file
diff --git a/index.js b/index.js
index f984796..13859df 100644
--- a/index.js
+++ b/index.js
@@ -43,13 +43,17 @@ io.on('connection', function (socket) {
     // Handle messages
     socket.on('message_send', function (message) {
         // Build message data for clients
-        var msg = {
-            'username': socket.username,
-            'mailHash': socket.mailHash,
-            'message': message
+        if (message !== '') {
+            var msg = {
+                'username': socket.username,
+                'mailHash': socket.mailHash,
+                'message': message
+            }
+            // Send message to clients
+            io.emit('message_receive', msg);
+        } else {
+            socket.emit('message_receive', serverMsg(`Empty messages will not be sent.`));
         }
-        // Send message to clients
-        io.emit('message_receive', msg);
     });
 });
 
