show links

src/components/chatInformation.vue

@@ -10,7 +10,7 @@
         </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">
+        <div v-for="member in room.members.slice(0,20)" :key="member.sender" class="contentBox" :title="member.sender">
           <!---<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>

src/components/message.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="messageContainer">
-    <div class="message" :title="time">
-      {{msg}}
+    <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>
@@ -13,6 +14,21 @@ export default {
   props: {
     msg: String,
     time: String,
+    msgClass: String
+  },
+  methods:{
+    solveTextLinks(text){
+      return (text || "").replace(
+        /([^\S]|^)(((https?:\/\/)|(www\.))(\S+))/gi,
+        (match, space, url)=>{
+          let hyperlink = url;
+          if (!hyperlink.match('^https?://')) {
+            hyperlink = 'http://' + hyperlink;
+          }
+          return `${space}<a href="${hyperlink}" target="_blank">${url}</a>`;
+        }
+      )
+    }
   }
 }
 </script>
@@ -25,7 +41,6 @@ export default {
     left: 1rem;
   }
   .message{
-    margin-left:auto; margin-right:0;
     position: relative;
     width: max-content;
     min-width: 2rem;
@@ -38,6 +53,15 @@ export default {
     word-break: break-word;
     white-space: pre-line;
   }
+  .messageReceive{
+    background-color: #42b983;
+    border-radius: 1rem 1rem 1rem 0;
+  }
+  .messageSend{
+    margin-left:auto; margin-right:0;
+    background-color: #42a7b9;
+    border-radius: 1rem 1rem 0 1rem;
+  }
   .time{
     position: relative;
     bottom: -0.2rem;

src/components/messageReceive.vue

@@ -1,46 +0,0 @@
-<template>
-  <div class="messageContainer">
-    <div class="message" :title="time">
-      {{msg}}
-      <div class="time">{{time}}</div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "messageReceive",
-  props: {
-    msg: String,
-    time: String
-  }
-}
-</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);
-    padding: 0.7rem 1rem 0.45rem 1rem;
-    left: 0;
-    background-color: #42b983;
-    border-radius: 1rem 1rem 1rem 0;
-    text-align: left;
-    word-break: break-word;
-    white-space: pre-line;
-  }
-  .time{
-    position: relative;
-    bottom: -0.2rem;
-    font-size: 0.7rem;
-    text-align: right;
-  }
-</style>

src/matrix.js

@@ -22,6 +22,7 @@ let session = {
 console.log(document.cookie)
 
 if (getCookie("accessToken") && getCookie("userId")){
+    document.cookie = `expires=${ new Date(Date.now()+86400*10*1000)}`;
     session = {
         user: getCookie("userId"),
         password: "",
@@ -66,6 +67,7 @@ export default {
             }).then((response) => {
                 document.cookie = `accessToken=${response.access_token}`;
                 document.cookie = `userId=${session.login.user}`;
+                document.cookie = `max-expires=${ new Date(Date.now()+86400*10*1000)}`;
                 session = {
                     user: session.login.user,
                     password: "",

src/views/chat.vue

@@ -10,9 +10,8 @@
           <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) />
+          <message :msgClass="message.sender === session.user?'messageSend':'messageReceive'"
+                   :msg=message.content.body :time=getTime(message.origin_server_ts) />
         </div>
       </div>
     </div>
@@ -24,7 +23,6 @@
 
 <script>
 import message from '@/components/message.vue';
-import messageReceive from '@/components/messageReceive.vue';
 import newMessage from '@/components/newMessage.vue';
 import topBanner from '@/components/topBanner.vue';
 import main from '@/main.js';
@@ -36,7 +34,6 @@ export default {
   components: {
     Icon,
     message,
-    messageReceive,
     newMessage,
     topBanner
   },