Validate name presence on client-side as well

* remove email address validation, we have it covered by html itself and it's quite annoying
* add shakeError animation
* fix styles a bit

src/components/registration/registration.js

@@ -1,5 +1,5 @@
 import { validationMixin } from 'vuelidate'
-import { required, sameAs, email } from 'vuelidate/lib/validators'
+import { required, sameAs } from 'vuelidate/lib/validators'
 import { mapActions, mapState } from 'vuex'
 import { SIGN_UP } from '../../mutation_types'
 
@@ -8,6 +8,7 @@ const registration = {
   data: () => ({
     user: {
       email: '',
+      fullname: '',
       username: '',
       password: '',
       confirm: ''
@@ -16,8 +17,9 @@ const registration = {
   }),
   validations: {
     user: {
-      email: { required, email },
+      email: { required },
       username: { required },
+      fullname: { required },
       password: { required },
       confirm: {
         required,
@@ -57,7 +59,7 @@ const registration = {
           await this.signUp(this.user)
           this.$router.push('/main/friends')
         } catch (error) {
-          console.log("Registration failed: " + error)
+          console.log('Registration failed: ' + error)
         }
       }
     }

src/components/registration/registration.vue

@@ -19,9 +19,16 @@
               </ul>
             </div>
 
-            <div class='form-group'>
+            <div class='form-group' :class="{ 'form-group--error': $v.user.fullname.$error }">
               <label class='form--label' for='sign-up-fullname'>{{$t('registration.fullname')}}</label>
-              <input :disabled="isPending" v-model='user.fullname' class='form-control' id='sign-up-fullname' placeholder='e.g. Lain Iwakura'>
+              <input :disabled="isPending" v-model.trim='$v.user.fullname.$model' class='form-control' id='sign-up-fullname' placeholder='e.g. Lain Iwakura'>
+            </div>
+            <div class="form-error" v-if="$v.user.fullname.$dirty">
+              <ul>
+                <li v-if="!$v.user.fullname.required">
+                  <span>{{$t('registration.validations.fullname_required')}}</span>
+                </li>
+              </ul>
             </div>
 
             <div class='form-group' :class="{ 'form-group--error': $v.user.email.$error }">
@@ -33,9 +40,6 @@
                 <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>
 
@@ -136,6 +140,24 @@
     margin-bottom: 1em;
   }
 
+  @keyframes shakeError {
+    0% {
+      transform: translateX(0); }
+    15% {
+      transform: translateX(0.375rem); }
+    30% {
+      transform: translateX(-0.375rem); }
+    45% {
+      transform: translateX(0.375rem); }
+    60% {
+      transform: translateX(-0.375rem); }
+    75% {
+      transform: translateX(0.375rem); }
+    90% {
+      transform: translateX(-0.375rem); }
+    100% {
+      transform: translateX(0); } }
+
   .form-group--error {
     animation-name: shakeError;
     animation-duration: .6s;
@@ -148,13 +170,11 @@
 
   .form-error {
     margin-top: -0.7em;
-    margin-bottom: 0.5em;
-
     text-align: left;
+
     span {
       font-size: 12px;
     }
-
   }
 
   .form-error ul {

src/i18n/en.json

@@ -74,9 +74,9 @@
     "registration": "Registration",
     "token": "Invite token",
     "validations": {
-      "username_required": "username should not be blank",
+      "username_required": "should not be blank",
+      "fullname_required": "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"

src/i18n/ru.json

@@ -58,8 +58,8 @@
     "token": "Код приглашения",
     "validations": {
       "username_required": "не должно быть пустым",
+      "fullname_required": "не должно быть пустым",
       "email_required": "не должен быть пустым",
-      "email_valid": "должен быть корректный email адрес",
       "password_required": "не должен быть пустым",
       "password_confirmation_required": "не должно быть пустым",
       "password_confirmation_match": "должно совпадать с паролем"