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.vue | 36 +++++++++++++++++++++-------
 1 file changed, 28 insertions(+), 8 deletions(-)

(limited to 'src/components/registration/registration.vue')

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