diff --git a/client/src/pages/onboarding/AccountProfile.vue b/client/src/pages/onboarding/AccountProfile.vue index 1eb9bb78..31b982b8 100644 --- a/client/src/pages/onboarding/AccountProfile.vue +++ b/client/src/pages/onboarding/AccountProfile.vue @@ -6,6 +6,7 @@ import { useUserStore } from "@/stores/user"; import { useRoute } from "vue-router"; import { useTranslation } from "i18next-vue"; import { profileNextRoute, useEntities } from "@/services/onboarding"; +import AvatarImage from "@/components/ui/AvatarImage.vue"; const { t } = useTranslation(); @@ -36,17 +37,23 @@ const validOrganisation = computed(() => { return selectedOrganisation.value.id !== 0; }); -/* TODO: We do this later (not in the first release) -const { - upload: avatarUpload, - loading: avatarLoading, - error: avatarError, - fileInfo: avatarFileInfo, -} = useFileUpload(); +const avatarError = ref(false); +const avatarLoading = ref(false); -watch(avatarFileInfo, (info) => { - console.log("fileInfo changed", info); -})*/ +async function avatarUpload(e: Event) { + const { files } = e.target as HTMLInputElement; + if (!files?.length) return; + avatarLoading.value = true; + avatarError.value = false; + + try { + await user.setUserAvatar(files[0]); + } catch (e) { + avatarError.value = true; + } finally { + avatarLoading.value = false; + } +} watch(selectedOrganisation, async (organisation) => { await user.setUserOrganisation(organisation.id); @@ -74,7 +81,6 @@ const nextRoute = computed(() => { -