debug and add localStorage

package.json

@@ -8,8 +8,6 @@
     "lint": "vue-cli-service lint"
   },
   "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",

src/components/newMessage.vue

@@ -36,7 +36,7 @@
      <fileUpload class="leftBtn" :on-change="setAttachment"/>
     </div>
     <v-emoji-picker
-      v-if="showEmojiPicker"
+      v-show="showEmojiPicker"
       class="emojiPicker"
       @select="onSelectEmoji"
       :dark="true"
@@ -79,7 +79,7 @@ export default {
     },
     async sendEvent(event){
       if (!event.content.body.trim()) return;
-      if (this.replyTo) this.setReplyTo(this.replyTo);
+      this.setReplyTo(this.replyTo);
       matrix.sendEvent(new Proxy(this.event, this.eventProxyHandler), this.roomId);
       event.content.body = '';
       this.resetAttachment();
@@ -139,7 +139,7 @@ export default {
       };
     },
     resetAttachment(){
-      if (!this.attachment) return;
+      if (!this.attachment) return this.attachment = undefined;
       window.URL.revokeObjectURL(this.attachment.file);
       this.event.content = {
         body: this.attachment?this.event.content.body.replace(this.attachment.filename, ''):'',

src/lib/DataStore.js

@@ -0,0 +1,22 @@
+import {cookieHandler} from '@/lib/cookieHandler';
+
+export class DataStore{
+  constructor(){
+    this.cookie = new cookieHandler();
+    this.cookie.setExpire(15);
+    this.store = localStorage;
+  }
+  set(key, value){
+    this.cookie.set(key, value);
+    this.cookie.store();
+    this.store.setItem(key, value);
+  }
+  get(key){
+    return this.store.getItem(key) || this.cookie.get(key);
+  }
+  setObj(obj){
+    this.cookie.setCookies(obj);
+    this.cookie.store();
+    Object.keys(obj).forEach(key => this.store.setItem(key, obj[key]));
+  }
+}

src/lib/MatrixHandler.js

@@ -48,7 +48,8 @@ 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/lib/cookieHandler.js

@@ -8,11 +8,17 @@ export class cookieHandler {
   getCookies(){
     return this.cookies;
   }
-  setCookie(cookies){
+  setCookies(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 => {
@@ -24,14 +30,12 @@ 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/main.js

@@ -2,17 +2,18 @@ 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 {cookieHandler} from './lib/cookieHandler.js';
+import {MatrixHandler} from './lib/MatrixHandler.js'
+import {DataStore} from '@/lib/DataStore';
 
 Vue.config.productionTip = false;
 Vue.use(VueRouter);
 
 export let matrix = new MatrixHandler();
 
-let cookie = new cookieHandler().getCookies();
-if (cookie && cookie.baseUrl && cookie.accessToken && cookie.userId) {
-  matrix.tokenLogin(cookie.baseUrl, cookie.accessToken, cookie.userId);
+let store = new DataStore();
+
+if (store.get('baseUrl') && store.get('accessToken') && store.get('userId')) {
+  matrix.tokenLogin(store.get('baseUrl'), store.get('accessToken'), store.get('userId'));
 }
 
 new Vue({

src/views/login.vue

@@ -22,9 +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';
 
 export default {
   name: 'login.vue',
@@ -52,14 +52,11 @@ export default {
         this.loginError = `login failed: ${error}`;
         this.loading = false;
       }, token => {
-        this.loading = 'store token';
-        this.cookie.setCookie({
+        this.store.setObj({
           baseUrl: this.homeServer,
           userId: this.user,
           accessToken: token
         });
-        this.cookie.setExpire(15);
-        this.cookie.store();
         this.loading = false;
         this.$router.push('/rooms/');
       });
@@ -67,14 +64,11 @@ export default {
     async logout(){
       this.loading = 'logging out';
       await matrix.logout();
-      this.loading = 'remove token';
-      this.cookie.setCookie({
+      this.store.setObj({
         baseUrl: undefined,
         userId: undefined,
         accessToken: undefined
       });
-      this.cookie.setExpire(0);
-      this.cookie.store();
       this.loading = false;
       this.$forceUpdate();
     },
@@ -88,7 +82,7 @@ export default {
       password: '',
       homeServer: 'https://adb.sh',
       loginError: '',
-      cookie: new cookieHandler(),
+      store: new DataStore(),
       loading: false
     }
   }