Home Page With Element ! (Modular)
Arcadei Project... Inscription
This commit is contained in:
paoloar77
@@ -0,0 +1,9 @@
|
||||
import { ISignupIscrizioneConacreisOptions } from 'model'
|
||||
import { email, minLength, required, sameAs } from 'vuelidate/lib/validators'
|
||||
|
||||
export interface ISignupConacreis {
|
||||
signup: ISignupIscrizioneConacreisOptions,
|
||||
validationGroup: string[]
|
||||
}
|
||||
|
||||
|
||||
34
src/components/CSignUpIscrizioneConacreis/CSignUpIscrizioneConacreis.scss
Executable file
34
src/components/CSignUpIscrizioneConacreis/CSignUpIscrizioneConacreis.scss
Executable file
@@ -0,0 +1,34 @@
|
||||
.signup {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
max-width: 450px;
|
||||
}
|
||||
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.clCellCode {
|
||||
border-radius: 32px;
|
||||
border-right: #2d2260;
|
||||
height: 50px;
|
||||
font-size: 1rem;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.clCell {
|
||||
border-radius: 32px;
|
||||
border-right: #2d2260;
|
||||
height: 50px;
|
||||
font-size: 1rem;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.vue-country-select{
|
||||
border-radius: 32px;
|
||||
}
|
||||
|
||||
|
||||
255
src/components/CSignUpIscrizioneConacreis/CSignUpIscrizioneConacreis.ts
Executable file
255
src/components/CSignUpIscrizioneConacreis/CSignUpIscrizioneConacreis.ts
Executable file
@@ -0,0 +1,255 @@
|
||||
import { ISignupIscrizioneConacreisOptions } from 'model'
|
||||
import { tools } from '@store/Modules/tools'
|
||||
|
||||
import { Logo } from '@/components/logo'
|
||||
import { CDate } from '@/components/CDate'
|
||||
import { CMyPage } from '@/components/CMyPage'
|
||||
|
||||
import { CTitleBanner } from '../CTitleBanner'
|
||||
import { computed, defineComponent, reactive, ref, watch } from 'vue'
|
||||
import { useQuasar } from 'quasar'
|
||||
import { useUserStore } from '@store/UserStore'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useGlobalStore } from '@store/globalStore'
|
||||
import { useI18n } from '@/boot/i18n'
|
||||
import MixinUsers from '@/mixins/mixin-users'
|
||||
import useVuelidate from '@vuelidate/core'
|
||||
import { email, minLength, required } from 'vuelidate/lib/validators'
|
||||
|
||||
// import {Loading, QSpinnerFacebook, QSpinnerGears} from 'quasar'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CSignUpIscrizioneConacreis',
|
||||
components: { Logo, CTitleBanner, CDate, CMyPage },
|
||||
|
||||
setup() {
|
||||
const $q = useQuasar()
|
||||
const userStore = useUserStore()
|
||||
const $router = useRouter()
|
||||
const globalStore = useGlobalStore()
|
||||
const { t } = useI18n()
|
||||
|
||||
// @ts-ignore
|
||||
const v$ = useVuelidate(validations, signup)
|
||||
|
||||
const countryname = ref('')
|
||||
const countryborn = ref('')
|
||||
const iamadult = ref(false)
|
||||
|
||||
const duplicate_email = ref(false)
|
||||
const duplicate_username = ref(false)
|
||||
|
||||
const { mySurname, Email, myCell } = MixinUsers()
|
||||
|
||||
const { getMyUsername } = MixinUsers()
|
||||
|
||||
const signup = ref({
|
||||
accetta_carta_costituzionale_on: false,
|
||||
newsletter_on: false,
|
||||
terms: false
|
||||
} as ISignupIscrizioneConacreisOptions)
|
||||
|
||||
const validations: any = computed(() => {
|
||||
const valid: any = {
|
||||
signup: {
|
||||
name: {
|
||||
required
|
||||
},
|
||||
surname: {
|
||||
required
|
||||
},
|
||||
email: {
|
||||
email,
|
||||
required
|
||||
},
|
||||
fiscalcode: {
|
||||
required,
|
||||
minLength: minLength(16)
|
||||
},
|
||||
residency_address: {
|
||||
required
|
||||
},
|
||||
residency_city: {
|
||||
required
|
||||
},
|
||||
residency_province: {
|
||||
required
|
||||
},
|
||||
residency_zipcode: {
|
||||
required
|
||||
},
|
||||
dateofbirth: {
|
||||
required
|
||||
},
|
||||
born_city: {
|
||||
required
|
||||
},
|
||||
born_province: {
|
||||
required
|
||||
},
|
||||
born_country: {
|
||||
required
|
||||
},
|
||||
metodo_pagamento: {
|
||||
required
|
||||
},
|
||||
terms: {
|
||||
required
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
return valid
|
||||
})
|
||||
|
||||
function created() {
|
||||
if (!!getMyUsername() && (!userStore.my.profile.socio)) {
|
||||
signup.value.name = userStore.my.name
|
||||
signup.value.surname = mySurname.toString()
|
||||
signup.value.email = Email.toString()
|
||||
signup.value.cell_phone = myCell.toString()
|
||||
}
|
||||
v$.value.$reset()
|
||||
}
|
||||
|
||||
function allowSubmit() {
|
||||
|
||||
const error = v$.value.$error || v$.value.$invalid
|
||||
|
||||
// console.log('v', v$, 'error', error, 'terms', signup.value.terms, 'carta', signup.value.accetta_carta_costituzionale_on)
|
||||
return !error && signup.value.terms && signup.value.accetta_carta_costituzionale_on
|
||||
}
|
||||
|
||||
function errorMsg(cosa: string, item: any) {
|
||||
try {
|
||||
if (!item.$error) {
|
||||
return ''
|
||||
}
|
||||
console.log('item', item)
|
||||
// console.log('errorMsg', cosa, item)
|
||||
if (item.$params.email && !item.email) {
|
||||
return t('reg.err.email')
|
||||
}
|
||||
|
||||
// console.log('item', item)
|
||||
|
||||
if (item.minLength !== undefined) {
|
||||
if (!item.minLength) {
|
||||
return t('reg.err.atleast') + ` ${item.$params.minLength.min} ` + t('reg.err.char')
|
||||
}
|
||||
}
|
||||
if (item.complexity !== undefined) {
|
||||
if (!item.complexity) {
|
||||
return t('reg.err.complexity')
|
||||
}
|
||||
}
|
||||
// if (!item.maxLength) { return t('reg.err.notmore') + ` ${item.$params.maxLength.max} ` + t('reg.err.char') }
|
||||
|
||||
if (item.required !== undefined) {
|
||||
if (!item.required) {
|
||||
return t('reg.err.required')
|
||||
}
|
||||
}
|
||||
|
||||
// console.log(' ....avanti')
|
||||
if (cosa === 'email') {
|
||||
// console.log("EMAIL " + item.isUnique);
|
||||
// console.log(item);
|
||||
if (!item.isUnique) {
|
||||
return t('reg.err.duplicate_email')
|
||||
}
|
||||
} else if (cosa === 'username') {
|
||||
// console.log(item);
|
||||
console.log('username')
|
||||
console.log(item.$error)
|
||||
if (!item.isUnique) {
|
||||
return t('reg.err.duplicate_username')
|
||||
}
|
||||
} else if ((cosa === 'name') || (cosa === 'surname')) {
|
||||
// console.log(item);
|
||||
}
|
||||
|
||||
return ''
|
||||
} catch (error) {
|
||||
// console.log("ERR : " + error);
|
||||
}
|
||||
}
|
||||
|
||||
function submitOk() {
|
||||
v$.value.signup.value.touch()
|
||||
|
||||
if (signup.value) {
|
||||
signup.value.email = tools.removespaces(signup.value.email!)
|
||||
signup.value.email = signup.value.email.toLowerCase()
|
||||
|
||||
signup.value.residency_country = tools.CapitalizeAllWords(signup.value.residency_country)
|
||||
signup.value.residency_address = tools.CapitalizeAllWords(signup.value.residency_address)
|
||||
signup.value.residency_city = tools.CapitalizeAllWords(signup.value.residency_city)
|
||||
signup.value.residency_province = signup.value.residency_province!.toUpperCase()
|
||||
signup.value.born_province = signup.value.born_province!.toUpperCase()
|
||||
|
||||
duplicate_email.value = false
|
||||
duplicate_username.value = false
|
||||
|
||||
if (!signup.value.terms) {
|
||||
tools.showNotif($q, t('reg.err.terms'))
|
||||
return
|
||||
}
|
||||
|
||||
if (!signup.value.accetta_carta_costituzionale_on) {
|
||||
tools.showNotif($q, t('reg.err.accetta_carta_costituzionale_on'))
|
||||
return
|
||||
}
|
||||
|
||||
if (v$.value.signup.value.$error) {
|
||||
tools.showNotif($q, t('reg.err.errore_generico'))
|
||||
return
|
||||
}
|
||||
|
||||
signup.value.name = tools.CapitalizeAllWords(signup.value.name)
|
||||
signup.value.surname = tools.CapitalizeAllWords(signup.value.surname)
|
||||
signup.value.annoTesseramento = 2023
|
||||
|
||||
$q.loading.show({ message: t('reg.iscrizioneincorso') })
|
||||
|
||||
console.log(signup)
|
||||
return userStore.iscrivitiConacreis(tools.clone(signup))
|
||||
.then((ris) => {
|
||||
if (tools.SignUpcheckErrors($q, $router, ris.code, ris.msg))
|
||||
$q.loading.hide()
|
||||
}).catch((error: any) => {
|
||||
console.log('ERROR = ' + error)
|
||||
$q.loading.hide()
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function selectcountry({ name, iso2, dialCode }: {name: string, iso2: string, dialCode: string}) {
|
||||
// console.log(name, iso2, dialCode)
|
||||
signup.value.residency_country = name
|
||||
countryname.value = name
|
||||
}
|
||||
|
||||
function selectcountryborn({ name, iso2, dialCode }: {name: string, iso2: string, dialCode: string}) {
|
||||
// console.log(name, iso2, dialCode)
|
||||
signup.value.born_country = name
|
||||
countryborn.value = name
|
||||
}
|
||||
|
||||
created()
|
||||
|
||||
return {
|
||||
tools,
|
||||
selectcountryborn,
|
||||
selectcountry,
|
||||
submitOk,
|
||||
errorMsg,
|
||||
allowSubmit,
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
299
src/components/CSignUpIscrizioneConacreis/CSignUpIscrizioneConacreis.vue
Executable file
299
src/components/CSignUpIscrizioneConacreis/CSignUpIscrizioneConacreis.vue
Executable file
@@ -0,0 +1,299 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="text-center">
|
||||
<logo></logo>
|
||||
<CTitleBanner :title="$t('pages.SignUpIscrizione')" :canopen="true" :visible="false">
|
||||
|
||||
<div class="q-gutter-xs">
|
||||
|
||||
<p class="q-ml-md text-center">
|
||||
Leggi
|
||||
<span class="underline"> <router-link to="/il-nostro-progetto" custom v-slot="{ navigate }">
|
||||
<span class="footer_link" @click="navigate" @keypress.enter="navigate" role="link">Il Nostro Progetto</span>
|
||||
</router-link></span>
|
||||
</p>
|
||||
|
||||
|
||||
<q-input
|
||||
v-model="signup.name"
|
||||
rounded outlined
|
||||
@blur="v$.signup.name.$touch"
|
||||
:error="v$.signup.name.$error"
|
||||
maxlength="30"
|
||||
:error-message="errorMsg('name', v$.signup.name)"
|
||||
:label="$t('reg.name')">
|
||||
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="person"/>
|
||||
</template>
|
||||
|
||||
</q-input>
|
||||
|
||||
<q-input
|
||||
v-model="signup.surname"
|
||||
rounded outlined
|
||||
@blur="v$.signup.surname.$touch"
|
||||
:error="v$.signup.surname.$error"
|
||||
maxlength="30"
|
||||
:error-message="errorMsg('surname', v$.signup.surname)"
|
||||
:label="$t('reg.surname')">
|
||||
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="person"/>
|
||||
</template>
|
||||
|
||||
</q-input>
|
||||
|
||||
<q-input
|
||||
v-model="signup.email"
|
||||
rounded outlined
|
||||
@blur="v$.signup.email.$touch"
|
||||
:error="v$.signup.email.$error"
|
||||
:error-message="errorMsg('email', v$.signup.email)"
|
||||
maxlength="50"
|
||||
debounce="1000"
|
||||
:label="$t('reg.email')">
|
||||
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="email"/>
|
||||
</template>
|
||||
|
||||
</q-input>
|
||||
|
||||
<q-input
|
||||
v-model="signup.fiscalcode"
|
||||
rounded outlined
|
||||
@blur="v$.signup.fiscalcode.$touch"
|
||||
:error="v$.signup.fiscalcode.$error"
|
||||
maxlength="20"
|
||||
mask="AAAAAA##A##A###A"
|
||||
debounce="1000"
|
||||
:error-message="errorMsg('fiscalcode', v$.signup.fiscalcode)"
|
||||
:label="$t('reg.fiscalcode')">
|
||||
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="person"/>
|
||||
</template>
|
||||
|
||||
</q-input>
|
||||
|
||||
<q-input
|
||||
v-model="signup.residency_address"
|
||||
rounded outlined
|
||||
@blur="v$.signup.residency_address.$touch"
|
||||
:error="v$.signup.residency_address.$error"
|
||||
maxlength="60"
|
||||
debounce="1000"
|
||||
:error-message="errorMsg('residency_address', v$.signup.residency_address)"
|
||||
:label="$t('reg.residency_address')">
|
||||
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="person"/>
|
||||
</template>
|
||||
|
||||
</q-input>
|
||||
|
||||
<q-input
|
||||
v-model="signup.residency_city"
|
||||
rounded outlined
|
||||
@blur="v$.signup.residency_city.$touch"
|
||||
:error="v$.signup.residency_city.$error"
|
||||
maxlength="60"
|
||||
debounce="1000"
|
||||
:error-message="errorMsg('residency_city', v$.signup.residency_city)"
|
||||
:label="$t('reg.residency_city')">
|
||||
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="person"/>
|
||||
</template>
|
||||
|
||||
</q-input>
|
||||
|
||||
<q-input
|
||||
v-model="signup.residency_province"
|
||||
rounded outlined
|
||||
@blur="v$.signup.residency_province.$touch"
|
||||
:error="v$.signup.residency_province.$error"
|
||||
maxlength="3"
|
||||
debounce="1000"
|
||||
:error-message="errorMsg('residency_province', v$.signup.residency_province)"
|
||||
:label="$t('reg.residency_province')">
|
||||
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="person"/>
|
||||
</template>
|
||||
|
||||
</q-input>
|
||||
|
||||
<q-input
|
||||
v-model="signup.residency_zipcode"
|
||||
rounded outlined
|
||||
@blur="v$.signup.residency_zipcode.$touch"
|
||||
:error="v$.signup.residency_zipcode.$error"
|
||||
maxlength="10"
|
||||
debounce="1000"
|
||||
:error-message="errorMsg('residency_zipcode', v$.signup.residency_zipcode)"
|
||||
:label="$t('reg.residency_zipcode')">
|
||||
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="person"/>
|
||||
</template>
|
||||
|
||||
</q-input>
|
||||
|
||||
<q-input
|
||||
v-model="countryname"
|
||||
:readonly="true"
|
||||
rounded outlined
|
||||
|
||||
debounce="1000"
|
||||
:label="$t('reg.nationality')">
|
||||
|
||||
<template v-slot:prepend>
|
||||
<vue-country-code
|
||||
@onSelect="selectcountry"
|
||||
:preferredCountries="tools.getprefCountries"
|
||||
:dropdownOptions="{ disabledDialCode: true }"
|
||||
>
|
||||
|
||||
</vue-country-code>
|
||||
</template>
|
||||
|
||||
</q-input>
|
||||
|
||||
<br>
|
||||
|
||||
<vue-tel-input
|
||||
v-model="signup.cell_phone"
|
||||
:placeholder="$t('reg.cell')"
|
||||
maxlength="20"
|
||||
debounce="1000"
|
||||
:enabledCountryCode="true"
|
||||
inputClasses="clCell"
|
||||
wrapperClasses="clCellCode">
|
||||
</vue-tel-input>
|
||||
|
||||
<br>
|
||||
|
||||
<q-input
|
||||
v-model="signup.dateofbirth"
|
||||
debounce="1000"
|
||||
@blur="v$.signup.dateofbirth.$touch"
|
||||
:error="v$.signup.dateofbirth.$error"
|
||||
:error-message="errorMsg('dateofbirth', v$.signup.dateofbirth)"
|
||||
stack-label
|
||||
:label="$t('reg.dateofbirth')"
|
||||
rounded
|
||||
type="date"
|
||||
mask="date"
|
||||
fill-mask
|
||||
outlined>
|
||||
</q-input>
|
||||
|
||||
<q-input
|
||||
v-model="signup.born_city"
|
||||
rounded outlined
|
||||
@blur="v$.signup.born_city.$touch"
|
||||
:error="v$.signup.born_city.$error"
|
||||
maxlength="60"
|
||||
debounce="1000"
|
||||
:error-message="errorMsg('born_city', v$.signup.born_city)"
|
||||
:label="$t('reg.born_city')">
|
||||
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="person"/>
|
||||
</template>
|
||||
|
||||
</q-input>
|
||||
|
||||
<q-input
|
||||
v-model="signup.born_province"
|
||||
rounded outlined
|
||||
@blur="v$.signup.born_province.$touch"
|
||||
:error="v$.signup.born_province.$error"
|
||||
maxlength="3"
|
||||
debounce="1000"
|
||||
:error-message="errorMsg('born_province', v$.signup.born_province)"
|
||||
:label="$t('reg.born_province')">
|
||||
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="person"/>
|
||||
</template>
|
||||
|
||||
</q-input>
|
||||
|
||||
<!--<CDate :mydate="signup.dateofbirth" @input="setDateOfBirth(arguments[0])"
|
||||
:rounded="true" :outlined="true"
|
||||
:dense="false"
|
||||
:label="$t('reg.dateofbirth')">
|
||||
</CDate>-->
|
||||
|
||||
|
||||
<q-input
|
||||
v-model="countryborn"
|
||||
:readonly="true"
|
||||
rounded outlined
|
||||
|
||||
debounce="1000"
|
||||
:label="$t('reg.nationality_born')">
|
||||
|
||||
<template v-slot:prepend>
|
||||
<vue-country-code
|
||||
@onSelect="selectcountryborn"
|
||||
:preferredCountries="tools.getprefCountries"
|
||||
:dropdownOptions="{ disabledDialCode: true }"
|
||||
>
|
||||
|
||||
</vue-country-code>
|
||||
</template>
|
||||
|
||||
</q-input>
|
||||
|
||||
<br>
|
||||
|
||||
<!--<div v-if="!tools.isMobile()"><br></div>-->
|
||||
|
||||
|
||||
<q-select
|
||||
rounded outlined v-model="signup.metodo_pagamento"
|
||||
:options="tools.SelectMetodiPagamento"
|
||||
:label="$t('reg.metodopagamento')" emit-value map-options>
|
||||
</q-select>
|
||||
|
||||
<q-checkbox
|
||||
v-model="signup.accetta_carta_costituzionale_on"
|
||||
color="secondary">
|
||||
<span v-html="$t('reg.accetta_carta_costituzionale_on')"></span>
|
||||
</q-checkbox>
|
||||
|
||||
<q-checkbox
|
||||
v-model="signup.terms"
|
||||
color="secondary"
|
||||
@blur="v$.signup.terms.$touch"
|
||||
:error="v$.signup.terms.$error"
|
||||
:error-message="`${errorMsg('terms', v$.signup.terms)}`"
|
||||
:label="$t('reg.terms')">
|
||||
|
||||
</q-checkbox>
|
||||
|
||||
|
||||
<div class="wrapper">
|
||||
<q-btn rounded size="lg" color="positive" @click="submitOk" :disabled='!allowSubmit'
|
||||
:label="$t('reg.iscriviti')">
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
</div>
|
||||
</CTitleBanner>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./CSignUpIscrizioneConacreis.ts">
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './CSignUpIscrizioneConacreis.scss';
|
||||
</style>
|
||||
1
src/components/CSignUpIscrizioneConacreis/index.ts
Executable file
1
src/components/CSignUpIscrizioneConacreis/index.ts
Executable file
@@ -0,0 +1 @@
|
||||
export {default as CSignUpIscrizioneConacreis} from './CSignUpIscrizioneConacreis.vue'
|
||||
Reference in New Issue
Block a user