From 822559afd889262f0dc6989531a54a21a01beadc Mon Sep 17 00:00:00 2001 From: raeno Date: Mon, 3 Dec 2018 22:43:58 +0400 Subject: [PATCH 01/12] Humanize validation errors returned on registration --- src/components/registration/registration.js | 10 ++++++---- src/components/registration/registration.vue | 6 ++++-- src/modules/errors.js | 12 ++++++++++++ 3 files changed, 22 insertions(+), 6 deletions(-) create mode 100644 src/modules/errors.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)) }) } - } + }, ) } } diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue index 087cab6b..867e26f0 100644 --- a/src/components/registration/registration.vue +++ b/src/components/registration/registration.vue @@ -49,8 +49,10 @@
-
-
{{error}}
+
+
+ {{error}} +
diff --git a/src/modules/errors.js b/src/modules/errors.js new file mode 100644 index 00000000..25b5bd81 --- /dev/null +++ b/src/modules/errors.js @@ -0,0 +1,12 @@ +import {capitalize, reduce} from 'lodash' + +export function humanizeErrors (errors) { + return reduce(errors, (errs, val, k) => { + let message = reduce(val, (acc, message) => { + let key = capitalize(k.replace(/_/g, ' ')) + return acc + [key, message].join(' ') + '. ' + }, '') + return [...errs, message] + }, []) +} + From 02e000b53ea19fc234a615ebe526efa44cf2630f Mon Sep 17 00:00:00 2001 From: raeno Date: Wed, 5 Dec 2018 01:58:38 +0400 Subject: [PATCH 02/12] Use Array.reduce instead of lodash.reduce --- src/modules/errors.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/modules/errors.js b/src/modules/errors.js index 25b5bd81..c809e1b5 100644 --- a/src/modules/errors.js +++ b/src/modules/errors.js @@ -1,8 +1,8 @@ -import {capitalize, reduce} from 'lodash' +import { capitalize } from 'lodash' export function humanizeErrors (errors) { - return reduce(errors, (errs, val, k) => { - let message = reduce(val, (acc, message) => { + return Object.entries(errors).reduce((errs, [k, val]) => { + let message = val.reduce((acc, message) => { let key = capitalize(k.replace(/_/g, ' ')) return acc + [key, message].join(' ') + '. ' }, '') From 0029313775fb294b488ebfd809c88d1ace7eea94 Mon Sep 17 00:00:00 2001 From: raeno Date: Wed, 5 Dec 2018 13:43:01 +0400 Subject: [PATCH 03/12] 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 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' } From c03cc3ae83e2bfd4254fa1d4e69b6974c502061f Mon Sep 17 00:00:00 2001 From: raeno Date: Wed, 5 Dec 2018 20:29:59 +0400 Subject: [PATCH 08/12] Change english validation error messages --- src/i18n/en.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/i18n/en.json b/src/i18n/en.json index b21a959e..d9c9995a 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -74,11 +74,11 @@ "registration": "Registration", "token": "Invite token", "validations": { - "username_required": "should not be blank", - "fullname_required": "should not be blank", - "email_required": "should not be blank", - "password_required": "should not be blank", - "password_confirmation_required": "should not be blank", + "username_required": "cannot be left blank", + "fullname_required": "cannot be left blank", + "email_required": "cannot be left blank", + "password_required": "cannot be left blank", + "password_confirmation_required": "cannot be left blank", "password_confirmation_match": "should be the same as password" } }, From 636be3b6811150ab90b8faf3683db74a1a7ebe3e Mon Sep 17 00:00:00 2001 From: raeno Date: Wed, 5 Dec 2018 23:05:43 +0400 Subject: [PATCH 09/12] Add fallback color rule. --- src/components/registration/registration.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue index 9c40e050..dfab43b8 100644 --- a/src/components/registration/registration.vue +++ b/src/components/registration/registration.vue @@ -100,6 +100,7 @@