From 822559afd889262f0dc6989531a54a21a01beadc Mon Sep 17 00:00:00 2001 From: raeno Date: Mon, 3 Dec 2018 22:43:58 +0400 Subject: Humanize validation errors returned on registration --- src/components/registration/registration.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'src/components/registration/registration.js') diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js index f7f8a720..7e8b1848 100644 --- a/src/components/registration/registration.js +++ b/src/components/registration/registration.js @@ -1,9 +1,10 @@ import oauthApi from '../../services/new_api/oauth.js' +import { humanizeErrors } from '../../modules/errors' const registration = { data: () => ({ user: {}, - error: false, + errors: [], registering: false }), created () { @@ -37,7 +38,8 @@ const registration = { app, instance: data.instance, username: this.user.username, - password: this.user.password}) + password: this.user.password + }) .then((result) => { this.$store.commit('setToken', result.access_token) this.$store.dispatch('loginUser', result.access_token) @@ -47,10 +49,10 @@ const registration = { } else { this.registering = false response.json().then((data) => { - this.error = data.error + this.errors = humanizeErrors(JSON.parse(data.error)) }) } - } + }, ) } } -- cgit v1.2.3-70-g09d2 From 0029313775fb294b488ebfd809c88d1ace7eea94 Mon Sep 17 00:00:00 2001 From: raeno Date: Wed, 5 Dec 2018 13:43:01 +0400 Subject: Add client validation for registration form * also extract registration logic to users.js module --- package.json | 1 + src/components/registration/registration.js | 70 +- src/components/registration/registration.vue | 79 ++- src/modules/users.js | 44 +- src/mutation_types.js | 7 + yarn.lock | 981 +-------------------------- 6 files changed, 147 insertions(+), 1035 deletions(-) create mode 100644 src/mutation_types.js (limited to 'src/components/registration/registration.js') diff --git a/package.json b/package.json index b716e7c6..18e79e16 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 7e8b1848..ba3561a0 100644 --- a/src/components/registration/registration.js +++ b/src/components/registration/registration.js @@ -1,12 +1,27 @@ -import oauthApi from '../../services/new_api/oauth.js' -import { humanizeErrors } from '../../modules/errors' +import { validationMixin } from 'vuelidate' +import { required } from 'vuelidate/lib/validators' +import { mapActions, mapState } from 'vuex' +import { SIGN_UP } from "../../mutation_types" const registration = { + mixins: [validationMixin], data: () => ({ - user: {}, - errors: [], - registering: false + user: { + email: '', + username: '', + password: '', + confirm: '' + }, + clientValidationFailed: false }), + validations: { + user: { + email: { required }, + username: { required }, + password: { required }, + confirm: { required } + } + }, created () { if ((!this.$store.state.instance.registrationOpen && !this.token) || !!this.$store.state.users.currentUser) { this.$router.push('/main/all') @@ -17,43 +32,24 @@ const registration = { } }, computed: { - termsofservice () { return this.$store.state.instance.tos }, - token () { return this.$route.params.token } + token () { return this.$route.params.token }, + ...mapState({ + isPending: (state) => state.users[SIGN_UP.isPending], + serverValidationErrors: (state) => state.users[SIGN_UP.errors], + termsofservice: 'instance.tos', + }) }, methods: { + ...mapActions(['signUp']), submit () { - this.registering = true 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.errors = humanizeErrors(JSON.parse(data.error)) - }) - } - }, - ) + + this.$v.$touch() + + if (!this.$v.$invalid) { + this.signUp(this.user) + } } } } diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue index 867e26f0..73200990 100644 --- a/src/components/registration/registration.vue +++ b/src/components/registration/registration.vue @@ -7,29 +7,46 @@
-
- - +
+ +
-
- - +
+ Username is required.
+
- - + +
-
- - + +
+ +
-
- - +
+ Email is required.
+
- - + + +
+ +
+ + +
+
+ Password is required. +
+ +
+ + +
+
+ Password confirmation is required.
+
@@ -89,12 +83,10 @@
-
+ +
-
- Form is invalid -
{{error}} @@ -165,7 +157,7 @@ } .form-group--error .form--label { - color: #f04124; + color: var(--cRed, #f04124); } .form-error { @@ -198,8 +190,6 @@ } .btn { - //align-self: flex-start; - //width: 10em; margin-top: 0.6em; height: 28px; } diff --git a/src/mutation_types.js b/src/mutation_types.js index 026c5540..f25ae174 100644 --- a/src/mutation_types.js +++ b/src/mutation_types.js @@ -1,7 +1,9 @@ export const SIGN_UP = { + // mutations SUCCESS: 'SIGN_UP_SUCCESS', FAILURE: 'SIGN_UP_FAILURE', PENDING: 'SIGN_UP_PENDING', + // state isPending: 'sign_up_pending', errors: 'sign_up_errors' } -- cgit v1.2.3-70-g09d2 From a3e19cbafa3c490c9dec6b0ffcdd8b55f648173d Mon Sep 17 00:00:00 2001 From: raeno Date: Wed, 5 Dec 2018 23:07:58 +0400 Subject: Get rid of mutation_types file, use inline approach. Minor fixes --- src/components/registration/registration.js | 8 +++----- src/modules/users.js | 28 ++++++++++++++-------------- src/mutation_types.js | 9 --------- 3 files changed, 17 insertions(+), 28 deletions(-) delete mode 100644 src/mutation_types.js (limited to 'src/components/registration/registration.js') diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js index 27b94d69..9f32bf48 100644 --- a/src/components/registration/registration.js +++ b/src/components/registration/registration.js @@ -1,7 +1,6 @@ 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], @@ -12,8 +11,7 @@ const registration = { username: '', password: '', confirm: '' - }, - clientValidationFailed: false + } }), validations: { user: { @@ -37,8 +35,8 @@ const registration = { ...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], + isPending: (state) => state.users.signUpPending, + serverValidationErrors: (state) => state.users.signUpErrors, termsOfService: (state) => state.instance.tos }) }, diff --git a/src/modules/users.js b/src/modules/users.js index 5ed8e46b..6d966c3b 100644 --- a/src/modules/users.js +++ b/src/modules/users.js @@ -1,7 +1,6 @@ import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js' import { compact, map, each, merge } from 'lodash' import { set } from 'vue' -import { SIGN_UP } from '../mutation_types' import oauthApi from '../services/new_api/oauth' import {humanizeErrors} from './errors' @@ -50,26 +49,27 @@ export const mutations = { const user = state.usersObject[id] set(user, 'highlight', highlighted) }, - [SIGN_UP.PENDING] (state) { - state[SIGN_UP.isPending] = true - state[SIGN_UP.errors] = [] + signUpPending (state) { + state.signUpPending = true + state.signUpErrors = [] }, - [SIGN_UP.SUCCESS] (state) { - state[SIGN_UP.isPending] = false + signUpSuccess (state) { + state.signUpPending = false }, - [SIGN_UP.FAILURE] (state, errors) { - state[SIGN_UP.isPending] = false - state[SIGN_UP.errors] = errors + signUpFailure (state, errors) { + state.signUpPending = false + state.signUpErrors = errors } } export const defaultState = { + loggingIn: false, lastLoginName: false, currentUser: false, users: [], usersObject: {}, - sign_up_pending: false, - sign_up_errors: [] + signUpPending: false, + signUpErrors: [] } const users = { @@ -96,7 +96,7 @@ const users = { }) }, async signUp (store, userInfo) { - store.commit(SIGN_UP.PENDING) + store.commit('signUpPending') let rootState = store.rootState @@ -113,13 +113,13 @@ const users = { username: userInfo.username, password: userInfo.password }) - store.commit(SIGN_UP.SUCCESS) + store.commit('signUpSuccess') store.commit('setToken', result.access_token) store.dispatch('loginUser', result.access_token) } else { let data = await response.json() let errors = humanizeErrors(JSON.parse(data.error)) - store.commit(SIGN_UP.FAILURE, errors) + store.commit('signUpFailure', errors) throw Error(errors) } }, diff --git a/src/mutation_types.js b/src/mutation_types.js deleted file mode 100644 index f25ae174..00000000 --- a/src/mutation_types.js +++ /dev/null @@ -1,9 +0,0 @@ -export const SIGN_UP = { - // mutations - SUCCESS: 'SIGN_UP_SUCCESS', - FAILURE: 'SIGN_UP_FAILURE', - PENDING: 'SIGN_UP_PENDING', - // state - isPending: 'sign_up_pending', - errors: 'sign_up_errors' -} -- cgit v1.2.3-70-g09d2 From e3d0917db8edf9a9be5b1fde60c37833ec75e30c Mon Sep 17 00:00:00 2001 From: raeno Date: Wed, 5 Dec 2018 23:13:08 +0400 Subject: Use console.warn instead of console.log --- src/components/registration/registration.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components/registration/registration.js') diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js index 9f32bf48..e5ead8bc 100644 --- a/src/components/registration/registration.js +++ b/src/components/registration/registration.js @@ -53,7 +53,7 @@ const registration = { await this.signUp(this.user) this.$router.push('/main/friends') } catch (error) { - console.log('Registration failed: ' + error) + console.warn('Registration failed: ' + error) } } } -- cgit v1.2.3-70-g09d2