getting and setting user background via MastoAPI

src/components/user_settings/user_settings.js

@@ -46,7 +46,9 @@ const UserSettings = {
       pickAvatarBtnVisible: true,
       bannerUploading: false,
       backgroundUploading: false,
+      banner: null,
       bannerPreview: null,
+      background: null,
       backgroundPreview: null,
       bannerUploadError: null,
       backgroundUploadError: null,
@@ -198,22 +200,12 @@ const UserSettings = {
     },
     submitBg () {
       if (!this.backgroundPreview) { return }
-      let img = this.backgroundPreview
-      // 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
+      let background = this.background
       this.backgroundUploading = true
-      this.$store.state.api.backendInteractor.updateBg({params: {img, cropX, cropY, cropW, cropH}}).then((data) => {
+      this.$store.state.api.backendInteractor.updateBg({ background }).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.$store.commit('addNewUsers', [data])
+          this.$store.commit('setCurrentUser', data)
           this.backgroundPreview = null
         } else {
           this.backgroundUploadError = this.$t('upload.error.base') + data.error

src/services/api/api.service.js

@@ -1,5 +1,4 @@
 /* eslint-env browser */
-const BG_UPDATE_URL = '/api/qvitter/update_background_image.json'
 const EXTERNAL_PROFILE_URL = '/api/externalprofile/show.json'
 const QVITTER_USER_NOTIFICATIONS_READ_URL = '/api/qvitter/statuses/notifications/read.json'
 const BLOCKS_IMPORT_URL = '/api/pleroma/blocks_import'
@@ -25,7 +24,6 @@ const MFA_DISABLE_OTP_URL = '/api/pleroma/profile/mfa/totp'
 
 const MASTODON_LOGIN_URL = '/api/v1/accounts/verify_credentials'
 const MASTODON_REGISTRATION_URL = '/api/v1/accounts'
-const GET_BACKGROUND_HACK = '/api/account/verify_credentials.json'
 const MASTODON_USER_FAVORITES_TIMELINE_URL = '/api/v1/favourites'
 const MASTODON_USER_NOTIFICATIONS_URL = '/api/v1/notifications'
 const MASTODON_FAVORITE_URL = id => `/api/v1/statuses/${id}/favourite`
@@ -133,22 +131,17 @@ const updateAvatar = ({credentials, avatar}) => {
   .then((data) => parseUser(data))
 }
 
-const updateBg = ({credentials, params}) => {
-  let url = BG_UPDATE_URL
-
+const updateBg = ({ credentials, background }) => {
   const form = new FormData()
-
-  each(params, (value, key) => {
-    if (value) {
-      form.append(key, value)
-    }
-  })
-
-  return fetch(url, {
+  console.log(background)
+  form.append('pleroma_background_image', background)
+  return fetch(MASTODON_PROFILE_UPDATE_URL, {
     headers: authHeaders(credentials),
-    method: 'POST',
+    method: 'PATCH',
     body: form
-  }).then((data) => data.json())
+  })
+    .then((data) => data.json())
+    .then((data) => parseUser(data))
 }
 
 const updateBanner = ({credentials, banner}) => {
@@ -544,26 +537,6 @@ const verifyCredentials = (user) => {
       }
     })
     .then((data) => data.error ? data : parseUser(data))
-    .then((mastoUser) => {
-      // REMOVE WHEN BE SUPPORTS background_image
-      return fetch(GET_BACKGROUND_HACK, {
-        method: 'POST',
-        headers: authHeaders(user)
-      })
-        .then((response) => {
-          if (response.ok) {
-            return response.json()
-          } else {
-            return {}
-          }
-        })
-      /* eslint-disable camelcase */
-        .then(({ background_image }) => ({
-          ...mastoUser,
-          background_image
-        }))
-      /* eslint-enable camelcase */
-    })
 }
 
 const favorite = ({ id, credentials }) => {

src/services/backend_interactor_service/backend_interactor_service.js

@@ -105,7 +105,7 @@ const backendInteractorService = (credentials) => {
   const getCaptcha = () => apiService.getCaptcha()
   const register = (params) => apiService.register({ credentials, params })
   const updateAvatar = ({avatar}) => apiService.updateAvatar({credentials, avatar})
-  const updateBg = ({params}) => apiService.updateBg({credentials, params})
+  const updateBg = ({background}) => apiService.updateBg({credentials, background})
   const updateBanner = ({banner}) => apiService.updateBanner({credentials, banner})
   const updateProfile = ({params}) => apiService.updateProfile({credentials, params})
 

src/services/entity_normalizer/entity_normalizer.service.js

@@ -60,6 +60,9 @@ export const parseUser = (data) => {
     if (data.pleroma) {
       const relationship = data.pleroma.relationship
 
+      output.background_image = data.pleroma.background_image
+      output.token = data.pleroma.chat_token
+
       if (relationship) {
         output.follows_you = relationship.followed_by
         output.following = relationship.following