From 91a72d51fffb241bb7c9cba78ea2b5b47dce7db3 Mon Sep 17 00:00:00 2001
From: raeno <just.raeno@gmail.com>
Date: Wed, 5 Dec 2018 19:42:33 +0400
Subject: 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  |  8 ++++---
 src/components/registration/registration.vue | 36 +++++++++++++++++++++-------
 2 files changed, 33 insertions(+), 11 deletions(-)

(limited to 'src/components')

diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js
index 67c052f1..8559633b 100644
--- a/src/components/registration/registration.js
+++ b/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)
         }
       }
     }
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 5f6357a2..fcc41d32 100644
--- a/src/components/registration/registration.vue
+++ b/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 {
-- 
cgit v1.2.3-70-g09d2