diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/registration/registration.js | 8 | ||||
| -rw-r--r-- | src/components/registration/registration.vue | 36 | ||||
| -rw-r--r-- | src/i18n/en.json | 4 | ||||
| -rw-r--r-- | 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 @@ </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 { 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": "должно совпадать с паролем" |