Merge branch 'fix/fix-error-handling-in-profile-tab' into 'develop'

fix #1020 fix error handling in profile tab Closes #1020 See merge request pleroma/pleroma-fe!1299
2020-12-16 16:51:03 +00:00 · 2020-12-16 16:51:03 +00:00 · 466fc84e82
commit 466fc84e82
parent 34c65e3bcf fc4a17aa8c
8 changed files with 52 additions and 79 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -18,6 +18,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Fixed custom emoji not working in profile field names
 - Fixed pinned statuses not appearing in user profiles
 - Fixed some elements not being keyboard navigation friendly
+- Fixed error handling when updating various profile images
 - Fixed your latest chat messages disappearing when closing chat view and opening it again during the same session
 - Fixed custom emoji not showing in poll options before voting

--- a/src/components/global_notice_list/global_notice_list.vue
+++ b/src/components/global_notice_list/global_notice_list.vue
@ -9,11 +9,15 @@
      <div class="notice-message">
        {{ $t(notice.messageKey, notice.messageArgs) }}
      </div>
-      <FAIcon
-        class="fa-scale-110 fa-old-padding"
-        icon="times"
+      <button
+        class="button-unstyled close-notice"
        @click="closeNotice(notice)"
-      />
+      >
+        <FAIcon
+          class="fa-scale-110 fa-old-padding"
+          icon="times"
+        />
+      </button>
    </div>
  </div>
 </template>
@ -54,7 +58,7 @@
  .global-error {
    background-color: var(--alertPopupError, $fallback--cRed);
    color: var(--alertPopupErrorText, $fallback--text);
-    i {
+    .svg-inline--fa {
      color: var(--alertPopupErrorText, $fallback--text);
    }
  }
@ -62,7 +66,7 @@
  .global-warning {
    background-color: var(--alertPopupWarning, $fallback--cOrange);
    color: var(--alertPopupWarningText, $fallback--text);
-    i {
+    .svg-inline--fa {
      color: var(--alertPopupWarningText, $fallback--text);
    }
  }
@ -70,9 +74,16 @@
  .global-info {
    background-color: var(--alertPopupNeutral, $fallback--fg);
    color: var(--alertPopupNeutralText, $fallback--text);
-    i {
+    .svg-inline--fa {
      color: var(--alertPopupNeutralText, $fallback--text);
    }
  }
+
+  .close-notice {
+    padding-right: 0.2em;
+    .svg-inline--fa:hover {
+      opacity: 0.6;
+    }
+  }
 }
 </style>
--- a/src/components/image_cropper/image_cropper.js
+++ b/src/components/image_cropper/image_cropper.js
@ -2,12 +2,10 @@ import Cropper from 'cropperjs'
 import 'cropperjs/dist/cropper.css'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faTimes,
  faCircleNotch
 } from '@fortawesome/free-solid-svg-icons'

 library.add(
-  faTimes,
  faCircleNotch
 )

@ -53,8 +51,7 @@ const ImageCropper = {
      cropper: undefined,
      dataUrl: undefined,
      filename: undefined,
-      submitting: false,
-      submitError: null
+      submitting: false
    }
  },
  computed: {
@ -66,9 +63,6 @@ const ImageCropper = {
    },
    cancelText () {
      return this.cancelButtonLabel || this.$t('image_cropper.cancel')
-    },
-    submitErrorMsg () {
-      return this.submitError && this.submitError instanceof Error ? this.submitError.toString() : this.submitError
    }
  },
  methods: {
@ -82,12 +76,8 @@ const ImageCropper = {
    },
    submit (cropping = true) {
      this.submitting = true
-      this.avatarUploadError = null
      this.submitHandler(cropping && this.cropper, this.file)
        .then(() => this.destroy())
-        .catch((err) => {
-          this.submitError = err
-        })
        .finally(() => {
          this.submitting = false
        })
@ -113,9 +103,6 @@ const ImageCropper = {
        reader.readAsDataURL(this.file)
        this.$emit('changed', this.file, reader)
      }
-    },
-    clearError () {
-      this.submitError = null
    }
  },
  mounted () {
--- a/src/components/image_cropper/image_cropper.vue
+++ b/src/components/image_cropper/image_cropper.vue
@ -37,17 +37,6 @@
          icon="circle-notch"
        />
      </div>
-      <div
-        v-if="submitError"
-        class="alert error"
-      >
-        {{ submitErrorMsg }}
-        <FAIcon
-          class="fa-scale-110 fa-old-padding"
-          icon="times"
-          @click="clearError"
-        />
-      </div>
    </div>
    <input
      ref="input"
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@ -45,9 +45,7 @@ const ProfileTab = {
      banner: null,
      bannerPreview: null,
      background: null,
-      backgroundPreview: null,
-      bannerUploadError: null,
-      backgroundUploadError: null
+      backgroundPreview: null
    }
  },
  components: {
@ -162,18 +160,18 @@ const ProfileTab = {
      if (file.size > this.$store.state.instance[slot + 'limit']) {
        const filesize = fileSizeFormatService.fileSizeFormat(file.size)
        const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit'])
-        this[slot + 'UploadError'] = [
-          this.$t('upload.error.base'),
-          this.$t(
-            'upload.error.file_too_big',
-            {
+        this.$store.dispatch('pushGlobalNotice', {
+          messageKey: 'upload.error.message',
+          messageArgs: [
+            this.$t('upload.error.file_too_big', {
              filesize: filesize.num,
              filesizeunit: filesize.unit,
              allowedsize: allowedsize.num,
              allowedsizeunit: allowedsize.unit
-            }
-          )
-        ].join(' ')
+            })
+          ],
+          level: 'error'
+        })
        return
      }
      // eslint-disable-next-line no-undef
@ -213,8 +211,9 @@ const ProfileTab = {
              that.$store.commit('setCurrentUser', user)
              resolve()
            })
-            .catch((err) => {
-              reject(new Error(that.$t('upload.error.base') + ' ' + err.message))
+            .catch((error) => {
+              that.displayUploadError(error)
+              reject(error)
            })
        }

@ -235,24 +234,27 @@ const ProfileTab = {
          this.$store.commit('setCurrentUser', user)
          this.bannerPreview = null
        })
-        .catch((err) => {
-          this.bannerUploadError = this.$t('upload.error.base') + ' ' + err.message
-        })
-        .then(() => { this.bannerUploading = false })
+        .catch(this.displayUploadError)
+        .finally(() => { this.bannerUploading = false })
    },
    submitBackground (background) {
      if (!this.backgroundPreview && background !== '') { return }

      this.backgroundUploading = true
-      this.$store.state.api.backendInteractor.updateProfileImages({ background }).then((data) => {
-        if (!data.error) {
+      this.$store.state.api.backendInteractor.updateProfileImages({ background })
+        .then((data) => {
          this.$store.commit('addNewUsers', [data])
          this.$store.commit('setCurrentUser', data)
          this.backgroundPreview = null
-        } else {
-          this.backgroundUploadError = this.$t('upload.error.base') + data.error
-        }
-        this.backgroundUploading = false
+        })
+        .catch(this.displayUploadError)
+        .finally(() => { this.backgroundUploading = false })
+    },
+    displayUploadError (error) {
+      this.$store.dispatch('pushGlobalNotice', {
+        messageKey: 'upload.error.message',
+        messageArgs: [error.message],
+        level: 'error'
      })
    }
  }
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@ -229,17 +229,6 @@
      >
        {{ $t('general.submit') }}
      </button>
-      <div
-        v-if="bannerUploadError"
-        class="alert error"
-      >
-        Error: {{ bannerUploadError }}
-        <FAIcon
-          class="fa-scale-110 fa-old-padding"
-          icon="times"
-          @click="clearUploadError('banner')"
-        />
-      </div>
    </div>
    <div class="setting-item">
      <h2>{{ $t('settings.profile_background') }}</h2>
@ -279,18 +268,6 @@
      >
        {{ $t('general.submit') }}
      </button>
-      <div
-        v-if="backgroundUploadError"
-        class="alert error"
-      >
-        Error: {{ backgroundUploadError }}
-        <FAIcon
-          size="lg"
-          class="fa-scale-110 fa-old-padding"
-          icon="times"
-          @click="clearUploadError('background')"
-        />
-      </div>
    </div>
  </div>
 </template>
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@ -759,6 +759,7 @@
  "upload": {
    "error": {
      "base": "Upload failed.",
+      "message": "Upload failed: {0}",
      "file_too_big": "File too big [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]",
      "default": "Try again later"
    },
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@ -162,7 +162,12 @@ const updateProfileImages = ({ credentials, avatar = null, banner = null, backgr
    body: form
  })
    .then((data) => data.json())
-    .then((data) => parseUser(data))
+    .then((data) => {
+      if (data.error) {
+        throw new Error(data.error)
+      }
+      return parseUser(data)
+    })
 }

 const updateProfile = ({ credentials, params }) => {