pleroma-fe/src/components/user_settings/user_settings.js

import TabSwitcher from '../tab_switcher/tab_switcher.jsx'
import StyleSwitcher from '../style_switcher/style_switcher.vue'
import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'

const UserSettings = {
  data () {
    return {
      avataruploaderror: null,
      backgrounduploaderror: null,
      banneruploaderror: null,
      newname: this.$store.state.users.currentUser.name,
      newbio: this.$store.state.users.currentUser.description,
      newlocked: this.$store.state.users.currentUser.locked,
      newnorichtext: this.$store.state.users.currentUser.no_rich_text,
      newdefaultScope: this.$store.state.users.currentUser.default_scope,
      followList: null,
      followImportError: false,
      followsImported: false,
      enableFollowsExport: true,
      uploading: [ false, false, false, false ],
      previews: [ null, null, null ],
      deletingAccount: false,
      deleteAccountConfirmPasswordInput: '',
      deleteAccountError: false,
      changePasswordInputs: [ '', '', '' ],
      changedPassword: false,
      changePasswordError: false,
      activeTab: 'profile'
    }
  },
  components: {
    StyleSwitcher,
    TabSwitcher
  },
  computed: {
    user () {
      return this.$store.state.users.currentUser
    },
    pleromaBackend () {
      return this.$store.state.instance.pleromaBackend
    },
    scopeOptionsEnabled () {
      return this.$store.state.instance.scopeOptionsEnabled
    },
    vis () {
      return {
        public: { selected: this.newdefaultScope === 'public' },
        unlisted: { selected: this.newdefaultScope === 'unlisted' },
        private: { selected: this.newdefaultScope === 'private' },
        direct: { selected: this.newdefaultScope === 'direct' }
      }
    }
  },
  methods: {
    updateProfile () {
      const name = this.newname
      const description = this.newbio
      const locked = this.newlocked
      /* eslint-disable camelcase */
      const default_scope = this.newdefaultScope
      const no_rich_text = this.newnorichtext
      this.$store.state.api.backendInteractor.updateProfile({params: {name, description, locked, default_scope, no_rich_text}}).then((user) => {
        if (!user.error) {
          this.$store.commit('addNewUsers', [user])
          this.$store.commit('setCurrentUser', user)
        }
      })
      /* eslint-enable camelcase */
    },
    changeVis (visibility) {
      this.newdefaultScope = visibility
    },
    uploadFile (slot, e) {
      const file = e.target.files[0]
      if (!file) { return }
      var limit = 0
      var error = () => {}
      switch (slot) {
        case 0:
          limit = this.$store.state.instance.avatarlimit
          error = (error) => { this.avataruploaderror = error }
          break
        case 1:
          limit = this.$store.state.instance.bannerlimit
          error = (error) => { this.banneruploaderror = error }
          break
        case 2:
          limit = this.$store.state.instance.backgroundlimit
          error = (error) => { this.backgrounduploaderror = error }
      }
      console.log(this.$store)
      console.log(file.size + ' ' + slot + ' ' + limit)
      if (file.size > limit) {
        const filesize = fileSizeFormatService.fileSizeFormat(file.size)
        const allowedsize = fileSizeFormatService.fileSizeFormat(limit)
        error(this.$t('post_status.upload_error_file_too_big', {filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit}))
        return
      }
      // eslint-disable-next-line no-undef
      const reader = new FileReader()
      reader.onload = ({target}) => {
        const img = target.result
        this.previews[slot] = img
        this.$forceUpdate() // just changing the array with the index doesn't update the view
      }
      reader.readAsDataURL(file)
    },
    submitAvatar () {
      if (!this.previews[0]) { return }

      let img = this.previews[0]
      // eslint-disable-next-line no-undef
      let imginfo = new Image()
      let cropX, cropY, cropW, cropH
      imginfo.src = img
      if (imginfo.height > imginfo.width) {
        cropX = 0
        cropW = imginfo.width
        cropY = Math.floor((imginfo.height - imginfo.width) / 2)
        cropH = imginfo.width
      } else {
        cropY = 0
        cropH = imginfo.height
        cropX = Math.floor((imginfo.width - imginfo.height) / 2)
        cropW = imginfo.height
      }
      this.uploading[0] = true
      this.$store.state.api.backendInteractor.updateAvatar({params: {img, cropX, cropY, cropW, cropH}}).then((user) => {
        if (!user.error) {
          this.$store.commit('addNewUsers', [user])
          this.$store.commit('setCurrentUser', user)
          this.previews[0] = null
        }
        this.uploading[0] = false
      })
    },
    clearUploadError (slot) {
      switch (slot) {
        case 0:
          this.avataruploaderror = null
          break
        case 1:
          this.banneruploaderror = null
          break
        case 2:
          this.backgrounduploaderror = null
          break
      }
    },
    submitBanner () {
      if (!this.previews[1]) { return }

      let banner = this.previews[1]
      // eslint-disable-next-line no-undef
      let imginfo = new Image()
      /* eslint-disable camelcase */
      let offset_top, offset_left, width, height
      imginfo.src = banner
      width = imginfo.width
      height = imginfo.height
      offset_top = 0
      offset_left = 0
      this.uploading[1] = true
      this.$store.state.api.backendInteractor.updateBanner({params: {banner, offset_top, offset_left, width, height}}).then((data) => {
        if (!data.error) {
          let clone = JSON.parse(JSON.stringify(this.$store.state.users.currentUser))
          clone.cover_photo = data.url
          this.$store.commit('addNewUsers', [clone])
          this.$store.commit('setCurrentUser', clone)
          this.previews[1] = null
        }
        this.uploading[1] = false
      })
      /* eslint-enable camelcase */
    },
    submitBg () {
      if (!this.previews[2]) { return }
      let img = this.previews[2]
      // eslint-disable-next-line no-undef
      let imginfo = new Image()
      let cropX, cropY, cropW, cropH
      imginfo.src = img
      cropX = 0
      cropY = 0
      cropW = imginfo.width
      cropH = imginfo.width
      this.uploading[2] = true
      this.$store.state.api.backendInteractor.updateBg({params: {img, cropX, cropY, cropW, cropH}}).then((data) => {
        if (!data.error) {
          let clone = JSON.parse(JSON.stringify(this.$store.state.users.currentUser))
          clone.background_image = data.url
          this.$store.commit('addNewUsers', [clone])
          this.$store.commit('setCurrentUser', clone)
          this.previews[2] = null
        }
        this.uploading[2] = false
      })
    },
    importFollows () {
      this.uploading[3] = true
      const followList = this.followList
      this.$store.state.api.backendInteractor.followImport({params: followList})
        .then((status) => {
          if (status) {
            this.followsImported = true
          } else {
            this.followImportError = true
          }
          this.uploading[3] = false
        })
    },
    /* This function takes an Array of Users
     * and outputs a file with all the addresses for the user to download
     */
    exportPeople (users, filename) {
      // Get all the friends addresses
      var UserAddresses = users.map(function (user) {
        // check is it's a local user
        if (user && user.is_local) {
          // append the instance address
          // eslint-disable-next-line no-undef
          user.screen_name += '@' + location.hostname
        }
        return user.screen_name
      }).join('\n')
      // Make the user download the file
      var fileToDownload = document.createElement('a')
      fileToDownload.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(UserAddresses))
      fileToDownload.setAttribute('download', filename)
      fileToDownload.style.display = 'none'
      document.body.appendChild(fileToDownload)
      fileToDownload.click()
      document.body.removeChild(fileToDownload)
    },
    exportFollows () {
      this.enableFollowsExport = false
      this.$store.state.api.backendInteractor
        .fetchFriends({id: this.$store.state.users.currentUser.id})
        .then((friendList) => {
          this.exportPeople(friendList, 'friends.csv')
        })
    },
    followListChange () {
      // eslint-disable-next-line no-undef
      let formData = new FormData()
      formData.append('list', this.$refs.followlist.files[0])
      this.followList = formData
    },
    dismissImported () {
      this.followsImported = false
      this.followImportError = false
    },
    confirmDelete () {
      this.deletingAccount = true
    },
    deleteAccount () {
      this.$store.state.api.backendInteractor.deleteAccount({password: this.deleteAccountConfirmPasswordInput})
        .then((res) => {
          if (res.status === 'success') {
            this.$store.dispatch('logout')
            this.$router.push('/main/all')
          } else {
            this.deleteAccountError = res.error
          }
        })
    },
    changePassword () {
      const params = {
        password: this.changePasswordInputs[0],
        newPassword: this.changePasswordInputs[1],
        newPasswordConfirmation: this.changePasswordInputs[2]
      }
      this.$store.state.api.backendInteractor.changePassword(params)
        .then((res) => {
          if (res.status === 'success') {
            this.changedPassword = true
            this.changePasswordError = false
            this.logout()
          } else {
            this.changedPassword = false
            this.changePasswordError = res.error
          }
        })
    },
    activateTab (tabName) {
      this.activeTab = tabName
    },
    logout () {
      this.$store.dispatch('logout')
      this.$router.replace('/')
    }
  }
}

export default UserSettings