Handle backend errors in user profile form

src/components/Auth/Profile/Info.vue

@@ -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
       }