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
-    if (this.$store.state.instance.registrationOpen && this.token) {
-      this.$router.push('/registration')
-    }
+    // // Seems like this doesn't work at first page open for some reason
+    // if (this.$store.state.instance.registrationOpen && this.token) {
+    //   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)
+        }
       }
     }
   }