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
This commit is contained in:
raeno 2018-12-05 19:42:33 +04:00
parent f9ff839b1a
commit 91a72d51ff
4 changed files with 36 additions and 14 deletions

View file

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

View file

@ -19,9 +19,16 @@
</ul> </ul>
</div> </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> <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>
<div class='form-group' :class="{ 'form-group--error': $v.user.email.$error }"> <div class='form-group' :class="{ 'form-group--error': $v.user.email.$error }">
@ -33,9 +40,6 @@
<li v-if="!$v.user.email.required"> <li v-if="!$v.user.email.required">
<span>{{$t('registration.validations.email_required')}}</span> <span>{{$t('registration.validations.email_required')}}</span>
</li> </li>
<li v-if="!$v.user.email.email">
<span>{{$t('registration.validations.email_valid')}}</span>
</li>
</ul> </ul>
</div> </div>
@ -136,6 +140,24 @@
margin-bottom: 1em; 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 { .form-group--error {
animation-name: shakeError; animation-name: shakeError;
animation-duration: .6s; animation-duration: .6s;
@ -148,13 +170,11 @@
.form-error { .form-error {
margin-top: -0.7em; margin-top: -0.7em;
margin-bottom: 0.5em;
text-align: left; text-align: left;
span { span {
font-size: 12px; font-size: 12px;
} }
} }
.form-error ul { .form-error ul {

View file

@ -74,9 +74,9 @@
"registration": "Registration", "registration": "Registration",
"token": "Invite token", "token": "Invite token",
"validations": { "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_required": "should not be blank",
"email_valid": "should be valid email",
"password_required": "should not be blank", "password_required": "should not be blank",
"password_confirmation_required": "should not be blank", "password_confirmation_required": "should not be blank",
"password_confirmation_match": "should be the same as password" "password_confirmation_match": "should be the same as password"

View file

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