{"version":3,"file":"EditAccountProfile.vue_vue_type_script_setup_true_lang-B95861pa.js","sources":["../../../ui/src/components/account-settings/EditAccountProfile.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onBeforeMount, reactive } from 'vue';\nimport UserProfilePicture from '~/components/UserProfilePicture.vue';\nimport { useUserStore } from '~/stores/user-store';\nimport pyscriptApi from '~/utilities/pyscript-api';\nimport { getErrorMessage } from '~/utilities/error-message';\nimport type { GetProfileResponse } from '~/utilities/pyscript-api-models';\nimport IconTwitter from '~icons/bxl/twitter';\nimport IconGlobe from '~icons/mdi/globe';\nimport IconGithub from '~icons/bxl/github';\nimport IconLinkedin from '~icons/bxl/linkedin';\nimport IconUpload from '~icons/carbon/upload';\nimport IconCheckmark from '~icons/carbon/checkmark-outline';\n\n/**\n * This component is used to edit the user profile. It is used in the\n * user profile page and the settings page. Be cautious when making\n * edits as it will affect both pages.\n */\n\ninterface Props {\n  profile: GetProfileResponse;\n  cancelBtnHandler?: (...args: any) => void;\n}\nconst props = defineProps<Props>();\n\nconst emit = defineEmits<{\n  (e: 'profileUpdated', user: any): void;\n}>();\n\nconst userStore = useUserStore();\nconst descriptionMaxLength = 160;\n\nconst state = reactive({\n  changesSaved: false,\n  isSubmitting: false,\n  uploadedPicture: null as File | null,\n  newAvatar: '',\n  error: '',\n});\n\nconst classes = {\n  label: 'block text-sm leading-5 font-medium mb-1',\n  input:\n    'ui-input dark:text-white dark:bg-transparent mt-1 w-full border-new-gray-200 dark:border-new-gray-500 dark:focus:border-new-gray-200',\n};\n\nconst inputFields = reactive({\n  name: '',\n  bio: '',\n  twitter: '',\n  github: '',\n  linkedin: '',\n  website: '',\n});\n\nonBeforeMount(async () => {\n  inputFields.name = props.profile.name;\n  inputFields.bio = props.profile.bio;\n  inputFields.twitter = props.profile.socials.twitter;\n  inputFields.github = props.profile.socials.github;\n  inputFields.linkedin = props.profile.socials.linkedin;\n  inputFields.website = props.profile.socials.website;\n});\n\n/*\n * * * * * * * * * * * *\n *       METHODS       *\n * * * * * * * * * * * *\n */\n\nfunction resizeImageWithQuality(img: HTMLImageElement, file: File, quality: number) {\n  const canvas = document.createElement('canvas');\n  const ctx = canvas.getContext('2d');\n\n  // Set the canvas dimensions and draw the image onto it\n  const MAX_WIDTH = 200;\n  const MAX_HEIGHT = 200;\n  let width = img.width;\n  let height = img.height;\n\n  if (width > height) {\n    if (width > MAX_WIDTH) {\n      height *= MAX_WIDTH / width;\n      width = MAX_WIDTH;\n    }\n  } else {\n    if (height > MAX_HEIGHT) {\n      width *= MAX_HEIGHT / height;\n      height = MAX_HEIGHT;\n    }\n  }\n\n  canvas.width = width;\n  canvas.height = height;\n  ctx?.drawImage(img, 0, 0, width, height);\n\n  // Convert the canvas content to a Blob object with the specified quality\n  canvas.toBlob(\n    (blob) => {\n      if (!blob) {\n        return;\n      }\n      // Check if the blob size is under the target size\n      if (blob.size <= 150 * 1024) {\n        state.uploadedPicture = new File([blob], file.name, { type: blob.type });\n      } else if (quality > 0.1) {\n        // If the blob size is still too large, try again with a lower quality\n        resizeImageWithQuality(img, file, quality - 0.1);\n      } else {\n        // If quality reaches too low, maybe alert the user or handle the error\n        // eslint-disable-next-line no-alert\n        alert('Unable to resize the image to the target size');\n      }\n    },\n    'image/jpeg',\n    quality,\n  );\n}\n\nfunction onFileChange(e: Event) {\n  if (e.target instanceof HTMLInputElement && e.target.files) {\n    const file = e.target.files[0];\n    // If we don't have a file, it's likely the user cancelled\n    if (!file) {\n      return;\n    }\n    const reader = new FileReader();\n    reader.readAsDataURL(file);\n\n    reader.onload = (event) => {\n      const img = new Image();\n      img.onload = () => {\n        resizeImageWithQuality(img, file, 0.9);\n      };\n\n      if (!event.target) {\n        return;\n      }\n\n      img.src = event.target.result as string;\n\n      state.newAvatar = img.src;\n    };\n  }\n}\n\nfunction isHttpValid(str: string) {\n  try {\n    const newUrl = new URL(str);\n    return newUrl.protocol === 'http:' || newUrl.protocol === 'https:';\n  } catch (err) {\n    return false;\n  }\n}\n\nasync function onSubmit() {\n  state.isSubmitting = true;\n  state.changesSaved = false;\n  state.error = '';\n\n  if (state.uploadedPicture) {\n    if (!state.uploadedPicture.type.startsWith('image/')) {\n      state.error = 'You can only upload images as your profile picture.';\n      state.isSubmitting = false;\n      return;\n    }\n\n    const formData = new FormData();\n    formData.append('image', state.uploadedPicture);\n\n    try {\n      await pyscriptApi.uploadProfilePicture(props.profile.id, formData);\n    } catch (error) {\n      state.error = getErrorMessage(error);\n      state.isSubmitting = false;\n      // If we got an error while updating the profile picture\n      // just stop updating things.\n      return;\n    }\n  }\n\n  if (inputFields.website && !isHttpValid(inputFields.website)) {\n    state.error = 'Website must start with http:// or https://';\n    state.isSubmitting = false;\n    return;\n  }\n\n  try {\n    const updatedProfile = await pyscriptApi.updateProfile(props.profile.id, {\n      name: inputFields.name,\n      bio: inputFields.bio,\n      socials: {\n        twitter: inputFields.twitter,\n        github: inputFields.github,\n        linkedin: inputFields.linkedin,\n        website: inputFields.website,\n      },\n    });\n    emit('profileUpdated', updatedProfile);\n    // Need to fetch user to update menu\n    await userStore.fetchUser();\n    state.changesSaved = true;\n  } catch (error) {\n    state.error = getErrorMessage(error);\n  }\n\n  state.isSubmitting = false;\n  state.uploadedPicture = null;\n}\n</script>\n\n<template>\n  <form class=\"flex flex-col gap-5\" @submit.prevent=\"onSubmit\">\n    <div>\n      <label class=\"inline-block\">\n        <span :class=\"classes.label\">Profile Picture</span>\n\n        <div\n          class=\"relative mt-2 h-20 w-20 cursor-pointer rounded-full border border-new-gray-200 dark:border-new-gray-500 dark:bg-transparent dark:text-white dark:focus:border-new-gray-200\"\n        >\n          <UserProfilePicture :avatar=\"state.newAvatar || profile.avatar\" />\n\n          <div class=\"absolute inset-0 flex items-center justify-center\">\n            <div class=\"rounded-full bg-black bg-opacity-50 p-2\">\n              <IconUpload class=\"h-6 w-6 text-white\" />\n            </div>\n          </div>\n\n          <input\n            hidden\n            type=\"file\"\n            name=\"picture\"\n            accept=\"image/*\"\n            aria-label=\"Your profile picture\"\n            @change=\"onFileChange\"\n          />\n        </div>\n      </label>\n    </div>\n\n    <label>\n      <span :class=\"classes.label\">Name</span>\n      <input\n        v-model=\"inputFields.name\"\n        type=\"text\"\n        name=\"name\"\n        aria-label=\"your name\"\n        placeholder=\"Name\"\n        :class=\"classes.input\"\n      />\n    </label>\n\n    <div>\n      <label>\n        <span :class=\"classes.label\">Bio</span>\n        <textarea\n          v-model=\"inputFields.bio\"\n          type=\"text\"\n          name=\"bio\"\n          placeholder=\"Short bio description\"\n          aria-label=\"Short bio description\"\n          :class=\"classes.input\"\n          class=\"block\"\n          rows=\"5\"\n          :maxlength=\"descriptionMaxLength\"\n        />\n      </label>\n\n      <div class=\"pt-1 text-xs\">\n        Max {{ descriptionMaxLength }} characters.\n        {{ descriptionMaxLength - inputFields.bio.length }} remaining.\n      </div>\n    </div>\n\n    <div>\n      <span :class=\"classes.label\">Social Accounts</span>\n      <ul>\n        <li class=\"flex items-center gap-2\">\n          <IconTwitter aria-hidden=\"true\" />\n          <input\n            v-model=\"inputFields.twitter\"\n            type=\"text\"\n            name=\"twitter\"\n            aria-label=\"twitter\"\n            placeholder=\"username\"\n            :class=\"classes.input\"\n            autocomplete=\"off\"\n          />\n        </li>\n\n        <li class=\"flex items-center gap-2\">\n          <IconGithub aria-hidden=\"true\" />\n          <input\n            v-model=\"inputFields.github\"\n            type=\"text\"\n            name=\"github\"\n            aria-label=\"github\"\n            placeholder=\"username\"\n            :class=\"classes.input\"\n            autocomplete=\"off\"\n          />\n        </li>\n\n        <li class=\"flex items-center gap-2\">\n          <IconLinkedin aria-hidden=\"true\" />\n          <input\n            v-model=\"inputFields.linkedin\"\n            type=\"text\"\n            name=\"linkedin\"\n            aria-label=\"linkedin\"\n            placeholder=\"username\"\n            :class=\"classes.input\"\n            autocomplete=\"off\"\n          />\n        </li>\n\n        <li class=\"flex items-center gap-2\">\n          <IconGlobe aria-hidden=\"true\" />\n          <input\n            v-model=\"inputFields.website\"\n            type=\"text\"\n            name=\"website\"\n            aria-label=\"website\"\n            placeholder=\"https://www.example.com\"\n            :class=\"classes.input\"\n            autocomplete=\"off\"\n          />\n        </li>\n      </ul>\n    </div>\n\n    <p v-if=\"state.error\" class=\"text-sm text-error-600\">\n      {{ state.error }}\n    </p>\n\n    <div class=\"flex items-center gap-3\">\n      <button\n        :disabled=\"state.isSubmitting\"\n        class=\"btn --space-sm --primary px-4 text-sm font-medium\"\n        type=\"submit\"\n      >\n        Update\n      </button>\n\n      <button\n        v-if=\"cancelBtnHandler\"\n        :disabled=\"state.isSubmitting\"\n        class=\"btn --space-sm --white px-4 text-sm font-medium\"\n        type=\"button\"\n        @click=\"cancelBtnHandler\"\n      >\n        Cancel\n      </button>\n\n      <div v-if=\"state.changesSaved\" class=\"flex items-center gap-1\">\n        <IconCheckmark class=\"text-sm\" />\n        <span>Changes saved</span>\n      </div>\n    </div>\n  </form>\n</template>\n\n<style scoped lang=\"postcss\"></style>\n"],"names":["descriptionMaxLength","props","__props","emit","__emit","userStore","useUserStore","state","reactive","classes","inputFields","onBeforeMount","resizeImageWithQuality","img","file","quality","canvas","ctx","MAX_WIDTH","MAX_HEIGHT","width","height","blob","onFileChange","e","reader","event","isHttpValid","str","newUrl","onSubmit","formData","pyscriptApi","error","getErrorMessage","updatedProfile"],"mappings":"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"}