From 49aa6731df52de67c75c473489296e13e580427d Mon Sep 17 00:00:00 2001
From: adb <info@adb.sh>
Date: Sat, 7 Nov 2020 20:31:55 +0100
Subject: [PATCH 1/4] login

---
 api.js                        |  7 +++++++
 src/components/newMessage.vue |  4 ++--
 src/main.js                   | 12 ++++++++++++
 src/views/login.vue           | 14 +++++++++++---
 4 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/api.js b/api.js
index a001add..8321bf9 100644
--- a/api.js
+++ b/api.js
@@ -21,12 +21,19 @@ const wss = new ws.Server({
 });
 
 //WS handler
+let user = [];
 wss.on('connection', (ws, req) => {
     console.log(`${req.socket.remoteAddress} connected`)
     ws.on('message', msgJSON => {
         let msg = JSON.parse(msgJSON)
         console.log(`${req.socket.remoteAddress} => ${msgJSON}`)
         if (msg.type === 'message') wss.clients.forEach(client => client.send(msgJSON))
+        else if (msg.type === 'login' && msg.content.user !== ""){
+            user.push(msg.content.user)
+            ws.send('{"type":"route","path":"/chat"}')
+            let msg = {type: "room", name: "open chat", user: user}
+            ws.send(JSON.stringify(msg))
+        }
     })
     let msg = {
         type: "info",
diff --git a/src/components/newMessage.vue b/src/components/newMessage.vue
index 74f91bb..c1800a0 100644
--- a/src/components/newMessage.vue
+++ b/src/components/newMessage.vue
@@ -9,8 +9,8 @@
 </template>
 
 <script>
-import icon from './icon.vue';
-import main from '../main.js';
+import icon from '@/components/icon.vue';
+import main from '@/main.js';
 
 export default {
   name: "newMessage",
diff --git a/src/main.js b/src/main.js
index a49b5c3..3c39dc8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -38,6 +38,14 @@ export default {
   mounted() {
     sendMessage()
   },
+  data(){
+    return {
+      roomInfo: {
+        name: "open chat",
+        user: []
+      }
+    }
+  },
   methods: {
     sendMessage(message){
       let msg = {
@@ -76,6 +84,10 @@ socket.onmessage = (e) => {
   console.log(`data received => ${e.data}`)
   let msg = JSON.parse(e.data)
   if (msg.type === 'error') show_error(msg.content)
+  else if (msg.type === 'route') router.push({path: msg.path})
+  else if (msg.type === 'room'){
+    this.roomInfo.user = msg.user
+  }
   else if (msg.type === 'message'){
     //just for now, ik it's dirty
     element('messages').innerHTML +=
diff --git a/src/views/login.vue b/src/views/login.vue
index c216853..7cd978b 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -5,23 +5,31 @@
       <label for="longurl-input"></label>
       <input v-model="session.content.user" class="input" id="longurl-input" type="text" autocomplete="off" maxlength="20" placeholder="chose nickname">
     </div>
-    <input type="hidden" value="search" name="login">
-    <textbtn text="login" />
+    <textbtn v-on:click.native="login()" text="login" />
   </div>
 </template>
 
 <script>
 import textbtn from '@/components/textbtn';
+import main from "@/main";
 
 export default {
   name: "login.vue",
   components: {
     textbtn
   },
+  methods: {
+    login() {
+      if (this.session.content.user !== "") {
+        this.session.time = Date.now()
+        main.methods.sendWebSocket(this.session)
+      }
+    }
+  },
   data(){
     return {
       session: {
-        type: "session",
+        type: "login",
         time: Date.now(),
         content: {
           user: ""

From e86f0635c13c652fd2e479b5d09ab11516e8f17c Mon Sep 17 00:00:00 2001
From: adb <info@adb.sh>
Date: Sun, 8 Nov 2020 14:35:10 +0100
Subject: [PATCH 2/4] login backend

---
 api.js                       | 36 +++++++++++++++++++++++++-----------
 src/components/topBanner.vue |  4 +++-
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/api.js b/api.js
index 8321bf9..59f8f9d 100644
--- a/api.js
+++ b/api.js
@@ -23,22 +23,36 @@ const wss = new ws.Server({
 //WS handler
 let user = [];
 wss.on('connection', (ws, req) => {
+    let thisuser = ""
     console.log(`${req.socket.remoteAddress} connected`)
     ws.on('message', msgJSON => {
         let msg = JSON.parse(msgJSON)
         console.log(`${req.socket.remoteAddress} => ${msgJSON}`)
-        if (msg.type === 'message') wss.clients.forEach(client => client.send(msgJSON))
+        if (msg.type === 'message')
+            if (thisuser === ""){
+                ws.send(JSON.stringify({type: "error", content: "please login before writing"}))
+                ws.send('{"type":"route","path":"/login"}')
+            }else if (msg.content.text === "")
+                ws.send(JSON.stringify({type: "error", content: "your message was empty"}))
+            else{
+                msg.content.user = thisuser
+                wss.clients.forEach(client => {
+                    if (client !== ws) client.send(JSON.stringify(msg))})
+            }
         else if (msg.type === 'login' && msg.content.user !== ""){
-            user.push(msg.content.user)
-            ws.send('{"type":"route","path":"/chat"}')
-            let msg = {type: "room", name: "open chat", user: user}
-            ws.send(JSON.stringify(msg))
+            if (msg.content.user >= 20) ws.send(JSON.stringify({type: "error", content: "username is too long"}))
+            else if (function(){
+                for (let i = 0; i < user.length; i++) if (user[i] === msg.content.user) return true
+                return false
+            }() === true) ws.send(JSON.stringify({type: "error", content: "username already exist"}))
+            else{
+                thisuser = msg.content.user
+                user.push(msg.content.user)
+                ws.send('{"type":"route","path":"/chat"}')
+                wss.clients.forEach(client =>
+                    client.send(JSON.stringify({type: "room", name: "open chat", user: user})))
+            }
         }
     })
-    let msg = {
-        type: "info",
-        time: Date.now(),
-        content: "connected"
-    }
-    ws.send(JSON.stringify(msg))
+    ws.send(JSON.stringify({type: "info", time: Date.now(), content: "connected"}))
 })
\ No newline at end of file
diff --git a/src/components/topBanner.vue b/src/components/topBanner.vue
index ed151e4..67bbe1f 100644
--- a/src/components/topBanner.vue
+++ b/src/components/topBanner.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="topBanner">
     <div>
-      <icon class="smallIcon" id="icon-arrow" ic="./sym/arrow_back-24px.svg" />
+      <router-link to="login">
+        <icon class="smallIcon" id="icon-arrow" ic="./sym/arrow_back-24px.svg" />
+      </router-link>
       <icon class="smallIcon" id="picTop" ic="./sym/supervisor_account-24px.svg" />
       <div id="container">
         <div id="chatName">{{roomInfo.name}}</div>

From fd4fff2a7899e8f04727802cb4a78236c9c4e09f Mon Sep 17 00:00:00 2001
From: adb <info@adb.sh>
Date: Sun, 8 Nov 2020 15:50:18 +0100
Subject: [PATCH 3/4] first working chat version

---
 api.js                        |  1 +
 src/components/newMessage.vue | 18 +++++++++++++++---
 src/main.js                   |  6 ++++--
 src/views/chat.vue            | 24 +++---------------------
 4 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/api.js b/api.js
index 59f8f9d..52bc29c 100644
--- a/api.js
+++ b/api.js
@@ -36,6 +36,7 @@ wss.on('connection', (ws, req) => {
                 ws.send(JSON.stringify({type: "error", content: "your message was empty"}))
             else{
                 msg.content.user = thisuser
+                msg.content.text = msg.content.text.replace(/</g, "&lt").replace(/>/g, "&gt").replace(/\n/g, "<br>")
                 wss.clients.forEach(client => {
                     if (client !== ws) client.send(JSON.stringify(msg))})
             }
diff --git a/src/components/newMessage.vue b/src/components/newMessage.vue
index c1800a0..bbf865a 100644
--- a/src/components/newMessage.vue
+++ b/src/components/newMessage.vue
@@ -22,8 +22,21 @@ export default {
       if (this.msg.content.text !== "") {
         this.msg.time = Date.now()
         main.methods.sendWebSocket(this.msg)
+        //just for now, ik it's dirty
+        document.getElementById('messages').innerHTML +=
+            `<div class="messageContainer" data-v-032da2b2="">
+            <div class="message" data-v-032da2b2="">
+                ${this.msg.content.text
+                .replace(/</g, "&lt")
+                .replace(/>/g, "&gt")
+                .replace(/\n/g, "<br>")}
+            </div>
+        </div>`;
         this.msg.content.text = ""
-        this.resizeMessageBanner()
+        document.getElementById("messagesContainer").style.height = "calc(100% - 7rem)"
+        document.getElementById("newMessageInput").style.height = "1.25rem"
+        let msgContainer = document.getElementById("messagesContainer")
+        msgContainer.scrollTo(0, msgContainer.scrollHeight)
       }
     },
     resizeMessageBanner(){
@@ -33,7 +46,6 @@ export default {
       let msgContainer = document.getElementById("messagesContainer")
       msgContainer.style.height
           = `calc(100% - ${id.parentElement.clientHeight}px - 3rem)`
-      //msgContainer.scrollTo(0, msgContainer.scrollHeight)
     }
   },
   data(){
@@ -67,7 +79,7 @@ export default {
     margin-bottom: 1rem;
     left: 2rem;
     min-height: 1.25rem;
-    max-height: 14rem;
+    max-height: 10rem;
     width: calc(100% - 7rem);
     height: 1.25rem;
     background-color: #fff0;
diff --git a/src/main.js b/src/main.js
index 3c39dc8..4e4f484 100644
--- a/src/main.js
+++ b/src/main.js
@@ -91,11 +91,13 @@ socket.onmessage = (e) => {
   else if (msg.type === 'message'){
     //just for now, ik it's dirty
     element('messages').innerHTML +=
-        `<div class="messageContainer" data-v-032da2b2="">
-            <div class="message" data-v-032da2b2="">
+        `<div class="messageContainer" data-v-a1576e28="">
+            <div class="message" data-v-a1576e28="">
                 ${msg.content.text}
             </div>
         </div>`;
+    let msgContainer = document.getElementById("messagesContainer")
+    if (msgContainer.scrollHeight < msgContainer.scrollTop + 1000) msgContainer.scrollTo(0, msgContainer.scrollHeight)
   }
 }
 
diff --git a/src/views/chat.vue b/src/views/chat.vue
index 353a6f0..4f8e15d 100644
--- a/src/views/chat.vue
+++ b/src/views/chat.vue
@@ -2,27 +2,9 @@
   <div>
     <div ref="msgContainer" id="messagesContainer" class="messagesContainer">
       <div id="messages" class="messages">
-        <message msg="Hey :D" />
-        <message msg="Du bist blööööd xD" />
-        <messageReceive msg="Du auch" />
-        <message msg="lol" />
-        <messageReceive msg="Du bist voll blöd, ich hasse dich, warum tust du das?!" />
-        <message msg="Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                      Ut imperdiet vel risus tristique mollis. Proin aliquam felis non vehicula ornare.
-                      Fusce scelerisque pellentesque erat quis sollicitudin.
-                      Quisque aliquet, ligula ut volutpat vulputate, ligula lorem dictum velit, et aliquam sapien orci sed magna.
-                      Nam suscipit ex eget urna accumsan pulvinar. Pellentesque fringilla placerat feugiat.
-                      Aenean aliquam vestibulum metus. Nulla augue turpis, consectetur vitae quam ac, porttitor rhoncus nunc.
-                      Nullam non turpis consequat, placerat lectus nec, ornare orci.
-                      Fusce lorem tortor, viverra ac suscipit sit amet, scelerisque id eros.
-                      Suspendisse et ultricies elit, vitae pretium ipsum. Suspendisse vel ex in turpis pulvinar feugiat. "
-        />
-        <messageReceive msg="Du hast Pizza!" />
-        <message msg="und Kuchen :P" />
-        <message msg="und Kuchen :P" />
-        <message msg="und Kuchen :P" />
-        <message msg="und Kuchen :P" />
-        <message msg="und Kuchen :P" />
+        <p style="margin-left: 1rem; font-style: italic;">You entered the chat</p>
+        <message style="display: none;" />
+        <messageReceive style="display: none;" />
       </div>
     </div>
     <newMessage />

From 451b30c3f21409f015d4aa5c8ba1f5f2c854d6e5 Mon Sep 17 00:00:00 2001
From: adb <info@adb.sh>
Date: Sun, 8 Nov 2020 23:36:13 +0100
Subject: [PATCH 4/4] dynamic loaded chat and PWA

---
 api.js                            | 19 ++++++++------
 public/index.html                 |  4 +++
 public/manifest.json              |  9 +++++++
 src/components/messageReceive.vue |  1 +
 src/components/newMessage.vue     | 14 +++-------
 src/components/topBanner.vue      | 12 ++++-----
 src/main.js                       | 43 +++++++++++++++++--------------
 src/views/chat.vue                | 20 +++++++++++---
 8 files changed, 73 insertions(+), 49 deletions(-)
 create mode 100644 public/manifest.json

diff --git a/api.js b/api.js
index 52bc29c..c18fd77 100644
--- a/api.js
+++ b/api.js
@@ -27,7 +27,7 @@ wss.on('connection', (ws, req) => {
     console.log(`${req.socket.remoteAddress} connected`)
     ws.on('message', msgJSON => {
         let msg = JSON.parse(msgJSON)
-        console.log(`${req.socket.remoteAddress} => ${msgJSON}`)
+        console.log(`${req.socket.remoteAddress} (${thisuser}) => ${msgJSON}`)
         if (msg.type === 'message')
             if (thisuser === ""){
                 ws.send(JSON.stringify({type: "error", content: "please login before writing"}))
@@ -37,23 +37,26 @@ wss.on('connection', (ws, req) => {
             else{
                 msg.content.user = thisuser
                 msg.content.text = msg.content.text.replace(/</g, "&lt").replace(/>/g, "&gt").replace(/\n/g, "<br>")
-                wss.clients.forEach(client => {
-                    if (client !== ws) client.send(JSON.stringify(msg))})
+                wss.clients.forEach(client => client.send(JSON.stringify(msg)))
             }
         else if (msg.type === 'login' && msg.content.user !== ""){
-            if (msg.content.user >= 20) ws.send(JSON.stringify({type: "error", content: "username is too long"}))
-            else if (function(){
-                for (let i = 0; i < user.length; i++) if (user[i] === msg.content.user) return true
-                return false
-            }() === true) ws.send(JSON.stringify({type: "error", content: "username already exist"}))
+            if (msg.content.user.length >= 20) ws.send(JSON.stringify({type: "error", content: "username is too long"}))
+            else if (msg.content.user === "you" || user.indexOf(msg.content.user) !== -1)
+                ws.send(JSON.stringify({type: "error", content: "username already exist"}))
             else{
                 thisuser = msg.content.user
                 user.push(msg.content.user)
                 ws.send('{"type":"route","path":"/chat"}')
+                ws.send(JSON.stringify({type: "info", username: thisuser}))
                 wss.clients.forEach(client =>
                     client.send(JSON.stringify({type: "room", name: "open chat", user: user})))
             }
         }
     })
+    ws.on('close', () => {
+        user.splice(user.indexOf(thisuser), 1);
+        console.log(`${req.socket.remoteAddress} (${thisuser}) closed`)
+    })
+
     ws.send(JSON.stringify({type: "info", time: Date.now(), content: "connected"}))
 })
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 212c8ea..61a5cfe 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,6 +3,10 @@
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <!-- PWA support -->
+    <link rel="manifest" href="./manifest.json"/>
+    <meta name="theme-color" content="#2F3BA2"/>
+    <meta name="description" content="open chat"/>
     <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0'/>
     <link rel="icon" href="<%= BASE_URL %>favicon.ico"/>
     <title><%= htmlWebpackPlugin.options.title %></title>
diff --git a/public/manifest.json b/public/manifest.json
new file mode 100644
index 0000000..1aa6a1e
--- /dev/null
+++ b/public/manifest.json
@@ -0,0 +1,9 @@
+{
+  "name": "open chat",
+  "short_name": "open chat",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#14181b",
+  "theme_color": "#00BCD4",
+  "orientation": "portrait-primary"
+}
\ No newline at end of file
diff --git a/src/components/messageReceive.vue b/src/components/messageReceive.vue
index 5c4e5ea..2a1b2ff 100644
--- a/src/components/messageReceive.vue
+++ b/src/components/messageReceive.vue
@@ -32,5 +32,6 @@ export default {
     background-color: #42b983;
     border-radius: 1rem 1rem 1rem 0;
     text-align: left;
+    word-break: break-word;
   }
 </style>
\ No newline at end of file
diff --git a/src/components/newMessage.vue b/src/components/newMessage.vue
index bbf865a..2645085 100644
--- a/src/components/newMessage.vue
+++ b/src/components/newMessage.vue
@@ -22,16 +22,6 @@ export default {
       if (this.msg.content.text !== "") {
         this.msg.time = Date.now()
         main.methods.sendWebSocket(this.msg)
-        //just for now, ik it's dirty
-        document.getElementById('messages').innerHTML +=
-            `<div class="messageContainer" data-v-032da2b2="">
-            <div class="message" data-v-032da2b2="">
-                ${this.msg.content.text
-                .replace(/</g, "&lt")
-                .replace(/>/g, "&gt")
-                .replace(/\n/g, "<br>")}
-            </div>
-        </div>`;
         this.msg.content.text = ""
         document.getElementById("messagesContainer").style.height = "calc(100% - 7rem)"
         document.getElementById("newMessageInput").style.height = "1.25rem"
@@ -54,9 +44,11 @@ export default {
         type: "message",
         time: Date.now(),
         content: {
+          user: "you",
           text: ""
         }
-      }
+      },
+      chatroom: main.data().chatroom
     }
   }
 }
diff --git a/src/components/topBanner.vue b/src/components/topBanner.vue
index 67bbe1f..6b7a563 100644
--- a/src/components/topBanner.vue
+++ b/src/components/topBanner.vue
@@ -6,8 +6,8 @@
       </router-link>
       <icon class="smallIcon" id="picTop" ic="./sym/supervisor_account-24px.svg" />
       <div id="container">
-        <div id="chatName">{{roomInfo.name}}</div>
-        <div id="users">{{roomInfo.user.length}} members</div>
+        <div id="chatName">{{chatroom.name}}</div>
+        <div id="users">{{chatroom.user.length}} members</div>
       </div>
       <icon class="smallIcon" id="icon-menu" ic="./sym/menu-24px.svg" />
     </div>
@@ -15,6 +15,7 @@
 </template>
 <script>
 import icon from '@/components/icon.vue';
+import main from '@/main.js';
 
 export default {
   name: "topBanner",
@@ -23,10 +24,7 @@ export default {
   },
   data(){
     return {
-      roomInfo: {
-        name: "open chat",
-        user: []
-      }
+      chatroom: main.data().chatroom
     }
   }
 }
@@ -37,7 +35,7 @@ export default {
   width: 100%;
   height: 3rem;
   background-color: #1d1d1d;
-  box-shadow: 0 3px 10px #111;
+  box-shadow: 0 0px 5px #111;
 }
 .smallIcon{
   top: 0.25rem;
diff --git a/src/main.js b/src/main.js
index 4e4f484..e56184a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -27,12 +27,12 @@ const router = new VueRouter({
   ]
 })
 
-new Vue({
-  el: '#app',
-  router,
-  template: '<App/>',
-  components: {App}
-}).$mount('#app')
+let chatroom = {
+  name: "open chat",
+  user: [],
+  username: "you",
+  messages: []
+};
 
 export default {
   mounted() {
@@ -40,10 +40,7 @@ export default {
   },
   data(){
     return {
-      roomInfo: {
-        name: "open chat",
-        user: []
-      }
+      chatroom: chatroom
     }
   },
   methods: {
@@ -63,9 +60,22 @@ export default {
   }
 }
 
+new Vue({
+  el: '#app',
+  router,
+  template: '<App/>',
+  components: {App},
+  data(){
+    return {
+      chatroom: chatroom
+    }
+  }
+}).$mount('#app')
+
 const wsurl = 'ws://127.0.0.1:8090'
-const socket = new WebSocket(wsurl)
+//const wsurl = 'wss://chat.adb.sh:8080'
 
+const socket = new WebSocket(wsurl)
 function element(id){ return document.getElementById(id)}
 
 socket.onopen = () => {
@@ -86,16 +96,11 @@ socket.onmessage = (e) => {
   if (msg.type === 'error') show_error(msg.content)
   else if (msg.type === 'route') router.push({path: msg.path})
   else if (msg.type === 'room'){
-    this.roomInfo.user = msg.user
+    chatroom.user = msg.user
   }
+  else if (msg.type === "info") chatroom.username = msg.username
   else if (msg.type === 'message'){
-    //just for now, ik it's dirty
-    element('messages').innerHTML +=
-        `<div class="messageContainer" data-v-a1576e28="">
-            <div class="message" data-v-a1576e28="">
-                ${msg.content.text}
-            </div>
-        </div>`;
+    chatroom.messages.push(msg)
     let msgContainer = document.getElementById("messagesContainer")
     if (msgContainer.scrollHeight < msgContainer.scrollTop + 1000) msgContainer.scrollTo(0, msgContainer.scrollHeight)
   }
diff --git a/src/views/chat.vue b/src/views/chat.vue
index 4f8e15d..304e35f 100644
--- a/src/views/chat.vue
+++ b/src/views/chat.vue
@@ -2,9 +2,15 @@
   <div>
     <div ref="msgContainer" id="messagesContainer" class="messagesContainer">
       <div id="messages" class="messages">
-        <p style="margin-left: 1rem; font-style: italic;">You entered the chat</p>
-        <message style="display: none;" />
-        <messageReceive style="display: none;" />
+        <p style="text-align: center; font-style: italic;">you entered the chat</p>
+        <div v-for="(message, i) in chatroom.messages" :key="message.time">
+          <div v-if="message.content.user !== chatroom.username && function(){
+               return i===0 || chatroom.messages[i-1].content.user!==message.content.user;}()"
+               style="margin-left: 2rem; margin-top: 1rem">{{message.content.user}}
+          </div>
+          <messageReceive v-if="message.content.user !== chatroom.username" :msg=message.content.text />
+          <message v-if="message.content.user === chatroom.username" :msg=message.content.text />
+        </div>
       </div>
     </div>
     <newMessage />
@@ -16,7 +22,8 @@
 import message from '@/components/message.vue';
 import messageReceive from '@/components/messageReceive.vue';
 import newMessage from '@/components/newMessage.vue';
-import topBanner from "@/components/topBanner";
+import topBanner from '@/components/topBanner.vue';
+import main from '@/main.js';
 
 export default {
   name: 'chat',
@@ -25,6 +32,11 @@ export default {
     messageReceive,
     newMessage,
     topBanner
+  },
+  data(){
+    return {
+      chatroom: main.data().chatroom
+    }
   }
 }
 </script>