akkoma-fe/src/components/registration/registration.js
raeno 91a72d51ff 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
2018-12-05 19:42:33 +04:00

69 lines
1.8 KiB
JavaScript

import { validationMixin } from 'vuelidate'
import { required, sameAs } from 'vuelidate/lib/validators'
import { mapActions, mapState } from 'vuex'
import { SIGN_UP } from '../../mutation_types'
const registration = {
mixins: [validationMixin],
data: () => ({
user: {
email: '',
fullname: '',
username: '',
password: '',
confirm: ''
},
clientValidationFailed: false
}),
validations: {
user: {
email: { required },
username: { required },
fullname: { required },
password: { required },
confirm: {
required,
sameAsPassword: sameAs('password')
}
}
},
created () {
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')
// }
},
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
})
},
methods: {
...mapActions(['signUp']),
async submit () {
this.user.nickname = this.user.username
this.user.token = this.token
this.$v.$touch()
if (!this.$v.$invalid) {
try {
await this.signUp(this.user)
this.$router.push('/main/friends')
} catch (error) {
console.log('Registration failed: ' + error)
}
}
}
}
}
export default registration