Merge branch 'restructure'

# Conflicts:
#	src/components/chatInformation.vue

.eslintrc.js

@@ -0,0 +1,35 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es6": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:vue/essential"
+    ],
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly"
+    },
+    "parserOptions": {
+        "ecmaVersion": 2018,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "vue"
+    ],
+    "rules": {
+        "indent": [
+            "warn",
+            2
+        ],
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "warn",
+            "single"
+        ]
+    }
+}

package.json

@@ -9,47 +9,32 @@
   },
   "dependencies": {
     "@modular-matrix/parse-mxc": "^1.0.1",
+    "@vue-polkadot/vue-identicon": "^0.0.8",
     "core-js": "^3.6.5",
+    "jdenticon": "^3.1.0",
     "matrix-js-sdk": "^9.1.0",
     "sass": "^1.29.0",
-    "sass-loader": "^10.1.0",
     "v-emoji-picker": "^2.3.1",
     "vue": "^2.6.11",
     "ws": "^7.3.1"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.0",
+    "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-pwa": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
+    "@vue/compiler-sfc": "^3.0.0",
+    "babel": "^6.23.0",
+    "babel-cli": "^6.18.0",
     "babel-eslint": "^10.1.0",
     "electron": "^11.0.1",
-    "eslint": "^7.14.0",
+    "eslint": "^6.7.2",
-    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-plugin-vue": "^7.5.0",
-    "eslint-config-standard": "^16.0.2",
+    "node-sass": "^5.0.0",
-    "eslint-plugin-import": "^2.22.1",
+    "sass-loader": "^10.1.1",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-vue": "^7.2.0",
     "vue-router": "^3.4.9",
     "vue-template-compiler": "^2.6.11"
-  },
+  }
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ]
 }

src/components/chatInformation.vue

@@ -6,27 +6,31 @@
         <div class="picBoxBig"><div class="placeholderBig">{{room.name.substr(0,2)}}</div></div>
         <div class="roomInformation">
           <div class="roomName">{{room.name}}</div>
-          <div class="users">{{room.members.length}} members</div>
+          <div class="users">{{getMembers().length}} members</div>
         </div>
         </div>
-        <h2 v-if="room.members.length !== 0">members:</h2>
+        <h2 v-if="getMembers().length !== 0">members:</h2>
-        <div v-for="member in room.members.slice(0,20)" :key="member.sender" class="contentBox" :title="member.sender">
+        <div v-for="member in getMembers().slice(0,20)" :key="member" class="contentBox" :title="member">
-          <userThumbnail :mxcURL="member.content.avatar_url" :userId="member.sender" :username="member.content.displayname"
+          <userThumbnail
-                         width="64" height="64" resizeMethod="scale" class="userThumbnail" />
+              :mxcURL="getUser(member).avatarUrl"
+              :fallback="getUser(member).displayName"
+              class="userThumbnail" :size="3"
+          />
           <div class="information">
-            <div class="userName">{{member.content.displayname?member.content.displayname:member.sender}}</div>
+            <div class="userName">{{getUser(member).displayName || member}}</div>
-            <div class="status"></div>
+            <div class="status">{{getStatus(getUser(member))}}</div>
           </div>
         </div>
-        <p v-if="room.members.length>20">and {{room.members.length-20}} other members</p>
+        <p v-if="getMembers().length>20">and {{getMembers().length-20}} other members</p>
       </div>
     </div>
-    <icon class="closeBtn" onclick="this.parentNode.style.display = 'none'" ic="./sym/ic_close_white_24px.svg" />
+    <icon class="closeBtn" @click.native="closeChatInfo()" ic="./sym/ic_close_white_24px.svg" />
   </div>
 </template>
 <script>
 import icon from './icon.vue';
 import userThumbnail from './userThumbnail';
+import {matrix} from "@/main";
 
 export default {
   name: "chatInformation",
@@ -35,7 +39,18 @@ export default {
     userThumbnail
   },
   props:{
-    room: {}
+    room: {},
+    closeChatInfo: Function
+  },
+  methods: {
+    getUser(userId){
+      return matrix.client.getUser(userId);
+    },
+    getMembers(){
+      return Object.keys(this.room.currentState.members)
+    },
+    getStatus(){
+    }
   }
 }
 
@@ -53,7 +68,6 @@ export default {
   box-shadow: 6px 6px 20px #111;
   border-radius: 1rem;
   text-align: center;
-  display: none;
 }
 @media (max-width: 30rem) {
   #chatInformation{
@@ -125,7 +139,8 @@ export default {
   position: absolute;
   left: 0;
   top: 0;
-  background-color: #42a7b9;
+  width: 3rem;
+  height: 3rem;
 }
 .information{
   position: absolute;

src/components/message.vue

@@ -1,11 +1,9 @@
 <template>
-  <div class="messageContainer">
+    <div :class="type==='send'?'messageSend':'messageReceive'" class="message">
-    <div :class=msgClass class="message" :title="time">
       <div v-html="solveTextLinks(msg.replace(/</g, '&lt')
          .replace(/>/g, '&gt'))"></div>
       <div class="time">{{time}}</div>
     </div>
-  </div>
 </template>
 
 <script>
@@ -14,7 +12,7 @@ export default {
   props: {
     msg: String,
     time: String,
-    msgClass: String
+    type: String
   },
   methods:{
     solveTextLinks(text){
@@ -34,31 +32,26 @@ export default {
 </script>
 
 <style scoped>
-  .messageContainer{
-    position: relative;
-    margin-top: 0.25rem;
-    width: calc(100% - 2rem);
-    left: 1rem;
-  }
   .message{
     position: relative;
     width: max-content;
     min-width: 2rem;
-    max-width: calc(100% - 3rem);
+    max-width: calc(100% - 5rem);
     padding: 0.7rem 1rem 0.45rem 1rem;
-    right: 0;
     background-color: #42a7b9;
     border-radius: 1rem 1rem 0 1rem;
     text-align: left;
     word-break: break-word;
     white-space: pre-line;
+    margin-top: 0.25rem;
   }
   .messageReceive{
     background-color: #42b983;
     border-radius: 1rem 1rem 1rem 0;
   }
   .messageSend{
-    margin-left:auto; margin-right:0;
+    margin-left:auto;
+    margin-right:0;
     background-color: #42a7b9;
     border-radius: 1rem 1rem 0 1rem;
   }

src/components/newMessage.vue

@@ -1,47 +1,58 @@
 <template>
-  <div class="newMessageBanner">
+    <form class="newMessageBanner" ref="newMessageBanner" v-on:submit.prevent="sendMessage()">
-    <form v-on:submit.prevent="sendMessage()">
       <label for="newMessageInput"></label>
-      <textarea @keyup.enter.exact="sendMessage()" @input="resizeMessageBanner()" ref="newMessageInput" id="newMessageInput" class="newMessageInput"
+      <textarea
-                autocomplete="off" rows="1" placeholder="type a message ..." v-model="msg.content.body" />
+          @keyup.enter.exact="sendMessage()"
-      <icon type="submit" title="press enter to submit" id="sendMessageBtn"
+          @input="resizeMessageBanner()"
-            ic="./sym/ic_send_white_24px.svg" />
+          v-model="msg.content.body"
+          ref="newMessageInput"
+          id="newMessageInput"
+          class="newMessageInput"
+          autocomplete="off"
+          rows="1"
+          placeholder="type a message ..."
+      />
+      <icon
+          type="submit"
+          title="press enter to submit"
+          class="sendMessageBtn"
+          ic="./sym/ic_send_white_24px.svg"
+      />
     </form>
-  </div>
 </template>
 
 <script>
 import icon from '@/components/icon.vue';
-import main from '@/main.js';
+import {matrix} from '@/main.js';
-import matrix from '@/matrix.js';
 
 export default {
   name: "newMessage",
   components: {
     icon
   },
+  props: {
+    onResize: Function,
+    roomId: String
+  },
   methods: {
-    sendMessage(){
+    async sendMessage(){
       if (this.msg.content.body !== "") {
-        let msgSend = Object.assign({}, this.msg)
+        let msgSend = Object.assign({}, this.msg);
-        matrix.methods.sendMessage(msgSend)
+        await matrix.sendEvent(msgSend, this.roomId);
-        this.msg.content.body = ""
+        this.msg.content.body = "";
-        document.getElementById("messagesContainer").style.height = "calc(100% - 7rem)"
+        let id = this.$refs.newMessageInput;
-        document.getElementById("newMessageInput").style.height = "1.25rem"
+        id.style.height = "1.25rem";
-        //let msgContainer = document.getElementById("messagesContainer")
+        this.onResize(id.parentElement.clientHeight);
-        //msgContainer.scrollTo(0, msgContainer.scrollHeight)
       }
     },
     resizeMessageBanner(){
-      let id = this.$refs.newMessageInput
+      let id = this.$refs.newMessageInput;
-      id.style.height = '1.25rem'
+      id.style.height = '1.25rem';
-      id.style.height = `${id.scrollHeight}px`
+      id.style.height = `${id.scrollHeight}px`;
-      let msgContainer = document.getElementById("messagesContainer")
+      this.onResize(id.parentElement.clientHeight);
-      msgContainer.style.height
-          = `calc(100% - ${id.parentElement.clientHeight}px - 3rem)`
     },
     toggleEmojiPicker() {
-      this.showEmojiPicker= !this.showEmojiPicker;
+      this.showEmojiPicker = !this.showEmojiPicker;
     },
     onSelectEmoji(emoji) {
       this.msg.content.body += emoji.data;
@@ -56,8 +67,6 @@ export default {
           msgtype: "m.text"
         }
       },
-      chatroom: main.data().chatroom,
-      session: matrix.data().session,
       showEmojiPicker: false
     }
   }
@@ -71,16 +80,16 @@ export default {
   left: 0;
   width: 100%;
   height: min-content;
-  min-height: 4rem;
+  min-height: 3.5rem;
   background-color: #1d1d1d;
   border-radius: 1rem 1rem 0 0;
 }
 .newMessageInput{
   position: relative;
-  margin-top: 1.5rem;
+  margin-top: 1.25rem;
-  margin-bottom: 1rem;
+  margin-bottom: 0.75rem;
   left: 2rem;
-  min-height: 1.25rem;
+  min-height: 1.5rem;
   max-height: 10rem;
   width: calc(100% - 7rem);
   height: 1.25rem;
@@ -94,9 +103,10 @@ export default {
   vertical-align: middle;
   font-family: Avenir, Helvetica, Arial, sans-serif;
 }
-#sendMessageBtn{
+.sendMessageBtn{
   position: absolute;
   right: 1rem;
-  bottom: 0.5rem;
+  bottom: 0.25rem;
+  background-color: unset;
 }
 </style>

src/components/timeline.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="timeline">
+    <div class="timeGroup"
+         v-for="timeGroup in splitArray(timeline,obj => getDate(obj.event.origin_server_ts),obj => obj.event)"
+         :key="timeGroup[0].origin_server_ts"
+    >
+      <div class="time">{{getDate(timeGroup[0].origin_server_ts)}}</div>
+      <div class="eventGroup" v-for="group in splitArray(timeGroup, obj => obj.sender)" :key="group[0].origin_server_ts">
+        <div class="thumbnailContainer">
+          <div class="filler"></div>
+          <userThumbnail
+            v-if="group[0].sender !== user && groupTimeline"
+            :fallback="group[0].sender"
+            class="userThumbnail"
+            :mxcURL="getUser(group[0].sender).avatarUrl"
+            :size="2"
+            :title="group[0].sender"
+          />
+        </div>
+        <div :class="groupTimeline?'indent username':'username'"
+             v-if="group[0].sender !== user && groupTimeline">{{getUser(group[0].sender).displayName || group[0].sender}}
+        </div>
+        <div :class="groupTimeline?'indent event':'event'"
+             v-for="event in group" :key="event.origin_server_ts"
+             :title="`${group[0].sender} at ${getTime(event.origin_server_ts)}`"
+        >
+          <message v-if="event.content.msgtype==='m.text'"
+                   :type="event.sender === user?'send':'receive'"
+                   :msg=event.content.body :time=getTime(event.origin_server_ts)
+          />
+          <div v-else-if="event.type==='m.room.member'" class="info">{{membershipEvents[event.content.membership]}}</div>
+          <div v-else class="info">unknown event</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import message from "@/components/message";
+import userThumbnail from "@/components/userThumbnail";
+import {matrix} from "@/main";
+import splitArray from "@/lib/splitArray";
+import {getDate, getTime} from "@/lib/getTimeStrings";
+
+export default {
+  name: 'eventGroup',
+  components: {
+    message,
+    userThumbnail
+  },
+  props: {
+    timeline: Array,
+    user: String,
+    groupTimeline: Boolean
+  },
+  methods: {
+    getUser(userId) {
+      return matrix.client.getUser(userId);
+    },
+    splitArray,
+    getDate,
+    getTime
+  },
+  data(){
+    return {
+      membershipEvents:{
+        invite: 'was invented',
+        join: 'joined the room',
+        leave: 'left the room',
+        ban: 'was banned'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.timeline{
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  .timeGroup {
+    .time {
+      top: 0.25rem;
+      position: sticky;
+      z-index: 100;
+      background-color: #2d2d2d;
+      padding: 0.5rem;
+      border-radius: 0.5rem;
+      width: fit-content;
+      left: 50%;
+      transform: translate(-50%, 0);
+      margin-top: 0.5rem;
+    }
+    .eventGroup {
+      position: relative;
+      width: calc(100% - 1rem);
+      height: fit-content;
+      margin-top: 0.75rem;
+      margin-left: 0.5rem;
+      margin-right: 0.5rem;
+      .thumbnailContainer {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        .filler {
+          height: calc(100% - 2rem);
+        }
+        .userThumbnail {
+          position: sticky;
+          bottom: 0.5rem;
+          width: 2rem;
+          height: 2rem;
+        }
+      }
+      .username{
+        margin-left: 1rem;
+      }
+      .event{
+        .info{
+          font-style: italic;
+          margin-top: 0.5rem;
+          margin-bottom: 0.5rem;
+        }
+      }
+      .indent{
+        margin-left: 2.5rem;
+      }
+    }
+  }
+}
+</style>

src/components/topBanner.vue

@@ -1,34 +1,44 @@
 <template>
   <div class="topBanner">
     <div>
-      <icon @click.native="session.currentRoom = undefined" class="smallIcon" id="icon-arrow" ic="./sym/arrow_back-24px.svg" />
+      <icon @click.native="closeChat()" 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>
+      <userThumbnail @click.native="openChatInfo()" class="userThumbnail"
+                     :mxcURL="getUrl()" :fallback="room.roomId" :size="3"/>
       <div id="container">
-        <div id="chatName">{{session.currentRoom.name}}</div>
+        <div id="chatName">{{room.name}}</div>
-        <div id="users">{{session.currentRoom.members.length}} members</div>
+        <div id="users">{{Object.keys(room.currentState.members).length}} members</div>
       </div>
     </div>
   </div>
 </template>
 <script>
 import icon from '@/components/icon.vue';
-import main from '@/main.js';
+import {matrix} from "@/main";
-import matrix from '@/matrix.js';
+import userThumbnail from "@/components/userThumbnail";
+import sdk from 'matrix-js-sdk'
 
 export default {
   name: "topBanner",
   components:{
     icon,
+    userThumbnail
   },
-  methods:{
+  props:{
-    showChatInfo(){
+    room: [Object, undefined],
-      document.getElementById("chatInformation").style.display = 'block';
+    closeChat: Function,
-    }
+    openChatInfo: Function
   },
   data(){
     return {
-      chatroom: main.data().chatroom,
+    }
-      session: matrix.data().session
+  },
+  methods: {
+    getRoom(roomId) {
+      return matrix.client.getRoom(roomId);
+    },
+    getUrl(){
+      let avatarState = this.room.getLiveTimeline().getState(sdk.EventTimeline.FORWARDS).getStateEvents("m.room.avatar");
+      return avatarState.length>0?avatarState[avatarState.length-1].getContent().url:undefined;
     }
   }
 }
@@ -39,7 +49,7 @@ export default {
   top: 0;
   left: 0;
   width: 100%;
-  height: 3rem;
+  height: 3.5rem;
   background-color: #1d1d1d;
 }
 .smallIcon{
@@ -61,10 +71,12 @@ export default {
   background-color: unset;
   box-shadow: none;
 }
-#picTop{
+.userThumbnail{
   position: absolute;
+  top: 0.25rem;
   left: 3.5rem;
-  background-color: #42a7b9;
+  width: 3rem;
+  height: 3rem;
 }
 #container{
   position: absolute;

src/components/userThumbnail.vue

@@ -1,46 +1,47 @@
 <template>
-  <img v-if="mxcURL" :src="thumbnailUrl()" class="userThumbnail" />
+  <img v-if="mxcURL" :src="thumbnailUrl()" class="userThumbnail image"/>
-  <div v-else class="userThumbnail">
+  <Identicon v-else :value="fallback" :theme="'jdenticon'" :size="this.getFontSize()*this.size" class="userThumbnail identicon"/>
-    <p>{{username?username.substr(0,2):userId.substr(1,2)}}</p>
-  </div>
 </template>
 
 <script>
 import parseMXC from '@modular-matrix/parse-mxc';
-import matrix from '@/matrix.js';
+import {matrix} from "@/main";
+import Identicon from '@vue-polkadot/vue-identicon';
 
 export default {
   name: "userThumbnail.vue",
+  components: {
+    Identicon
+  },
   props: {
     mxcURL: String,
     username: String,
-    userId: String,
+    fallback: String,
-    width: Number,
+    homeserver: String,
-    height: Number,
+    size: Number
-    resizeMethod: String
   },
   methods: {
     thumbnailUrl(){
       let mxc = parseMXC.parse(this.mxcURL);
-      return `${this.homeserver}/_matrix/media/v1/thumbnail/${mxc.homeserver}/${mxc.id}?width=${this.width}&height=${this.height}&method=${this.resizeMethod}`;
+      return `${this.homeserver||matrix.baseUrl}/_matrix/media/v1/thumbnail/${
+        mxc.homeserver}/${mxc.id}?width=${this.imageSize}&height=${this.imageSize}&method=${this.resizeMethod}`;
+    },
+    getFontSize(){
+      return window.getComputedStyle(document.body,null).fontSize.split("px", 1)||16;
     }
   },
   data(){
     return {
-      homeserver: matrix.data().session.baseUrl
+      resizeMethod: 'scale',
+      imageSize: 128
     }
   }
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .userThumbnail{
-  background-color: #42a7b9;
+  border-radius: 50%;
-  width: 3rem;
-  height: 3rem;
-  border-radius: 1.5rem;
-}
-img.userThumbnail{
   background-color: unset;
 }
 </style>

src/lib/cookieHandler.js

@@ -0,0 +1,46 @@
+export class cookieHandler {
+  constructor() {
+    this.cookies = {};
+    this.reload();
+    this.expires = undefined;
+    this.SameSite = 'Strict';
+  }
+  getCookies(){
+    return this.cookies;
+  }
+  setCookie(cookies){
+    Object.keys(cookies).forEach(key => {
+      this.cookies[key] = cookies[key];
+    })
+  }
+  parseCookie(string){
+    let cookies = {};
+    string.replace(/ /g, '').split(';').forEach(cookie => {
+      let arr = cookie.split('=');
+      cookies[arr[0]] = arr[1];
+    })
+    return cookies;
+  }
+  reload(){
+    if (document.cookie) this.cookies = this.parseCookie(document.cookie);
+    console.log('cookie loaded')
+    console.log(this.cookies);
+  }
+  store(){
+    Object.keys(this.cookies).forEach(key => {
+      document.cookie = `${key}=${this.cookies[key]}; expires=${this.expires}; SameSite=${this.SameSite}; Secure;`;
+    });
+    console.log('cookie stored');
+    console.log(this.cookies);
+  }
+  toString(cookies = this.cookies){
+    let string = '';
+    Object.keys(cookies).forEach(key => {
+      string += `${key}=${cookies[key]}; `;
+    })
+    return string;
+  }
+  setExpire(days){
+    this.expires = new Date(Date.now() + 86400 * 10000 * days);
+  }
+}

src/lib/getTimeStrings.js

@@ -0,0 +1,10 @@
+export function getTime(time) {
+  let date = new Date(time);
+  return `${date.getHours()}:${(date.getMinutes() < 10) ? '0' : ''}${date.getMinutes()}`;
+}
+
+export function 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()}`;
+}

src/lib/matrixHandler.js

@@ -0,0 +1,75 @@
+import matrix from 'matrix-js-sdk';
+
+export class MatrixHandler {
+  constructor(clientDisplayName = 'matrix-chat') {
+    this.clientDisplayName = clientDisplayName;
+    this.accessToken;
+    this.client = undefined;
+    this.rooms = [];
+    this.loading = undefined;
+    this.user = undefined;
+    this.baseUrl = undefined;
+  }
+  login(user, password, baseUrl, onError, callback = ()=>{}){
+    if (this.client){ console.log('there is already an active session'); return; }
+    this.client = new matrix.createClient({
+      baseUrl: baseUrl
+    });
+    this.client.login('m.login.password', {
+      user: user,
+      password: password,
+      initial_device_display_name: this.clientDisplayName,
+    }).then((response) => {
+      if (response.error) {
+        this.logout();
+        console.log(`login error => ${response.error}`);
+        onError(response.error);
+      }
+      if (response.access_token){
+        console.log(`access token => ${response.access_token}`);
+        callback(response.access_token);
+        this.user = user;
+        this.baseUrl = baseUrl;
+        this.startSync()
+      }
+    }).catch(error => {
+      this.logout();
+      console.log(error);
+      onError(error.toString());
+    })
+  }
+  tokenLogin(baseUrl, accessToken, userId){
+    if (this.client){ console.log('there is already an active session'); return; }
+    this.client = new matrix.createClient({baseUrl, accessToken, userId});
+    this.user = userId;
+    this.baseUrl = baseUrl;
+    this.startSync();
+  }
+  logout(){
+    this.client.stopClient();
+    this.client = undefined;
+  }
+  startSync(callback = ()=>{}){
+    this.loading = true;
+    this.client.startClient();
+    this.client.once('sync', (state) => {
+      console.log(state);
+      this.rooms = this.client.getRooms();
+      console.log(this.rooms)
+      this.loading = false;
+      callback();
+    });
+    this.client.on('event', (event) => {
+      if (event.getType() === 'm.room.create') {
+        console.log(event)
+      }
+    })
+  }
+  async sendEvent(msg, roomId){
+    await this.client.sendEvent(roomId, msg.type, msg.content, '').then(() => {
+      console.log('message sent successfully');
+    }).catch((err) => {
+      console.log(`error while sending message => ${err}`);
+    });
+  }
+}

src/lib/splitArray.js

@@ -0,0 +1,10 @@
+export default function splitArray(arr, key, get=obj=>obj){
+  let payload = [[]];
+  arr.forEach((obj, i) => {
+    let nextObj = arr[i+1];
+    payload[payload.length-1].push(get(obj));
+    if (!nextObj) return payload;
+    if (key(obj) !== key(nextObj)) payload.push([]);
+  })
+  return payload;
+}

src/main.js

@@ -1,81 +1,26 @@
-import Vue from "vue"
+import Vue from 'vue'
-import VueRouter from "vue-router"
+import VueRouter from 'vue-router'
-import App from "./App.vue"
+import App from './App.vue'
-import login from "./views/login.vue"
+import {router} from './router.js'
-import chat from "./views/chat.vue"
+import {MatrixHandler} from './lib/matrixHandler.js'
-import rooms from "./views/rooms.vue"
+import {cookieHandler} from './lib/cookieHandler.js';
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
-Vue.use(VueRouter)
+Vue.use(VueRouter);
 
-const router = new VueRouter({
+export let matrix = new MatrixHandler();
-    routes: [
-        {
-            path: "/",
-            name: "home",
-            component: login
-        },
-        {
-            path: "/login",
-            name: "login",
-            component: login
-        },
-        {
-            path: "/chat/*",
-            name: "chat",
-            component: chat
-        },
-        {
-            path: "/rooms/*",
-            name: "room",
-            component: rooms
-        },
-        {
-            path: "/rooms",
-            name: "rooms",
-            component: rooms
-        }
-    ]
-})
 
-let chatroom = {
+let cookie = new cookieHandler().getCookies();
-    name: "open chat",
+if (cookie && cookie.baseUrl && cookie.accessToken && cookie.userId) {
-    user: [],
+  matrix.tokenLogin(cookie.baseUrl, cookie.accessToken, cookie.userId);
-    username: "you",
-    messages: []
-}
-
-export default {
-    data(){
-        return {
-            chatroom: chatroom
-        }
-    },
-    methods: {
-        error(msg){
-            show_error(msg)
-        },
-        router(route){router.push(route)}
-    }
 }
 
 new Vue({
-    el: "#app",
+  el: '#app',
-    router,
+  router,
-    template: "<App/>",
+  template: '<App/>',
-    components: {App},
+  components: {App},
-    data(){
+  data() {
-        return {
+    return {}
-            chatroom: chatroom
+  }
-        }
+}).$mount('#app');
-    }
-}).$mount("#app")
-
-function element(id){ return document.getElementById(id)}
-function show_error(msg) {
-    let error_style = element("errorBox").style
-    element("errorMessage").innerText = msg
-    error_style.display = "block"
-    error_style.animation = "slide-from-left alternate 0.2s"
-    setTimeout(() => {error_style.animation = ""}, 200)
-}

src/matrix.js

@@ -1,8 +1,8 @@
-import matrix from 'matrix-js-sdk';
+/*import matrix from 'matrix-js-sdk';
 import main from '@/main.js';
 // import Vue from 'vue';
 
-let client = matrix.createClient({});
+let client = undefined;
 let session = {
   user: '',
   baseUrl: '',
@@ -44,23 +44,12 @@ export default {
   data() {
     return {
       session,
+      client
     };
   },
   methods: {
     login() {
-      if (session.accessToken !== '') {
+
-        main.methods.error('you are already logged in');
-        return;
-      } if (session.login.user === '') {
-        main.methods.error('username is empty');
-        return;
-      } if (session.login.password === '') {
-        main.methods.error('password is empty');
-        return;
-      } if (!(session.login.user.includes('@') && session.login.user.includes(':'))) {
-        main.methods.error('username is in wrong style');
-        return;
-      }
       client = matrix.createClient({
         baseUrl: session.login.baseUrl
       });
@@ -72,6 +61,7 @@ export default {
         document.cookie = `accessToken=${response.access_token}`;
         document.cookie = `userId=${session.login.user}`;
         document.cookie = `baseUrl=${session.login.baseUrl}`;
+        document.cookie = `SameSite=Strict`;
         document.cookie = `expires=${new Date(Date.now() + 86400 * 10 * 1000)}`;
         session = {
           user: session.login.user,
@@ -86,12 +76,12 @@ export default {
           console.log(`login error => ${response.error}`);
         }
         window.location.href = '/#/rooms/';
-        window.location.reload();
+        window.location.reload();*/
         /*client.startClient();
         client.once('sync', (state) => {
           console.log(state);
         });*/
-      });
+/*      });
     },
     logout(){
       document.cookie = `accessToken=`;
@@ -124,7 +114,7 @@ function getCookie(key) {
   return cookie ? cookie.split('=')[1] : false;
 }
 
-client.on('event', (event) => {
+/*client.on('event', (event) => {
   //console.log(event.getType());
   //console.log(event);
   if (event.getType() === 'm.room.name') {
@@ -175,4 +165,4 @@ client.on('Room.timeline', (event, room) => {
       } else document.getElementById('scrollDown').style.display = 'block';
     }
   }
-});
+});*/

src/router.js

@@ -0,0 +1,34 @@
+import VueRouter from 'vue-router';
+import login from '@/views/login';
+import chat from '@/views/chat';
+import rooms from '@/views/rooms';
+
+export const router = new VueRouter({
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: login
+    },
+    {
+      path: '/login',
+      name: 'login',
+      component: login
+    },
+    {
+      path: '/chat/*',
+      name: 'chat',
+      component: chat
+    },
+    {
+      path: '/rooms/*',
+      name: 'room',
+      component: rooms
+    },
+    {
+      path: '/rooms',
+      name: 'rooms',
+      component: rooms
+    }
+  ]
+})

src/views/chat.vue

@@ -1,103 +1,112 @@
 <template>
   <div>
-    <div @scroll="scrollHandler()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
+    <div ref="chatContainer" class="chatContainer">
-      <div id="messages" class="messages">
+      <div @scroll="scrollHandler()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
-        <p v-if="session.currentRoom.messages.length === 0" class="info">this room is empty</p>
+        <div v-if="loadingStatus" @click="loadEvents()" class="loadMore">{{loadingStatus}}</div>
-        <div v-for="(message, i) in session.currentRoom.messages" :key="message.origin_server_ts">
+        <p v-if="room.timeline.length === 0" class="chatInfo">this room is empty</p>
-          <div v-if="i===0 || getDate(session.currentRoom.messages[i-1].origin_server_ts)!==getDate(message.origin_server_ts)"
+        <timeline :timeline="room.timeline" :group-timeline="isGroup()" :user="user"/>
-               style="margin-left: 2rem; margin-top: 1rem" class="info">{{getDate(message.origin_server_ts)}}
-          </div>
-          <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>
-          <message :msgClass="message.sender === session.user?'messageSend':'messageReceive'"
-                   :msg=message.content.body :time=getTime(message.origin_server_ts) />
-        </div>
       </div>
+      <icon v-if="showScrollBtn" @click.native="scrollToBottom()" id="scrollDown" ic="./sym/expand_more-black-24dp.svg" />
     </div>
-    <newMessage />
+    <newMessage :onResize="height=>resize(height)" :roomId="room.roomId"/>
-    <icon v-if="showScrollBtn" v-on:click.native="scrollToBottom()" id="scrollDown" ic="./sym/expand_more-black-24dp.svg" />
+    <topBanner :room="room" :close-chat="()=>closeChat()" :open-chat-info="()=>openChatInfo()"/>
-    <topBanner />
   </div>
 </template>
 
 <script>
-import message from '@/components/message.vue';
 import newMessage from '@/components/newMessage.vue';
 import topBanner from '@/components/topBanner.vue';
-import main from '@/main.js';
+import Icon from '@/components/icon';
-import Icon from "@/components/icon";
+import {matrix} from '@/main';
-import matrix from '@/matrix.js';
+import splitArray from '@/lib/splitArray.js'
+import timeline from '@/components/timeline';
 
 export default {
   name: 'chat',
   components: {
+    timeline,
     Icon,
-    message,
     newMessage,
     topBanner
   },
+  props: {
+    room: [Object, undefined],
+    user: String,
+    closeChat: Function,
+    openChatInfo: Function
+  },
   methods:{
     scrollToBottom(){
-      let msgContainer = document.getElementById("messagesContainer")
+      this.$refs.msgContainer.scrollTop = this.$refs.msgContainer.scrollHeight;
-      msgContainer.scrollTo(0, msgContainer.scrollHeight)
-    },
-    getTime(time){
-      let date = new Date(time);
-      return `${date.getHours()}:${(date.getMinutes()<10)?"0":""}${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){
+      if (this.$refs.msgContainer.scrollTop === 0) this.loadEvents();
-        console.log("load messages")
+      let msg = this.$refs.msgContainer;
-      }
+      this.showScrollBtn = msg.scrollHeight - msg.scrollTop > msg.offsetHeight + 200;
-      let msgContainer = document.getElementById("messagesContainer")
+    },
-      this.showScrollBtn = msgContainer.scrollHeight - msgContainer.scrollTop > msgContainer.offsetHeight + 200;
+    resize(height){
-    }
+      this.$refs.chatContainer.style.height = `calc(100% - ${height}px - 3.5rem)`;
+    },
+    isGroup(){
+      return Object.keys(this.room.currentState.members).length > 2;
+    },
+    async loadEvents(){
+      this.loadingStatus = 'loading ...';
+      await matrix.client.paginateEventTimeline(this.room.getLiveTimeline(), {backwards: true})
+        .then(state => this.loadingStatus = state?'load more':false);
+    },
+    getUser(userId){
+      return matrix.client.getUser(userId);
+    },
+    splitArray
   },
   data(){
     return {
-      chatroom: main.data().chatroom,
-      session: matrix.data().session,
       showScrollBtn: false,
-      scrollOnUpdate: true
+      scrollOnUpdate: true,
+      loadingStatus: 'load more'
     }
   },
   updated(){
     //this.scrollToBottom();
+  },
+  mounted(){
+    //this.scrollToBottom();
   }
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
-.messagesContainer{
+.chatContainer{
   position: absolute;
   margin: 0;
   left: 0;
-  top: 3rem;
+  top: 3.5rem;
-  height: calc(100% - 7rem);
   width: 100%;
-  overflow-y: auto;
+  height: calc(100% - 7rem);
+  .messagesContainer{
+    height: 100%;
+    overflow-y: auto;
+  }
+  #scrollDown{
+    position: absolute;
+    background-color: #fff;
+    bottom: 1rem;
+    right: 1rem;
+    display: block;
+    height: 2rem;
+    width: 2rem;
+  }
 }
-.messages{
+.loadMore{
   position: relative;
-  margin-top: 1rem;
+  background-color: #2d2d2d;
-  margin-bottom: 1rem;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  width: fit-content;
+  left: 50%;
+  transform: translate(-50%,0);
+  margin-top: 0.5rem;
+  cursor: pointer;
 }
-#scrollDown{
+</style>
-  position: absolute;
-  background-color: #fff;
-  bottom: 5rem;
-  right: 1rem;
-  display: block;
-}
-.info{
-  text-align: center;
-  font-style: italic;
-  margin: 1rem;
-}
-</style>

src/views/login.vue

@@ -1,15 +1,16 @@
 <template>
   <div id="login">
     <h1 class="title">[chat]</h1>
-    <form v-if="session.login" @submit.prevent="login()">
+    <form v-if="showLogin" @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="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>
+      <input v-model="password" class="input" name="password" type="password" maxlength="30" placeholder="password"><br>
-      <input v-model="session.login.baseUrl" class="input" name="homeserver" maxlength="50" placeholder="https://matrix.org"><br>
+      <input v-model="homeServer" class="input" name="homeserver" maxlength="50" placeholder="https://matrix.org"><br>
+      <div v-if="loginError" class="info">{{loginError}}</div>
       <textbtn type="submit" text="login" />
     </form>
     <div v-else>
       <p>you are already logged in</p>
-      <textbtn @click.native="$router.push('room')" text="chat" />
+      <textbtn @click.native="$router.push('rooms')" text="chat" />
       <textbtn @click.native="logout()" text="logout" />
     </div>
   </div>
@@ -17,7 +18,8 @@
 
 <script>
 import textbtn from '@/components/textbtn';
-import matrix from '@/matrix.js';
+import {matrix} from '@/main.js';
+import {cookieHandler} from "@/lib/cookieHandler";
 
 export default {
   name: "login.vue",
@@ -26,15 +28,44 @@ export default {
   },
   methods: {
     login(){
-      matrix.methods.login();
+      if (matrix.client !== undefined) {
+        this.loginError = 'you are already logged in';
+        return;
+      } if (this.user === '') {
+        this.loginError = 'username is empty';
+        return;
+      } if (this.password === '') {
+        this.loginError = 'password is empty';
+        return;
+      } if (!(this.user.match(/^@[a-zA-Z0-9]+:[a-z0-9]+\.[a-z]/))) {
+        this.loginError = 'username is in wrong style';
+        return;
+      }
+      matrix.login(this.user, this.password, this.homeServer, (error) => {
+        this.loginError = `login failed: ${error}`;
+      }, token => {
+        let cookie = new cookieHandler();
+        cookie.setCookie({
+          baseUrl: this.homeServer,
+          userId: this.user,
+          accessToken: token
+        });
+        cookie.setExpire(15);
+        cookie.store();
+        this.$router.push('/rooms/');
+      });
     },
     logout(){
-      matrix.methods.logout();
+      matrix.logout();
     }
   },
   data(){
     return {
-      session: matrix.data().session
+      user: "",
+      password: "",
+      homeServer: "https://adb.sh",
+      loginError: "",
+      showLogin: (matrix.client === undefined)
     }
   }
 }
@@ -59,7 +90,7 @@ input{
   border: 1px solid #fff;
   text-align: center;
   font-size: 1.1rem;
-  margin-top: 1rem;
+  margin: 0.5rem;
   appearance: none;
   outline: none;
 }

src/views/rooms.vue

@@ -1,51 +1,80 @@
 <template>
-  <div>
+  <div v-if="matrix.loading">
+    loading...
+  </div>
+  <div v-else>
     <div id="roomList" class="roomList">
       <h1>[chat]</h1>
-      <h2>{{session.rooms.length}} rooms:</h2>
+      <div v-for="room in matrix.rooms" :key="room.roomId" @click="openChat(room)" class="roomListElement">
-      <div v-for="room in session.rooms" :key="room.roomId" @click="openChat(room)" class="roomListElement">
+        <userThumbnail
-        <div class="roomImgPlaceholder">{{room.name.substr(0,2)}}</div>
+          class="roomImg"
+          :mxcURL="getUrl(room)"
+          :fallback="room.roomId"
+          :size="3"
+        />
         <div class="roomListName">{{room.name}}</div>
       </div>
     </div>
-    <chat class="chat" v-if="session.currentRoom" />
+    <chat
+      class="chat"
+      v-if="currentRoom"
+      :room="currentRoom"
+      :user="matrix.user"
+      :close-chat="()=>currentRoom=undefined"
+      :open-chat-info="()=>showChatInfo=true"
+    />
     <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 matrix.rooms" :key="index" @click="openChat(room)" class="roomListElement" :title="room.name">
-      <div v-for="(room, index) in session.rooms" :key="index" @click="openChat(room)" class="roomListElement" :title="room.name">
+        <userThumbnail
-        <div class="roomImgPlaceholder">{{room.name.substr(0,2)}}</div>
+            class="roomImg"
+            :mxcURL="getUrl(room)"
+            :fallback="room.roomId"
+            :size="3"
+        />
         <div class="roomListName">{{room.name}}</div>
       </div>
     </div>
-    <chatInformation v-if="session.currentRoom" :room="session.currentRoom"/>
+    <chatInformation v-if="currentRoom && showChatInfo" :room="currentRoom" :close-chat-info="()=>showChatInfo=false"/>
   </div>
 </template>
 
 <script>
-import matrix from '@/matrix.js';
 import chat from '@/views/chat.vue';
 import chatInformation from "@/components/chatInformation";
+import userThumbnail from "@/components/userThumbnail";
+import {matrix} from "@/main";
+import sdk from "matrix-js-sdk";
 
 export default {
   name: "rooms",
   components:{
     chat,
-    chatInformation
+    chatInformation,
+    userThumbnail
   },
   methods:{
     openChat(room){
-      this.session.currentRoom = room;
+      this.currentRoom = room;
-      this.$router.push(`/rooms/${room.roomId}`)
+      this.$router.push(`/rooms/${room.roomId}`);
-      this.$forceUpdate()
+      this.$forceUpdate();
-      let msgContainer = document.getElementById("messagesContainer")
+      //chat.methods.scrollToBottom();
-      setTimeout(() => {msgContainer.scrollTo(0, msgContainer.scrollHeight)}, 50)
+    },
+    getUrl(room){
+      let avatarState = room.getLiveTimeline().getState(sdk.EventTimeline.FORWARDS).getStateEvents("m.room.avatar");
+      return avatarState.length>0?avatarState[avatarState.length-1].getContent().url:undefined;
     }
   },
   data(){
     return {
-      session: matrix.data().session
+      matrix,
+      currentRoom: undefined,
+      showChatInfo: false
     }
+  },
+  mounted() {
+    if (matrix.client === undefined) this.$router.push('/login');
   }
 }
 </script>
@@ -116,17 +145,13 @@ export default {
   left: 20rem;
   text-align: center;
 }
-.roomImgPlaceholder{
+.roomImg{
   position: absolute;
-  left: 1rem;
+  left: 0.5rem;
-  height: 2rem;
+  height: 3rem;
   width: 3rem;
-  padding-top: 1rem;
-  background-color: #42a7b9;
-  border-radius: 1.5rem;
-  text-align: center;
 }
-.roomImgPlaceholder.small{
+.roomImg.small{
   margin-left: calc(50% - 2rem);
 }