From 0be3e0c9fa716ea7208c2434e1473151f2dd8e46 Mon Sep 17 00:00:00 2001 From: Thomas Citharel Date: Sun, 25 Oct 2020 12:01:50 +0100 Subject: [PATCH] Improve avatar selection on edit identity Signed-off-by: Thomas Citharel --- js/src/utils/image.ts | 6 +-- .../views/Account/children/EditIdentity.vue | 42 ++++++++++--------- 2 files changed, 25 insertions(+), 23 deletions(-) diff --git a/js/src/utils/image.ts b/js/src/utils/image.ts index 3bbe5593f..5c817168e 100644 --- a/js/src/utils/image.ts +++ b/js/src/utils/image.ts @@ -1,7 +1,7 @@ import { IPicture } from "@/types/picture.model"; -export async function buildFileFromIPicture(obj: IPicture | null | undefined) { - if (!obj) return null; +export async function buildFileFromIPicture(obj: IPicture | null | undefined): Promise { + 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(file: File | null, name: string, alt?: string) { +export function buildFileVariable(file: File | null, name: string, alt?: string): Record { if (!file) return {}; return { diff --git a/js/src/views/Account/children/EditIdentity.vue b/js/src/views/Account/children/EditIdentity.vue index 2ab01d65b..dcb45e14f 100644 --- a/js/src/views/Account/children/EditIdentity.vue +++ b/js/src/views/Account/children/EditIdentity.vue @@ -27,7 +27,7 @@ {{ $t("I create an identity") }} - + 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 { this.resetFields(); } @Watch("identityName", { immediate: true }) - async onIdentityParamChanged(val: string): Promise { + async onIdentityParamChanged(val: string): Promise { // 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) { - const oldAvatarFile = (await buildFileFromIPicture(this.identity.avatar)) as File; - const oldAvatarFileContent = await readFileAsync(oldAvatarFile); - const newAvatarFileContent = await readFileAsync(this.avatarFile as File); - if (oldAvatarFileContent === newAvatarFileContent) { - res.avatar = null; - } + let avatarObj: Record = { avatar: null }; + if (this.avatarFile) { + avatarObj = buildFileVariable( + this.avatarFile, + "avatar", + `${this.identity.preferredUsername}'s avatar` + ); } + const res = { ...this.identity, ...avatarObj }; return res; }