fix fields registration

This commit is contained in:
Paolo Arena
2019-03-13 14:23:25 +01:00
parent 9376b397d7
commit 313963d14b
4 changed files with 81 additions and 72 deletions

View File

@@ -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: {

View File

@@ -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)}`"

View File

@@ -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 {
} }
} }

View File

@@ -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>
<!-- <!--