diff options
Diffstat (limited to 'src/components/registration')
| -rw-r--r-- | src/components/registration/registration.js | 30 | ||||
| -rw-r--r-- | src/components/registration/registration.vue | 41 |
2 files changed, 57 insertions, 14 deletions
diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js index 69474585..67c052f1 100644 --- a/src/components/registration/registration.js +++ b/src/components/registration/registration.js @@ -1,5 +1,5 @@ import { validationMixin } from 'vuelidate' -import { required } from 'vuelidate/lib/validators' +import { required, sameAs, email } from 'vuelidate/lib/validators' import { mapActions, mapState } from 'vuex' import { SIGN_UP } from '../../mutation_types' @@ -16,24 +16,29 @@ const registration = { }), validations: { user: { - email: { required }, + email: { required, email }, username: { required }, password: { required }, - confirm: { required } + confirm: { + required, + sameAsPassword: sameAs('password') + } } }, created () { - if ((!this.$store.state.instance.registrationOpen && !this.token) || !!this.$store.state.users.currentUser) { + if ((!this.registrationOpen && !this.token) || this.signedIn) { this.$router.push('/main/all') } - // Seems like this doesn't work at first page open for some reason - if (this.$store.state.instance.registrationOpen && this.token) { - this.$router.push('/registration') - } + // // Seems like this doesn't work at first page open for some reason + // if (this.$store.state.instance.registrationOpen && this.token) { + // this.$router.push('/registration') + // } }, computed: { token () { return this.$route.params.token }, ...mapState({ + registrationOpen: (state) => state.instance.registrationOpen, + signedIn: (state) => !!state.users.currentUser, isPending: (state) => state.users[SIGN_UP.isPending], serverValidationErrors: (state) => state.users[SIGN_UP.errors], termsofservice: (state) => state.instance.tos @@ -41,14 +46,19 @@ const registration = { }, methods: { ...mapActions(['signUp']), - submit () { + async submit () { this.user.nickname = this.user.username this.user.token = this.token this.$v.$touch() if (!this.$v.$invalid) { - this.signUp(this.user) + try { + await this.signUp(this.user) + this.$router.push('/main/friends') + } catch (error) { + console.log("Registration failed: " + error) + } } } } diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue index 73200990..5f6357a2 100644 --- a/src/components/registration/registration.vue +++ b/src/components/registration/registration.vue @@ -12,7 +12,11 @@ <input :disabled="isPending" v-model.trim='$v.user.username.$model' class='form-control' id='sign-up-username' placeholder='e.g. lain'> </div> <div class="form-error" v-if="$v.user.username.$dirty"> - <span class="error-required" v-if="!$v.user.username.required">Username is required.</span> + <ul> + <li v-if="!$v.user.username.required"> + <span>{{$t('registration.validations.username_required')}}</span> + </li> + </ul> </div> <div class='form-group'> @@ -25,7 +29,14 @@ <input :disabled="isPending" v-model='$v.user.email.$model' class='form-control' id='email' type="email"> </div> <div class="form-error" v-if="$v.user.email.$dirty"> - <span class="error-required" v-if="!$v.user.email.required">Email is required.</span> + <ul> + <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> <div class='form-group'> @@ -38,7 +49,11 @@ <input :disabled="isPending" v-model='user.password' class='form-control' id='sign-up-password' type='password'> </div> <div class="form-error" v-if="$v.user.password.$dirty"> - <span class="error-required" v-if="!$v.user.password.required">Password is required.</span> + <ul> + <li v-if="!$v.user.password.required"> + <span>{{$t('registration.validations.password_required')}}</span> + </li> + </ul> </div> <div class='form-group' :class="{ 'form-group--error': $v.user.confirm.$error }"> @@ -46,7 +61,14 @@ <input :disabled="isPending" v-model='user.confirm' class='form-control' id='sign-up-password-confirmation' type='password'> </div> <div class="form-error" v-if="$v.user.confirm.$dirty"> - <span class="error-required" v-if="!$v.user.confirm.required">Password confirmation is required.</span> + <ul> + <li v-if="!$v.user.confirm.required"> + <span>{{$t('registration.validations.password_confirmation_required')}}</span> + </li> + <li v-if="!$v.user.confirm.sameAsPassword"> + <span>{{$t('registration.validations.password_confirmation_match')}}</span> + </li> + </ul> </div> <!-- <div class='form-group'> @@ -132,6 +154,17 @@ span { font-size: 12px; } + + } + + .form-error ul { + list-style: none; + padding: 0 0 0 5px; + margin-top: 0; + + li::before { + content: "• "; + } } form textarea { |