Guest access work

src/App.vue

@@ -66,8 +66,7 @@ export default {
     openDrawer: false,
   }),
   mounted() {
-    this.$router.replace("/");
+    //this.$router.replace("/");
-
     const version = require("!!raw-loader!./assets/version.txt").default;
     console.log("Version", version);
     this.buildVersion = version;
@@ -90,11 +89,10 @@ export default {
     currentUser: {
       immediate: true,
       handler(ignorednewVal, ignoredoldVal) {
-        if (this.loggedIn) {
+        if (this.loggedIn()) {
-          const self = this;
           this.$matrix.getMatrixClient(this.currentUser)
             .then(() => {
-              self.$matrix.initClient();
+              console.log("Matrix client ready");
             })
             .catch((error) => {
               console.log("Error creating client", error);

src/components/Join.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="d-flex justify-center login-root">
+    <div color="rgba(255,255,255,0.1)">
+      <h4>Join room</h4>
+      <div>You have been invited to the room {{ roomId }}</div>
+
+      <v-btn primary large block @click.stop="handleJoin" :loading="loading"
+        >Join as guest</v-btn
+      >
+
+      <div v-if="loadingMessage">{{ loadingMessage }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import User from "../models/user";
+
+export default {
+  name: "Join",
+  data() {
+    return {
+      roomId: null,
+      guestUser: new User("https://neo.keanu.im", "", "", true),
+      loading: false,
+      loadingMessage: null,
+    };
+  },
+  mounted() {
+    this.roomId = this.$route.hash;
+  },
+  computed: {
+    currentUser() {
+      return this.$store.state.auth.user;
+    },
+  },
+  methods: {
+    handleJoin() {
+      this.loading = true;
+      this.loadingMessage = "Logging in...";
+      if (this.currentUser) {
+        this.$matrix
+          .getMatrixClient(this.currentUser)
+          .then((ignoreduser) => {
+            this.loadingMessage = "Joining room...";
+            return this.$matrix.matrixClient.joinRoom(this.roomId);
+          })
+          .then((room) => {
+            this.$matrix.setCurrentRoomId(room.roomId);
+            this.loading = false;
+            this.loadingMessage = null;
+            this.$router.replace({ name: "Chat" });
+          })
+          .catch((err) => {
+            // TODO - handle error
+            console.log("Failed to join room", err);
+            this.loading = false;
+            this.loadingMessage = err.toString();
+          });
+      } else {
+        this.$store.dispatch("auth/login", this.guestUser).then(
+          () => {
+            this.loading = false;
+            this.loadingMessage = null;
+            this.$router.replace({ name: "Chat" });
+          },
+          (error) => {
+            this.loading = false;
+            this.loadingMessage = error.toString();
+          }
+        );
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/login.scss";
+</style>

src/models/user.js

@@ -1,7 +1,8 @@
 export default class User {
-    constructor(server, username, password) {
+    constructor(server, username, password, is_guest) {
         this.server = server;
         this.username = username;
         this.password = password;
+        this.is_guest = is_guest || false
     }
 }

src/router/index.js

@@ -16,14 +16,9 @@ const routes = [
     component: Login
   },
   {
-    path: '/join/:room?',
+    path: '/join/',
-    redirect: from => {
+    component: () => import('../components/Join.vue'),
-      const room = from.hash;
+    props: true
-      if (room) {
-        return { name: 'Chat', params: { joinRoom: room }};
-      }
-      return '/';
-    }
   },
 ]
 
@@ -33,7 +28,7 @@ const router = new VueRouter({
 
 router.beforeEach((to, from, next) => {
   const publicPages = ['/login'];
-  const authRequired = !publicPages.includes(to.path);
+  const authRequired = !publicPages.includes(to.path) && !to.path.startsWith('/join/');
   const loggedIn = localStorage.getItem('user');
 
   // trying to access a restricted page + not logged in

src/services/matrix.service.js

@@ -31,7 +31,7 @@ export default {
 
             computed: {
                 ready() {
-                    return this.matrixClient != null;
+                    return this.matrixClient != null && this.matrixClientReady;
                 },
 
                 currentUser() {
@@ -51,22 +51,30 @@ export default {
             methods: {
                 login(user) {
                     const tempMatrixClient = sdk.createClient(user.server);
-                    var retUser;
+                    var promiseLogin;
-                    return tempMatrixClient
+
-                        .login("m.login.password", { user: user.username, password: user.password, type: "m.login.password" })
+                    if (user.is_guest) {
-                        .then((response) => {
+                        promiseLogin = tempMatrixClient
-                            localStorage.setItem('user', JSON.stringify(response));
+                            .registerGuest({}, undefined)
-                            return response;
+                            .then((response) => {
-                        })
+                                console.log("Response", response);
+                                response.is_guest = true;
+                                localStorage.setItem('user', JSON.stringify(response));
+                                return response;
+                            })
+                    } else {
+                        promiseLogin = tempMatrixClient
+                            .login("m.login.password", { user: user.username, password: user.password, type: "m.login.password" })
+                            .then((response) => {
+                                localStorage.setItem('user', JSON.stringify(response));
+                                return response;
+                            })
+                    }
+
+                    return promiseLogin
                         .then(user => {
-                            retUser = user;
                             return this.getMatrixClient(user);
                         })
-                        .then(() => {
-                            // Ready to use! Start by loading rooms.
-                            this.initClient();
-                            return retUser;
-                        })
                 },
 
                 logout() {
@@ -87,6 +95,18 @@ export default {
                 },
 
                 async getMatrixClient(user) {
+                    if (this.matrixClientReady) {
+                        return new Promise((resolve,ignoredreject) => {
+                            resolve(user);
+                        })
+                    } else if (this.matrixClient) {
+                        return new Promise((resolve,ignoredreject) => {
+                            this.matrixClient.once('Matrix.initialized', (ignoredclient) => {
+                                resolve(user);
+                            });
+                        })
+                    }
+
                     const matrixStore = new sdk.MemoryStore(window.localStorage);
                     const webStorageSessionStore = new sdk.WebStorageSessionStore(
                         window.localStorage
@@ -104,9 +124,13 @@ export default {
                         sessionStore: webStorageSessionStore,
                         deviceId: user.device_id,
                         accessToken: user.access_token,
-                        timelineSupport: true
+                        timelineSupport: true,
+                        unstableClientRelationAggregation: true
                     }
                     this.matrixClient = sdk.createClient(opts);
+                    if (user.is_guest) {
+                        this.matrixClient.setGuest(true);
+                    }
                     return this.matrixClient
                         .initCrypto()
                         .then(() => {
@@ -136,7 +160,12 @@ export default {
                                     )
                                 });
                             }
-                        });
+                        })
+                        .then(() => {
+                            // Ready to use! Start by loading rooms.
+                            this.initClient();
+                            return user;
+                        })
                 },
 
                 addMatrixClientListeners(client) {
@@ -159,7 +188,7 @@ export default {
                                 Vue.set(room, "topic", event.getContent().topic);
                             }
                         }
-                        break;
+                            break;
 
                         case "m.room.avatar": {
                             const room = this.matrixClient.getRoom(event.getRoomId());
@@ -167,7 +196,7 @@ export default {
                                 Vue.set(room, "avatar", room.getAvatarUrl(this.matrixClient.getHomeserverUrl(), 80, 80, "scale", true));
                             }
                         }
-                        break;
+                            break;
                     }
                 },