Better styling for client-side validation. Add I18n for validation errors.
This commit is contained in:
raeno
parent
2b903f790d
commit
f9ff839b1a
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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": "Прикреплённые файлы",
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue