Work on room info and start on profile view

src/assets/css/chat.scss

@@ -25,9 +25,9 @@ $admin-fg: white;
         font-family: 'Inter', sans-serif;
         font-weight: 700;
         font-size: 11 * $chat-text-size;
-        color: white;
+        color: black;
-        background-color: #f74e4e !important;
+        background-color: white !important;
-        border: none;
+        border: 1px solid black;
         border-radius: $chat-standard-padding / 2;
         height: $chat-standard-padding;
         margin-top: $chat-standard-padding-xs;
@@ -435,4 +435,70 @@ $admin-fg: white;
         padding-right: 10px;
         content: attr(title);
     }
+}
+
+.room-info {
+    background-color: #e0e0e0;
+    height: 100%;
+    .chat-header {
+        background-color: transparent;
+        border: none;
+    }
+    .room-name {
+        text-align: center;
+        margin-top: 15px;
+    }
+    .back {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        margin: 10px 0px;
+        font-weight: bold;
+        font-size: 12 * $chat-text-size;
+    }
+
+    .v-card {
+        background-color: white;
+        border-radius: 20px;
+    }
+
+    .show-all {
+        color: black;
+        font-size: 14 * $chat-text-size;
+        font-weight: bold;
+        margin-left: 10px;
+    }
+}
+
+.profile {
+    background-color: white;
+    height: 100%;
+    .chat-header {
+        background-color: transparent;
+        border: none;
+    }
+    .room-name {
+        text-align: center;
+        margin-top: 15px;
+    }
+    .back {
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        margin: 10px 0px;
+        font-weight: bold;
+        font-size: 12 * $chat-text-size;
+    }
+
+    .v-card {
+        background-color: white;
+        border-radius: 20px;
+    }
+
+    .show-all {
+        color: black;
+        font-size: 14 * $chat-text-size;
+        font-weight: bold;
+        margin-left: 10px;
+    }
 }

src/assets/css/main.scss

@@ -8,4 +8,29 @@ $chat-standard-padding: 32px;
 $chat-standard-padding-s: 16px;
 $chat-standard-padding-xs: 8px;
 $chat-text-size: 1.0px;
-$chat-button-height: 50px;
+$chat-button-height: 50px;
+
+.v-btn.outlined-button {
+    font-family: 'Inter', sans-serif;
+    font-weight: 700;
+    font-size: 11 * $chat-text-size;
+    color: black;
+    background-color: white !important;
+    border: 1px solid black;
+    border-radius: $chat-standard-padding / 2;
+    height: $chat-standard-padding;
+    margin-top: $chat-standard-padding-xs;
+    margin-bottom: $chat-standard-padding-xs;
+}
+
+.v-btn.filled-button {
+    font-family: 'Inter', sans-serif;
+    font-weight: 700;
+    font-size: 11 * $chat-text-size;
+    color: white;
+    border: none;
+    border-radius: $chat-standard-padding / 2;
+    height: $chat-standard-padding;
+    margin-top: $chat-standard-padding-xs;
+    margin-bottom: $chat-standard-padding-xs;
+}

src/components/ChatHeader.vue

@@ -19,27 +19,19 @@
     </v-row>
 
     <!-- "REALLY LEAVE?" dialog -->
-    <v-dialog v-model="showLeaveConfirmation" class="ma-0 pa-0" width="50%">
+    <LeaveRoomDialog :show="showLeaveConfirmation" :room="room" @close="showLeaveConfirmation = false" />
-        <v-card>
-          <v-card-title>Are you sure you want to leave?</v-card-title>
-          <v-card-text>
-            <div>You may not be able to rejoin.</div>
-          </v-card-text>
-          <v-divider></v-divider>
-          <v-card-actions>
-            <v-spacer></v-spacer>
-            <v-btn text @click="showLeaveConfirmation = false">Cancel</v-btn>
-            <v-btn color="primary" text @click="doLeaveRoom();showLeaveConfirmation = false">Next</v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-dialog>
 
   </v-container>
 </template>
 
 <script>
+import LeaveRoomDialog from '../components/LeaveRoomDialog';
+
 export default {
   name: "ChatHeader",
+  components: {
+    LeaveRoomDialog
+  },
   data() {
     return {
       memberCount: null,

src/components/LeaveRoomDialog.vue

@@ -0,0 +1,81 @@
+<template>
+  <v-dialog v-model="showDialog" v-show="room" class="ma-0 pa-0" width="50%">
+    <v-card>
+      <v-card-title>Are you sure you want to leave?</v-card-title>
+      <v-card-text>
+        <div>You may not be able to rejoin.</div>
+      </v-card-text>
+      <v-divider></v-divider>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn text @click="showDialog = false">Cancel</v-btn>
+        <v-btn
+          color="primary"
+          text
+          @click="
+            doLeaveRoom();
+            showDialog = false;
+          "
+          >Next</v-btn
+        >
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+<script>
+export default {
+  name: "LeaveRoomDialog",
+  props: {
+    show: {
+      type: Boolean,
+      default: function () {
+        return false;
+      },
+    },
+    room: {
+        type: Object,
+        default: function() {
+            return null;
+        }
+    }
+  },
+  data() {
+    return {
+      showDialog: false,
+    };
+  },
+  watch: {
+    show: {
+      handler(newVal, ignoredOldVal) {
+        this.showDialog = newVal;
+      },
+    },
+    showDialog() {
+        if (!this.showDialog) {
+            this.$emit('close');
+        }
+    }
+  },
+
+  methods: {
+    doLeaveRoom() {
+      //this.$matrix.matrixClient.forget(this.room.roomId, true, undefined)
+      const roomId = this.room.roomId;
+      this.$matrix.matrixClient
+        .leave(roomId, undefined)
+        .then(() => {
+          console.log("Left room");
+          this.$matrix.matrixClient.store.removeRoom(roomId);
+          this.$navigation.push({ name: "Chat", params: { roomId: null } }, -1);
+        })
+        .catch((err) => {
+          console.log("Error leaving", err);
+        });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style> 

src/components/Profile.vue

@@ -0,0 +1,137 @@
+<template>
+  <div v-if="room" class="profile">
+    <div class="chat-header">
+      <v-container fluid>
+        <div class="room-name">My Profile</div>
+            <v-btn
+              text
+              class="back"
+              v-show="$navigation && $navigation.canPop()"
+              @click.stop="$navigation.pop"
+            >
+              <v-icon>close</v-icon>
+            </v-btn>
+
+      </v-container>
+    </div>
+
+    <div @click="showEditDialog = true"><v-icon>lock</v-icon><span>Set password</span></div>
+
+    <!-- EDIT dialog -->
+    <v-dialog v-model="showEditDialog" class="ma-0 pa-0" width="50%">
+      <v-card>
+        <v-card-title>Display name</v-card-title>
+        <v-card-text>
+          <v-text-field v-model="displayName" />
+        </v-card-text>
+        <v-divider></v-divider>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn text @click="showEditDialog = false">Cancel</v-btn>
+          <v-btn
+            color="primary"
+            text
+            @click="
+              $matrix.matrixClient.setDisplayName(displayName);
+              showEditDialog = false;
+            "
+            >Ok</v-btn
+          >
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "RoomInfo",
+  data() {
+    return {
+      memberCount: null,
+      showEditDialog: false,
+      user: null,
+      displayName: "",
+    };
+  },
+  mounted() {
+    this.$matrix.on("Room.timeline", this.onEvent);
+    this.updateMemberCount();
+    this.user = this.$matrix.matrixClient.getUser(this.$matrix.currentUserId);
+    this.displayName = this.user.displayName;
+  },
+
+  destroyed() {
+    this.$matrix.off("Room.timeline", this.onEvent);
+  },
+
+  computed: {
+    room() {
+      return this.$matrix.currentRoom;
+    },
+  },
+
+  watch: {
+    room: {
+      handler(newVal, ignoredOldVal) {
+        console.log("RoomInfo: Current room changed");
+        this.memberCount = newVal.getJoinedMemberCount();
+      },
+    },
+  },
+
+  methods: {
+    onEvent(event) {
+      if (event.getRoomId() !== this.roomId) {
+        return; // Not for this room
+      }
+      if (event.getType() == "m.room.member") {
+        this.updateMemberCount();
+      }
+    },
+
+    updateMemberCount() {
+      this.memberCount = this.room.getJoinedMemberCount();
+    },
+
+    showRoomInfo() {},
+
+    memberAvatar(member) {
+      if (member) {
+        return member.getAvatarUrl(
+          this.$matrix.matrixClient.getHomeserverUrl(),
+          40,
+          40,
+          "scale",
+          true
+        );
+      }
+      return null;
+    },
+
+    viewProfile() {
+
+    },
+
+    upgradeAccount() {
+      this.$matrix
+        .upgradeGuestAccount()
+        .then(user => {
+          // Done, login with the "new" account to get a real token instead of our guest token.
+          this.user = user;
+          return this.$store.dispatch("auth/login", this.user);
+        })
+        .then(() => {
+          console.log("Upgrade done!");
+        })
+        .catch((err) => {
+          console.log("ERROR", err);
+        });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style>

src/components/RoomInfo.vue

@@ -1,38 +1,23 @@
 <template>
-  <div v-if="room">
+  <div v-if="room" class="room-info">
     <div class="chat-header">
       <v-container fluid>
-        <v-row class="chat-header-row align-center">
+        <div class="room-name" v-if="room">
-          <v-col class="text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
+          {{ room.summary.info.title }}
-            <v-btn
+        </div>
-              v-show="$navigation && $navigation.canPop()"
+        <v-btn
-              icon
+          text
-              @click.stop="$navigation.pop"
+          class="back"
-            >
+          v-show="$navigation && $navigation.canPop()"
-              <v-icon>arrow_back</v-icon>
+          @click.stop="$navigation.pop"
-            </v-btn>
+        >
-          </v-col>
+          <v-icon>arrow_back</v-icon>
-
+          <span>BACK</span>
-          <!-- <v-col class="chat-header-members text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
+        </v-btn>
-          <v-btn icon class="members-icon" @click.stop="showRoomInfo">
-            <v-icon>people</v-icon>
-          </v-btn>
-          <div class="num-members">{{ memberCount }}</div>
-        </v-col> -->
-
-          <v-col class="flex-grow-1 flex-shrink-1 ma-0 pa-0">
-            <div class="room-name" v-if="room">
-              {{ room.summary.info.title }}
-            </div>
-          </v-col>
-          <!-- <v-col class="text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
-          <v-btn class="leave-button">Leave</v-btn>
-        </v-col> -->
-        </v-row>
       </v-container>
     </div>
 
-    <v-card class="members ma-3">
+    <v-card class="members ma-3" flat>
       <v-card-title
         >Members<v-spacer></v-spacer>
         <div>{{ room.getJoinedMemberCount() }}</div></v-card-title
@@ -40,8 +25,9 @@
       <v-card-text>
         <div
           class="member ma-2"
-          v-for="member in room.getJoinedMembers()"
+          v-for="(member, index) in joinedMembers"
           :key="member.userId"
+          v-show="showAllMembers || index < 5"
         >
           <v-avatar class="avatar" size="40" color="grey">
             <img v-if="memberAvatar(member)" :src="memberAvatar(member)" />
@@ -51,64 +37,59 @@
           </v-avatar>
           {{ member.user ? member.user.displayName : member.name
           }}{{ member.userId == $matrix.currentUserId ? " (you)" : "" }}
-          <v-btn
+        </div>
-            color="black"
+        <div class="show-all" @click="showAllMembers = !showAllMembers">
-            v-if="member.userId == $matrix.currentUserId"
+          {{ showAllMembers ? "Hide" : "Show all" }}
-            text
-            absolute
-            right
-            @click.stop="showEditDialog = true"
-            >edit</v-btn
-          >
         </div>
       </v-card-text>
     </v-card>
 
-    <v-card class="account ma-3">
+    <v-card class="account ma-3" flat>
-      <v-card-title>Your account</v-card-title>
+      <v-card-title>My Profile</v-card-title>
       <v-card-text>
         <div v-if="$matrix.currentUser.is_guest">
-          <div>You don't have a Keanu account, yet ;)</div>
+          <div>
-          <v-btn dark block @click.stop="upgradeAccount">Login</v-btn>
+            Your identity <b>{{ displayName }}</b> is temporary. You can change
+            your name or set a password to keep it.
+          </div>
+          <v-btn block class="outlined-button" @click.stop="viewProfile"
+            >View</v-btn
+          >
         </div>
       </v-card-text>
     </v-card>
 
-    <!-- EDIT dialog -->
+    <v-card class="account ma-3" flat>
-    <v-dialog v-model="showEditDialog" class="ma-0 pa-0" width="50%">
+      <v-card-text>
-      <v-card>
+          <v-btn color="red" block class="filled-button" @click.stop="showLeaveConfirmation = true"
-        <v-card-title>Display name</v-card-title>
+            >Leave group</v-btn
-        <v-card-text>
-          <v-text-field v-model="displayName" />
-        </v-card-text>
-        <v-divider></v-divider>
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn text @click="showEditDialog = false">Cancel</v-btn>
-          <v-btn
-            color="primary"
-            text
-            @click="
-              $matrix.matrixClient.setDisplayName(displayName);
-              showEditDialog = false;
-            "
-            >Ok</v-btn
           >
-        </v-card-actions>
+          <div>
-      </v-card>
+            Note: This step cannot be undone. Make sure you want to logout and delete the chat forever.
-    </v-dialog>
+          </div>
+      </v-card-text>
+    </v-card>
+
+    <LeaveRoomDialog :show="showLeaveConfirmation" :room="room" @close="showLeaveConfirmation = false" />
+
   </div>
 </template>
 
 <script>
+import LeaveRoomDialog from '../components/LeaveRoomDialog';
+
 export default {
   name: "RoomInfo",
+  components: {
+    LeaveRoomDialog
+  },
   data() {
     return {
       memberCount: null,
-      showEditDialog: false,
       user: null,
       displayName: "",
+      showAllMembers: false,
+      showLeaveConfirmation: false
     };
   },
   mounted() {
@@ -126,6 +107,23 @@ export default {
     room() {
       return this.$matrix.currentRoom;
     },
+
+    joinedMembers() {
+      if (!this.room) {
+        return [];
+      }
+      const myUserId = this.$matrix.currentUserId;
+      return this.room.getJoinedMembers().sort((a, b) => {
+        if (a.userId == myUserId) {
+          return -1;
+        } else if (b.userId == myUserId) {
+          return 1;
+        }
+        const aName = a.user ? a.user.displayName : a.name;
+        const bName = b.user ? b.user.displayName : b.name;
+        return aName.localeCompare(bName);
+      });
+    },
   },
 
   watch: {
@@ -151,8 +149,6 @@ export default {
       this.memberCount = this.room.getJoinedMemberCount();
     },
 
-    showRoomInfo() {},
-
     memberAvatar(member) {
       if (member) {
         return member.getAvatarUrl(
@@ -166,10 +162,18 @@ export default {
       return null;
     },
 
+    viewProfile() {
+      this.$navigation.push({ name: "Profile" }, 1);
+    },
+
+    leaveRoom() {
+      console.log("Leave");
+    },
+
     upgradeAccount() {
       this.$matrix
         .upgradeGuestAccount()
-        .then(user => {
+        .then((user) => {
           // Done, login with the "new" account to get a real token instead of our guest token.
           this.user = user;
           return this.$store.dispatch("auth/login", this.user);

src/router/index.js

@@ -4,6 +4,7 @@ import VueRouter from 'vue-router'
 import Chat from '../components/Chat.vue'
 import Join from '../components/Join.vue'
 import Login from '../components/Login.vue'
+import Profile from '../components/Profile.vue'
 import util from '../plugins/utils'
 
 Vue.use(VueRouter)
@@ -25,6 +26,11 @@ const routes = [
     component: () => import('../components/RoomInfo.vue'),
     props: true,
   },
+  {
+    path: '/profile',
+    name: 'Profile',
+    component: Profile
+  },
   {
     path: '/login',
     name: 'Login',

src/services/navigation.service.js

@@ -19,6 +19,11 @@ export default {
                 next(routes[0]);
                 return;
             }
+            // If we have a room id param, it needs to be the same, else we call "next" with the correct one
+            if (index >= 0 && routes[index].params && to.params && routes[index].params.roomId != to.params.roomId) {
+                next(routes[0]);
+                return;
+            }
             if (index >= 0) {
                 routes.splice(index + 1);
             }