update login and throbber

src/components/throbber.vue

@@ -7,7 +7,7 @@
 
 <script>
 export default {
-name: "throbber",
+  name: "throbber",
   props:{
     text: String
   }

src/components/throbberOverlay.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="overlay">
+    <throbber :text="text" class="throbber"/>
+  </div>
+</template>
+
+<script>
+import throbber from "@/components/throbber";
+export default {
+  name: "throbberOverlay",
+  components:{
+    throbber
+  },
+  props: {
+    text: String
+  }
+}
+</script>
+
+<style scoped>
+.throbber{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.overlay{
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  background-color: #111d;
+  user-select: none;
+}
+</style>

src/lib/matrixHandler.js

@@ -13,7 +13,8 @@ export class MatrixHandler {
   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
+      baseUrl: baseUrl,
+      sessionStore: new matrix.WebStorageSessionStore(window.localStorage)
     });
     this.client.login('m.login.password', {
       user: user,
@@ -40,13 +41,18 @@ export class MatrixHandler {
   }
   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.client = new matrix.createClient({
+      baseUrl,
+      accessToken,
+      userId,
+      sessionStore: new matrix.WebStorageSessionStore(window.localStorage)
+    });
     this.user = userId;
     this.baseUrl = baseUrl;
     this.startSync();
   }
-  logout(){
+  async logout(){
-    this.client.stopClient();
+    await this.client.stopClient();
     this.client = undefined;
   }
   startSync(callback = ()=>{}){

src/views/login.vue

@@ -1,7 +1,8 @@
 <template>
-  <div id="login">
+  <div class="login">
+    <div class="loginBox">
       <h1 class="title">[chat]</h1>
-    <form v-if="showLogin" @submit.prevent="login()">
+      <form v-if="showLogin()" @submit.prevent="login()">
         <input v-model="user" class="input" name="user" type="text" maxlength="30" placeholder="@user:adb.sh"><br>
         <input v-model="password" class="input" name="password" type="password" maxlength="30" placeholder="password"><br>
         <input v-model="homeServer" class="input" name="homeserver" maxlength="50" placeholder="https://matrix.org"><br>
@@ -14,16 +15,20 @@
         <textbtn @click.native="logout()" text="logout" />
       </div>
     </div>
+    <throbber-overlay v-if="loading" :text="loading" class="throbber"/>
+  </div>
 </template>
 
 <script>
 import textbtn from '@/components/textbtn';
 import {matrix} from '@/main.js';
 import {cookieHandler} from "@/lib/cookieHandler";
+import ThrobberOverlay from "@/components/throbberOverlay";
 
 export default {
   name: "login.vue",
   components: {
+    ThrobberOverlay,
     textbtn
   },
   methods: {
@@ -41,22 +46,38 @@ export default {
         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}`;
       }, token => {
-        let cookie = new cookieHandler();
+        this.loading = 'store token';
-        cookie.setCookie({
+        this.cookie.setCookie({
           baseUrl: this.homeServer,
           userId: this.user,
           accessToken: token
         });
-        cookie.setExpire(15);
+        this.cookie.setExpire(15);
-        cookie.store();
+        this.cookie.store();
+        this.loading = false;
         this.$router.push('/rooms/');
       });
     },
-    logout(){
+    async logout(){
-      matrix.logout();
+      this.loading = 'logging out';
+      await matrix.logout();
+      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();
+    },
+    showLogin(){
+      return matrix.client === undefined;
     }
   },
   data(){
@@ -65,14 +86,19 @@ export default {
       password: "",
       homeServer: "https://adb.sh",
       loginError: "",
-      showLogin: (matrix.client === undefined)
+      cookie: new cookieHandler(),
+      loading: false
     }
   }
 }
 </script>
 
 <style scoped>
-#login{
+.login{
+  width: 100%;
+  height: 100%;
+}
+.loginBox{
   position: absolute;
   top: 40%;
   left: 50%;
@@ -98,7 +124,12 @@ input:focus{
   color: #000;
   background-color: #fff;
 }
-
+.throbber{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 
 @media (max-width: 35rem) {
   input {

src/views/rooms.vue

@@ -1,12 +1,12 @@
 <template>
   <div v-if="matrix.loading">
-    <throbber class="throbber" text="loading"/>
+    <throbber-overlay text="loading"/>
   </div>
   <div v-else>
     <div id="roomList" class="roomList">
       <h1>[chat]</h1>
       <input v-model="search" class="input" type="text" maxlength="50" placeholder="search"><br>
-      <div v-for="room in matrix.rooms" :key="room" @click="openChat(room)" >
+      <div v-for="room in matrix.rooms" :key="room.roomId" @click="openChat(room)" >
         <div v-if="!search || room.name.toLowerCase().includes(search.toLowerCase())" class="roomListElement">
           <userThumbnail
             class="roomImg"
@@ -51,12 +51,12 @@ import userThumbnail from "@/components/userThumbnail";
 import {matrix} from "@/main";
 import sdk from "matrix-js-sdk";
 import {getTime} from "@/lib/getTimeStrings";
-import throbber from "@/components/throbber";
+import ThrobberOverlay from "@/components/throbberOverlay";
 
 export default {
   name: "rooms",
   components:{
-    throbber,
+    ThrobberOverlay,
     chat,
     chatInformation,
     userThumbnail
@@ -185,12 +185,6 @@ export default {
 .roomImg.small{
   margin-left: calc(50% - 2rem);
 }
-.throbber{
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
 input{
   padding: 0 2rem 0 2rem;
   height: 2.5rem;