feat(default-theme): display 400 errors right from the API

packages/default-theme/components/SwLogin.vue

@@ -3,10 +3,10 @@
     <div class="form sw-login__form">
       <h2 class="sw-login__header">Log in</h2>
       <SfAlert
-        v-if="error"
+        v-if="userError"
         class="sw-login__alert"
         type="danger"
-        message="Invalid credentials"
+        :message="userError"
       />
       <SfInput
         v-model="email"
@@ -47,7 +47,7 @@ import { required, email } from 'vuelidate/lib/validators'
 import { useUser } from '@shopware-pwa/composables'
 
 export default {
-  name: 'SwResetPassword',
+  name: 'SwLogin',
   components: { SfButton, SfInput, SfAlert },
   mixins: [validationMixin],
   data() {
@@ -57,11 +57,11 @@ export default {
     }
   },
   setup() {
-    const { login, loading, error } = useUser()
+    const { login, loading, error: userError } = useUser()
     return {
       clientLogin: login,
       isLoading: loading,
-      error
+      userError
     }
   },
   validations: {
@@ -94,7 +94,7 @@ export default {
 
 .sw-login {
   &__alert {
-    margin-bottom: var(--spacer-small);
+    margin-bottom: var(--spacer-big);
   }
   &__header {
     margin-bottom: var(--spacer-big);

packages/default-theme/components/forms/SwEmail.vue

@@ -6,12 +6,12 @@
           Remember to keep your email up to date in case of loosing password.
         </p>
       </slot>
-
       <SfAlert
-        v-if="error"
-        class="sw-personal-info__alert"
+        v-for="(message, index) in useUserErrorMessages"
+        :key="index"
+        class="sw-email__alert"
         type="danger"
-        message="Errors in the form"
+        :message="message"
       />
 
       <div class="sw-email__form form">
@@ -28,15 +28,15 @@
             @blur="$v.email.$touch()"
           />
           <SfInput
-            v-model="confirmEmail"
-            :valid="!$v.confirmEmail.$error"
+            v-model="emailConfirmation"
+            :valid="!$v.emailConfirmation.$error"
             error-message="Must match first one"
             type="email"
-            name="confirmEmail"
+            name="emailConfirmation"
             label="Confirm e-mail"
             class="form__element"
             required
-            @blur="$v.confirmEmail.$touch()"
+            @blur="$v.emailConfirmation.$touch()"
           />
           <SfInput
             v-model="password"
@@ -67,44 +67,55 @@ import { validationMixin } from 'vuelidate'
 import { required, email, sameAs } from 'vuelidate/lib/validators'
 import { SfInput, SfButton, SfAlert } from '@storefront-ui/vue'
 import { useUser } from '@shopware-pwa/composables'
+import { getMessagesFromErrorsArray } from '@shopware-pwa/helpers'
 
 export default {
-  name: 'MyProfile',
+  name: 'EmailChange',
   components: { SfInput, SfButton, SfAlert },
   mixins: [validationMixin],
   props: {},
   setup() {
-    const { user, error, updateEmail, refreshUser } = useUser()
+    const { user, error: userError, updateEmail, refreshUser } = useUser()
     return {
       refreshUser,
       updateEmail,
       user,
-      error
+      userError,
+      getMessagesFromErrorsArray
     }
   },
   data() {
     return {
       email: '',
-      confirmEmail: '',
+      emailConfirmation: '',
       password: ''
     }
   },
+  computed: {
+    useUserErrorMessages() {
+      // all the 400 errors are in a raw format stright from the API - to be extracted easily depeding on needs.
+      return (
+        this.userError &&
+        this.getMessagesFromErrorsArray(this.userError.message)
+      )
+    }
+  },
   methods: {
     async invokeUpdate() {
       const emailChanged = await this.updateEmail({
         email: this.email,
-        confirmEmail: this.confirmEmail,
+        emailConfirmation: this.confirmEmail,
         password: this.password
       })
-      await refreshUser()
+      await this.refreshUser()
     }
   },
   validations: {
     email: {
       required,
       email
     },
-    confirmEmail: {
+    emailConfirmation: {
       required,
       sameAsEmail: sameAs('email'),
       email
@@ -119,6 +130,12 @@ export default {
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles.scss';
 
+.sw-email {
+  &__alert {
+    margin-bottom: var(--spacer-big);
+  }
+}
+
 .form {
   @include for-desktop {
     display: flex;

packages/default-theme/components/forms/SwPassword.vue

@@ -9,10 +9,11 @@
       </slot>
 
       <SfAlert
-        v-if="error"
-        class="sw-personal-info__alert"
+        v-for="(message, index) in useUserErrorMessages"
+        :key="index"
+        class="sw-password__alert"
         type="danger"
-        message="Errors in the form"
+        :message="message"
       />
 
       <div class="sw-password__form form">
@@ -70,19 +71,21 @@ import { validationMixin } from 'vuelidate'
 import { required, minLength, sameAs } from 'vuelidate/lib/validators'
 import { SfInput, SfButton, SfAlert } from '@storefront-ui/vue'
 import { useUser } from '@shopware-pwa/composables'
+import { getMessagesFromErrorsArray } from '@shopware-pwa/helpers'
 
 export default {
   name: 'SwPassword',
   components: { SfInput, SfButton, SfAlert },
   mixins: [validationMixin],
   props: {},
   setup() {
-    const { user, error, updatePassword, refreshUser } = useUser()
+    const { user, error: userError, updatePassword, refreshUser } = useUser()
     return {
       refreshUser,
       updatePassword,
       user,
-      error
+      userError,
+      getMessagesFromErrorsArray
     }
   },
   data() {
@@ -93,14 +96,23 @@ export default {
       email: this.user && this.user.email
     }
   },
+  computed: {
+    useUserErrorMessages() {
+      // all the 400 errors are in a raw format stright from the API - to be extracted easily depeding on needs.
+      return (
+        this.userError &&
+        this.getMessagesFromErrorsArray(this.userError.message)
+      )
+    }
+  },
   methods: {
     async invokeUpdate() {
       const passwordChanged = await this.updatePassword({
         password: this.password,
         newPassword: this.newPassword,
         newPasswordConfirm: this.newPasswordConfirm
       })
-      await refreshUser()
+      await this.refreshUser()
     }
   },
   validations: {
@@ -123,6 +135,12 @@ export default {
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles.scss';
 
+.sw-password {
+  &__alert {
+    margin-bottom: var(--spacer-big);
+  }
+}
+
 .form {
   @include for-desktop {
     display: flex;

packages/default-theme/components/forms/SwPersonalInfo.vue

@@ -17,22 +17,22 @@
 
       <div class="sw-personal-info__form form">
         <slot name="form">
-        <SfSelect
-          v-if="getMappedSalutations && getMappedSalutations.length > 0"
-          v-model="salutation"
-          label="Salutation"
-          :valid="!$v.salutation.$error"
-          error-message="Salutation must be selected"
-          class="sf-select--underlined form__element form__element--half form__select"
-        >
-          <SfSelectOption
-            v-for="salutationOption in getMappedSalutations"
-            :key="salutationOption.id"
-            :value="salutationOption"
+          <SfSelect
+            v-if="getMappedSalutations && getMappedSalutations.length > 0"
+            v-model="salutation"
+            label="Salutation"
+            :valid="!$v.salutation.$error"
+            error-message="Salutation must be selected"
+            class="sf-select--underlined form__element form__element--half form__select"
           >
-            {{ salutationOption.name }}
-          </SfSelectOption>
-        </SfSelect>
+            <SfSelectOption
+              v-for="salutationOption in getMappedSalutations"
+              :key="salutationOption.id"
+              :value="salutationOption"
+            >
+              {{ salutationOption.name }}
+            </SfSelectOption>
+          </SfSelect>
           <SfInput
             v-model="title"
             name="title"
@@ -112,7 +112,9 @@ export default {
       error: salutationsError
     } = useSalutations()
 
-    const getMappedSalutations = computed(() => mapSalutations(getSalutations.value))
+    const getMappedSalutations = computed(() =>
+      mapSalutations(getSalutations.value)
+    )
 
     return {
       fetchSalutations,
@@ -141,7 +143,7 @@ export default {
   },
   computed: {
     getErrorMessage() {
-      return userError && !salutationsError
+      return this.userError && !this.salutationsError
         ? 'Cannot create a new account, the user may already exist'
         : "Coudn't fetch available salutations or countries, please contact the administration."
     }