src/components/newMessage.vue

@@ -22,7 +22,7 @@
       type="submit"
       title="press enter to submit"
       class="sendMessageBtn"
-      :ic="isSending?'./sym/throbber.svg':'./sym/ic_send_white.svg'"
+      ic="./sym/ic_send_white.svg"
       @click.native="onSubmit(event)"
     />
     <sound-recorder v-else class="recorder" :on-stop="setAttachment" ref="recorder"/>
@@ -36,7 +36,7 @@
      <fileUpload class="leftBtn" :on-change="setAttachment"/>
     </div>
     <v-emoji-picker
-      v-show="showEmojiPicker"
+      v-if="showEmojiPicker"
       class="emojiPicker"
       @select="onSelectEmoji"
       :dark="true"
@@ -74,15 +74,13 @@ export default {
   },
   methods: {
     onSubmit(event){
-      if (this.isSending) return;
+      console.log(event)
       event.content.msgtype==='m.text'?this.sendEvent(event):this.sendMediaEvent(event);
     },
     async sendEvent(event){
       if (!event.content.body.trim()) return;
-      this.setReplyTo(this.replyTo);
+      if (this.replyTo) this.setReplyTo(this.replyTo);
-      this.isSending = true;
+      matrix.sendEvent(new Proxy(this.event, this.eventProxyHandler), this.roomId);
-      await matrix.sendEvent(new Proxy(this.event, this.eventProxyHandler), this.roomId);
-      this.isSending = false;
       event.content.body = '';
       this.resetAttachment();
       this.resetReplyTo();
@@ -91,7 +89,6 @@ export default {
       this.onResize(id.parentElement.clientHeight);
     },
     sendMediaEvent(event){
-      this.isSending = true;
       matrix.client.uploadContent(this.attachment.blob).then(mxc => {
         event.content.url = mxc;
         this.sendEvent(event);
@@ -142,7 +139,7 @@ export default {
       };
     },
     resetAttachment(){
-      if (!this.attachment) return this.attachment = undefined;
+      if (!this.attachment) return;
       window.URL.revokeObjectURL(this.attachment.file);
       this.event.content = {
         body: this.attachment?this.event.content.body.replace(this.attachment.filename, ''):'',
@@ -172,21 +169,20 @@ export default {
           }
         }
       },
+      showEmojiPicker: false,
+      waitForSendTyping: false,
+      attachment: undefined,
       eventProxyHandler: {
         set: () => true,
         get: (target, key) => {
           if (typeof target[key] === 'object') return new Proxy(Object.assign({}, target[key]), this.eventProxyHandler);
           return target[key];
         }
-      },
+      }
-      showEmojiPicker: false,
-      waitForSendTyping: false,
-      attachment: undefined,
-      isSending: false
     }
   },
   updated() {
-    this.$nextTick(this.resizeMessageBanner);
+    this.resizeMessageBanner();
   }
 }
 </script>

src/lib/DataStore.js

@@ -1,21 +0,0 @@
-import {cookieHandler} from '@/lib/cookieHandler';
-import {Capacitor, Plugins} from '@capacitor/core';
-const {Storage} = Plugins;
-
-export class DataStore{
-  constructor(){
-    this.cookie = new cookieHandler();
-    this.cookie.setExpire(15);
-    this.store = localStorage;
-  }
-  async set(key, value){
-    if (Capacitor.isNative) return await Storage.set({key, value: JSON.stringify(value)});
-    this.store.setItem(key, JSON.stringify(value));
-    this.cookie.set(key, JSON.stringify(value));
-    this.cookie.store();
-  }
-  async get(key){
-    if (Capacitor.isNative) return JSON.parse((await Storage.get({key})).value||'null');
-    return JSON.parse(this.store.getItem(key) || this.cookie.get(key) || 'null');
-  }
-}

src/lib/cookieHandler.js

@@ -8,17 +8,11 @@ export class cookieHandler {
   getCookies(){
     return this.cookies;
   }
-  setCookies(cookies){
+  setCookie(cookies){
     Object.keys(cookies).forEach(key => {
       this.cookies[key] = cookies[key];
     })
   }
-  set(key, value){
-    this.cookies[key] = value;
-  }
-  get(key){
-    return this.cookies[key];
-  }
   parseCookie(string){
     let cookies = {};
     string.replace(/ /g, '').split(';').forEach(cookie => {
@@ -30,12 +24,14 @@ export class cookieHandler {
   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 = '';

src/lib/matrixHandler.js

@@ -48,8 +48,7 @@ export class MatrixHandler {
       baseUrl,
       accessToken,
       userId,
-      store: new matrix.MemoryStore(window.localStorage),
+      store: new matrix.MemoryStore(window.localStorage)
-      sessionStore: new matrix.WebStorageSessionStore(window.localStorage)
     });
     this.user = userId;
     this.baseUrl = baseUrl;

src/main.js

@@ -2,21 +2,20 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import App from './App.vue'
 import {router} from '@/router'
-import {MatrixHandler} from './lib/MatrixHandler.js'
+import {MatrixHandler} from './lib/matrixHandler.js'
-import {DataStore} from '@/lib/DataStore';
+import {cookieHandler} from './lib/cookieHandler.js';
 
 Vue.config.productionTip = false;
 Vue.use(VueRouter);
 
 export let matrix = new MatrixHandler();
 
-(async () => {
+let cookie = new cookieHandler().getCookies();
-  let login = await new DataStore().get('login');
+if (cookie && cookie.baseUrl && cookie.accessToken && cookie.userId) {
-  if (login && login.baseUrl && login.accessToken && login.userId) {
+  matrix.tokenLogin(cookie.baseUrl, cookie.accessToken, cookie.userId);
-    matrix.tokenLogin(login.baseUrl, login.accessToken, login.userId);
+}
-  }
 
-  new Vue({
+new Vue({
   el: '#app',
   router,
   template: '<App/>',
@@ -24,7 +23,4 @@ export let matrix = new MatrixHandler();
   data() {
     return {}
   }
-  }).$mount('#app');
+}).$mount('#app');
-})()
-
-

src/router/index.js

@@ -9,7 +9,7 @@ export const router = new VueRouter({
     {
       path: '/',
       name: 'home',
-      component: rooms
+      component: login
     },
     {
       path: '/login',

src/views/login.vue

@@ -22,10 +22,9 @@
 <script>
 import textbtn from '@/components/textbtn';
 import {matrix} from '@/main.js';
+import {cookieHandler} from '@/lib/cookieHandler';
 import ThrobberOverlay from '@/components/throbberOverlay';
 import {isValidUserId} from '@/lib/matrixUtils';
-import {DataStore} from '@/lib/DataStore';
-const store = new DataStore();
 
 export default {
   name: 'login.vue',
@@ -35,18 +34,32 @@ export default {
   },
   methods: {
     login(){
-      // eslint-disable-next-line no-cond-assign
+      if (matrix.client !== undefined) {
-      if (this.loginError = this.getInputErrors()) return false;
+        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 (!isValidUserId(this.user)) {
+        this.loginError = 'username is in wrong style';
+        return;
+      }
       this.loading = 'logging in';
       matrix.login(this.user, this.password, this.homeServer, (error) => {
         this.loginError = `login failed: ${error}`;
         this.loading = false;
       }, token => {
-        this.store.set('login', {
+        this.loading = 'store token';
+        this.cookie.setCookie({
           baseUrl: this.homeServer,
           userId: this.user,
           accessToken: token
         });
+        this.cookie.setExpire(15);
+        this.cookie.store();
         this.loading = false;
         this.$router.push('/rooms/');
       });
@@ -54,17 +67,17 @@ export default {
     async logout(){
       this.loading = 'logging out';
       await matrix.logout();
-      this.store.set('login', {});
+      this.loading = 'remove token';
+      this.cookie.setCookie({
+        baseUrl: undefined,
+        userId: undefined,
+        accessToken: undefined
+      });
+      this.cookie.setExpire(0);
+      this.cookie.store();
       this.loading = false;
       this.$forceUpdate();
     },
-    getInputErrors(){
-      if (matrix.client !== undefined) return 'you are already logged in';
-      if (this.user === '') return 'username is empty';
-      if (this.password === '') return 'password is empty';
-      if (!isValidUserId(this.user)) return 'username is in wrong style';
-      return false;
-    },
     showLogin(){
       return matrix.client === undefined;
     }
@@ -75,7 +88,7 @@ export default {
       password: '',
       homeServer: 'https://adb.sh',
       loginError: '',
-      store,
+      cookie: new cookieHandler(),
       loading: false
     }
   }