logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://anongit.hacktivis.me/git/pleroma-fe.git/

profile_tab.js (9535B)

    

  1. import unescape from 'lodash/unescape'
  2. import merge from 'lodash/merge'
  3. import ImageCropper from 'src/components/image_cropper/image_cropper.vue'
  4. import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
  5. import fileSizeFormatService from 'src/components/../services/file_size_format/file_size_format.js'
  6. import ProgressButton from 'src/components/progress_button/progress_button.vue'
  7. import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
  8. import suggestor from 'src/components/emoji_input/suggestor.js'
  9. import Autosuggest from 'src/components/autosuggest/autosuggest.vue'
  10. import Checkbox from 'src/components/checkbox/checkbox.vue'
  11. import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
  12. import Select from 'src/components/select/select.vue'
  13. import BooleanSetting from '../helpers/boolean_setting.vue'
  14. import SharedComputedObject from '../helpers/shared_computed_object.js'
  15. import localeService from 'src/services/locale/locale.service.js'
  16. import { propsToNative } from 'src/services/attributes_helper/attributes_helper.service.js'
  18. import { library } from '@fortawesome/fontawesome-svg-core'
  19. import {
  20.   faTimes,
  21.   faPlus,
  22.   faCircleNotch
  23. } from '@fortawesome/free-solid-svg-icons'
  24. import { useInterfaceStore } from 'src/stores/interface'
  26. library.add(
  27.   faTimes,
  28.   faPlus,
  29.   faCircleNotch
  30. )
  32. const ProfileTab = {
  33.   data () {
  34.     return {
  35.       newName: this.$store.state.users.currentUser.name_unescaped,
  36.       newBio: unescape(this.$store.state.users.currentUser.description),
  37.       newLocked: this.$store.state.users.currentUser.locked,
  38.       newBirthday: this.$store.state.users.currentUser.birthday,
  39.       showBirthday: this.$store.state.users.currentUser.show_birthday,
  40.       newFields: this.$store.state.users.currentUser.fields.map(field => ({ name: field.name, value: field.value })),
  41.       showRole: this.$store.state.users.currentUser.show_role,
  42.       role: this.$store.state.users.currentUser.role,
  43.       bot: this.$store.state.users.currentUser.bot,
  44.       actorType: this.$store.state.users.currentUser.actor_type,
  45.       pickAvatarBtnVisible: true,
  46.       bannerUploading: false,
  47.       backgroundUploading: false,
  48.       banner: null,
  49.       bannerPreview: null,
  50.       background: null,
  51.       backgroundPreview: null,
  52.       emailLanguage: this.$store.state.users.currentUser.language || ['']
  53.     }
  54.   },
  55.   components: {
  56.     ScopeSelector,
  57.     ImageCropper,
  58.     EmojiInput,
  59.     Autosuggest,
  60.     ProgressButton,
  61.     Checkbox,
  62.     BooleanSetting,
  63.     InterfaceLanguageSwitcher,
  64.     Select
  65.   },
  66.   computed: {
  67.     user () {
  68.       return this.$store.state.users.currentUser
  69.     },
  70.     ...SharedComputedObject(),
  71.     emojiUserSuggestor () {
  72.       return suggestor({
  73.         emoji: [
  74.           ...this.$store.getters.standardEmojiList,
  75.           ...this.$store.state.instance.customEmoji
  76.         ],
  77.         store: this.$store
  78.       })
  79.     },
  80.     emojiSuggestor () {
  81.       return suggestor({
  82.         emoji: [
  83.           ...this.$store.getters.standardEmojiList,
  84.           ...this.$store.state.instance.customEmoji
  85.         ]
  86.       })
  87.     },
  88.     userSuggestor () {
  89.       return suggestor({ store: this.$store })
  90.     },
  91.     fieldsLimits () {
  92.       return this.$store.state.instance.fieldsLimits
  93.     },
  94.     maxFields () {
  95.       return this.fieldsLimits ? this.fieldsLimits.maxFields : 0
  96.     },
  97.     defaultAvatar () {
  98.       return this.$store.state.instance.server + this.$store.state.instance.defaultAvatar
  99.     },
  100.     defaultBanner () {
  101.       return this.$store.state.instance.server + this.$store.state.instance.defaultBanner
  102.     },
  103.     isDefaultAvatar () {
  104.       const baseAvatar = this.$store.state.instance.defaultAvatar
  105.       return !(this.$store.state.users.currentUser.profile_image_url) ||
  106.       this.$store.state.users.currentUser.profile_image_url.includes(baseAvatar)
  107.     },
  108.     isDefaultBanner () {
  109.       const baseBanner = this.$store.state.instance.defaultBanner
  110.       return !(this.$store.state.users.currentUser.cover_photo) ||
  111.       this.$store.state.users.currentUser.cover_photo.includes(baseBanner)
  112.     },
  113.     isDefaultBackground () {
  114.       return !(this.$store.state.users.currentUser.background_image)
  115.     },
  116.     avatarImgSrc () {
  117.       const src = this.$store.state.users.currentUser.profile_image_url_original
  118.       return (!src) ? this.defaultAvatar : src
  119.     },
  120.     bannerImgSrc () {
  121.       const src = this.$store.state.users.currentUser.cover_photo
  122.       return (!src) ? this.defaultBanner : src
  123.     },
  124.     groupActorAvailable () {
  125.       return this.$store.state.instance.groupActorAvailable
  126.     },
  127.     availableActorTypes () {
  128.       return this.groupActorAvailable ? ['Person', 'Service', 'Group'] : ['Person', 'Service']
  129.     }
  130.   },
  131.   methods: {
  132.     updateProfile () {
  133.       const params = {
  134.         note: this.newBio,
  135.         locked: this.newLocked,
  137.         // Backend notation.
  138.         display_name: this.newName,
  139.         fields_attributes: this.newFields.filter(el => el != null),
  140.         actor_type: this.actorType,
  141.         show_role: this.showRole,
  142.         birthday: this.newBirthday || '',
  143.         show_birthday: this.showBirthday
  144.       }
  146.       if (this.emailLanguage) {
  147.         params.language = localeService.internalToBackendLocaleMulti(this.emailLanguage)
  148.       }
  150.       this.$store.state.api.backendInteractor
  151.         .updateProfile({ params })
  152.         .then((user) => {
  153.           this.newFields.splice(user.fields.length)
  154.           merge(this.newFields, user.fields)
  155.           this.$store.commit('addNewUsers', [user])
  156.           this.$store.commit('setCurrentUser', user)
  157.         })
  158.     },
  159.     changeVis (visibility) {
  160.       this.newDefaultScope = visibility
  161.     },
  162.     addField () {
  163.       if (this.newFields.length < this.maxFields) {
  164.         this.newFields.push({ name: '', value: '' })
  165.         return true
  166.       }
  167.       return false
  168.     },
  169.     deleteField (index) {
  170.       this.newFields.splice(index, 1)
  171.     },
  172.     uploadFile (slot, e) {
  173.       const file = e.target.files[0]
  174.       if (!file) { return }
  175.       if (file.size > this.$store.state.instance[slot + 'limit']) {
  176.         const filesize = fileSizeFormatService.fileSizeFormat(file.size)
  177.         const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit'])
  178.         useInterfaceStore().pushGlobalNotice({
  179.           messageKey: 'upload.error.message',
  180.           messageArgs: [
  181.             this.$t('upload.error.file_too_big', {
  182.               filesize: filesize.num,
  183.               filesizeunit: filesize.unit,
  184.               allowedsize: allowedsize.num,
  185.               allowedsizeunit: allowedsize.unit
  186.             })
  187.           ],
  188.           level: 'error'
  189.         })
  190.         return
  191.       }
  193.       const reader = new FileReader()
  194.       reader.onload = ({ target }) => {
  195.         const img = target.result
  196.         this[slot + 'Preview'] = img
  197.         this[slot] = file
  198.       }
  199.       reader.readAsDataURL(file)
  200.     },
  201.     resetAvatar () {
  202.       const confirmed = window.confirm(this.$t('settings.reset_avatar_confirm'))
  203.       if (confirmed) {
  204.         this.submitAvatar(undefined, '')
  205.       }
  206.     },
  207.     resetBanner () {
  208.       const confirmed = window.confirm(this.$t('settings.reset_banner_confirm'))
  209.       if (confirmed) {
  210.         this.submitBanner('')
  211.       }
  212.     },
  213.     resetBackground () {
  214.       const confirmed = window.confirm(this.$t('settings.reset_background_confirm'))
  215.       if (confirmed) {
  216.         this.submitBackground('')
  217.       }
  218.     },
  219.     submitAvatar (cropper, file) {
  220.       const that = this
  221.       return new Promise((resolve, reject) => {
  222.         function updateAvatar (avatar, avatarName) {
  223.           that.$store.state.api.backendInteractor.updateProfileImages({ avatar, avatarName })
  224.             .then((user) => {
  225.               that.$store.commit('addNewUsers', [user])
  226.               that.$store.commit('setCurrentUser', user)
  227.               resolve()
  228.             })
  229.             .catch((error) => {
  230.               that.displayUploadError(error)
  231.               reject(error)
  232.             })
  233.         }
  235.         if (cropper) {
  236.           cropper.getCroppedCanvas().toBlob((data) => updateAvatar(data, file.name), file.type)
  237.         } else {
  238.           updateAvatar(file, file.name)
  239.         }
  240.       })
  241.     },
  242.     submitBanner (banner) {
  243.       if (!this.bannerPreview && banner !== '') { return }
  245.       this.bannerUploading = true
  246.       this.$store.state.api.backendInteractor.updateProfileImages({ banner })
  247.         .then((user) => {
  248.           this.$store.commit('addNewUsers', [user])
  249.           this.$store.commit('setCurrentUser', user)
  250.           this.bannerPreview = null
  251.         })
  252.         .catch(this.displayUploadError)
  253.         .finally(() => { this.bannerUploading = false })
  254.     },
  255.     submitBackground (background) {
  256.       if (!this.backgroundPreview && background !== '') { return }
  258.       this.backgroundUploading = true
  259.       this.$store.state.api.backendInteractor.updateProfileImages({ background })
  260.         .then((data) => {
  261.           this.$store.commit('addNewUsers', [data])
  262.           this.$store.commit('setCurrentUser', data)
  263.           this.backgroundPreview = null
  264.         })
  265.         .catch(this.displayUploadError)
  266.         .finally(() => { this.backgroundUploading = false })
  267.     },
  268.     displayUploadError (error) {
  269.       useInterfaceStore().pushGlobalNotice({
  270.         messageKey: 'upload.error.message',
  271.         messageArgs: [error.message],
  272.         level: 'error'
  273.       })
  274.     },
  275.     propsToNative (props) {
  276.       return propsToNative(props)
  277.     }
  278.   }
  279. }
  281. export default ProfileTab