Skip to content
Snippets Groups Projects
Commit d94a3e79 authored by Valentin Rigal's avatar Valentin Rigal
Browse files

Handle backend errors in user profile form

parent b2aa2313
No related branches found
No related tags found
1 merge request!1700Handle backend errors in user profile form
This commit is part of merge request !1700. Comments created here will be created in the context of that merge request.
......@@ -7,12 +7,12 @@
type="text"
class="input"
v-model="displayName"
:class="{ 'is-danger': !displayName || fieldErrors.display_name.length }"
:class="{ 'is-danger': !displayName || fieldErrors.display_name }"
:disabled="loading"
required
/>
</div>
<p class="help is-danger" v-for="err in fieldErrors.display_name" :key="err">{{ err }}</p>
<p class="help is-danger" v-for="err in (fieldErrors.display_name ?? [])" :key="err">{{ err }}</p>
</div>
<div class="field">
......@@ -69,7 +69,7 @@
class="input"
:disabled="loading"
/>
<p class="help is-danger" v-for="err in fieldErrors.password" :key="err">{{ err }}</p>
<p class="help is-danger" v-for="err in (fieldErrors.password || [])" :key="err">{{ err }}</p>
</div>
</div>
<div class="field">
......@@ -81,7 +81,7 @@
class="input"
:disabled="loading"
/>
<p class="help is-danger" v-for="err in fieldErrors.confirm_password" :key="err">{{ err }}</p>
<p class="help is-danger" v-for="err in (fieldErrors.confirm_password || [])" :key="err">{{ err }}</p>
</div>
</div>
</div>
......@@ -108,10 +108,11 @@ import {
mapState as mapVuexState,
mapActions as mapVuexActions
} from 'vuex'
import { isAxiosError } from 'axios'
import { mapActions } from 'pinia'
import { useNotificationStore } from '@/stores'
import { UserUpdatePayload } from '@/api/user'
import { errorParser } from '@/helpers'
import { ensureArray, errorParser } from '@/helpers'
export default defineComponent({
data: () => ({
......@@ -120,11 +121,7 @@ export default defineComponent({
confirmPassword: '',
showToken: false,
loading: false,
fieldErrors: {
display_name: [],
password: [],
confirm_password: []
} as Record<string, Array<string>>
fieldErrors: {} as Record<string, string[] | null>
}),
computed: {
...mapVuexState('auth', ['user']),
......@@ -149,7 +146,7 @@ export default defineComponent({
}
},
checkPassword () {
this.fieldErrors.confirm_password = []
this.fieldErrors.confirm_password = null
if (this.password !== '' && this.password !== this.confirmPassword) {
this.fieldErrors.confirm_password = ["Passwords don't match"]
return false
......@@ -158,14 +155,20 @@ export default defineComponent({
},
async submit () {
if (!this.canSubmit || !this.checkPassword()) return
this.fieldErrors = {}
const payload: UserUpdatePayload = { display_name: this.displayName }
if (this.password) payload.password = this.password
this.loading = true
try {
await this.updateUser(payload)
this.notify({ type: 'success', text: 'Your account has been updated' })
this.password = this.confirmPassword = ''
} catch (err) {
this.notify({ type: 'error', text: `An error occurred updating your account: ${errorParser(err)}` })
if (isAxiosError(err) && err.response?.status === 400 && err.response.data) {
this.fieldErrors = Object.fromEntries(Object.entries(err?.response?.data).map(([k, v]) => [k, ensureArray(v) as string[]]))
} else {
this.notify({ type: 'error', text: `An error occurred updating your account: ${errorParser(err)}` })
}
} finally {
this.loading = false
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment