Better styling for client-side validation. Add I18n for validation errors.

src/components/registration/registration.js

@@ -1,5 +1,5 @@
 import { validationMixin } from 'vuelidate'
-import { required } from 'vuelidate/lib/validators'
+import { required, sameAs, email } from 'vuelidate/lib/validators'
 import { mapActions, mapState } from 'vuex'
 import { SIGN_UP } from '../../mutation_types'
 
@@ -16,24 +16,29 @@ const registration = {
   }),
   validations: {
     user: {
-      email: { required },
+      email: { required, email },
       username: { required },
       password: { required },
-      confirm: { required }
+      confirm: {
+        required,
+        sameAsPassword: sameAs('password')
+      }
     }
   },
   created () {
-    if ((!this.$store.state.instance.registrationOpen && !this.token) || !!this.$store.state.users.currentUser) {
+    if ((!this.registrationOpen && !this.token) || this.signedIn) {
       this.$router.push('/main/all')
     }
-    // Seems like this doesn't work at first page open for some reason
+    // // Seems like this doesn't work at first page open for some reason
-    if (this.$store.state.instance.registrationOpen && this.token) {
+    // if (this.$store.state.instance.registrationOpen && this.token) {
-      this.$router.push('/registration')
+    //   this.$router.push('/registration')
-    }
+    // }
   },
   computed: {
     token () { return this.$route.params.token },
     ...mapState({
+      registrationOpen: (state) => state.instance.registrationOpen,
+      signedIn: (state) => !!state.users.currentUser,
       isPending: (state) => state.users[SIGN_UP.isPending],
       serverValidationErrors: (state) => state.users[SIGN_UP.errors],
       termsofservice: (state) => state.instance.tos
@@ -41,14 +46,19 @@ const registration = {
   },
   methods: {
     ...mapActions(['signUp']),
-    submit () {
+    async submit () {
       this.user.nickname = this.user.username
       this.user.token = this.token
 
       this.$v.$touch()
 
       if (!this.$v.$invalid) {
-        this.signUp(this.user)
+        try {
+          await this.signUp(this.user)
+          this.$router.push('/main/friends')
+        } catch (error) {
+          console.log("Registration failed: " + error)
+        }
       }
     }
   }

src/components/registration/registration.vue

@@ -12,7 +12,11 @@
               <input :disabled="isPending" v-model.trim='$v.user.username.$model' class='form-control' id='sign-up-username' placeholder='e.g. lain'>
             </div>
             <div class="form-error" v-if="$v.user.username.$dirty">
-              <span class="error-required" v-if="!$v.user.username.required">Username is required.</span>
+              <ul>
+                <li v-if="!$v.user.username.required">
+                  <span>{{$t('registration.validations.username_required')}}</span>
+                </li>
+              </ul>
             </div>
 
             <div class='form-group'>
@@ -25,7 +29,14 @@
               <input :disabled="isPending" v-model='$v.user.email.$model' class='form-control' id='email' type="email">
             </div>
             <div class="form-error" v-if="$v.user.email.$dirty">
-              <span class="error-required" v-if="!$v.user.email.required">Email is required.</span>
+              <ul>
+                <li v-if="!$v.user.email.required">
+                  <span>{{$t('registration.validations.email_required')}}</span>
+                </li>
+                <li v-if="!$v.user.email.email">
+                  <span>{{$t('registration.validations.email_valid')}}</span>
+                </li>
+              </ul>
             </div>
 
             <div class='form-group'>
@@ -38,7 +49,11 @@
               <input :disabled="isPending" v-model='user.password' class='form-control' id='sign-up-password' type='password'>
             </div>
             <div class="form-error" v-if="$v.user.password.$dirty">
-              <span class="error-required" v-if="!$v.user.password.required">Password is required.</span>
+              <ul>
+                <li v-if="!$v.user.password.required">
+                  <span>{{$t('registration.validations.password_required')}}</span>
+                </li>
+              </ul>
             </div>
 
             <div class='form-group' :class="{ 'form-group--error': $v.user.confirm.$error }">
@@ -46,7 +61,14 @@
               <input :disabled="isPending" v-model='user.confirm' class='form-control' id='sign-up-password-confirmation' type='password'>
             </div>
             <div class="form-error" v-if="$v.user.confirm.$dirty">
-              <span class="error-required" v-if="!$v.user.confirm.required">Password confirmation is required.</span>
+              <ul>
+                <li v-if="!$v.user.confirm.required">
+                  <span>{{$t('registration.validations.password_confirmation_required')}}</span>
+                </li>
+                <li v-if="!$v.user.confirm.sameAsPassword">
+                  <span>{{$t('registration.validations.password_confirmation_match')}}</span>
+                </li>
+              </ul>
             </div>
             <!--
             <div class='form-group'>
@@ -132,6 +154,17 @@
     span {
       font-size: 12px;
     }
+
+  }
+
+  .form-error ul {
+    list-style: none;
+    padding: 0 0 0 5px;
+    margin-top: 0;
+
+    li::before {
+      content: "• ";
+    }
   }
 
   form textarea {

src/i18n/en.json

@@ -72,7 +72,15 @@
     "fullname": "Display name",
     "password_confirm": "Password confirmation",
     "registration": "Registration",
-    "token": "Invite token"
+    "token": "Invite token",
+    "validations": {
+      "username_required": "username should not be blank",
+      "email_required": "should not be blank",
+      "email_valid": "should be valid email",
+      "password_required": "should not be blank",
+      "password_confirmation_required": "should not be blank",
+      "password_confirmation_match": "should be the same as password"
+    }
   },
   "settings": {
     "attachmentRadius": "Attachments",

src/i18n/ru.json

@@ -55,7 +55,15 @@
     "fullname": "Отображаемое имя",
     "password_confirm": "Подтверждение пароля",
     "registration": "Регистрация",
-    "token": "Код приглашения"
+    "token": "Код приглашения",
+    "validations": {
+      "username_required": "не должно быть пустым",
+      "email_required": "не должен быть пустым",
+      "email_valid": "должен быть корректный email адрес",
+      "password_required": "не должен быть пустым",
+      "password_confirmation_required": "не должно быть пустым",
+      "password_confirmation_match": "должно совпадать с паролем"
+    }
   },
   "settings": {
     "attachmentRadius": "Прикреплённые файлы",

src/modules/users.js

@@ -52,13 +52,14 @@ export const mutations = {
   },
   [SIGN_UP.PENDING] (state) {
     state[SIGN_UP.isPending] = true
+    state[SIGN_UP.errors] = []
   },
   [SIGN_UP.SUCCESS] (state) {
     state[SIGN_UP.isPending] = false
   },
   [SIGN_UP.FAILURE] (state, errors) {
     state[SIGN_UP.isPending] = false
-    state[SIGN_UP.errors] = [...state[SIGN_UP.errors], ...errors]
+    state[SIGN_UP.errors] = errors
   }
 }
 
@@ -97,27 +98,29 @@ const users = {
     async signUp (store, userInfo) {
       store.commit(SIGN_UP.PENDING)
 
-      let response = await store.rootState.api.backendInteractor.register(userInfo)
+      let rootState = store.rootState
+
+      let response = await rootState.api.backendInteractor.register(userInfo)
       if (response.ok) {
         const data = {
-          oauth: store.state.oauth,
+          oauth: rootState.oauth,
-          instance: store.state.instance.server
+          instance: rootState.instance.server
         }
         let app = await oauthApi.getOrCreateApp(data)
         let result = await oauthApi.getTokenWithCredentials({
           app,
           instance: data.instance,
-          username: this.user.username,
+          username: userInfo.username,
-          password: this.user.password
+          password: userInfo.password
         })
         store.commit(SIGN_UP.SUCCESS)
         store.commit('setToken', result.access_token)
         store.dispatch('loginUser', result.access_token)
-        this.$router.push('/main/friends')
       } else {
         let data = await response.json()
         let errors = humanizeErrors(JSON.parse(data.error))
         store.commit(SIGN_UP.FAILURE, errors)
+        throw Error(errors)
       }
     },
     logout (store) {