Style joining page

src/assets/css/chat.scss

@@ -1,11 +1,5 @@
 @import "@/assets/css/main.scss";
 
-$chat-background: $background;
-$chat-standard-padding: 32px;
-$chat-standard-padding-s: 16px;
-$chat-standard-padding-xs: 8px;
-$chat-text-size: 0.7pt;
-
 .chat-root {
     position: absolute;
     left: 0px;

src/assets/css/join.scss

@@ -0,0 +1,115 @@
+@import "@/assets/css/main.scss";
+
+.v-btn.btn-light {
+    font-family: sans-serif;
+    font-weight: 700;
+    font-size: 11.54 * $chat-text-size;
+    color: black;
+    background-color: white !important;
+    border: 1px solid black;
+    border-radius: $chat-button-height / 2;
+    min-height: 0;
+    height: $chat-button-height !important;
+    margin-top: $chat-standard-padding-xs;
+    margin-bottom: $chat-standard-padding-xs;
+}
+
+.v-btn.btn-dark {
+    font-family: sans-serif;
+    font-weight: 700;
+    font-size: 11.54 * $chat-text-size;
+    color: white;
+    background-color: black !important;
+    border: 1px solid black;
+    border-radius: $chat-button-height / 2;
+    min-height: 0;
+    height: $chat-button-height !important;
+    margin-top: $chat-standard-padding-xs;
+    margin-bottom: $chat-standard-padding-xs;
+}
+
+.join-root {
+    margin-top: 10%;
+    padding: 40px;
+
+    .btn-login {
+        position: absolute;
+        top: 0;
+        right: 0;
+        margin: 20px;
+    }
+}
+
+.join-avatar {
+    background-color: #ededed;
+    width: 100px !important;
+    height: 100px !important;
+    margin-bottom: 40px;
+}
+
+.join-title {
+    font-family: "Poppins", sans-serif;
+    font-style: normal;
+    font-weight: 800;
+    font-size: 40 * $chat-text-size;
+    line-height: 108.5%;
+    /* or 43px */
+    text-align: center;
+    letter-spacing: -0.8px;
+    
+    color: #000000;
+    overflow-wrap: break-word;
+}
+
+.join-message {
+    font-family: sans-serif;
+    font-weight: 400;
+    font-size: 16 * $chat-text-size;
+    color: black;
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.join-privacy {
+    font-family: sans-serif;
+    font-weight: 400;
+    font-size: 12 * $chat-text-size;
+    color: #464646;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    a {
+        color: #464646;
+    }
+}
+
+.join-or-divider {
+    display: block;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    margin-left: 20px;
+    margin-right: 20px;
+    height: 20px;
+    color: #666666;
+    text-align: center;
+    line-height: var(--v-theme-title-featured-line-height);
+    position: relative;
+    font-family: sans-serif;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 9.88014 * $chat-text-size;
+    line-height: 140%;
+    /* identical to box height, or 14px */
+    letter-spacing: 0.29px;
+    color: #9C9CAE;
+
+    &::before {
+        position: absolute;
+        width: 100%;
+        left: 0;
+        right: 0;
+        top: 5px;
+        height: 1px;
+        background: #9C9CAE;
+        content: " ";
+    }
+}

src/assets/css/main.scss

@@ -1,3 +1,10 @@
 $background: #ffffff;
 
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
+
+$chat-background: $background;
+$chat-standard-padding: 32px;
+$chat-standard-padding-s: 16px;
+$chat-standard-padding-xs: 8px;
+$chat-text-size: 0.7pt;
+$chat-button-height: 50px;

src/components/Join.vue

@@ -1,13 +1,28 @@
 <template>
-  <div class="d-flex justify-center login-root">
+  <div class="join-root">
-    <div v-if="!waiting">
+    <div v-if="!waiting" class="text-center">
-      <h4>Join room</h4>
+      <v-btn class="btn-login" text small @click.stop="handleLogin" :loading="loading">Login</v-btn>
-      <div>You have been invited to the room {{ roomId }}</div>
 
-      <v-btn primary large block @click.stop="handleJoin" :loading="loading"
+      <v-avatar class="join-avatar">
+        <v-img v-if="roomAvatar" :src="roomAvatar" />
+        <span v-else class="white--text headline">{{
+          roomName.substring(0, 1).toUpperCase()
+      }}</span>
+      </v-avatar>
+      <div class="join-title">Welcome to {{ roomName }}</div>
+      <div class="join-message">Join the group chat in a web browser or with the Keanu app.</div>
+      <v-btn class="btn-light" large block @click.stop="handleOpenApp" :loading="loading"
+        >Open Keanu app</v-btn
+      >
+      
+      <div class="join-or-divider">OR</div>
+
+      <v-btn class="btn-dark" large block @click.stop="handleJoin" :loading="loading"
         >Join as guest</v-btn
       >
 
+      <div class="join-privacy">Enhance your physical privacy. <a href="#">Learn how</a></div>
+
       <div v-if="loadingMessage">{{ loadingMessage }}</div>
     </div>
   </div>
@@ -21,14 +36,17 @@ export default {
   data() {
     return {
       roomId: null,
+      roomName: null,
+      roomAvatar: null,
       guestUser: new User("https://neo.keanu.im", "", "", true),
       loading: false,
       loadingMessage: null,
-      waiting: false
+      waiting: true
     };
   },
   mounted() {
     this.roomId = this.$route.hash;
+    this.roomName = this.roomId;
     if (this.currentUser) {
         this.waiting = true;
         const self = this;
@@ -48,6 +66,18 @@ export default {
         .catch(ignoredErr => {
           this.waiting = false;
         });
+    } else {
+      this.$matrix.getPublicRoomInfo(this.roomId)
+      .then(room => {
+        console.log("Found room:", room);
+        this.roomName = room.name;
+        this.roomAvatar = room.avatar;
+          this.waiting = false;
+      })
+      .catch(err => {
+        console.log("Could not find room info", err);
+          this.waiting = false;
+      })
     }
   },
   computed: {
@@ -56,6 +86,14 @@ export default {
     },
   },
   methods: {
+    handleLogin() {
+      this.$router.push("/login"); // TODO - replace?
+    },
+
+    handleOpenApp() {
+      console.log("Open app..."); //TODO
+    },
+
     handleJoin() {
       this.loading = true;
       this.loadingMessage = "Logging in...";
@@ -88,5 +126,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/login.scss";
+@import "@/assets/css/join.scss";
 </style>

src/services/matrix.service.js

@@ -296,6 +296,44 @@ export default {
                 uploadFile(file, opts) {
                     return this.matrixClient.uploadContent(file, opts);
                 },
+
+                getPublicRoomInfo(roomId) {
+                    if (!roomId) {
+                        return Promise.reject("Invalid parameters");
+                    }
+
+                    const parts = roomId.split(':');
+                    if (parts.length != 2) {
+                        return Promise.reject("Unknown room server");
+                    }
+
+                    const server = parts[1];
+                    const tempMatrixClient = sdk.createClient("https://" + server);
+
+                    const findOrGetMore = function _findOrGetMore(response) {
+                        for (var room of response.chunk) {
+                            if ((roomId.startsWith("#") && room.canonical_alias == roomId) || (roomId.startsWith("!") && room.room_id == roomId)){
+                                room.avatar = tempMatrixClient.mxcUrlToHttp(room.avatar_url, 80, 80, 'scale', true);
+                                return Promise.resolve(room);
+                            }
+                        }
+                        if (response.next_batch) {
+                            return tempMatrixClient._http.request(undefined, "GET", "/publicRooms", {limit:1000, next_batch:response.next_batch})
+                            //return tempMatrixClient.publicRooms({limit:1,next_batch:response.next_batch})
+                            .then(response => {
+                                return _findOrGetMore(response);
+                            }) 
+                        } else {
+                            return Promise.reject("No more data");
+                        }
+                    };
+
+                    return tempMatrixClient._http.request(undefined, "GET", "/publicRooms", {limit:1000})
+                    //return tempMatrixClient.publicRooms({limit:1})
+                    .then(response => {
+                        return findOrGetMore(response);
+                    });
+                }
             }
         })