From 91a72d51fffb241bb7c9cba78ea2b5b47dce7db3 Mon Sep 17 00:00:00 2001 From: raeno Date: Wed, 5 Dec 2018 19:42:33 +0400 Subject: [PATCH] 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 +++++++++++++++----- src/i18n/en.json | 4 +-- src/i18n/ru.json | 2 +- 4 files changed, 36 insertions(+), 14 deletions(-) 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 @@ -
+
- + +
+
+
    +
  • + {{$t('registration.validations.fullname_required')}} +
  • +
@@ -33,9 +40,6 @@
  • {{$t('registration.validations.email_required')}}
  • -
  • - {{$t('registration.validations.email_valid')}} -
  • @@ -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 { diff --git a/src/i18n/en.json b/src/i18n/en.json index 6e13993f..b21a959e 100644 --- a/src/i18n/en.json +++ b/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" diff --git a/src/i18n/ru.json b/src/i18n/ru.json index de2774ef..075cc6cc 100644 --- a/src/i18n/ru.json +++ b/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": "должно совпадать с паролем"