send messages

src/components/message.vue

@@ -26,7 +26,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;

src/components/messageReceive.vue

@@ -25,7 +25,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;

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()" @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
     }
   }
 }
@@ -89,15 +90,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/matrix.js

@@ -12,7 +12,11 @@ let session = {
     password: "",
     accessToken: "",
     rooms: [],
-    currentRoom: undefined
+    currentRoom: undefined,
+    login:{
+        user: "",
+        password: ""
+    }
 };
 
 console.log(document.cookie)
@@ -45,16 +49,25 @@ export default {
             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 = matrix.createClient("https://adb.sh");
             matrix_cli.login("m.login.password", {
-                user: session.user,
-                password: session.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.user}`;
+                document.cookie = `userId=${session.login.user}`;
                 session = {
+                    user: session.login.user,
                     password: "",
                     accessToken: response.access_token,
                     rooms: [],
@@ -71,6 +84,21 @@ export default {
                     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")
+            })
         }
     }
 }
@@ -108,4 +136,11 @@ matrix_cli.on("Room.timeline", event => {
         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/login.vue

@@ -2,8 +2,8 @@
   <div id="login">
     <h1 class="title">[chat]</h1>
     <form @submit.prevent="login()">
-      <input v-model="session.user" class="input" name="user" type="text" maxlength="30" placeholder="@user:adb.sh"><br>
-      <input v-model="session.password" class="input" name="password" type="password" maxlength="30" placeholder="password"><br>
+      <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>

src/views/rooms.vue

@@ -3,7 +3,7 @@
     <div id="roomList" class="roomList">
       <h1>[chat]</h1>
       <h2>{{session.rooms.length}} rooms:</h2>
-      <div v-for="(room, index) in session.rooms" :key="index" @click="openChat(room)" class="roomListElement">
+      <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>
@@ -34,6 +34,8 @@ export default {
       this.session.currentRoom = room;
       this.$router.push(`/rooms/${room.roomId}`)
       this.$forceUpdate()
+      let msgContainer = document.getElementById("messagesContainer")
+      setTimeout(() => {msgContainer.scrollTo(0, msgContainer.scrollHeight)}, 10)
     }
   },
   data(){