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

package-lock.json

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

package.json

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

package.json.bak

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

src/assets/css/chat.scss

@@ -869,7 +869,7 @@ $admin-fg: white;
 }
 
 .created-room-welcome-header {
-    background-color: #e0e0e0;
+    background-color: #f5f5f5;
     border-radius: 25px;
     margin: 20px;
     padding: 20px;
@@ -891,10 +891,29 @@ $admin-fg: white;
 
 .avatar-32 {
     font-size: 18 * $chat-text-size !important;
-    &.clickable {
+}
-        cursor: pointer;
+
-        &:hover {
+.avatar-48 {
-            opacity: 0.7;
+    font-size: 27 * $chat-text-size !important;
-        }
+}
+
+.avatar-32.clickable,
+.avatar-48.clickable {
+    cursor: pointer;
+    &:hover {
+        opacity: 0.7;
     }
-}
+}
+
+.new-room {
+    font-family: "Inter", sans-serif;
+    font-size: 16px !important;
+    font-weight: 600 !important;
+    text-decoration: underline;
+    color: black;
+    &::after {
+        content: "\00a0\00a0>";
+        display: inline-block;
+        text-decoration: none !important;
+    }
+}

src/assets/translations/en.json

@@ -63,13 +63,13 @@
     "room_list_rooms": "Rooms"
   },
   "room_welcome": {
-    "welcome": "Welcome!",
+    "info": "Welcome! Here are a few things to know about your room:",
-    "info": "Here are a few things to know about your group:",
     "encrypted": "Messages are end-to-end encrypted.",
     "room_history_is": "Room history is {type}.",
+    "room_history_joined": "People can only see the messages sent after they join.",
     "join_public": "Anyone can join by opening this link: {link}.",
     "join_invite": "Only people you invite can join.",
-    "info_permissions": "You can change 'join permissions' and 'message history' at any time in the group settings.",
+    "info_permissions": "You can change ‘join permissions’ at any time in the room settings.",
     "got_it": "Got it"
   },
   "new_room": {

src/components/CreatedRoomWelcomeHeader.vue

@@ -1,13 +1,6 @@
 <template>
   <div class="created-room-welcome-header">
-    <div class="h4">{{ $t("room_welcome.welcome") }}</div>
+    <div>{{ $t("room_welcome.info") }}</div>
-    <div class="mt-2">{{ $t("room_welcome.info") }}</div>
-    <div class="mt-2" v-if="roomIsEncrypted">
-      {{ $t("room_welcome.encrypted") }}
-    </div>
-    <div class="mt-2" v-if="roomHistoryDescription">
-      {{ roomHistoryDescription }}
-    </div>
     <div class="mt-2" v-if="roomJoinRule == 'public'">
       <i18n path="room_welcome.join_public" tag="span">
         <template v-slot:link>
@@ -19,8 +12,14 @@
       {{ $t("room_welcome.join_invite") }}
     </div>
     <div class="mt-2">{{ $t("room_welcome.info_permissions") }}</div>
+    <div class="mt-2" v-if="roomIsEncrypted">
+      {{ $t("room_welcome.encrypted") }}
+    </div>
+    <div class="mt-2" v-if="roomHistoryDescription">
+      {{ roomHistoryDescription }}
+    </div>
     <div class="text-right">
-      <v-btn text @click.stop="$emit('close')">{{
+      <v-btn text @click.stop="$emit('close')" style="text-transform: none">{{
         $t("room_welcome.got_it")
       }}</v-btn>
     </div>
@@ -50,9 +49,7 @@ export default {
             type: this.$t("message.room_history_invited"),
           });
         case "joined":
-          return this.$t("room_welcome.room_history_is", {
+          return this.$t("room_welcome.room_history_joined");
-            type: this.$t("message.room_history_joined"),
-          });
       }
       return null;
     },

src/components/Profile.vue

@@ -2,66 +2,112 @@
   <div v-if="user" class="profile">
     <div class="chat-header">
       <v-container fluid>
-        <div class="room-name">{{$t('profile.title')}}</div>
+        <div class="room-name">{{ $t("profile.title") }}</div>
-            <v-btn
+        <v-btn
-              text
+          text
-              class="header-button-right"
+          class="header-button-right"
-              v-show="$navigation && $navigation.canPop()"
+          v-show="$navigation && $navigation.canPop()"
-              @click.stop="$navigation.pop"
+          @click.stop="$navigation.pop"
-            >
+        >
-              <v-icon>close</v-icon>
+          <v-icon>close</v-icon>
-            </v-btn>
+        </v-btn>
-
       </v-container>
     </div>
 
-
     <v-container class="user-info">
-        <v-row>
+      <v-row>
-          <v-col class="flex-grow-0 flex-shrink-0">
+        <v-col class="flex-grow-0 flex-shrink-0">
-                <v-avatar class="avatar" size="48" color="#e0e0e0">
+          <v-avatar
-          <img v-if="userAvatar" :src="userAvatar" />
+            class="avatar-48 clickable"
-            <span v-else class="white--text headline">{{
+            size="48"
-              userAvatarLetter
+            color="#e0e0e0"
-            }}</span>
+            @click="showAvatarPicker"
+          >
+            <img v-if="userAvatar" :src="userAvatar" />
+            <span v-else class="white--text">{{ userAvatarLetter }}</span>
+            <input
+              ref="avatar"
+              type="file"
+              name="avatar"
+              @change="handlePickedAvatar($event)"
+              accept="image/*"
+              style="display: none"
+            />
           </v-avatar>
-          </v-col>
+        </v-col>
-          <v-col class="flex-shrink-1 flex-grow-1">
+        <v-col class="flex-shrink-1 flex-grow-1">
-            <div class="h1">{{ displayName }}</div>
+          <div class="h1">{{ displayName }}</div>
-            <div class="text-center">{{ $matrix.currentUser.user_id }}</div>
+          <div class="text-center">{{ $matrix.currentUser.user_id }}</div>
-            <div v-if="$matrix.currentUser.is_guest">{{$t('profile.temporary_identity')}}</div>
+          <div v-if="$matrix.currentUser.is_guest">
-            <v-btn depressed block class="outlined-button" @click.stop="logout">{{$t('menu.logout')}}</v-btn>
+            {{ $t("profile.temporary_identity") }}
-          </v-col>
+          </div>
-        </v-row>
+          <v-btn depressed block class="outlined-button" @click.stop="logout">{{
-      </v-container>
+            $t("menu.logout")
+          }}</v-btn>
+        </v-col>
+      </v-row>
+    </v-container>
 
     <v-container class="mt-2 pa-5">
-      <ActionRow @click="showEditPasswordDialog = true" :icon="'lock'" :text="$t('profile.set_password')" />
+      <ActionRow
-      <ActionRow @click="editValue = displayName;showEditDisplaynameDialog = true" :icon="'edit'" :text="$t('profile.change_name')" />
+        @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%">
       <v-card :disabled="settingPassword">
-        <v-card-title>{{$t('profile.change_password')}}</v-card-title>
+        <v-card-title>{{ $t("profile.change_password") }}</v-card-title>
         <v-card-text>
-          <v-text-field v-if="!$matrix.currentUser.is_guest" v-model="password" :label="$t('profile.password_old')" type="password" />
+          <v-text-field
-          <v-text-field v-model="newPassword1" :label="$t('profile.password_new')" type="password" />
+            v-if="!$matrix.currentUser.is_guest"
-          <v-text-field v-model="newPassword2" :label="$t('profile.password_repeat')" type="password" />
+            v-model="password"
-          <div class="red--text" v-if="passwordErrorMessage">{{ passwordErrorMessage }}</div>
+            :label="$t('profile.password_old')"
+            type="password"
+          />
+          <v-text-field
+            v-model="newPassword1"
+            :label="$t('profile.password_new')"
+            type="password"
+          />
+          <v-text-field
+            v-model="newPassword2"
+            :label="$t('profile.password_repeat')"
+            type="password"
+          />
+          <div class="red--text" v-if="passwordErrorMessage">
+            {{ passwordErrorMessage }}
+          </div>
         </v-card-text>
         <v-divider></v-divider>
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn text @click="closeEditPasswordDialog">{{$t('menu.cancel')}}</v-btn>
+          <v-btn text @click="closeEditPasswordDialog">{{
+            $t("menu.cancel")
+          }}</v-btn>
           <v-btn
             :disabled="!passwordsMatch"
             color="primary"
             text
             @click="
-              setPassword($matrix.currentUser.is_guest ? $matrix.currentUser.password : password, newPassword1);
+              setPassword(
+                $matrix.currentUser.is_guest
+                  ? $matrix.currentUser.password
+                  : password,
+                newPassword1
+              )
             "
-            >{{$t('menu.ok')}}</v-btn
+            >{{ $t("menu.ok") }}</v-btn
           >
         </v-card-actions>
       </v-card>
@@ -70,14 +116,16 @@
     <!-- edit display name dialog -->
     <v-dialog v-model="showEditDisplaynameDialog" class="ma-0 pa-0" width="50%">
       <v-card>
-        <v-card-title>{{$t('profile.display_name')}}</v-card-title>
+        <v-card-title>{{ $t("profile.display_name") }}</v-card-title>
         <v-card-text>
           <v-text-field v-model="editValue" />
         </v-card-text>
         <v-divider></v-divider>
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn text @click="showEditDisplaynameDialog = false">{{$t('menu.cancel')}}</v-btn>
+          <v-btn text @click="showEditDisplaynameDialog = false">{{
+            $t("menu.cancel")
+          }}</v-btn>
           <v-btn
             color="primary"
             text
@@ -85,7 +133,7 @@
               setDisplayName(editValue);
               showEditDisplaynameDialog = false;
             "
-            >{{$t('menu.ok')}}</v-btn
+            >{{ $t("menu.ok") }}</v-btn
           >
         </v-card-actions>
       </v-card>
@@ -94,12 +142,17 @@
 </template>
 
 <script>
+import dataUriToBuffer from "data-uri-to-buffer";
 import ActionRow from "./ActionRow.vue";
+import ImageResize from "image-resize";
+const sizeOf = require("image-size");
+//const dataUriToBuffer = require("data-uri-to-buffer");
+import util from "../plugins/utils";
 
 export default {
   name: "Profile",
   components: {
-    ActionRow
+    ActionRow,
   },
   data() {
     return {
@@ -110,7 +163,7 @@ export default {
       newPassword1: null,
       newPassword2: null,
       settingPassword: false,
-      passwordErrorMessage: null
+      passwordErrorMessage: null,
     };
   },
 
@@ -126,26 +179,38 @@ export default {
       if (!this.user) {
         return null;
       }
-      return (this.user.displayName || this.user.userId);
+      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);
+      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();
+      return (this.user.displayName || this.user.userId.substring(1))
+        .substring(0, 1)
+        .toUpperCase();
     },
 
     passwordsMatch() {
-      return this.newPassword1 && this.newPassword2 && this.newPassword1 == this.newPassword2;
+      return (
-    }
+        this.newPassword1 &&
+        this.newPassword2 &&
+        this.newPassword1 == this.newPassword2
+      );
+    },
   },
 
   methods: {
@@ -156,17 +221,20 @@ export default {
     setPassword(oldPassword, newPassword) {
       this.settingPassword = true;
       this.passwordErrorMessage = null;
-      this.$matrix.setPassword(oldPassword, newPassword)
+      this.$matrix
-      .then(success => {
+        .setPassword(oldPassword, newPassword)
-        console.log(success ? "Password changed" : "Failed to change password");
+        .then((success) => {
-        this.closeEditPasswordDialog();
+          console.log(
-      })
+            success ? "Password changed" : "Failed to change password"
-      .catch(error => {
+          );
-        this.passwordErrorMessage = error.message;
+          this.closeEditPasswordDialog();
-      })
+        })
-      .finally(() => {
+        .catch((error) => {
-        this.settingPassword = false;
+          this.passwordErrorMessage = error.message;
-      });
+        })
+        .finally(() => {
+          this.settingPassword = false;
+        });
     },
 
     closeEditPasswordDialog() {
@@ -175,7 +243,72 @@ export default {
       this.newPassword1 = null;
       this.newPassword2 = null;
       this.showEditPasswordDialog = false;
-    }
+    },
+
+    showAvatarPicker() {
+      this.$refs.avatar.click();
+    },
+
+    handlePickedAvatar(event) {
+      const self = this;
+      if (event.target.files && event.target.files[0]) {
+        var reader = new FileReader();
+        reader.onload = (e) => {
+          const file = event.target.files[0];
+          if (file.type.startsWith("image/")) {
+            try {
+              var image = e.target.result;
+
+              var dimens = sizeOf(dataUriToBuffer(e.target.result));
+
+              // Need to resize?
+              const w = dimens.width;
+              const h = dimens.height;
+              if (w > 640 || h > 640) {
+                var aspect = w / h;
+                var newWidth = parseInt((w > h ? 640 : 640 * aspect).toFixed());
+                var newHeight = parseInt(
+                  (w > h ? 640 / aspect : 640).toFixed()
+                );
+                var imageResize = new ImageResize({
+                  format: "png",
+                  width: newWidth,
+                  height: newHeight,
+                  outputType: "blob",
+                });
+                imageResize
+                  .play(event.target)
+                  .then((img) => {
+                    var resizedImageFile = new File([img], file.name, {
+                      type: img.type,
+                      lastModified: Date.now(),
+                    });
+                    var reader2 = new FileReader();
+                    reader2.onload = (e) => {
+                      self.setAvatar(e.target.result);
+                    };
+                    reader2.readAsDataURL(resizedImageFile);
+                  })
+                  .catch((err) => {
+                    console.error("Resize failed:", err);
+                  });
+              } else {
+                self.setAvatar(image);
+              }
+            } catch (error) {
+              console.error("Failed to get image dimensions: " + error);
+            }
+          }
+        };
+        reader.readAsDataURL(event.target.files[0]);
+      }
+    },
+
+    setAvatar(image) {
+      return util.setAvatar(this.$matrix, image, function (progress) {
+        console.log("Progress: " + JSON.stringify(progress));
+      });
+    },
   },
 };
 </script>

src/components/RoomList.vue

@@ -1,39 +1,61 @@
 <template>
   <v-list dense class="room-list">
-    <div v-if="showInvites && $matrix.invites.length > 0" class="h4">{{invitesTitle}}</div>
+    <div v-if="showInvites && $matrix.invites.length > 0" class="h4">
-    <v-list-item-group v-if="showInvites" v-model="currentRoomId" color="primary">
+      {{ invitesTitle }}
+    </div>
+    <v-list-item-group
+      v-if="showInvites"
+      v-model="currentRoomId"
+      color="primary"
+    >
       <v-slide-y-transition group>
-      <v-list-item :disabled="roomsProcessing[room.roomId]" v-for="room in $matrix.invites" :key="room.roomId" :value="room.roomId">
+        <v-list-item
-        <v-list-item-avatar size="40" color="#e0e0e0">
+          :disabled="roomsProcessing[room.roomId]"
-          <v-img :src="room.avatar" />
+          v-for="room in $matrix.invites"
-        </v-list-item-avatar>
+          :key="room.roomId"
-        <v-list-item-content>
+          :value="room.roomId"
-          <v-list-item-title>{{ room.name || room.summary.info.title }}</v-list-item-title>
+        >
-          <v-list-item-subtitle>{{ room.topic }}</v-list-item-subtitle>
+          <v-list-item-avatar size="40" color="#e0e0e0">
-        </v-list-item-content>
+            <v-img :src="room.avatar" />
-        <v-list-item-action>
+          </v-list-item-avatar>
-          <v-btn @click.stop="acceptInvitation(room)" icon><v-icon>check_circle</v-icon></v-btn>
+          <v-list-item-content>
-          <v-btn @click.stop="rejectInvitation(room)" icon><v-icon>cancel</v-icon></v-btn>
+            <v-list-item-title>{{
-        </v-list-item-action>
+              room.name || room.summary.info.title
-      </v-list-item>
+            }}</v-list-item-title>
+            <v-list-item-subtitle>{{ room.topic }}</v-list-item-subtitle>
+          </v-list-item-content>
+          <v-list-item-action>
+            <v-btn @click.stop="acceptInvitation(room)" icon
+              ><v-icon>check_circle</v-icon></v-btn
+            >
+            <v-btn @click.stop="rejectInvitation(room)" icon
+              ><v-icon>cancel</v-icon></v-btn
+            >
+          </v-list-item-action>
+        </v-list-item>
       </v-slide-y-transition>
     </v-list-item-group>
-    <div class="h4">{{title}}</div>
+    <div class="h4">{{ title }}</div>
     <v-list-item-group v-model="currentRoomId" color="primary">
       <v-list-item v-if="showCreate" @click.stop="$emit('newroom')">
-        <v-list-item-avatar size="40" color="#e0e0e0">
-          <v-img />
-        </v-list-item-avatar>
         <v-list-item-content>
-          <v-list-item-title>{{$t('menu.new_room')}}</v-list-item-title>
+          <v-list-item-title class="new-room">{{
+            $t("menu.new_room")
+          }}</v-list-item-title>
         </v-list-item-content>
       </v-list-item>
 
-      <v-list-item v-for="room in $matrix.joinedRooms" :key="room.roomId" :value="room.roomId">
+      <v-list-item
+        v-for="room in $matrix.joinedRooms"
+        :key="room.roomId"
+        :value="room.roomId"
+      >
         <v-list-item-avatar size="40" color="#e0e0e0">
           <v-img :src="room.avatar" />
         </v-list-item-avatar>
-        <div class="room-list-notification-count">{{ notificationCount(room) }}</div>
+        <div class="room-list-notification-count">
+          {{ notificationCount(room) }}
+        </div>
         <v-list-item-content>
           <v-list-item-title>{{ room.summary.info.title }}</v-list-item-title>
           <v-list-item-subtitle>{{ room.topic }}</v-list-item-subtitle>
@@ -45,7 +67,7 @@
 
 <script>
 import util from "../plugins/utils";
-import Vue from 'vue';
+import Vue from "vue";
 
 export default {
   name: "RoomList",
@@ -53,20 +75,20 @@ export default {
   props: {
     title: {
       type: String,
-      default: "Rooms"
+      default: "Rooms",
     },
     invitesTitle: {
       type: String,
-      default: "Invites"
+      default: "Invites",
     },
     showInvites: {
       type: Boolean,
-      default: false
+      default: false,
     },
     showCreate: {
       type: Boolean,
-      default: false
+      default: false,
-    }
+    },
   },
 
   data: () => ({
@@ -77,18 +99,23 @@ export default {
 
   methods: {
     notificationCount(room) {
-      return room.getUnreadNotificationCount('total') || 0;
+      return room.getUnreadNotificationCount("total") || 0;
     },
 
     acceptInvitation(room) {
       Vue.set(this.roomsProcessing, room.roomId, true);
-      this.$matrix.matrixClient.joinRoom(room.roomId)
+      this.$matrix.matrixClient
+        .joinRoom(room.roomId)
         .then((ignoredRoom) => {
           this.$nextTick(() => {
             this.$navigation.push(
               {
                 name: "Chat",
-                params: { roomId: util.sanitizeRoomId(room.getCanonicalAlias() || room.roomId) },
+                params: {
+                  roomId: util.sanitizeRoomId(
+                    room.getCanonicalAlias() || room.roomId
+                  ),
+                },
               },
               -1
             );
@@ -104,7 +131,8 @@ export default {
 
     rejectInvitation(room) {
       Vue.set(this.roomsProcessing, room.roomId, true);
-      this.$matrix.leaveRoom(room.roomId)
+      this.$matrix
+        .leaveRoom(room.roomId)
         .catch((err) => {
           console.error("Failed to reject invite: ", err);
         })
@@ -121,7 +149,13 @@ export default {
         return;
       }
       this.$emit("close");
-      this.$navigation.push({name: 'Chat', params: { roomId: util.sanitizeRoomId(this.currentRoomId) }}, -1);
+      this.$navigation.push(
+        {
+          name: "Chat",
+          params: { roomId: util.sanitizeRoomId(this.currentRoomId) },
+        },
+        -1
+      );
     },
   },
 };

src/services/matrix.service.js

@@ -14,6 +14,15 @@ export default {
             throw new Error('Please initialise plugin with a Vuex store.')
         }
 
+        // Set User-Agent headers.
+        // Update: browser do not allow this, "Refused to set unsafe header "User-Agent""
+        // Keep this code around however, since it's an example of how to add headers to a request...
+        // sdk.wrapRequest((orig, opts, callback) => {
+        //     opts.headers = opts.headers || {}
+        //     opts.headers['User-Agent'] = "Keanu";
+        //     var ret = orig(opts, callback);
+        //     return ret;
+        // });
         const store = options.store;
         const i18n = options.i18n;
 
@@ -107,6 +116,7 @@ export default {
                         promiseLogin = tempMatrixClient
                             .register(user, pass, null, {
                                 type: "m.login.dummy",
+                                initial_device_display_name: config.appName
                             })
                             .then((response) => {
                                 console.log("Response", response);
@@ -116,7 +126,7 @@ export default {
                                 return response;
                             })
                     } else {
-                        var data = { user: User.localPart(user.user_id), password: user.password, type: "m.login.password" };
+                        var data = { user: User.localPart(user.user_id), password: user.password, type: "m.login.password", initial_device_display_name: config.appName };
                         if (user.device_id) {
                             data.device_id = user.device_id;
                         }
@@ -584,8 +594,9 @@ export default {
                             // Is the other member the one we are looking for?
                             if (this.isDirectRoomWith(room, userId)) {
                                 var member = room.getMember(userId);
-                                if (member && member.membership == "invite") {
+                                if (member && member.membership != "join") {
-                                    // TODO Resend invite
+                                    // Resend invite
+                                    this.matrixClient.invite(room.roomId, userId);
                                 }
                                 resolve(room);
                                 return;
@@ -721,6 +732,7 @@ export default {
                             clientPromise = tempMatrixClient
                                 .register(user, pass, null, {
                                     type: "m.login.dummy",
+                                    initial_device_display_name: config.appName
                                 })
                                 .then((response) => {
                                     console.log("Response", response);
@@ -733,7 +745,7 @@ export default {
 
                         // Get an access token
                         clientPromise = clientPromise.then(user => {
-                            var data = { user: User.localPart(user.user_id), password: user.password, type: "m.login.password" };
+                            var data = { user: User.localPart(user.user_id), password: user.password, type: "m.login.password", initial_device_display_name: config.appName };
                             if (user.device_id) {
                                 data.device_id = user.device_id;
                             }