refactor error handling in profile tab

This commit is contained in:
Shpuld Shpuldson 2020-12-02 12:46:31 +02:00
parent 397622078f
commit 4dde9c4d52
7 changed files with 41 additions and 76 deletions

View file

@ -9,11 +9,15 @@
<div class="notice-message"> <div class="notice-message">
{{ $t(notice.messageKey, notice.messageArgs) }} {{ $t(notice.messageKey, notice.messageArgs) }}
</div> </div>
<FAIcon <button
class="fa-scale-110 fa-old-padding" class="button-unstyled"
icon="times"
@click="closeNotice(notice)" @click="closeNotice(notice)"
/> >
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="times"
/>
</button>
</div> </div>
</div> </div>
</template> </template>

View file

@ -2,12 +2,10 @@ import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css' import 'cropperjs/dist/cropper.css'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { import {
faTimes,
faCircleNotch faCircleNotch
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
library.add( library.add(
faTimes,
faCircleNotch faCircleNotch
) )
@ -53,8 +51,7 @@ const ImageCropper = {
cropper: undefined, cropper: undefined,
dataUrl: undefined, dataUrl: undefined,
filename: undefined, filename: undefined,
submitting: false, submitting: false
submitError: null
} }
}, },
computed: { computed: {
@ -66,9 +63,6 @@ const ImageCropper = {
}, },
cancelText () { cancelText () {
return this.cancelButtonLabel || this.$t('image_cropper.cancel') return this.cancelButtonLabel || this.$t('image_cropper.cancel')
},
submitErrorMsg () {
return this.submitError && this.submitError instanceof Error ? this.submitError.toString() : this.submitError
} }
}, },
methods: { methods: {
@ -82,12 +76,8 @@ const ImageCropper = {
}, },
submit (cropping = true) { submit (cropping = true) {
this.submitting = true this.submitting = true
this.avatarUploadError = null
this.submitHandler(cropping && this.cropper, this.file) this.submitHandler(cropping && this.cropper, this.file)
.then(() => this.destroy()) .then(() => this.destroy())
.catch((err) => {
this.submitError = err
})
.finally(() => { .finally(() => {
this.submitting = false this.submitting = false
}) })
@ -113,9 +103,6 @@ const ImageCropper = {
reader.readAsDataURL(this.file) reader.readAsDataURL(this.file)
this.$emit('changed', this.file, reader) this.$emit('changed', this.file, reader)
} }
},
clearError () {
this.submitError = null
} }
}, },
mounted () { mounted () {

View file

@ -37,17 +37,6 @@
icon="circle-notch" icon="circle-notch"
/> />
</div> </div>
<div
v-if="submitError"
class="alert error"
>
{{ submitErrorMsg }}
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="times"
@click="clearError"
/>
</div>
</div> </div>
<input <input
ref="input" ref="input"

View file

@ -45,9 +45,7 @@ const ProfileTab = {
banner: null, banner: null,
bannerPreview: null, bannerPreview: null,
background: null, background: null,
backgroundPreview: null, backgroundPreview: null
bannerUploadError: null,
backgroundUploadError: null
} }
}, },
components: { components: {
@ -162,18 +160,18 @@ const ProfileTab = {
if (file.size > this.$store.state.instance[slot + 'limit']) { if (file.size > this.$store.state.instance[slot + 'limit']) {
const filesize = fileSizeFormatService.fileSizeFormat(file.size) const filesize = fileSizeFormatService.fileSizeFormat(file.size)
const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit']) const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit'])
this[slot + 'UploadError'] = [ this.$store.dispatch('pushGlobalNotice', {
this.$t('upload.error.base'), messageKey: 'upload.error.message',
this.$t( messageArgs: [
'upload.error.file_too_big', this.$t('upload.error.file_too_big', {
{
filesize: filesize.num, filesize: filesize.num,
filesizeunit: filesize.unit, filesizeunit: filesize.unit,
allowedsize: allowedsize.num, allowedsize: allowedsize.num,
allowedsizeunit: allowedsize.unit allowedsizeunit: allowedsize.unit
} })
) ],
].join(' ') level: 'error'
})
return return
} }
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
@ -213,8 +211,9 @@ const ProfileTab = {
that.$store.commit('setCurrentUser', user) that.$store.commit('setCurrentUser', user)
resolve() resolve()
}) })
.catch((err) => { .catch((error) => {
reject(new Error(that.$t('upload.error.base') + ' ' + err.message)) that.displayUploadError(error)
reject(error)
}) })
} }
@ -235,24 +234,27 @@ const ProfileTab = {
this.$store.commit('setCurrentUser', user) this.$store.commit('setCurrentUser', user)
this.bannerPreview = null this.bannerPreview = null
}) })
.catch((err) => { .catch(this.displayUploadError)
this.bannerUploadError = this.$t('upload.error.base') + ' ' + err.message .finally(() => { this.bannerUploading = false })
})
.then(() => { this.bannerUploading = false })
}, },
submitBackground (background) { submitBackground (background) {
if (!this.backgroundPreview && background !== '') { return } if (!this.backgroundPreview && background !== '') { return }
this.backgroundUploading = true this.backgroundUploading = true
this.$store.state.api.backendInteractor.updateProfileImages({ background }).then((data) => { this.$store.state.api.backendInteractor.updateProfileImages({ background })
if (!data.error) { .then((data) => {
this.$store.commit('addNewUsers', [data]) this.$store.commit('addNewUsers', [data])
this.$store.commit('setCurrentUser', data) this.$store.commit('setCurrentUser', data)
this.backgroundPreview = null this.backgroundPreview = null
} else { })
this.backgroundUploadError = this.$t('upload.error.base') + data.error .catch(this.displayUploadError)
} .finally(() => { this.backgroundUploading = false })
this.backgroundUploading = false },
displayUploadError (error) {
this.$store.dispatch('pushGlobalNotice', {
messageKey: 'upload.error.message',
messageArgs: [error.message],
level: 'error'
}) })
} }
} }

View file

@ -229,17 +229,6 @@
> >
{{ $t('general.submit') }} {{ $t('general.submit') }}
</button> </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>
<div class="setting-item"> <div class="setting-item">
<h2>{{ $t('settings.profile_background') }}</h2> <h2>{{ $t('settings.profile_background') }}</h2>
@ -279,18 +268,6 @@
> >
{{ $t('general.submit') }} {{ $t('general.submit') }}
</button> </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>
</div> </div>
</template> </template>

View file

@ -758,6 +758,7 @@
"upload": { "upload": {
"error": { "error": {
"base": "Upload failed.", "base": "Upload failed.",
"message": "Upload failed: {0}",
"file_too_big": "File too big [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]", "file_too_big": "File too big [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]",
"default": "Try again later" "default": "Try again later"
}, },

View file

@ -162,7 +162,12 @@ const updateProfileImages = ({ credentials, avatar = null, banner = null, backgr
body: form body: form
}) })
.then((data) => data.json()) .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 }) => { const updateProfile = ({ credentials, params }) => {