From 7b99d98c553f40ec4d633d0d4fdf65f275c80e77 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Tue, 24 Nov 2020 12:32:42 +0200
Subject: Replace all use of <a> + href='#' with proper buttons

---
 src/components/image_cropper/image_cropper.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/components/image_cropper/image_cropper.vue')

diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue
index 75def612..448461b4 100644
--- a/src/components/image_cropper/image_cropper.vue
+++ b/src/components/image_cropper/image_cropper.vue
@@ -11,21 +11,21 @@
       </div>
       <div class="image-cropper-buttons-wrapper">
         <button
-          class="btn"
+          class="button-default btn"
           type="button"
           :disabled="submitting"
           @click="submit()"
           v-text="saveText"
         />
         <button
-          class="btn"
+          class="button-default btn"
           type="button"
           :disabled="submitting"
           @click="destroy"
           v-text="cancelText"
         />
         <button
-          class="btn"
+          class="button-default btn"
           type="button"
           :disabled="submitting"
           @click="submit(false)"
-- 
cgit v1.2.3-70-g09d2


From 4dde9c4d529fb94b23b394aaa91e6a7cafd75777 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Wed, 2 Dec 2020 12:46:31 +0200
Subject: refactor error handling in profile tab

---
 .../global_notice_list/global_notice_list.vue      | 12 ++++--
 src/components/image_cropper/image_cropper.js      | 15 +------
 src/components/image_cropper/image_cropper.vue     | 11 -----
 src/components/settings_modal/tabs/profile_tab.js  | 48 +++++++++++-----------
 src/components/settings_modal/tabs/profile_tab.vue | 23 -----------
 src/i18n/en.json                                   |  1 +
 src/services/api/api.service.js                    |  7 +++-
 7 files changed, 41 insertions(+), 76 deletions(-)

(limited to 'src/components/image_cropper/image_cropper.vue')

diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue
index 8a33b9eb..0f5ac86f 100644
--- 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"
         @click="closeNotice(notice)"
-      />
+      >
+        <FAIcon
+          class="fa-scale-110 fa-old-padding"
+          icon="times"
+        />
+      </button>
     </div>
   </div>
 </template>
diff --git a/src/components/image_cropper/image_cropper.js b/src/components/image_cropper/image_cropper.js
index 59e4d07e..e8d5ec6d 100644
--- 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 () {
diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue
index 75def612..9524ccbc 100644
--- 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"
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index a4fed629..9709424c 100644
--- 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'
       })
     }
   }
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index d62bc392..7271155e 100644
--- 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>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index ef23efd6..5798ceb2 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -758,6 +758,7 @@
   "upload": {
     "error": {
       "base": "Upload failed.",
+      "message": "Upload failed: {0}",
       "file_too_big": "File too big [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]",
       "default": "Try again later"
     },
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 8da933c4..f4483149 100644
--- 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 }) => {
-- 
cgit v1.2.3-70-g09d2

