Style joining page

src/components/Join.vue

@@ -1,13 +1,28 @@
 <template>
-  <div class="d-flex justify-center login-root">
-    <div v-if="!waiting">
-      <h4>Join room</h4>
-      <div>You have been invited to the room {{ roomId }}</div>
+  <div class="join-root">
+    <div v-if="!waiting" class="text-center">
+      <v-btn class="btn-login" text small @click.stop="handleLogin" :loading="loading">Login</v-btn>
 
-      <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>