{"version":3,"file":"ProfileAvatar.ce.c723ded1.js","sources":["../../src/components/ProfileAvatar.ce.vue"],"sourcesContent":["<template>\n  <div class=\"c-profile__avatar-component\">\n    <div class=\"c-profile__picture-container\">\n      <SVGIcon class=\"c-profile__picture-border\" width=\"48\" height=\"48\" name=\"avatar-outline\" />\n      <img :src=\"avatarUrl\" alt=\"\" class=\"c-profile__picture\">\n      <SVGIcon v-if=\"hasActiveMembership\" class=\"c-profile__premium-icon\" name=\"diamond-small\" />\n    </div>\n    <h3 v-if=\"isSameUser\" class=\"c-heading__icon avatar-edit__icon\" @click.prevent=\"triggerInput\">\n      <SVGIcon class=\"c-button__icon\" name=\"pen\" />\n    </h3>\n    <div v-if=\"isError\" class=\"c-message c-message--error c-message--error-avatar u-mbm\">\n      <p>{{ t('updateProfileError') }}</p>\n      <p v-if=\"isTypeError\">{{ t('imageTypeError') }}</p>\n      <p v-if=\"isSizeError\">{{ t('imageSizeError') }}</p>\n      <p v-if=\"isNameError\">{{ t('imageNameError') }}</p>\n    </div>\n    <input\n      :id=\"`${randomID}-browse`\"\n      ref=\"input\"\n      class=\"u-hide\"\n      name=\"browse\"\n      type=\"file\"\n      @change=\"browsedFile\"\n    >\n    <!-- submit -->\n    <fieldset class=\"c-form__actions u-hide\">\n      <BtnSubmit id=\"button-submit-avatar\" ref=\"buttonSubmit\" class=\"c-profile__button-submit\" :loading=\"submit.loading\" :label=\"t('updateProfile')\" />\n    </fieldset>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted } from 'vue'\nimport { useI18n } from '@/utils/i18n'\nimport { useRequest, updateDateModified, getUser } from '@/utils/api'\nimport { getCookie } from '@/utils/get-cookie'\nimport BtnSubmit from '@/components/buttons/BtnSubmit.vue'\nimport { formatDateTime } from '@/utils/format-date'\nimport SVGIcon from '@/components/SVGIcon.vue'\n\nconst props = defineProps<{\n  userId: string,\n  userName: string,\n  profileId: number,\n  profileName: string,\n  avatar?: string\n  avatarUrl: string\n}>()\n\nlet userId: number\nlet userName: string\nlet profileId: number\nlet profileName: string\n\nconst profileUser = ref()\nconst hasActiveMembership = ref(false)\n\nlet isSameUser: boolean\n\nlet avatarUrl: string\n\nsetProfile()\nsetAvatarUrl()\n\nconst csrftoken = getCookie('csrftoken')!\n\nlet isUploaded: boolean = false\nconst isError = ref(false)\nconst isTypeError = ref(false)\nconst isSizeError = ref(false)\nconst isNameError = ref(false)\n\nlet editIcon: HTMLElement\n\nconst form: HTMLFormElement = document.querySelector('#avatar-form')!\n\nconst input = ref<HTMLInputElement>()\nconst randomID = Math.random().toString(36).substr(2, 9)\nconst file = ref<File>()\n\nlet buttonSubmit: HTMLButtonElement\n\nonMounted(async () => {\n  profileUser.value = await getUser(props.profileId)\n  // console.log('profileUser: ', profileUser.value)\n  hasActiveMembership.value = profileUser.value.forum_user.is_premium\n  // console.log('hasActiveMembership: ', profileUser.value)\n\n  if (isSameUser) {\n    editIcon = document.querySelector('.avatar-edit__icon')!\n\n    form?.addEventListener('submit', async (e) => {\n      e.preventDefault()\n\n      isUploaded = false\n      isError.value = false\n      isTypeError.value = false\n      isSizeError.value = false\n\n      // show loading icon\n      editIcon.classList.add('avatar-loading__icon')\n\n      const checkIcon = document.querySelector('.avatar-edit__icon .fa-pen')\n      checkIcon?.classList.remove('fa-solid', 'fa-pen')\n      checkIcon?.classList.add('fas', 'fa-spinner', 'fa-spin')\n\n      const fd = new FormData()\n\n      // @ts-ignore\n      fd.append('user', profileId)\n      fd.append('avatar', file.value!)\n\n      const url = '/api/profile/' + userId + '/'\n\n      await fetch(url, {\n        credentials: 'include',\n        method: 'PUT',\n        mode: 'same-origin',\n        headers: {\n          'X-CSRFToken': csrftoken\n        },\n        body: fd\n      }).then(response => {\n        if (response.status === 200) {\n          isUploaded = true\n        } else {\n          response.text().then(text => {\n            if (text.includes('characters')) {\n              isNameError.value = true\n            }\n\n            throw new Error(text)\n          })\n\n          isError.value = true\n        }\n      }).catch(error => {\n        console.log(error)\n      }).finally(async () => {\n        if (isUploaded) {\n          checkIcon?.parentElement?.classList.add('avatar-confirm__icon')\n\n          const uploadButton = document.querySelector('.avatar-edit__icon')!\n          uploadButton.classList.add('c-profile__icon-disabled')\n\n          const currentDateTime = {\n            user: profileId,\n            date_modified: formatDateTime(new Date())\n          }\n\n          await updateDateModified(userId, currentDateTime)\n\n          document.location.reload()\n        } else {\n          // show pen icon\n          checkIcon?.classList.remove('fas', 'fa-spinner', 'fa-spin')\n          checkIcon?.classList.add('fa-solid', 'fa-pen')\n        }\n      })\n    })\n  }\n})\n\nfunction setProfile () {\n  userId = parseInt(props.userId)\n  profileId = props.profileId\n\n  userName = props.userName\n  profileName = props.profileName\n\n  isSameUser = userName === profileName\n}\n\nasync function setAvatarUrl () {\n  avatarUrl = props.avatarUrl\n}\n\n// The hidden input is triggered when clicking on edit icon\n// it calls the browsedFile function that get the input file and\n// click the hidden button to submit the form\nfunction triggerInput () {\n  const i = input\n  i.value?.click()\n}\n\nfunction browsedFile (e: Event) {\n  const input = e.target as HTMLInputElement\n  file.value = input.files![0]\n\n  if (file.value.type === 'image/jpeg' || file.value.type === 'image/png') {\n    if (file.value.size < 4 * 1024 * 1024) {\n      buttonSubmit = <HTMLButtonElement>document.getElementById('button-submit-avatar')\n      buttonSubmit.click()\n    } else {\n      isError.value = true\n      isSizeError.value = true\n    }\n  } else {\n    isError.value = true\n    isTypeError.value = true\n  }\n}\n\nconst submit = useRequest(async () => {\n\n},\n{\n  error () {\n    // scroll to error message when an error occurs\n    if (form.value) {\n      form.value.scrollIntoView({ behavior: 'smooth' })\n    }\n  }\n})\n\nconst { t } = useI18n({\n  messages: {\n    en: {\n      updateProfile: 'Update',\n      updateProfileError: 'Error while updating profile.',\n      removeAndRetry: 'Please remove it and retry.',\n      imageTypeError: 'Image must be in .jpg or .png format.',\n      imageSizeError: 'Image size is too big.',\n      imageNameError: 'File name is too long (100 characters maximum).',\n      cancel: 'Cancel the upload',\n      remove: 'Remove'\n    },\n    fr: {\n      updateProfile: 'Mettre à jour',\n      updateProfileError: 'Erreur lors de la mise à jour du profil.',\n      removeAndRetry: 'Merci de le supprimer puis de réessayer.',\n      imageTypeError: 'Veuillez uploader une image au format .jpg ou .png',\n      imageSizeError: 'Le fichier est trop volumineux.',\n      imageNameError: 'Le nom du fichier est trop long (100 caractères maximum.)',\n      cancel: 'Annuler le téléversement',\n      remove: 'Supprimer'\n    }\n  }\n})\n</script>\n"],"names":["props","__props","userId","userName","profileId","profileName","profileUser","ref","hasActiveMembership","isSameUser","avatarUrl","setProfile","setAvatarUrl","csrftoken","getCookie","isUploaded","isError","isTypeError","isSizeError","isNameError","editIcon","form","input","randomID","file","buttonSubmit","onMounted","getUser","e","checkIcon","fd","url","response","text","error","_a","currentDateTime","formatDateTime","updateDateModified","triggerInput","browsedFile","submit","useRequest","t","useI18n"],"mappings":"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"}