Humanize validation errors returned on registration

src/components/registration/registration.js

@@ -1,9 +1,10 @@
 import oauthApi from '../../services/new_api/oauth.js'
+import { humanizeErrors } from '../../modules/errors'
 
 const registration = {
   data: () => ({
     user: {},
-    error: false,
+    errors: [],
     registering: false
   }),
   created () {
@@ -37,7 +38,8 @@ const registration = {
                   app,
                   instance: data.instance,
                   username: this.user.username,
-                  password: this.user.password})
+                  password: this.user.password
+                })
                 .then((result) => {
                   this.$store.commit('setToken', result.access_token)
                   this.$store.dispatch('loginUser', result.access_token)
@@ -47,10 +49,10 @@ const registration = {
           } else {
             this.registering = false
             response.json().then((data) => {
-              this.error = data.error
+              this.errors = humanizeErrors(JSON.parse(data.error))
             })
           }
-        }
+        },
       )
     }
   }

src/components/registration/registration.vue

@@ -49,8 +49,10 @@
           <div class='terms-of-service' v-html="termsofservice">
           </div>
         </div>
-        <div v-if="error" class='form-group'>
-          <div class='alert error'>{{error}}</div>
+        <div v-if="errors.length" class='form-group'>
+          <div class='alert error'>
+            <span v-for="error in errors">{{error}}</span>
+          </div>
         </div>
       </form>
     </div>

src/modules/errors.js

@@ -0,0 +1,12 @@
+import {capitalize, reduce} from 'lodash'
+
+export function humanizeErrors (errors) {
+  return reduce(errors, (errs, val, k) => {
+    let message = reduce(val, (acc, message) => {
+      let key = capitalize(k.replace(/_/g, ' '))
+      return acc + [key, message].join(' ') + '. '
+    }, '')
+    return [...errs, message]
+  }, [])
+}
+