diff --git a/package.json b/package.json index b716e7c692..18e79e1611 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "vue-router": "^3.0.1", "vue-template-compiler": "^2.3.4", "vue-timeago": "^3.1.2", + "vuelidate": "^0.7.4", "vuex": "^3.0.1", "whatwg-fetch": "^2.0.3" }, diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js index f7f8a720f1..e5ead8bc10 100644 --- a/src/components/registration/registration.js +++ b/src/components/registration/registration.js @@ -1,57 +1,61 @@ -import oauthApi from '../../services/new_api/oauth.js' +import { validationMixin } from 'vuelidate' +import { required, sameAs } from 'vuelidate/lib/validators' +import { mapActions, mapState } from 'vuex' const registration = { + mixins: [validationMixin], data: () => ({ - user: {}, - error: false, - registering: false - }), - created () { - if ((!this.$store.state.instance.registrationOpen && !this.token) || !!this.$store.state.users.currentUser) { - this.$router.push('/main/all') + user: { + email: '', + fullname: '', + username: '', + password: '', + confirm: '' } - // 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') + }), + 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') } }, computed: { - termsofservice () { return this.$store.state.instance.tos }, - token () { return this.$route.params.token } + token () { return this.$route.params.token }, + ...mapState({ + registrationOpen: (state) => state.instance.registrationOpen, + signedIn: (state) => !!state.users.currentUser, + isPending: (state) => state.users.signUpPending, + serverValidationErrors: (state) => state.users.signUpErrors, + termsOfService: (state) => state.instance.tos + }) }, methods: { - submit () { - this.registering = true + ...mapActions(['signUp']), + async submit () { this.user.nickname = this.user.username this.user.token = this.token - this.$store.state.api.backendInteractor.register(this.user).then( - (response) => { - if (response.ok) { - const data = { - oauth: this.$store.state.oauth, - instance: this.$store.state.instance.server - } - oauthApi.getOrCreateApp(data).then((app) => { - oauthApi.getTokenWithCredentials( - { - app, - instance: data.instance, - username: this.user.username, - password: this.user.password}) - .then((result) => { - this.$store.commit('setToken', result.access_token) - this.$store.dispatch('loginUser', result.access_token) - this.$router.push('/main/friends') - }) - }) - } else { - this.registering = false - response.json().then((data) => { - this.error = data.error - }) - } + + this.$v.$touch() + + if (!this.$v.$invalid) { + try { + await this.signUp(this.user) + this.$router.push('/main/friends') + } catch (error) { + console.warn('Registration failed: ' + error) } - ) + } } } } diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue index 087cab6bf9..8cb1392b3d 100644 --- a/src/components/registration/registration.vue +++ b/src/components/registration/registration.vue @@ -7,50 +7,90 @@
-
- - +
+ +
-
- - +
+
    +
  • + {{$t('registration.validations.username_required')}} +
  • +
-
- - + +
+ +
-
- - +
+
    +
  • + {{$t('registration.validations.fullname_required')}} +
  • +
-
- - + +
+ +
-
- - +
+
    +
  • + {{$t('registration.validations.email_required')}} +
  • +
- + +
+ + +
+
+
    +
  • + {{$t('registration.validations.password_required')}} +
  • +
+
+ +
+ + +
+
+
    +
  • + {{$t('registration.validations.password_confirmation_required')}} +
  • +
  • + {{$t('registration.validations.password_confirmation_match')}} +
  • +
+
+
- +
-
+ +
-
-
{{error}}
+
+
+ {{error}} +
@@ -60,6 +100,7 @@