Change avatar from Profile view

Issue #138.

src/assets/css/chat.scss

@@ -891,10 +891,16 @@ $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;
     }
 }

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>