Merge branch 'main' of gitlab.com:keanuapp/keanuapp-weblite into main

package-lock.json

@@ -1,11 +1,11 @@
 {
   "name": "keanuapp-weblite",
-  "version": "0.1.5",
+  "version": "0.1.9",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "0.1.5",
+      "version": "0.1.9",
       "dependencies": {
         "aes-js": "^3.1.2",
         "axios": "^0.21.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "keanuapp-weblite",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

package.json.bak

@@ -1,6 +1,6 @@
 {
   "name": "keanuapp-weblite",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/assets/config.json

@@ -1,5 +1,7 @@
 {
     "appName": "Keanu Weblite",
+    "product": "Convene",
+    "productLink": "letsconvene.im",
     "defaultServer": "https://neo.keanu.im",
     "useShortCodeStickers": false,
     "analytics": {

src/assets/css/chat.scss

@@ -16,13 +16,25 @@ $admin-fg: white;
         height: 100%;
     }
     .num-members {
-        font-family: 'Inter', sans-serif;
+        font-family: "Inter", sans-serif;
         font-weight: 400;
         font-size: 12 * $chat-text-size;
         color: black;
     }
     .v-btn.leave-button {
-        font-family: 'Inter', sans-serif;
+        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.avatar {
+        font-family: "Inter", sans-serif;
         font-weight: 700;
         font-size: 11 * $chat-text-size;
         color: black;
@@ -104,7 +116,7 @@ $admin-fg: white;
         padding-right: 2 * $chat-standard-padding-s;
         padding-top: 0px;
         .typing {
-            font-family: 'Inter', sans-serif;
+            font-family: "Inter", sans-serif;
             font-weight: 300;
             font-size: 12 * $chat-text-size;
             color: #1c242a;
@@ -127,7 +139,7 @@ $admin-fg: white;
             overflow-y: auto;
             padding: 0 0 0px 20px;
             margin: 6px 0;
-            font-family: 'Inter', sans-serif;
+            font-family: "Inter", sans-serif;
             font-weight: 300;
             font-size: 18 * $chat-text-size;
             .v-input__slot {
@@ -139,9 +151,9 @@ $admin-fg: white;
     }
 
     .scroll-to-end {
-        position:absolute;
+        position: absolute;
-        top:-64px;
+        top: -64px;
-        right:16px;
+        right: 16px;
     }
 
     .op-button {
@@ -158,7 +170,7 @@ $admin-fg: white;
 }
 
 .messageJoin {
-    font-family: 'Inter', sans-serif;
+    font-family: "Inter", sans-serif;
     font-weight: 300;
     font-size: 15 * $chat-text-size;
     color: #1c242a;
@@ -215,7 +227,7 @@ $admin-fg: white;
         display: block;
     }
     .sender {
-        font-family: 'Inter', sans-serif;
+        font-family: "Inter", sans-serif;
         font-weight: 400;
         font-style: normal;
         font-size: 10 * $chat-text-size;
@@ -225,7 +237,7 @@ $admin-fg: white;
         display: inline-block;
     }
     .time {
-        font-family: 'Inter', sans-serif;
+        font-family: "Inter", sans-serif;
         font-weight: 400;
         font-style: normal;
         font-size: 10 * $chat-text-size;
@@ -268,7 +280,8 @@ $admin-fg: white;
         display: inline-block;
         width: 70%;
         max-width: 70%;
-        .v-image, video {
+        .v-image,
+        video {
             border-radius: 10px 10px 0 10px;
         }
     }
@@ -290,7 +303,7 @@ $admin-fg: white;
         display: block;
     }
     .sender {
-        font-family: 'Inter', sans-serif;
+        font-family: "Inter", sans-serif;
         font-weight: 400;
         font-style: normal;
         font-size: 10 * $chat-text-size;
@@ -300,7 +313,7 @@ $admin-fg: white;
         margin-right: 8px;
     }
     .time {
-        font-family: 'Inter', sans-serif;
+        font-family: "Inter", sans-serif;
         font-weight: 400;
         font-style: normal;
         font-size: 10 * $chat-text-size;
@@ -312,8 +325,9 @@ $admin-fg: white;
     }
 }
 
-.sender, .status {
+.sender,
-    font-family: 'Inter', sans-serif;
+.status {
+    font-family: "Inter", sans-serif;
     font-weight: 300;
     font-size: 15 * $chat-text-size;
     color: #1c242a;
@@ -321,7 +335,7 @@ $admin-fg: white;
 }
 
 .message {
-    font-family: 'Inter', sans-serif;
+    font-family: "Inter", sans-serif;
     font-weight: 400;
     font-size: 16 * $chat-text-size;
     color: #000000;
@@ -349,7 +363,7 @@ $admin-fg: white;
     margin-bottom: 8px;
     user-select: text;
     .original-message-sender {
-        font-family: 'Inter', sans-serif;
+        font-family: "Inter", sans-serif;
         font-weight: 700;
         font-size: 13 * $chat-text-size;
         color: #000000;
@@ -357,7 +371,7 @@ $admin-fg: white;
         white-space: pre;
     }
     .original-message-text {
-        font-family: 'Inter', sans-serif;
+        font-family: "Inter", sans-serif;
         font-weight: 400;
         font-size: 11 * $chat-text-size;
         color: #000000;
@@ -368,7 +382,7 @@ $admin-fg: white;
 }
 
 .time {
-    font-family: 'Inter', sans-serif;
+    font-family: "Inter", sans-serif;
     font-weight: 300;
     font-style: italic;
     font-size: 15 * $chat-text-size;
@@ -377,7 +391,7 @@ $admin-fg: white;
 }
 
 .statusEvent {
-    font-family: 'Inter', sans-serif;
+    font-family: "Inter", sans-serif;
     font-weight: 300;
     font-size: 15 * $chat-text-size;
     color: #1c242a;
@@ -405,7 +419,7 @@ $admin-fg: white;
         }
     }
     .play-time {
-        font-family: 'Inter', sans-serif;
+        font-family: "Inter", sans-serif;
         font-weight: 400;
         font-size: 13 * $chat-text-size;
     }
@@ -420,7 +434,8 @@ $admin-fg: white;
     }
 }
 
-.message-operations-strut, .avatar-operations-strut {
+.message-operations-strut,
+.avatar-operations-strut {
     position: relative;
     height: 0px;
     z-index: 1;
@@ -499,9 +514,9 @@ $admin-fg: white;
     position: absolute;
     left: 0;
     top: 0;
-    width:100%;
+    width: 100%;
-    height:100%;
+    height: 100%;
-    background-color: rgba(0,0,0,0.4);
+    background-color: rgba(0, 0, 0, 0.4);
     align-items: center;
     display: flex;
     .download-text {
@@ -510,8 +525,9 @@ $admin-fg: white;
     }
 }
 
-.room-name, .room-name-inline {
+.room-name,
-    font-family: 'Poppins', sans-serif;
+.room-name-inline {
+    font-family: "Poppins", sans-serif;
     font-weight: 700;
     font-size: 18 * $chat-text-size;
     text-transform: uppercase;
@@ -523,6 +539,9 @@ $admin-fg: white;
     text-align: start;
 }
 
+.room-name.no-upper {
+    text-transform: none;
+}
 
 .read-marker {
     margin-left: 20px;
@@ -546,7 +565,7 @@ $admin-fg: white;
         position: absolute;
         top: -4px;
         background: white;
-        transform: translate(-50%,0);
+        transform: translate(-50%, 0);
         padding-left: 4px;
         padding-right: 4px;
         content: attr(title);
@@ -575,7 +594,7 @@ $admin-fg: white;
         position: absolute;
         top: -8px;
         background: white;
-        transform: translate(-50%,0);
+        transform: translate(-50%, 0);
         padding-left: 10px;
         padding-right: 10px;
         content: attr(title);
@@ -589,27 +608,60 @@ $admin-fg: white;
         background-color: transparent;
         border: none;
     }
+
     .room-avatar {
         background-color: #ededed;
-        width: 100px !important;
+        width: 64px !important;
-        height: 100px !important;
+        height: 64px !important;
         margin-bottom: 20px;
         .headline {
             font-size: 70 * $chat-text-size !important;
         }
     }
-    
+
+    .name {
+        font-family: "Poppins", sans-serif;
+        font-size: 32px;
+        font-weight: 800;
+    }
+
+    .topic {
+        font-family: "Inter", sans-serif;
+        font-size: 16px;
+    }
+
+    .created-by {
+        font-family: "Poppins", sans-serif;
+        font-size: 12px;
+        font-weight: bold;
+    }
+
     .avatar .headline {
         font-size: 16 * $chat-text-size !important;
     }
 
-    .qr {
+    .qr-container {
-        width: 120px;
+        background-color: white;
-        height: 120px;
+        border-radius: 8px;
-        width: min(30vw, 30vh); 
+        margin-top: 20px !important;
-        height: min(30vw, 30vh); 
+        .qr {
-        background-color: #e0e0e0;
+            width: 60px;
-        margin-top: 15px;
+            height: 60px;
+            background-color: #e0e0e0;
+        }
+        .link {
+            font-family: "Inter", sans-serif;
+            font-size: 16px;
+            text-decoration: underline;
+            color: #3d6eff;
+            overflow-wrap: anywhere;
+        }
+    }
+    .link-copied-in-place .v-btn__content {
+        font-family: "Inter", sans-serif !important;
+        font-size: 12px !important;
+        text-transform: none !important;
+        color: #3d6eff;
     }
 
     .v-card {
@@ -618,7 +670,7 @@ $admin-fg: white;
     }
 
     .member::after {
-        content: ' ';
+        content: " ";
         display: block;
         margin: 10px 0px;
         bottom: 0px;
@@ -632,6 +684,7 @@ $admin-fg: white;
         font-size: 14 * $chat-text-size;
         font-weight: bold;
         margin-left: 10px;
+        text-decoration: underline;
     }
 }
 
@@ -677,20 +730,29 @@ $admin-fg: white;
         font-weight: bold;
         margin-left: 10px;
     }
+}
 
-    .action {
+.action-row {
-        padding: 4px 20px;
+    padding: 4px 20px;
-        cursor: pointer;
+    cursor: pointer;
-        &::after {
+    height: 55px;
-            /* divider */
+    font-family: "Inter", sans-serif;
-            content: ' ';
+    font-size: 19px;
-            display: block;
+    color: black;
-            margin: 10px 0px;
+    position: relative;
-            bottom: 0px;
+    .v-icon {
-            height: 1px;
+        color: black !important;
-            background-color: #e1e1e1;
+    }
-            width: 100%;
+    &:not(:last-of-type):after {
-        }
+        /* divider */
+        position: absolute;
+        content: " ";
+        display: block;
+        margin: 0px 10px;
+        bottom: 0px;
+        height: 1px;
+        background-color: #e1e1e1;
+        width: 100%;
     }
 }
 
@@ -768,10 +830,10 @@ $admin-fg: white;
 
 .room-info-sheet {
     background-color: white;
-    
+
     .current-room {
         padding: 25px;
-        background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%), #F5F5F7;
+        background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%), #f5f5f7;
         box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15);
         border-radius: 18px;
     }
@@ -805,7 +867,7 @@ $admin-fg: white;
     /* Remove text underline */
     border-style: none !important;
 }
-    
+
 .created-room-welcome-header {
     background-color: #e0e0e0;
     border-radius: 25px;
@@ -825,4 +887,14 @@ $admin-fg: white;
     text-align: center;
     vertical-align: middle;
     padding-top: 10px;
+}
+
+.avatar-32 {
+    font-size: 18 * $chat-text-size !important;
+    &.clickable {
+        cursor: pointer;
+        &:hover {
+            opacity: 0.7;
+        }
+    }
 }

src/assets/translations/en.json

@@ -116,7 +116,16 @@
     "password_new": "New password",
     "password_repeat": "Repeat new password",
     "display_name": "Display name"
-    
+  },
+  "profile_info_popup": {
+    "you_are": "You are",
+    "identity": "{displayName}",
+    "identity_temporary": "{displayName}",
+    "edit_profile": "Edit profile",
+    "logout": "Logout",
+    "want_more": "Want more?",
+    "powered_by": "This room is powered by {product}. Learn more at {productLink} or go ahead and create another room!",
+    "new_room": "+ New room"
   },
   "join": {
     "title": "Welcome to {roomName}",
@@ -146,29 +155,25 @@
     "leave": "Leave"
   },
   "purge_room": {
-    "title": "Purge room?",
+    "title": "Delete room?",
-    "info": "This operation will close the room for all members. It cannot be undone.",
+    "info": "This will close the room for all members. It cannot be undone.",
-    "button": "Purge room"
+    "button": "Delete room"
   },
   "room_info": {
-    "title": "Info",
+    "title": "Room Details",
     "created_by": "Created by {user}",
-    "permissions": "Permissions",
+    "permissions": "Join Permissions",
-    "join_invite": "Room can be joined by invitation only",
+    "join_invite": "Only People Added",
-    "join_public": "Anyone with the link can join",
+    "join_public": "Anyone with a link",
+    "copy_link": "Copy invite link",
     "link_copied": "Link copied!",
-    "purge": "Purge room",
+    "purge": "Delete room",
     "members": "Members",
     "user": "{user}",
     "user_you": "{user} (you)",
     "hide_all": "Hide",
-    "show_all": "Show all",
+    "show_all": "Show all >",
-    "my_profile": "My Profile",
+    "leave_room": "Leave",
-    "identity": "You are logged in as {displayName}.",
-    "identity_temporary": "Your identity {displayName} is temporary. You can change your name or set a password to keep it.",
-    "view_profile": "View",
-    "leave_room": "Leave group",
-    "leave_room_info": "Note: This step cannot be undone. Make sure you want to logout and delete the chat forever.",
     "version_info": "Powered by Guardian Project. Version: {version}"
   },
   "room_info_sheet": {

src/components/ActionRow.vue

@@ -0,0 +1,32 @@
+<template>
+  <v-row class="action-row ma-0 pa-0" no-gutters align-content="center" v-on="$listeners">
+    <v-col cols="auto" class="mr-2">
+      <v-icon size="22">{{ icon }}</v-icon>
+    </v-col>
+    <v-col>{{ text }}</v-col>
+  </v-row>
+</template>
+
+<script>
+export default {
+  name: "ActionRow",
+  props: {
+    icon: {
+      type: String,
+      default: function () {
+        return null;
+      },
+    },
+    text: {
+      type: String,
+      default: function () {
+        return "";
+      },
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style> 

src/components/ChatHeader.vue

@@ -18,26 +18,42 @@
       <v-col cols="auto" class="text-end ma-0 pa-0">
         <v-btn text class="leave-button" @click.stop="leaveRoom">{{$t('room.leave')}}</v-btn>
       </v-col>
+      <v-col cols="auto" class="text-end ma-0 pa-0 ml-2">
+        <v-avatar class="avatar-32 clickable" size="32" color="#e0e0e0" @click.stop="showProfileInfo = true">
+          <img v-if="userAvatar" :src="userAvatar" />
+            <span v-else class="white--text">{{
+              userAvatarLetter
+            }}</span>
+          </v-avatar>
+      </v-col>
     </v-row>
 
     <!-- "REALLY LEAVE?" dialog -->
     <LeaveRoomDialog :show="showLeaveConfirmation" :room="room" @close="showLeaveConfirmation = false" />
 
+    <!-- PROFILE INFO POPUP -->
+    <ProfileInfoPopup :show="showProfileInfo" @close="showProfileInfo = false" />
+
   </v-container>
 </template>
 
 <script>
 import LeaveRoomDialog from '../components/LeaveRoomDialog';
+import ProfileInfoPopup from '../components/ProfileInfoPopup';
+import profileInfoMixin from '../components/profileInfoMixin';
 
 export default {
   name: "ChatHeader",
+  mixins: [profileInfoMixin],
   components: {
-    LeaveRoomDialog
+    LeaveRoomDialog,
+    ProfileInfoPopup
   },
   data() {
     return {
       memberCount: null,
-      showLeaveConfirmation: false
+      showLeaveConfirmation: false,
+      showProfileInfo: false
     };
   },
   mounted() {

src/components/Profile.vue

@@ -35,8 +35,10 @@
         </v-row>
       </v-container>
 
-    <div class="action" @click="showEditPasswordDialog = true"><v-icon>lock</v-icon><span>{{$t('profile.set_password')}}</span></div>
+    <v-container class="mt-2 pa-5">
-    <div class="action" @click="editValue = displayName;showEditDisplaynameDialog = true"><v-icon>edit</v-icon><span>{{$t('profile.change_name')}}</span></div>
+      <ActionRow @click="showEditPasswordDialog = true" :icon="'lock'" :text="$t('profile.set_password')" />
+      <ActionRow @click="editValue = displayName;showEditDisplaynameDialog = true" :icon="'edit'" :text="$t('profile.change_name')" />
+    </v-container>
 
     <!-- edit password dialog -->
     <v-dialog v-model="showEditPasswordDialog" class="ma-0 pa-0" width="50%">
@@ -92,8 +94,13 @@
 </template>
 
 <script>
+import ActionRow from "./ActionRow.vue";
+
 export default {
   name: "Profile",
+  components: {
+    ActionRow
+  },
   data() {
     return {
       showEditPasswordDialog: false,
@@ -142,14 +149,6 @@ export default {
   },
 
   methods: {
-    logout() {
-      //TODO - For guest accounts, show warning about not being able to rejoin.
-      this.$store.dispatch("logout");
-      this.$nextTick(() => {
-        this.$navigation.push({path: "/login"}, -1);
-      })
-    },
-
     setDisplayName(name) {
       this.$matrix.matrixClient.setDisplayName(name);
     },

src/components/ProfileInfoPopup.vue

@@ -0,0 +1,162 @@
+<template>
+  <v-dialog
+    v-model="showDialog"
+    content-class="profile-info-popup"
+    class="ma-0 pa-0"
+    :width="$vuetify.breakpoint.smAndUp ? '60%' : '95%'"
+  >
+    <v-card flat>
+      <v-card-text>
+        <div class="you-are">{{ $t("profile_info_popup.you_are") }}</div>
+        <v-container fluid>
+          <v-row>
+            <v-col class="username" cols="pa-2">
+              <div v-if="$matrix.currentUser.is_guest">
+                <i18n path="profile_info_popup.identity_temporary" tag="span">
+                  <template v-slot:displayName>
+                    <b>{{ displayName }}</b>
+                  </template>
+                </i18n>
+              </div>
+              <div v-else>
+                <i18n path="profile_info_popup.identity" tag="span">
+                  <template v-slot:displayName>
+                    <b>{{ displayName }}</b>
+                  </template>
+                </i18n>
+              </div>
+            </v-col>
+            <v-col cols="auto" class="pa-2">
+              <v-avatar
+                class="avatar-32"
+                size="32"
+                color="#e0e0e0"
+                @click.stop="showProfileInfo = true"
+              >
+                <img v-if="userAvatar" :src="userAvatar" />
+                <span v-else class="white--text">{{ userAvatarLetter }}</span>
+              </v-avatar>
+            </v-col>
+          </v-row>
+        </v-container>
+
+        <v-container class="mt-4 pa-0">
+          <ActionRow @click="viewProfile" :icon="'account_circle'" :text="$t('profile_info_popup.edit_profile')" />
+          <ActionRow @click="logout" :icon="'logout'" :text="$t('profile_info_popup.logout')" />
+        </v-container>
+
+        <div class="more-container">
+          <div class="want_more">🙌 {{$t('profile_info_popup.want_more')}}</div>
+          <i18n path="profile_info_popup.powered_by" tag="div">
+            <template v-slot:product>{{ product }}</template>
+            <template v-slot:productLink>
+              <a :href="productLink">{{ productLink }}</a>
+            </template>
+          </i18n>
+          <div style="position:relative;width:100%;height: 40px">
+            <v-btn class="new_room" right absolute text @click="createRoom">{{ $t('profile_info_popup.new_room') }}</v-btn></div>
+        </div>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+<script>
+import profileInfoMixin from "./profileInfoMixin";
+import ActionRow from "./ActionRow.vue";
+import config from "../assets/config";
+
+export default {
+  name: "ProfileInfoPopup",
+  mixins: [profileInfoMixin],
+  components: {
+    ActionRow
+  },
+  props: {
+    show: {
+      type: Boolean,
+      default: function () {
+        return false;
+      },
+    },
+  },
+  data() {
+    return {
+      showDialog: false,
+    };
+  },
+  computed: {
+    product() {
+      return config.product;
+    },
+    productLink() {
+      return config.productLink;
+    }
+  },
+  watch: {
+    show: {
+      handler(newVal, ignoredOldVal) {
+        this.showDialog = newVal;
+      },
+    },
+    showDialog() {
+      if (!this.showDialog) {
+        this.$emit("close");
+      }
+    },
+  },
+
+  methods: {
+    viewProfile() {
+      this.showDialog = false;
+      this.$navigation.push({ name: "Profile" }, 1);
+    },
+    createRoom() {
+      this.showDialog = false;
+      this.$navigation.push({ name: "CreateRoom" });
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+.profile-info-popup {
+    font-family: "Inter", sans-serif !important;
+    font-size: 16px;
+    position: fixed;
+    margin: 0px;
+    top: 70px;
+    right: 10px;
+    border-radius: 40px;
+    &::before {
+        content: '▲';
+        position: fixed;
+        top: 57px;
+        right: 22px;
+        color: white;
+    }
+    .you-are {
+        padding-top: 20px;
+        font-size: 12px;
+    }
+    .username {
+        border-radius: 4px;
+        background-color: #f5f5f5;
+    }
+    .more-container {
+        border-radius: 10px;
+        background-color: #f5f5f5;
+        padding: 20px;
+        .want_more {
+            font-family: "Poppins", sans-serif;
+            font-weight: 700;
+            font-size: 13 * $chat-text-size;        
+        }
+        .new_room .v-btn__content {
+          font-family: "Poppins", sans-serif !important;
+            font-weight: 700 !important;
+            font-size: 13 * $chat-text-size !important;  
+        }
+    }
+}
+</style>

src/components/PurgeRoomDialog.vue

@@ -2,7 +2,6 @@
   <v-dialog v-model="showDialog" v-show="room" class="ma-0 pa-0" width="80%">
     <div class="dialog-content text-center">
       <template>
-        <v-icon color="black" size="30">lock</v-icon>
         <h2 class="dialog-title">{{ $t("purge_room.title") }}</h2>
         <div class="dialog-text">
           {{ $t("purge_room.info") }}

src/components/RoomInfo.vue

@@ -2,7 +2,7 @@
   <div v-if="room" class="room-info">
     <div class="chat-header">
       <v-container fluid>
-        <div class="room-name">{{ $t("room_info.title") }}</div>
+        <div class="room-name no-upper">{{ $t("room_info.title") }}</div>
         <v-btn
           text
           class="header-button-left"
@@ -12,67 +12,97 @@
           <v-icon>arrow_back</v-icon>
           <span>{{ $t("menu.back") }}</span>
         </v-btn>
+        <v-btn
+          color="black"
+          depressed
+          class="header-button-right filled-button mr-3"
+          @click.stop="showLeaveConfirmation = true"
+          >👋 {{ $t("room_info.leave_room") }}</v-btn
+        >
       </v-container>
     </div>
 
-    <v-card class="members ma-3 pa-3" flat>
+    <div class="members ma-3 pa-3 mt-0 pt-0 text-center">
-      <div class="text-center">
+      <v-avatar class="room-avatar">
-        <v-avatar class="room-avatar">
+        <v-img v-if="roomAvatar" :src="roomAvatar" />
-          <v-img v-if="roomAvatar" :src="roomAvatar" />
+        <span v-else class="white--text headline">{{
-          <span v-else class="white--text headline">{{
+          roomName.substring(0, 1).toUpperCase()
-            roomName.substring(0, 1).toUpperCase()
+        }}</span>
-          }}</span>
+      </v-avatar>
-        </v-avatar>
+      <div class="name">{{ roomName }}</div>
-        <div class="h1">{{ roomName }}</div>
+      <div class="topic">{{ roomTopic }}</div>
-        <div class="h3">{{ roomTopic }}</div>
+      <div class="created-by">
-        <div class="small">
+        {{ $t("room_info.created_by", { user: creator }) }}
-          {{ $t("room_info.created_by", { user: creator }) }}
-        </div>
-        <v-expand-transition>
-          <canvas
-            v-show="publicRoomLink"
-            ref="roomQr"
-            class="qr"
-            id="room-qr"
-          ></canvas>
-        </v-expand-transition>
       </div>
-    </v-card>
+    </div>
+
+    <v-expand-transition>
+      <v-container fluid class="pa-0" v-show="publicRoomLink">
+        <v-row cols="12" class="qr-container ma-3">
+          <v-col cols="auto">
+            <canvas ref="roomQr" class="qr" id="room-qr"></canvas>
+          </v-col>
+          <v-col align-self="center">
+            <div class="link">{{ publicRoomLink }}</div>
+          </v-col>
+        </v-row>
+        <v-row align="center" class="mt-0 pt-0">
+          <v-col align="center" class="mt-0 pt-0">
+            <v-btn
+              v-if="publicRoomLinkCopied"
+              color="#DEE6FF"
+              depressed
+              class="filled-button link-copied-in-place"
+              style="min-width: 180px"
+              >{{ $t("room_info.link_copied") }}</v-btn
+            >
+            <v-btn
+              v-else
+              color="black"
+              depressed
+              class="filled-button"
+              style="min-width: 180px"
+              @click.stop="copyRoomLink"
+              >{{ $t("room_info.copy_link") }}</v-btn
+            >
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-expand-transition>
 
     <v-card class="account ma-3" flat>
       <v-card-title class="h2">{{ $t("room_info.permissions") }}</v-card-title>
       <v-card-text>
-        <v-radio-group
+        <v-select
-          v-model="roomJoinRule"
+          color="grey"
           v-if="roomJoinRule"
           :disabled="!userCanChangeJoinRule || updatingJoinRule"
+          :items="joinRules"
+          class="mt-4"
+          v-model="roomJoinRule"
+          item-value="id"
         >
-          <v-radio :label="$t('room_info.join_invite')" :value="'invite'" />
+          <template v-slot:selection="{ item }">
-          <v-radio :label="$t('room_info.join_public')" :value="'public'">
+            <v-icon color="black" class="mr-2">{{ item.icon }}</v-icon>
-          </v-radio>
+            {{ item.text }}
-          <v-text-field
+          </template>
-            v-if="publicRoomLink"
+          <template v-slot:item="{ item, attrs, on }">
-            :value="publicRoomLink"
+            <v-list-item v-on="on" v-bind="attrs" #default="{ active }">
-            readonly
+              <v-list-item-avatar>
-            append-icon="content_copy"
+                <v-icon color="black">{{ item.icon }}</v-icon>
-            filled
+              </v-list-item-avatar>
-            type="text"
+              <v-list-item-content>
-            @click:append="copyRoomLink"
+                <v-list-item-title v-text="item.text"></v-list-item-title>
-          ></v-text-field>
+              </v-list-item-content>
-          <div v-if="publicRoomLinkCopied" class="link-copied">
+              <v-list-item-action>
-            {{ $t("room_info.link_copied") }}
+                <v-btn icon v-if="active">
-          </div>
+                  <v-icon color="grey lighten-1">check</v-icon>
-        </v-radio-group>
+                </v-btn>
+              </v-list-item-action>
+            </v-list-item>
+          </template>
+        </v-select>
 
-        <v-btn
-          v-if="userCanPurgeRoom"
-          color="red"
-          depressed
-          block
-          class="filled-button"
-          @click.stop="showPurgeConfirmation = true"
-          >{{ $t("room_info.purge") }}</v-btn
-        >
         <!-- <div v-if="anyoneCanJoin">
           <div>Anyone with a link can join.</div>
           <v-text-field
@@ -128,50 +158,21 @@
       </v-card-text>
     </v-card>
 
-    <v-card class="account ma-3" flat>
+    <!-- PURGE ROOM -->
-      <v-card-title class="h2">{{ $t("room_info.my_profile") }}</v-card-title>
+    <div class="members ma-3 pa-3 text-center">
-      <v-card-text>
+      <v-btn
-        <div>
+        v-if="userCanPurgeRoom"
-          <div v-if="$matrix.currentUser.is_guest">
+        color="red"
-            <i18n path="room_info.identity_temporary" tag="span">
+        depressed
-              <template v-slot:displayName>
+        class="filled-button"
-                <b>{{ displayName }}</b>
+        @click.stop="showPurgeConfirmation = true"
-              </template>
+        >{{ $t("room_info.purge") }}</v-btn
-            </i18n>
+      >
-          </div>
+    </div>
-          <div v-else>
-            <i18n path="room_info.identity" tag="span">
-              <template v-slot:displayName>
-                <b>{{ displayName }}</b>
-              </template>
-            </i18n>
-          </div>
-          <v-btn
-            depressed
-            block
-            class="outlined-button"
-            @click.stop="viewProfile"
-            >{{$t('room_info.view_profile')}}</v-btn
-          >
-        </div>
-      </v-card-text>
-    </v-card>
 
-    <v-card class="account ma-3" flat>
+    <div class="build-version">
-      <v-card-text>
+      {{ $t("room_info.version_info", { version: buildVersion }) }}
-        <v-btn
+    </div>
-          color="red"
-          depressed
-          block
-          class="filled-button"
-          @click.stop="showLeaveConfirmation = true"
-          >{{$t('room_info.leave_room')}}</v-btn
-        >
-        <div>{{$t('room_info.leave_room_info')}}</div>
-      </v-card-text>
-    </v-card>
-
-    <div class="build-version">{{$t('room_info.version_info',{version: buildVersion})}}</div>
 
     <LeaveRoomDialog
       :show="showLeaveConfirmation"
@@ -214,6 +215,18 @@ export default {
       buildVersion: "",
       updatingJoinRule: false, // Flag if we are processing update curerntly
       publicRoomLinkCopied: false,
+      joinRules: [
+        {
+          id: "public",
+          text: this.$t("room_info.join_public"),
+          icon: "link",
+        },
+        {
+          id: "invite",
+          text: this.$t("room_info.join_invite"),
+          icon: "person_add",
+        },
+      ],
     };
   },
   mounted() {
@@ -314,7 +327,7 @@ export default {
           {
             type: "image/png",
             margin: 1,
-            width: canvas.clientWidth,
+            width: 60,
           },
           function (error) {
             if (error) console.error(error);

src/components/profileInfoMixin.js

@@ -0,0 +1,44 @@
+export default {
+  computed: {
+    user() {
+      if (!this.$matrix.matrixClient) {
+        return null;
+      }
+      return this.$matrix.matrixClient.getUser(this.$matrix.currentUserId);
+    },
+
+    displayName() {
+      if (!this.user) {
+        return null;
+      }
+      return (this.user.displayName || this.user.userId);
+    },
+
+    userAvatar() {
+      if (!this.user || !this.user.avatarUrl) {
+        return null;
+      }
+      return this.$matrix.matrixClient.mxcUrlToHttp(this.user.avatarUrl, 80, 80, 'scale', true);
+    },
+
+    userAvatarLetter() {
+      if (!this.user) {
+        return null;
+      }
+      return (this.user.displayName || this.user.userId.substring(1)).substring(0, 1).toUpperCase();
+    },
+
+    passwordsMatch() {
+      return this.newPassword1 && this.newPassword2 && this.newPassword1 == this.newPassword2;
+    }
+  },
+  methods: {
+    logout() {
+      //TODO - For guest accounts, show warning about not being able to rejoin.
+      this.$store.dispatch("logout");
+      this.$nextTick(() => {
+        this.$navigation.push({path: "/login"}, -1);
+      })
+    },
+  }
+}