Improve avatar selection on edit identity

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/utils/image.ts

@@ -1,7 +1,7 @@
 import { IPicture } from "@/types/picture.model";
 
-export async function buildFileFromIPicture(obj: IPicture | null | undefined) {
+export async function buildFileFromIPicture(obj: IPicture | null | undefined): Promise<File | null> {
-  if (!obj) return null;
+  if (!obj) return Promise.resolve(null);
 
   const response = await fetch(obj.url);
   const blob = await response.blob();
@@ -9,7 +9,7 @@ export async function buildFileFromIPicture(obj: IPicture | null | undefined) {
   return new File([blob], obj.name);
 }
 
-export function buildFileVariable<T>(file: File | null, name: string, alt?: string) {
+export function buildFileVariable<T>(file: File | null, name: string, alt?: string): Record<string, unknown> {
   if (!file) return {};
 
   return {

js/src/views/Account/children/EditIdentity.vue

@@ -27,7 +27,7 @@
         <span v-else>{{ $t("I create an identity") }}</span>
       </h1>
 
-      <picture-upload v-model="avatarFile" class="picture-upload" />
+      <picture-upload v-model="avatarFile" :defaultImageSrc="avatarUrl" class="picture-upload" />
 
       <b-field horizontal :label="$t('Display name')">
         <b-input
@@ -124,7 +124,6 @@ h1 {
 <script lang="ts">
 import { Component, Prop, Watch } from "vue-property-decorator";
 import { mixins } from "vue-class-component";
-import { Route } from "vue-router";
 import {
   CREATE_PERSON,
   CURRENT_ACTOR_CLIENT,
@@ -137,7 +136,7 @@ import { IPerson, Person } from "../../../types/actor";
 import PictureUpload from "../../../components/PictureUpload.vue";
 import { MOBILIZON_INSTANCE_HOST } from "../../../api/_entrypoint";
 import RouteName from "../../../router/name";
-import { buildFileFromIPicture, buildFileVariable, readFileAsync } from "../../../utils/image";
+import { buildFileVariable } from "../../../utils/image";
 import { changeIdentity } from "../../../utils/auth";
 import identityEditionMixin from "../../../mixins/identityEdition";
 
@@ -185,24 +184,31 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
     return this.$t("Only alphanumeric characters and underscores are supported.") as string;
   }
 
+  get avatarUrl(): string | null {
+    if (this.identity && this.identity.avatar && this.identity.avatar.url) {
+      return this.identity.avatar.url;
+    }
+    return null;
+  }
+
   @Watch("isUpdate")
   async isUpdateChanged(): Promise<void> {
     this.resetFields();
   }
 
   @Watch("identityName", { immediate: true })
-  async onIdentityParamChanged(val: string): Promise<Route | undefined> {
+  async onIdentityParamChanged(val: string): Promise<void> {
     // Only used when we update the identity
     if (!this.isUpdate) return;
 
     await this.redirectIfNoIdentitySelected(val);
 
     if (!this.identityName) {
-      return this.$router.push({ name: "CreateIdentity" });
+      this.$router.push({ name: "CreateIdentity" });
     }
 
     if (this.identityName && this.identity) {
-      this.avatarFile = await buildFileFromIPicture(this.identity.avatar);
+      this.avatarFile = null;
     }
   }
 
@@ -278,6 +284,7 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
           }
         },
       });
+      this.avatarFile = null;
 
       this.$notifier.success(
         this.$t("Identity {displayName} updated", {
@@ -376,23 +383,18 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
   }
 
   private async buildVariables() {
-    const avatarObj = buildFileVariable(
-      this.avatarFile,
-      "avatar",
-      `${this.identity.preferredUsername}'s avatar`
-    );
-    const res = { ...this.identity, ...avatarObj };
     /**
-     * If the avatar didn't change, no need to try reuploading it
+     * We set the avatar only if user has selected one
      */
-    if (this.identity.avatar) {
+    let avatarObj: Record<string, unknown> = { avatar: null };
-      const oldAvatarFile = (await buildFileFromIPicture(this.identity.avatar)) as File;
+    if (this.avatarFile) {
-      const oldAvatarFileContent = await readFileAsync(oldAvatarFile);
+      avatarObj = buildFileVariable(
-      const newAvatarFileContent = await readFileAsync(this.avatarFile as File);
+        this.avatarFile,
-      if (oldAvatarFileContent === newAvatarFileContent) {
+        "avatar",
-        res.avatar = null;
+        `${this.identity.preferredUsername}'s avatar`
-      }
+      );
     }
+    const res = { ...this.identity, ...avatarObj };
     return res;
   }