fix fields registration
This commit is contained in:
@@ -169,13 +169,20 @@ const messages = {
|
|||||||
email: 'inserire una email valida',
|
email: 'inserire una email valida',
|
||||||
errore_generico: 'Si prega di compilare correttamente i campi',
|
errore_generico: 'Si prega di compilare correttamente i campi',
|
||||||
atleast: 'dev\'essere lungo almeno di',
|
atleast: 'dev\'essere lungo almeno di',
|
||||||
complexity: 'deve contenere almeno 1 carattere minuscolo, 1 maiuscola e 1 cifra',
|
complexity: 'deve contenere almeno 1 minuscola, 1 maiuscola e 1 cifra',
|
||||||
notmore: 'non dev\'essere lungo più di',
|
notmore: 'non dev\'essere lungo più di',
|
||||||
char: 'caratteri',
|
char: 'caratteri',
|
||||||
terms: 'Devi accettare le condizioni, per continuare.',
|
terms: 'Devi accettare le condizioni, per continuare.',
|
||||||
duplicate_email: 'l\'Email è già stata registrata',
|
duplicate_email: 'l\'Email è già stata registrata',
|
||||||
duplicate_username: 'L\'Username è stato già utilizzato',
|
duplicate_username: 'L\'Username è stato già utilizzato',
|
||||||
sameaspassword: 'Le password devono essere identiche',
|
sameaspassword: 'Le password devono essere identiche',
|
||||||
|
},
|
||||||
|
tips: {
|
||||||
|
email: 'inserisci la tua email',
|
||||||
|
username: 'username lunga almeno 6 caratteri',
|
||||||
|
password: 'deve contenere 1 minuscola, 1 maiuscola e 1 cifra',
|
||||||
|
repeatpassword: 'ripetere la password',
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
login: {
|
login: {
|
||||||
|
|||||||
@@ -9,12 +9,11 @@
|
|||||||
|
|
||||||
<!--Prova URL : {{env('PROVA_PAOLO')}}-->
|
<!--Prova URL : {{env('PROVA_PAOLO')}}-->
|
||||||
<form>
|
<form>
|
||||||
<div class="q-gutter-md">
|
<div class="q-gutter-xs">
|
||||||
|
|
||||||
<q-input
|
<q-input
|
||||||
v-model="signin.username"
|
v-model="signin.username"
|
||||||
rounded outlined
|
rounded outlined
|
||||||
autocomplete="username"
|
|
||||||
@blur="$v.signin.username.$touch"
|
@blur="$v.signin.username.$touch"
|
||||||
:error="$v.signin.username.$error"
|
:error="$v.signin.username.$error"
|
||||||
:error-message="`${errorMsg('username', $v.signin.username)}`"
|
:error-message="`${errorMsg('username', $v.signin.username)}`"
|
||||||
|
|||||||
@@ -14,37 +14,36 @@ import { Logo } from '../../../components/logo'
|
|||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
mixins: [validationMixin],
|
mixins: [validationMixin],
|
||||||
validations: validations,
|
validations,
|
||||||
components: { Logo }
|
components: { Logo }
|
||||||
})
|
})
|
||||||
|
|
||||||
export default class Signup extends Vue {
|
export default class Signup extends Vue {
|
||||||
public $v
|
public $v
|
||||||
public $q
|
public $q
|
||||||
$t: any
|
public $t: any
|
||||||
|
|
||||||
duplicate_email: boolean = false
|
public duplicate_email: boolean = false
|
||||||
duplicate_username: boolean = false
|
public duplicate_username: boolean = false
|
||||||
|
|
||||||
public signup: ISignupOptions = {
|
public signup: ISignupOptions = {
|
||||||
email: process.env.TEST_EMAIL,
|
email: process.env.TEST_EMAIL || '',
|
||||||
username: process.env.TEST_USERNAME || '',
|
username: process.env.TEST_USERNAME || '',
|
||||||
password: process.env.TEST_PASSWORD,
|
password: process.env.TEST_PASSWORD || '',
|
||||||
repeatPassword: process.env.TEST_PASSWORD,
|
repeatPassword: process.env.TEST_PASSWORD || '',
|
||||||
terms: true
|
terms: process.env.PROD ? false : true
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public created() {
|
||||||
created() {
|
|
||||||
this.$v.$reset()
|
this.$v.$reset()
|
||||||
}
|
}
|
||||||
|
|
||||||
mounted() {
|
public mounted() {
|
||||||
}
|
}
|
||||||
|
|
||||||
get allowSubmit() {
|
get allowSubmit() {
|
||||||
|
|
||||||
let error = this.$v.$error || this.$v.$invalid
|
const error = this.$v.$error || this.$v.$invalid
|
||||||
return !error
|
return !error
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -90,8 +89,8 @@ export default class Signup extends Vue {
|
|||||||
|
|
||||||
public errorMsg(cosa: string, item: any) {
|
public errorMsg(cosa: string, item: any) {
|
||||||
try {
|
try {
|
||||||
if (!item.$error) return ''
|
if (!item.$error) { return '' }
|
||||||
if (item.$params.email && !item.email) return this.$t('reg.err.email')
|
if (item.$params.email && !item.email) { return this.$t('reg.err.email') }
|
||||||
|
|
||||||
if (cosa === 'repeatpassword') {
|
if (cosa === 'repeatpassword') {
|
||||||
if (!item.sameAsPassword) {
|
if (!item.sameAsPassword) {
|
||||||
@@ -99,26 +98,26 @@ export default class Signup extends Vue {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!item.required) return this.$t('reg.err.required')
|
if (!item.required) { return this.$t('reg.err.required') }
|
||||||
if (cosa === 'email') {
|
if (cosa === 'email') {
|
||||||
// console.log("EMAIL " + item.isUnique);
|
// console.log("EMAIL " + item.isUnique);
|
||||||
// console.log(item);
|
// console.log(item);
|
||||||
if (!item.isUnique) return this.$t('reg.err.duplicate_email')
|
if (!item.isUnique) { return this.$t('reg.err.duplicate_email') }
|
||||||
} else if (cosa === 'username') {
|
} else if (cosa === 'username') {
|
||||||
// console.log(item);
|
// console.log(item);
|
||||||
if (!item.isUnique) return this.$t('reg.err.duplicate_username')
|
if (!item.isUnique) { return this.$t('reg.err.duplicate_username') }
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!item.complexity) return this.$t('reg.err.complexity')
|
if (!item.complexity) { return this.$t('reg.err.complexity') }
|
||||||
if (!item.minLength) return this.$t('reg.err.atleast') + ` ${item.$params.minLength.min} ` + this.$t('reg.err.char')
|
if (!item.minLength) { return this.$t('reg.err.atleast') + ` ${item.$params.minLength.min} ` + this.$t('reg.err.char') }
|
||||||
if (!item.maxLength) return this.$t('reg.err.notmore') + ` ${item.$params.maxLength.max} ` + this.$t('reg.err.char')
|
if (!item.maxLength) { return this.$t('reg.err.notmore') + ` ${item.$params.maxLength.max} ` + this.$t('reg.err.char') }
|
||||||
return ''
|
return ''
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
// console.log("ERR : " + error);
|
// console.log("ERR : " + error);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
checkErrors(riscode: number) {
|
public checkErrors(riscode: number) {
|
||||||
console.log('checkErrors', riscode)
|
console.log('checkErrors', riscode)
|
||||||
if (riscode === tools.DUPLICATE_EMAIL_ID) {
|
if (riscode === tools.DUPLICATE_EMAIL_ID) {
|
||||||
tools.showNotif(this.$q, this.$t('reg.err.duplicate_email'))
|
tools.showNotif(this.$q, this.$t('reg.err.duplicate_email'))
|
||||||
@@ -127,7 +126,7 @@ export default class Signup extends Vue {
|
|||||||
} else if (riscode === tools.ERR_SERVERFETCH) {
|
} else if (riscode === tools.ERR_SERVERFETCH) {
|
||||||
tools.showNotif(this.$q, this.$t('fetch.errore_server'))
|
tools.showNotif(this.$q, this.$t('fetch.errore_server'))
|
||||||
} else if (riscode === tools.ERR_GENERICO) {
|
} else if (riscode === tools.ERR_GENERICO) {
|
||||||
let msg = this.$t('fetch.errore_generico') + UserStore.mutations.getMsgError(riscode)
|
const msg = this.$t('fetch.errore_generico') + UserStore.mutations.getMsgError(riscode)
|
||||||
tools.showNotif(this.$q, msg)
|
tools.showNotif(this.$q, msg)
|
||||||
} else if (riscode === tools.OK) {
|
} else if (riscode === tools.OK) {
|
||||||
this.$router.push('/signin')
|
this.$router.push('/signin')
|
||||||
@@ -136,8 +135,6 @@ export default class Signup extends Vue {
|
|||||||
tools.showNotif(this.$q, 'Errore num ' + riscode)
|
tools.showNotif(this.$q, 'Errore num ' + riscode)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public submitOk() {
|
public submitOk() {
|
||||||
@@ -163,7 +160,7 @@ export default class Signup extends Vue {
|
|||||||
.then((riscode) => {
|
.then((riscode) => {
|
||||||
this.checkErrors(riscode)
|
this.checkErrors(riscode)
|
||||||
this.$q.loading.hide()
|
this.$q.loading.hide()
|
||||||
}).catch(error => {
|
}).catch((error) => {
|
||||||
console.log('ERROR = ' + error)
|
console.log('ERROR = ' + error)
|
||||||
this.$q.loading.hide()
|
this.$q.loading.hide()
|
||||||
})
|
})
|
||||||
@@ -171,4 +168,3 @@ export default class Signup extends Vue {
|
|||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
<template >
|
<template>
|
||||||
<q-page padding class="signup">
|
<q-page padding class="signup">
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<p>
|
<p>
|
||||||
@@ -8,80 +8,87 @@
|
|||||||
|
|
||||||
<!--Prova URL : {{env('PROVA_PAOLO')}}-->
|
<!--Prova URL : {{env('PROVA_PAOLO')}}-->
|
||||||
|
|
||||||
<q-field
|
<div class="q-gutter-xs">
|
||||||
:error="$v.signup.email.$error"
|
|
||||||
:error-label="`${errorMsg('email', $v.signup.email)}`"
|
|
||||||
>
|
|
||||||
<q-input
|
<q-input
|
||||||
v-model="signup.email"
|
v-model="signup.email"
|
||||||
@change="val => { signup.email = val }"
|
rounded outlined
|
||||||
:before="[{icon: 'mail', handler () {}}]"
|
|
||||||
@blur="$v.signup.email.$touch"
|
@blur="$v.signup.email.$touch"
|
||||||
:error="$v.signup.email.$error"
|
:error="$v.signup.email.$error"
|
||||||
:float-label="$t('reg.email')"></q-input>
|
:error-message="errorMsg('email', $v.signup.email)"
|
||||||
</q-field>
|
bottom-slots
|
||||||
|
:label="$t('reg.email')">
|
||||||
|
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="email"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</q-input>
|
||||||
|
|
||||||
<q-field
|
|
||||||
:error="$v.signup.username.$error"
|
|
||||||
:error-label="`${errorMsg('username', $v.signup.username)}`"
|
|
||||||
>
|
|
||||||
<q-input
|
<q-input
|
||||||
v-model="signup.username"
|
v-model="signup.username"
|
||||||
@change="val => { signup.username = val }"
|
rounded outlined
|
||||||
:before="[{icon: 'person', handler () {}}]"
|
|
||||||
@blur="$v.signup.username.$touch"
|
@blur="$v.signup.username.$touch"
|
||||||
:error="$v.signup.username.$error"
|
:error="$v.signup.username.$error"
|
||||||
:float-label="$t('reg.username')"></q-input>
|
bottom-slots
|
||||||
</q-field>
|
:error-message="errorMsg('username', $v.signup.username)"
|
||||||
|
:label="$t('reg.username')">
|
||||||
|
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="person"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</q-input>
|
||||||
|
|
||||||
<q-field
|
|
||||||
:error="$v.signup.password.$error"
|
|
||||||
:error-label="`${errorMsg('password', $v.signup.password)}`"
|
|
||||||
>
|
|
||||||
<q-input
|
<q-input
|
||||||
v-model="signup.password"
|
v-model="signup.password"
|
||||||
type="password"
|
type="password"
|
||||||
:before="[{icon: 'vpn_key', handler () {}}]"
|
rounded outlined
|
||||||
@blur="$v.signup.password.$touch"
|
@blur="$v.signup.password.$touch"
|
||||||
:error="$v.signup.password.$error"
|
:error="$v.signup.password.$error"
|
||||||
:float-label="$t('reg.password')"></q-input>
|
:error-message="`${errorMsg('password', $v.signup.password)}`"
|
||||||
</q-field>
|
bottom-slots
|
||||||
|
:label="$t('reg.password')">
|
||||||
|
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="vpn_key"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</q-input>
|
||||||
|
|
||||||
<q-field
|
|
||||||
:error="$v.signup.repeatPassword.$error"
|
|
||||||
:error-label="`${errorMsg('repeatpassword', $v.signup.repeatPassword)}`"
|
|
||||||
>
|
|
||||||
<q-input
|
<q-input
|
||||||
v-model="signup.repeatPassword"
|
v-model="signup.repeatPassword"
|
||||||
type="password"
|
type="password"
|
||||||
:before="[{icon: 'vpn_key', handler () {}}]"
|
rounded outlined
|
||||||
@blur="$v.signup.repeatPassword.$touch"
|
@blur="$v.signup.repeatPassword.$touch"
|
||||||
:error="$v.signup.repeatPassword.$error"
|
:error="$v.signup.repeatPassword.$error"
|
||||||
:float-label="$t('reg.repeatPassword')"></q-input>
|
:error-message="`${errorMsg('repeatpassword', $v.signup.repeatPassword)}`"
|
||||||
</q-field>
|
bottom-slots
|
||||||
|
:label="$t('reg.repeatPassword')">
|
||||||
|
|
||||||
<q-field
|
<template v-slot:prepend>
|
||||||
:error="$v.signup.terms.$error"
|
<q-icon name="vpn_key"/>
|
||||||
:error-label="`${errorMsg('terms', $v.signup.terms)}`"
|
</template>
|
||||||
>
|
|
||||||
|
</q-input>
|
||||||
|
|
||||||
|
<!--:hint="$t('reg.tips.repeatpassword')"-->
|
||||||
|
|
||||||
<q-checkbox
|
<q-checkbox
|
||||||
v-model="signup.terms"
|
v-model="signup.terms"
|
||||||
:before="[{icon: 'vpn_key', handler () {}}]"
|
|
||||||
color="secondary"
|
color="secondary"
|
||||||
@blur="$v.signup.terms.$touch"
|
@blur="$v.signup.terms.$touch"
|
||||||
:error="$v.signup.terms.$error"
|
:error="$v.signup.terms.$error"
|
||||||
:float-label="$t('reg.terms')"
|
:error-message="`${errorMsg('terms', $v.signup.terms)}`"
|
||||||
:label="$t('reg.terms')"></q-checkbox>
|
:label="$t('reg.terms')">
|
||||||
</q-field>
|
|
||||||
|
|
||||||
<br>
|
</q-checkbox>
|
||||||
|
<br>
|
||||||
|
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<q-btn rounded size="lg" color="positive" @click="submitOk" :disabled='!allowSubmit'>{{$t('reg.submit')}}
|
<q-btn rounded size="lg" color="positive" @click="submitOk" :disabled='!allowSubmit'>
|
||||||
</q-btn>
|
{{$t('reg.submit')}}
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
|
|||||||
Reference in New Issue
Block a user