chatInformation render bugfix

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "basic_messaging",
+  "name": "matrix-chat",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "matrix-js-sdk": "^9.1.0",
     "vue": "^2.6.11",
     "ws": "^7.3.1"
   },
@@ -17,6 +18,7 @@
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "babel-eslint": "^10.1.0",
+    "electron": "^11.0.1",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
     "vue-router": "^3.4.9",

public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "name": "open chat",
-  "short_name": "open chat",
+  "name": "matrix chat",
+  "short_name": "[chat]",
   "start_url": "/",
   "display": "standalone",
   "background_color": "#14181b",

src/App.vue

@@ -22,6 +22,21 @@ export default {
 body{
   margin: 0;
 }
+*{
+  scrollbar-width: thin;
+  scrollbar-color: #42b983 #2220;
+}
+*::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+*::-webkit-scrollbar-track {
+  background: none;
+}
+*::-webkit-scrollbar-thumb {
+  background-color: #42b983;
+  border-radius: 0.25rem;
+}
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   position: absolute;
@@ -33,17 +48,17 @@ body{
 .content{
   position: absolute;
   top: 0;
-  left: calc(50% - 25rem);
+  left: calc(50% - 35rem);
   padding: 0;
   min-height: calc(100%);
-  width: 50rem;
+  width: 70rem;
   min-width: 18rem;
   background-color: #313131;
   box-shadow: 3px 3px 10px #111;
 }
-@media (max-width: 55rem){
+@media (max-width: 75rem){
   .content{
-    width: calc(100%);
+    width: 100%;
     left: 0;
   }
 }

src/components/chatInformation.vue

@@ -1,41 +1,40 @@
 <template>
   <div id="chatInformation">
-    <h1>open chat</h1>
-    <icon class="closeBtn" onclick="this.parentNode.style.display = 'none'" ic="./sym/ic_close_white_24px.svg" />
     <div id="box">
+      <div class="scrollContainer">
         <div class="informationBox">
-      <div class="picBoxBig"><div class="placeholderBig"><p>{{chatroom.name.substr(0,2)}}</p></div></div>
+        <div class="picBoxBig"><div class="placeholderBig">{{room.name.substr(0,2)}}</div></div>
         <div class="roomInformation">
-        <div class="roomName">{{chatroom.name}}</div>
-        <div class="users">{{chatroom.user.length}} members</div>
+          <div class="roomName">{{room.name}}</div>
+          <div class="users">{{room.members.length}} members</div>
         </div>
         </div>
-      <h2 v-if="chatroom.user.length !== 0">members</h2>
-      <div v-for="user in chatroom.user" :key="user">
-        <div class="contentBox">
-          <div class="picBox"><div class="picPlaceholder"><p>{{user.substr(0,2)}}</p></div></div>
+        <h2 v-if="room.members.length !== 0">members:</h2>
+        <div v-for="member in room.members.slice(0,20)" :key="member.sender" class="contentBox">
+          <!---<img v-if="member.content.avatar_url" class="picBox"
+               :src="`https://adb.sh/_matrix/media/r0/thumbnail/adb.sh/${member.content.avatar_url.split('/',4)[3]}?width=64&height=64&method=crop`"/>-->
+          <div class="picBox"><p>{{member.content.displayname?member.content.displayname.substr(0,2):member.sender.substr(1,2)}}</p></div>
           <div class="information">
-            <div class="userName">{{user}}</div>
-            <div class="status">online</div>
+            <div class="userName">{{member.content.displayname?member.content.displayname:member.sender}}</div>
+            <div v-if="member.content.displayname" class="status">{{member.sender}}</div>
           </div>
         </div>
+        <p v-if="room.members.length>20">and {{room.members.length-20}} other members</p>
       </div>
     </div>
+    <icon class="closeBtn" onclick="this.parentNode.style.display = 'none'" ic="./sym/ic_close_white_24px.svg" />
   </div>
 </template>
 <script>
 import icon from './icon.vue';
-import main from '@/main.js'
 
 export default {
   name: "chatInformation",
   components:{
     icon
   },
-  data(){
-    return {
-      chatroom: main.data().chatroom
-    }
+  props:{
+    room: {}
   }
 }
 
@@ -46,7 +45,7 @@ export default {
   left: 50%;
   transform: translate(-50%, 0);
   top: 5rem;
-  width: calc(100% - 8rem);
+  width: calc(100% - 4rem);
   max-width: 30rem;
   height: calc(100% - 10rem);
   background-color: #1d1d1d;
@@ -64,6 +63,12 @@ export default {
     height: 100%;
   }
 }
+@media (max-height: 40rem) {
+  #chatInformation{
+    top: 0;
+    height: 100%;
+  }
+}
 .closeBtn{
   position: absolute;
   top: 0;
@@ -72,27 +77,28 @@ export default {
   box-shadow: none;
 }
 #box{
-  position: relative;
+  position: absolute;
+  top: 0;
   width: calc(100% - 2rem);
-  padding: 0.001rem 1rem 1rem;
+  padding: 0 1rem 0 1rem;
   overflow-y: auto;
-  max-height: calc(100% - 8rem);
+  overflow-x: hidden;
+  height: 100%;
 }
-.informationBox{
-  margin-top: 0.2rem;
-  height: 5rem;
-  padding: 0.2rem;
+.scrollContainer{
+  padding: 1rem 0 1rem 0;
+  position: absolute;
+  width: 100%;
+  height: auto;
 }
 .picBoxBig{
   text-align: center;
-  background-color: #42b983 ;
+  background-color: #42a7b9;
+  padding-top: 1.5rem;
   width: 5rem;
-  height:5rem;
+  height: 3.5rem;
   border-radius: 5rem;
-}
-.placeholderBig{
-  padding-top: 1rem;
-  margin-bottom: 1rem;
+  font-size: 2rem;
 }
 .roomInformation{
   position: relative;
@@ -109,33 +115,38 @@ export default {
   color: #9c9c9c;
 }
 .contentBox{
-  margin-top: 0.2rem;
-  height: 3.2rem;
-  padding: 0.2rem;
-  max-height: 48px;
+  position: relative;
+  margin-top: 0.5rem;
+  height: 3rem;
+  width: 100%;
 }
 .picBox{
-  text-align: center;
-  background-color: #00BCD4;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background-color: #42a7b9;
   width: 3rem;
-  height:3rem;
-  border-radius: 2rem;
+  height: 3rem;
+  border-radius: 1.5rem;
 }
-.picPlaceholder{
-  padding-top: 0.001rem;
-  margin-bottom: 1rem;
+img.picBox{
+  background-color: unset;
 }
 .information{
-  position: relative;
-  text-align: left;
-  margin-top: -2.4rem;
-  margin-left: 3.7rem;
+  position: absolute;
+  left: 4rem;
+  top: 0;
+  width: calc(100% - 4rem);
 }
 .userName{
+  position: absolute;
+  top: 0.75rem;
   color: white;
 }
 .status{
+  position: absolute;
   font-size: 0.8rem;
+  top: 1.75rem;
   color: #9c9c9c;
 }
 </style>

src/components/message.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="messageContainer">
-    <div class="message">
+    <div class="message" :title="time">
       {{msg}}
+      <div class="time">{{time}}</div>
     </div>
   </div>
 </template>
@@ -10,7 +11,8 @@
 export default {
   name: "message",
   props: {
-    msg: String
+    msg: String,
+    time: String,
   }
 }
 </script>
@@ -26,7 +28,7 @@ export default {
     margin-left:auto; margin-right:0;
     position: relative;
     width: max-content;
-    min-width: 5rem;
+    min-width: 2rem;
     max-width: calc(100% - 3rem);
     padding: 0.7rem 1rem 0.45rem 1rem;
     right: 0;
@@ -36,11 +38,10 @@ export default {
     word-break: break-word;
     white-space: pre-line;
   }
-
-  @media (min-width: 45rem){
-    .message{
-      margin-left: 0; margin-right: auto;
-      border-radius: 1rem 1rem 1rem 0;
-    }
+  .time{
+    position: relative;
+    bottom: -0.2rem;
+    font-size: 0.7rem;
+    text-align: right;
   }
 </style>

src/components/messageReceive.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="messageContainer">
-    <div class="message">
+    <div class="message" :title="time">
       {{msg}}
+      <div class="time">{{time}}</div>
     </div>
   </div>
 </template>
@@ -10,7 +11,8 @@
 export default {
   name: "messageReceive",
   props: {
-    msg: String
+    msg: String,
+    time: String
   }
 }
 </script>
@@ -25,7 +27,7 @@ export default {
   .message{
     position: relative;
     width: max-content;
-    min-width: 5rem;
+    min-width: 2rem;
     max-width: calc(100% - 3rem);
     padding: 0.7rem 1rem 0.45rem 1rem;
     left: 0;
@@ -35,4 +37,10 @@ export default {
     word-break: break-word;
     white-space: pre-line;
   }
+  .time{
+    position: relative;
+    bottom: -0.2rem;
+    font-size: 0.7rem;
+    text-align: right;
+  }
 </style>

src/components/newMessage.vue

@@ -2,9 +2,9 @@
   <div class="newMessageBanner">
     <form v-on:submit.prevent="sendMessage()">
       <label for="newMessageInput"></label>
-      <textarea v-on:keyup.shift.enter="sendMessage()" v-on:input="resizeMessageBanner()" ref="newMessageInput" id="newMessageInput" class="newMessageInput"
-                autocomplete="off" placeholder="type a message ..." v-model="msg.content.text" />
-      <icon @click.native="sendMessage()" title="press shift + enter to submit" id="sendMessageBtn"
+      <textarea @keyup.enter.exact="sendMessage()" @input="resizeMessageBanner()" ref="newMessageInput" id="newMessageInput" class="newMessageInput"
+                autocomplete="off" placeholder="type a message ..." v-model="msg.content.body" />
+      <icon type="submit" title="press enter to submit" id="sendMessageBtn"
             ic="./sym/ic_send_white_24px.svg" />
     </form>
   </div>
@@ -13,6 +13,7 @@
 <script>
 import icon from '@/components/icon.vue';
 import main from '@/main.js';
+import matrix from '@/matrix.js';
 
 export default {
   name: "newMessage",
@@ -21,10 +22,10 @@ export default {
   },
   methods: {
     sendMessage(){
-      if (this.msg.content.text !== "") {
-        this.msg.time = Date.now()
-        main.methods.sendWebSocket(this.msg)
-        this.msg.content.text = ""
+      if (this.msg.content.body !== "") {
+        let msgSend = Object.assign({}, this.msg)
+        matrix.methods.sendMessage(msgSend)
+        this.msg.content.body = ""
         document.getElementById("messagesContainer").style.height = "calc(100% - 7rem)"
         document.getElementById("newMessageInput").style.height = "1.25rem"
         //let msgContainer = document.getElementById("messagesContainer")
@@ -43,14 +44,14 @@ export default {
   data(){
     return {
       msg: {
-        type: "message",
-        time: Date.now(),
+        type: "m.room.message",
         content: {
-          user: "you",
-          text: ""
+          body: "",
+          msgtype: "m.text"
         }
       },
-      chatroom: main.data().chatroom
+      chatroom: main.data().chatroom,
+      session: matrix.data().session
     }
   }
 }
@@ -78,6 +79,8 @@ export default {
   height: 1.25rem;
   background-color: #fff0;
   border: 0 solid #fff0;
+  appearance: none;
+  outline: none;
   color: #fff;
   font-size: 1rem;
   resize: none;
@@ -89,15 +92,4 @@ export default {
   right: 1rem;
   bottom: 0.5rem;
 }
-#sendMessageBtn:hover::after{
-  content: "press shift + enter to submit";
-  position: absolute;
-  padding: 1rem;
-  bottom: 4rem;
-  right: 0;
-  width: 14rem;
-  background-color: #eee;
-  color: #000;
-  border-radius: 1rem;
-}
 </style>

src/components/topBanner.vue

@@ -1,26 +1,24 @@
 <template>
   <div class="topBanner">
     <div>
-      <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" />
+      <icon @click.native="session.currentRoom = undefined" class="smallIcon" id="icon-arrow" ic="./sym/arrow_back-24px.svg" />
+      <div @click="showChatInfo()" class="smallIcon" id="picTop">{{session.currentRoom.name.substr(0,2)}}</div>
       <div id="container">
-        <div id="chatName">{{chatroom.name}}</div>
-        <div id="users">{{chatroom.user.length}} members</div>
+        <div id="chatName">{{session.currentRoom.name}}</div>
+        <div id="users">{{session.currentRoom.members.length}} members</div>
       </div>
-      <icon v-on:click.native="showChatInfo()" class="smallIcon" id="icon-menu" ic="./sym/menu-24px.svg" />
     </div>
   </div>
 </template>
 <script>
 import icon from '@/components/icon.vue';
 import main from '@/main.js';
+import matrix from '@/matrix.js';
 
 export default {
   name: "topBanner",
   components:{
-    icon
+    icon,
   },
   methods:{
     showChatInfo(){
@@ -29,7 +27,8 @@ export default {
   },
   data(){
     return {
-      chatroom: main.data().chatroom
+      chatroom: main.data().chatroom,
+      session: matrix.data().session
     }
   }
 }
@@ -37,35 +36,40 @@ export default {
 <style scoped>
 .topBanner{
   position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
   height: 3rem;
   background-color: #1d1d1d;
-  box-shadow: 0 0px 5px #111;
 }
 .smallIcon{
   top: 0.25rem;
   background-color: #2d2d2d;
-  height: 2.5rem;
+  padding-top: 0.75rem;
+  height: 1.75rem;
   width: 2.5rem;
+  box-shadow: none;
+  border-radius: 1.25rem;
+  text-align: center;
+  user-select: none;
+  cursor: pointer;
 }
 #icon-arrow{
+  height: 2.5rem;
   position: absolute;
-  left: 1rem;
+  left: 0.5rem;
+  background-color: unset;
+  box-shadow: none;
 }
 #picTop{
   position: absolute;
-  left: 4rem;
+  left: 3.5rem;
   background-color: #42a7b9;
 }
-#icon-menu{
-  position: absolute;
-  right: 1rem;
-  background-color: #2d2d2d;
-}
 #container{
   position: absolute;
   top: 0.55rem;
-  left: 7.5rem;
+  left: 7rem;
 }
 #chatName{
   font-size: 1rem;

src/main.js

@@ -3,6 +3,7 @@ import VueRouter from 'vue-router'
 import App from './App.vue'
 import login from './views/login.vue'
 import chat from './views/chat.vue'
+import rooms from './views/rooms.vue'
 
 Vue.config.productionTip = false
 Vue.use(VueRouter)
@@ -20,9 +21,19 @@ const router = new VueRouter({
       component: login
     },
     {
-      path: '/chat',
+      path: '/chat/*',
       name: 'chat',
       component: chat
+    },
+    {
+      path: '/rooms/*',
+      name: 'room',
+      component: rooms
+    },
+    {
+      path: '/rooms',
+      name: 'rooms',
+      component: rooms
     }
   ]
 })
@@ -35,28 +46,16 @@ let chatroom = {
 };
 
 export default {
-  mounted() {
-    sendMessage()
-  },
   data(){
     return {
       chatroom: chatroom
     }
   },
   methods: {
-    sendMessage(message){
-      let msg = {
-        type: "message",
-        time: Date.now(),
-        content: {
-          message: message
-        }
-      }
-      socket.send(JSON.stringify(msg))
+    error(msg){
+      show_error(msg)
     },
-    sendWebSocket(msg){
-      socket.send(JSON.stringify(msg))
-    }
+    router(route){router.push(route)}
   }
 }
 
@@ -72,42 +71,7 @@ new Vue({
   }
 }).$mount('#app')
 
-//const wsurl = 'ws://127.0.0.1:8090'
-const wsurl = 'wss://chat.adb.sh:8080'
-
-const socket = new WebSocket(wsurl)
 function element(id){ return document.getElementById(id)}
-
-socket.onopen = () => {
-  let msg = {
-    type: "info",
-    time: Date.now(),
-    content: "new session"
-  }
-  socket.send(JSON.stringify(msg))
-}
-socket.onerror = (error) => {
-  console.log(`WebSocket error: ${error}`)
-}
-socket.onclose = () => show_error('session ended (refresh)')
-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'){
-    chatroom.user = msg.user
-  }
-  else if (msg.type === "info") chatroom.username = msg.username
-  else if (msg.type === 'message'){
-    chatroom.messages.push(msg)
-    let msgContainer = document.getElementById("messagesContainer")
-    if (msg.content.user === chatroom.username || msgContainer.scrollHeight < msgContainer.scrollTop + 1000)
-      setTimeout(() => {msgContainer.scrollTo(0, msgContainer.scrollHeight)}, 50)
-    else document.getElementById("scrollDown").style.display = "block"
-  }
-}
-
 function show_error(msg) {
   let error_style = element('errorBox').style
   element('errorMessage').innerText = msg
@@ -115,14 +79,3 @@ function show_error(msg) {
   error_style.animation = "slide-from-left alternate 0.2s"
   setTimeout(() => {error_style.animation = ""}, 200)
 }
-
-function sendMessage(message){
-  let msg = {
-    type: "message",
-    time: Date.now(),
-    content: {
-      message: message
-    }
-  }
-  socket.send(JSON.stringify(msg))
-}

src/matrix.js

@@ -0,0 +1,157 @@
+import matrix from 'matrix-js-sdk';
+import main from '@/main.js';
+//import Vue from 'vue';
+
+var matrix_cli = matrix.createClient({
+    baseUrl: "https://adb.sh",
+    accessToken: getCookie("accessToken"),
+    userId: getCookie("userId")
+})
+let session = {
+    user: "",
+    password: "",
+    accessToken: "",
+    rooms: [],
+    currentRoom: undefined,
+    login:{
+        user: "",
+        password: ""
+    }
+};
+
+console.log(document.cookie)
+
+if (getCookie("accessToken") && getCookie("userId")){
+    session = {
+        user: getCookie("userId"),
+        password: "",
+        accessToken: getCookie("accessToken"),
+        rooms: [],
+        currentRoom: undefined
+    };
+    //Vue.$router.push("/rooms/")
+    window.location.href = '/#/rooms/';
+    matrix_cli.startClient();
+    matrix_cli.once('sync', function (state){
+        console.log(state)
+    })
+}
+else window.location.href = '/#/login';
+
+export default {
+    data(){
+        return {
+            session: session
+        }
+    },
+    methods: {
+        login(){
+            if (session.accessToken !== ""){
+                main.methods.error("you are already logged in")
+                return;
+            } else if (session.login.user === ""){
+                main.methods.error('username is empty')
+                return;
+            } else if (session.login.password === ""){
+                main.methods.error('password is empty')
+                return;
+            } else if (!(session.login.user.includes("@") && session.login.user.includes(":"))){
+                main.methods.error('username is in wrong style')
+                return;
+            }
+            matrix_cli.login("m.login.password", {
+                user: session.login.user,
+                password: session.login.password,
+                initial_device_display_name: "matrix chat",
+            }).then((response) => {
+                document.cookie = `accessToken=${response.access_token}`;
+                document.cookie = `userId=${session.login.user}`;
+                session = {
+                    user: session.login.user,
+                    password: "",
+                    accessToken: response.access_token,
+                    rooms: [],
+                    currentRoom: undefined
+                };
+                console.log(`access token => ${response.access_token}`);
+                if (response.error){
+                    main.methods.error(response.error)
+                    console.log(`login error => ${response.error}`)
+                }
+                window.location.href = '/#/rooms/';
+                matrix_cli.startClient();
+                matrix_cli.once('sync', function (state){
+                    console.log(state)
+                })
+            });
+        },
+        sendMessage(msg){
+            let msgSend = {
+                type: msg.type,
+                content: {
+                    body: msg.content.body,
+                    msgtype: msg.content.msgtype
+                }
+            }
+            matrix_cli.sendEvent(session.currentRoom.roomId, msgSend.type, msgSend.content, "").then(()=>{
+                console.log("message sent successfully")
+            }).catch(err => {
+                console.log(`error while sending message => ${err}`)
+                main.methods.error("message could not be sent")
+            })
+        }
+    }
+}
+
+function getCookie(key) {
+   let cookie = document.cookie.replace(/ /g, '').split(';')
+       .find(cookie => cookie.split('=')[0] === key);
+   return cookie?cookie.split('=')[1]:false;
+}
+
+matrix_cli.on("event", event => {
+    console.log(event.getType());
+    console.log(event);
+    if (event.getType() === "m.room.name") {
+        matrix_cli.getRooms().forEach(newRoom => {
+            let room = session.rooms.find(room => room.roomId === newRoom.roomId)
+            if (!room) {
+                session.rooms.push({name: newRoom.name, roomId: newRoom.roomId, messages: [], members: []})
+                console.log(`new room => ${newRoom.name}`)
+            } else if (room.name !== newRoom.name) {
+                console.log(`roomname changed from ${room.name} to ${newRoom.name}`)
+                room.name = newRoom.name
+            }
+        })
+    }
+    else if (event.getType() === "m.room.member"){
+        let room = session.rooms.find(room => room.roomId === event.event.room_id)
+        if (!room) {
+            session.rooms.push({name: "undefined", roomId: event.event.room_id, messages: [], members: []})
+            console.log(`new user => ${event.event.sender}`)
+        } else {
+            room.members.push({sender: event.event.sender, content: event.event.content})
+        }
+    }
+    console.log(session)
+})
+
+matrix_cli.on("Room.timeline", event => {
+    if (event.getType() === "m.room.message") {
+        console.log(`new message => ${event.event.content.body}`);
+        let room = session.rooms.find(room => room.roomId === event.event.room_id)
+        if (!room) {
+            session.rooms.push({name: "undefined", roomId: event.event.room_id, messages: [event.event], members: []})
+            console.log(`undefined room name for => ${event.event.room_id}`)
+        } else room.messages.push(event.event)
+
+        let msgContainer = document.getElementById("messagesContainer")
+        if (session.currentRoom && session.currentRoom.roomId === event.event.room_id) {
+            if (event.event.sender === session.user || msgContainer.scrollHeight < msgContainer.scrollTop + 1000)
+                setTimeout(() => {
+                    msgContainer.scrollTo(0, msgContainer.scrollHeight)
+                }, 10)
+            else document.getElementById("scrollDown").style.display = "block"
+        }
+    }
+});

src/views/chat.vue

@@ -1,22 +1,24 @@
 <template>
   <div>
-    <div ref="msgContainer" id="messagesContainer" class="messagesContainer">
+    <div @scroll="scrollHandler()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
       <div id="messages" class="messages">
-        <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}}
+        <p v-if="session.currentRoom.messages.length === 0" class="info">this room is empty</p>
+        <div v-for="(message, i) in session.currentRoom.messages" :key="message.origin_server_ts">
+          <div v-if="i===0 || getDate(session.currentRoom.messages[i-1].origin_server_ts)!==getDate(message.origin_server_ts)"
+               style="margin-left: 2rem; margin-top: 1rem" class="info">{{getDate(message.origin_server_ts)}}
           </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 v-if="(message.sender !== session.user) && (i===0 || session.currentRoom.messages[i-1].sender!==message.sender)"
+               style="margin-left: 2rem; margin-top: 1rem">{{message.sender}}
+          </div>
+          <messageReceive v-if="message.sender !== session.user" :msg=message.content.body
+                          :time=getTime(message.origin_server_ts) />
+          <message v-if="message.sender === session.user" :msg=message.content.body :time=getTime(message.origin_server_ts) />
         </div>
       </div>
     </div>
     <newMessage />
-    <icon v-on:click.native="scrollToBottom()" id="scrollDown" ic="./sym/expand_more-black-24dp.svg" />
+    <icon v-if="showScrollBtn" v-on:click.native="scrollToBottom()" id="scrollDown" ic="./sym/expand_more-black-24dp.svg" />
     <topBanner />
-    <chatInformation />
   </div>
 </template>
 
@@ -26,14 +28,13 @@ import messageReceive from '@/components/messageReceive.vue';
 import newMessage from '@/components/newMessage.vue';
 import topBanner from '@/components/topBanner.vue';
 import main from '@/main.js';
-import ChatInformation from "@/components/chatInformation";
 import Icon from "@/components/icon";
+import matrix from '@/matrix.js';
 
 export default {
   name: 'chat',
   components: {
     Icon,
-    ChatInformation,
     message,
     messageReceive,
     newMessage,
@@ -43,12 +44,29 @@ export default {
     scrollToBottom(){
       let msgContainer = document.getElementById("messagesContainer")
       msgContainer.scrollTo(0, msgContainer.scrollHeight)
-      document.getElementById("scrollDown").style.display = "none"
+    },
+    getTime(time){
+      let date = new Date(time);
+      return `${date.getHours()}:${(date.getMinutes()<10)?"0"+date.getMinutes():date.getMinutes()}`;
+    },
+    getDate(time){
+      let months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
+      let date = new Date(time);
+      return `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`;
+    },
+    scrollHandler(){
+      if (this.$refs.msgContainer.scrollTop === 0){
+        console.log("load messages")
+      }
+      let msgContainer = document.getElementById("messagesContainer")
+      this.showScrollBtn = msgContainer.scrollHeight - msgContainer.scrollTop > msgContainer.offsetHeight + 200;
     }
   },
   data(){
     return {
-      chatroom: main.data().chatroom
+      chatroom: main.data().chatroom,
+      session: matrix.data().session,
+      showScrollBtn: false
     }
   }
 }
@@ -74,6 +92,11 @@ export default {
   background-color: #fff;
   bottom: 5rem;
   right: 1rem;
-  display: none;
+  display: block;
+}
+.info{
+  text-align: center;
+  font-style: italic;
+  margin: 1rem;
 }
 </style>

src/views/login.vue

@@ -1,17 +1,17 @@
 <template>
   <div id="login">
-    <h1 class="title">open chat</h1>
-    <div class="input-field" id="longurl">
-      <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>
-    <textbtn v-on:click.native="login()" text="login" />
+    <h1 class="title">[chat]</h1>
+    <form @submit.prevent="login()">
+      <input v-model="session.login.user" class="input" name="user" type="text" maxlength="30" placeholder="@user:adb.sh"><br>
+      <input v-model="session.login.password" class="input" name="password" type="password" maxlength="30" placeholder="password"><br>
+      <textbtn type="submit" text="login" />
+    </form>
   </div>
 </template>
 
 <script>
 import textbtn from '@/components/textbtn';
-import main from "@/main";
+import matrix from '@/matrix.js';
 
 export default {
   name: "login.vue",
@@ -19,22 +19,13 @@ export default {
     textbtn
   },
   methods: {
-    login() {
-      if (this.session.content.user !== "") {
-        this.session.time = Date.now()
-        main.methods.sendWebSocket(this.session)
-      }
+    login(){
+      matrix.methods.login()
     }
   },
   data(){
     return {
-      session: {
-        type: "login",
-        time: Date.now(),
-        content: {
-          user: ""
-        }
-      }
+      session: matrix.data().session
     }
   }
 }
@@ -59,6 +50,9 @@ input{
   border: 1px solid #fff;
   text-align: center;
   font-size: 1.1rem;
+  margin-top: 1rem;
+  appearance: none;
+  outline: none;
 }
 input:focus{
   color: #000;

src/views/rooms.vue

@@ -0,0 +1,169 @@
+<template>
+  <div>
+    <div id="roomList" class="roomList">
+      <h1>[chat]</h1>
+      <h2>{{session.rooms.length}} rooms:</h2>
+      <div v-for="room in session.rooms" :key="room.roomId" @click="openChat(room)" class="roomListElement">
+        <div class="roomImgPlaceholder">{{room.name.substr(0,2)}}</div>
+        <div class="roomListName">{{room.name}}</div>
+      </div>
+    </div>
+    <chat class="chat" v-if="session.currentRoom" />
+    <div class="noRoomSelected" v-else>Please select a room to be displayed.</div>
+    <div class="roomListSmall">
+      <h1>[c]</h1>
+      <h2>—</h2>
+      <div v-for="(room, index) in session.rooms" :key="index" @click="openChat(room)" class="roomListElement" :title="room.name">
+        <div class="roomImgPlaceholder">{{room.name.substr(0,2)}}</div>
+        <div class="roomListName">{{room.name}}</div>
+      </div>
+    </div>
+    <chatInformation v-if="session.currentRoom" :room="session.currentRoom"/>
+  </div>
+</template>
+
+<script>
+import matrix from '@/matrix.js';
+import chat from '@/views/chat.vue';
+import chatInformation from "@/components/chatInformation";
+
+export default {
+  name: "rooms",
+  components:{
+    chat,
+    chatInformation
+  },
+  methods:{
+    openChat(room){
+      this.session.currentRoom = room;
+      this.$router.push(`/rooms/${room.roomId}`)
+      this.$forceUpdate()
+      let msgContainer = document.getElementById("messagesContainer")
+      setTimeout(() => {msgContainer.scrollTo(0, msgContainer.scrollHeight)}, 50)
+    }
+  },
+  data(){
+    return {
+      session: matrix.data().session,
+    }
+  }
+}
+</script>
+
+<style scoped>
+.roomList{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 18rem;
+  height: 100%;
+  background-color: #222;
+  text-align: center;
+  overflow-y: auto;
+}
+.chat{
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: calc(100% - 18rem);
+  height: 100%;
+  background-color: #313131;
+}
+.roomListElement{
+  position: relative;
+  height: 3rem;
+  margin: 0.5rem 0 0.5rem 0;
+  font-size: 1.2rem;
+  cursor: pointer;
+  background-color: #222;
+}
+.roomListName{
+  position: absolute;
+  left: 4.5rem;
+  top: 1rem;
+  color: #fff;
+}
+.roomListSmall{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 4rem;
+  height: 100%;
+  background-color: #222;
+  text-align: center;
+  display: none;
+  overflow-y: auto;
+  overflow-x: hidden;
+  animation: ease;
+  animation-duration: 0.2s;
+  scrollbar-width: none;
+}
+.roomListSmall:hover{
+  width: 18rem;
+  scrollbar-width: thin;
+  box-shadow: 0 0 20px #111;
+}
+.roomListSmall::-webkit-scrollbar {
+  width: 0;
+}
+.roomListSmall:hover::-webkit-scrollbar {
+  width: 0.5rem;
+}
+.noRoomSelected{
+  position: absolute;
+  width: calc(100% - 20rem);
+  top: 5rem;
+  left: 20rem;
+  text-align: center;
+}
+.roomImgPlaceholder{
+  position: absolute;
+  left: 1rem;
+  height: 2rem;
+  width: 3rem;
+  padding-top: 1rem;
+  background-color: #42a7b9;
+  border-radius: 1.5rem;
+  text-align: center;
+}
+.roomImgPlaceholder.small{
+  margin-left: calc(50% - 2rem);
+}
+
+@media (max-width: 48rem) {
+  .roomList{
+    display: none;
+  }
+  .chat{
+    width: calc(100% - 4rem);
+  }
+  .roomListSmall{
+    display: block;
+  }
+  .roomImgPlaceholder{
+    left: 0.5rem;
+  }
+  .noRoomSelected{
+    left: 4rem;
+    width: calc(100% - 4rem);
+  }
+}
+
+@media (max-width: 30rem) {
+  .roomList{
+    width: 100%;
+  }
+  .chat{
+    width: 100%;
+  }
+  .noRoomSelected{
+    display: none;
+  }
+  .roomListSmall{
+    display: none;
+  }
+  .roomList{
+    display: block;
+  }
+}
+</style>