update login

src/lib/cookieHandler.js

@@ -4,6 +4,7 @@ export class cookieHandler {
     this.reload();
   }
   getCookie(key){
+    if (!this.cookies) return undefined;
     let cookie = this.cookies.find(cookie => cookie.split('=')[0] === key);
     return cookie ? cookie.split('=')[1] : false;
   }
@@ -21,7 +22,7 @@ export class cookieHandler {
     return cookies;
   }
   reload(){
-    this.cookies = this.parseCookie(document.cookie)
+    if (document.cookie) this.cookies = this.parseCookie(document.cookie);
   }
   store(){
     document.cookie = this.toString();

src/lib/matrixHandler.js

@@ -1,16 +1,15 @@
 import matrix from 'matrix-js-sdk';
-import {cookieHandler} from '@/lib/cookieHandler.js';
+
+export let client = undefined;
 
 export class MatrixHandler {
   constructor(clientDisplayName = 'matrix-chat') {
     this.clientDisplayName = clientDisplayName;
     this.accessToken;
-    let cookie = new cookieHandler().getCookie();
     this.client = undefined;
-    if (cookie.baseUrl && cookie.accessToken && cookie.userId)
-      this.tokenLogin(cookie.baseUrl, cookie.accessToken, cookie.userId);
+    this.rooms = undefined;
   }
-  login(user, password, baseUrl, onError){
+  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
@@ -20,19 +19,34 @@ export class MatrixHandler {
       password: password,
       initial_device_display_name: this.clientDisplayName,
     }).then((response) => {
-      console.log(`access token => ${response.access_token}`);
       if (response.error) {
+        this.logout();
         console.log(`login error => ${response.error}`);
         onError(response.error);
       }
+      if (response.access_token){
+        console.log(`access token => ${response.access_token}`);
+        console.log(this.client.getRooms());
+        callback(response.access_token);
+      }
+    }).catch(error => {
+      this.logout();
+      console.log(error);
+      onError(error.toString());
     })
   }
   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}).then(response => {
+      console.log(response);
+    });
     this.client.startClient();
     this.client.once('sync', (state) => {
       console.log(state);
     });
   }
+  logout(){
+    this.client.stopClient();
+    this.client = undefined;
+  }
 }

src/main.js

@@ -2,16 +2,18 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import App from './App.vue'
 import {router} from './router.js'
+import {MatrixHandler} from './lib/matrixHandler.js'
+import {cookieHandler} from './lib/cookieHandler.js';
 
-Vue.config.productionTip = false
-Vue.use(VueRouter)
+Vue.config.productionTip = false;
+Vue.use(VueRouter);
 
+export let matrix = new MatrixHandler();
 
-
-export default {
-  methods: {
-    router(route){router.push(route)}
-  }
+let cookie = new cookieHandler().getCookie();
+console.log(`cookie => ${cookie}`)
+if (cookie && cookie.baseUrl && cookie.accessToken && cookie.userId) {
+  matrix.tokenLogin(cookie.baseUrl, cookie.accessToken, cookie.userId);
 }
 
 new Vue({
@@ -19,8 +21,7 @@ new Vue({
   router,
   template: '<App/>',
   components: {App},
-  data(){
-    return {
-    }
+  data() {
+    return {}
   }
-}).$mount('#app')
+}).$mount('#app');

src/matrix.js

@@ -1,8 +1,8 @@
-import matrix from 'matrix-js-sdk';
+/*import matrix from 'matrix-js-sdk';
 import main from '@/main.js';
 // import Vue from 'vue';
 
-let client = matrix.createClient({});
+let client = undefined;
 let session = {
   user: '',
   baseUrl: '',
@@ -44,23 +44,12 @@ export default {
   data() {
     return {
       session,
+      client
     };
   },
   methods: {
     login() {
-      if (session.accessToken !== '') {
-        main.methods.error('you are already logged in');
-        return;
-      } if (session.login.user === '') {
-        main.methods.error('username is empty');
-        return;
-      } if (session.login.password === '') {
-        main.methods.error('password is empty');
-        return;
-      } if (!(session.login.user.includes('@') && session.login.user.includes(':'))) {
-        main.methods.error('username is in wrong style');
-        return;
-      }
+
       client = matrix.createClient({
         baseUrl: session.login.baseUrl
       });
@@ -72,6 +61,7 @@ export default {
         document.cookie = `accessToken=${response.access_token}`;
         document.cookie = `userId=${session.login.user}`;
         document.cookie = `baseUrl=${session.login.baseUrl}`;
+        document.cookie = `SameSite=Strict`;
         document.cookie = `expires=${new Date(Date.now() + 86400 * 10 * 1000)}`;
         session = {
           user: session.login.user,
@@ -86,12 +76,12 @@ export default {
           console.log(`login error => ${response.error}`);
         }
         window.location.href = '/#/rooms/';
-        window.location.reload();
+        window.location.reload();*/
         /*client.startClient();
         client.once('sync', (state) => {
           console.log(state);
         });*/
-      });
+/*      });
     },
     logout(){
       document.cookie = `accessToken=`;
@@ -124,7 +114,7 @@ function getCookie(key) {
   return cookie ? cookie.split('=')[1] : false;
 }
 
-client.on('event', (event) => {
+/*client.on('event', (event) => {
   //console.log(event.getType());
   //console.log(event);
   if (event.getType() === 'm.room.name') {
@@ -175,4 +165,4 @@ client.on('Room.timeline', (event, room) => {
       } else document.getElementById('scrollDown').style.display = 'block';
     }
   }
-});
+});*/

src/views/login.vue

@@ -1,15 +1,16 @@
 <template>
   <div id="login">
     <h1 class="title">[chat]</h1>
-    <form v-if="session.login" @submit.prevent="login()">
-      <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>
-      <input v-model="session.login.baseUrl" class="input" name="homeserver" maxlength="50" placeholder="https://matrix.org"><br>
+    <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>
+      <div v-if="loginError" class="info">{{loginError}}</div>
       <textbtn type="submit" text="login" />
     </form>
     <div v-else>
       <p>you are already logged in</p>
-      <textbtn @click.native="$router.push('room')" text="chat" />
+      <textbtn @click.native="$router.push('rooms')" text="chat" />
       <textbtn @click.native="logout()" text="logout" />
     </div>
   </div>
@@ -17,7 +18,7 @@
 
 <script>
 import textbtn from '@/components/textbtn';
-import matrix from '@/matrix.js';
+import {matrix} from '@/main.js';
 
 export default {
   name: "login.vue",
@@ -26,15 +27,34 @@ export default {
   },
   methods: {
     login(){
-      matrix.methods.login();
+      if (matrix.client !== undefined) {
+        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 (!(this.user.match(/^@[a-zA-Z0-9]+:[a-z0-9]+\.[a-z]/))) {
+        this.loginError = 'username is in wrong style';
+        return;
+      }
+      matrix.login(this.user, this.password, this.homeServer, (error) => {
+        this.loginError = `login failed: ${error}`;
+      }, ()=> this.$router.push('/rooms/'));
     },
     logout(){
-      matrix.methods.logout();
+      matrix.logout();
     }
   },
   data(){
     return {
-      session: matrix.data().session
+      user: "",
+      password: "",
+      homeServer: "https://adb.sh",
+      loginError: "",
+      showLogin: (matrix.client === undefined)
     }
   }
 }
@@ -59,7 +79,7 @@ input{
   border: 1px solid #fff;
   text-align: center;
   font-size: 1.1rem;
-  margin-top: 1rem;
+  margin: 0.5rem;
   appearance: none;
   outline: none;
 }