diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/registration/registration.js | 30 | ||||
| -rw-r--r-- | src/components/registration/registration.vue | 41 | ||||
| -rw-r--r-- | src/i18n/en.json | 10 | ||||
| -rw-r--r-- | src/i18n/ru.json | 10 | ||||
| -rw-r--r-- | src/modules/users.js | 17 |
5 files changed, 85 insertions, 23 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 { diff --git a/src/i18n/en.json b/src/i18n/en.json index 8fd546ef..6e13993f 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -72,7 +72,15 @@ "fullname": "Display name", "password_confirm": "Password confirmation", "registration": "Registration", - "token": "Invite token" + "token": "Invite token", + "validations": { + "username_required": "username should not be blank", + "email_required": "should not be blank", + "email_valid": "should be valid email", + "password_required": "should not be blank", + "password_confirmation_required": "should not be blank", + "password_confirmation_match": "should be the same as password" + } }, "settings": { "attachmentRadius": "Attachments", diff --git a/src/i18n/ru.json b/src/i18n/ru.json index 9c28ccf4..de2774ef 100644 --- a/src/i18n/ru.json +++ b/src/i18n/ru.json @@ -55,7 +55,15 @@ "fullname": "Отображаемое имя", "password_confirm": "Подтверждение пароля", "registration": "Регистрация", - "token": "Код приглашения" + "token": "Код приглашения", + "validations": { + "username_required": "не должно быть пустым", + "email_required": "не должен быть пустым", + "email_valid": "должен быть корректный email адрес", + "password_required": "не должен быть пустым", + "password_confirmation_required": "не должно быть пустым", + "password_confirmation_match": "должно совпадать с паролем" + } }, "settings": { "attachmentRadius": "Прикреплённые файлы", diff --git a/src/modules/users.js b/src/modules/users.js index 572a62c6..5ed8e46b 100644 --- a/src/modules/users.js +++ b/src/modules/users.js @@ -52,13 +52,14 @@ export const mutations = { }, [SIGN_UP.PENDING] (state) { state[SIGN_UP.isPending] = true + state[SIGN_UP.errors] = [] }, [SIGN_UP.SUCCESS] (state) { state[SIGN_UP.isPending] = false }, [SIGN_UP.FAILURE] (state, errors) { state[SIGN_UP.isPending] = false - state[SIGN_UP.errors] = [...state[SIGN_UP.errors], ...errors] + state[SIGN_UP.errors] = errors } } @@ -97,27 +98,29 @@ const users = { async signUp (store, userInfo) { store.commit(SIGN_UP.PENDING) - let response = await store.rootState.api.backendInteractor.register(userInfo) + let rootState = store.rootState + + let response = await rootState.api.backendInteractor.register(userInfo) if (response.ok) { const data = { - oauth: store.state.oauth, - instance: store.state.instance.server + oauth: rootState.oauth, + instance: rootState.instance.server } let app = await oauthApi.getOrCreateApp(data) let result = await oauthApi.getTokenWithCredentials({ app, instance: data.instance, - username: this.user.username, - password: this.user.password + username: userInfo.username, + password: userInfo.password }) store.commit(SIGN_UP.SUCCESS) store.commit('setToken', result.access_token) store.dispatch('loginUser', result.access_token) - this.$router.push('/main/friends') } else { let data = await response.json() let errors = humanizeErrors(JSON.parse(data.error)) store.commit(SIGN_UP.FAILURE, errors) + throw Error(errors) } }, logout (store) { |