surya/salvato.newfreeplanet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

other components... (2)

Browse Source
This commit is contained in:
Paolo Arena
2021-09-16 21:08:02 +02:00
parent fcc4f61f07
commit f351673917
276 changed files with 17183 additions and 3371 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/CSignUp/CSignUp-validate.ts
View File

@@ -1,39 +1,41 @@
import { ISignupOptions } from 'model'
import { email, minLength, required, sameAs } from 'vuelidate/lib/validators'
import { email, minLength, required, sameAs } from '@vuelidate/validators'
// import { ValidationRuleset } from 'vuelidate'
import { complexity, registeredemail, registereduser, aportadorexist } from '../../validation'
import { computed } from 'vue'
export interface TSignup { signup: ISignupOptions, validationGroup: string[] }
export interface TSignup {
signup: ISignupOptions,
validationGroup: string[]
}
export const validations = {
signup: {
repeatPassword: {
required,
sameAsPassword: sameAs('password')
},
password: {
required,
minLength: minLength(8),
complexity
},
username: {
required,
minLength: minLength(6),
registereduser
},
name: {
required
},
surname: {
required
},
email: {
email,
registeredemail,
required
},
terms: {
required
}
}
repeatPassword: {
required,
sameAsPassword: sameAs('password'),
},
password: {
required,
minLength: minLength(8),
complexity,
},
username: {
required,
minLength: minLength(6),
registereduser,
},
name: {
required,
},
surname: {
required,
},
email: {
email,
registeredemail,
required,
},
terms: {
required,
},
}

417
src/components/CSignUp/CSignUp.ts
View File

@@ -1,246 +1,241 @@
import Vue from 'vue'
import { Component, Prop, Watch } from 'vue-property-decorator'
import { UserStore } from '@store'
import { tools } from '../../store/Modules/tools'
import { toolsext } from '@src/store/Modules/toolsext'
import { tools } from '@store/Modules/tools'
import { ISignupOptions, IUserState, IUserFields } from 'model'
import { ISignupOptions } from 'model'
import { validations, TSignup } from './CSignUp-validate'
import { validationMixin } from 'vuelidate'
import { Logo } from '../../components/logo'
import { DefaultProfile } from '../../store/Modules/UserStore'
// import 'vue-country-code/dist/vue-country-code.css'
import { serv_constants } from '@src/store/Modules/serv_constants'
import VueCountryCode from 'vue-country-code'
import { registereduser } from '../../validation'
import MixinBase from '../../mixins/mixin-base'
import { CTitleBanner } from '../CTitleBanner'
import { computed, defineComponent, reactive, ref } from 'vue'
import { CSignIn } from '@/components/CSignIn'
import { useQuasar } from 'quasar'
import { useI18n } from '@/boot/i18n'
import { DefaultProfile, useUserStore } from '@store/UserStore'
import useValidate from '@vuelidate/core'
import useVuelidate from '@vuelidate/core'
import 'vue3-tel-input/dist/vue3-tel-input.css'
Vue.use(VueCountryCode)
// import {Loading, QSpinnerFacebook, QSpinnerGears} from 'quasar'
@Component({
export default defineComponent({
name: 'CSignUp',
mixins: [validationMixin],
validations,
components: { Logo, CTitleBanner }
})
components: { Logo, CTitleBanner },
props: {
showadultcheck: {
type: Boolean,
required: false,
default: false,
},
showcell: {
type: Boolean,
required: false,
default: false,
},
shownationality: {
type: Boolean,
required: false,
default: false,
},
},
setup(props, { emit }) {
const $q = useQuasar()
const { t } = useI18n()
const userStore = useUserStore()
export default class CSignUp extends MixinBase {
@Prop({ required: false, default: false }) public showadultcheck: boolean
@Prop({ required: false, default: false }) public showcell: boolean
@Prop({ required: false, default: false }) public shownationality: boolean
public $v
public $q
public $t: any
public countryname: string = ''
public iamadult: boolean = false
const countryname = ref('')
const iamadult = ref(false)
const duplicate_email = ref(false)
const duplicate_username = ref(false)
public duplicate_email: boolean = false
public duplicate_username: boolean = false
const signup = reactive(<ISignupOptions> {
email: process.env.TEST_EMAIL || '',
username: process.env.TEST_USERNAME || '',
name: process.env.TEST_NAME || '',
surname: process.env.TEST_SURNAME || '',
password: process.env.TEST_PASSWORD || '',
repeatPassword: process.env.TEST_PASSWORD || '',
terms: !process.env.PROD,
profile: DefaultProfile,
aportador_solidario: '',
})
public signup: ISignupOptions = {
email: process.env.TEST_EMAIL || '',
username: process.env.TEST_USERNAME || '',
name: process.env.TEST_NAME || '',
surname: process.env.TEST_SURNAME || '',
password: process.env.TEST_PASSWORD || '',
repeatPassword: process.env.TEST_PASSWORD || '',
terms: !process.env.PROD,
profile: DefaultProfile,
aportador_solidario: '',
}
// @ts-ignore
const v$ = useVuelidate(validations, signup)
public created() {
this.$v.$reset()
}
function allowSubmit() {
get allowSubmit() {
let error = v$.value.$error || v$.value.$invalid
let error = this.$v.$error || this.$v.$invalid
if (props.showadultcheck)
error = error || !iamadult.value
if (this.showadultcheck)
error = error || !this.iamadult
if (this.showcell)
error = error || this.signup.profile.cell.length <= 6
return !error
}
/*
validations: {
isAsync: true,
form: {
email: {
required, email,
isUnique: value => {
if (value === '') return true;
return axios.get(process.env.MONGODB_HOST + '/email/' + value)
.then(res => {
return (res.status !== 200)
}).catch((e) => {
return true;
})
}
},
password: {required, minLength: minLength(8), maxLength: maxLength(20)},
username: {
required, minLength: minLength(6), maxLength: maxLength(20),
isUnique: value => {
if (value === '') return true;
return axios.get(process.env.MONGODB_HOST + '/users/' + value)
.then(res => {
return (res.status !== 200)
}).catch((e) => {
return true;
})
}
},
repeatPassword: {
sameAsPassword: sameAs('password')
},
terms: {required},
if (props.showcell) {
if (signup.profile)
error = error || signup.profile.cell!.length <= 6
else
error = true
}
return !error
}
}, */
public env() {
return process.env
}
public errorMsg(cosa: string, item: any) {
try {
if (!item.$error) {
function env() {
return process.env
}
function errorMsg(cosa: string, item: any) {
try {
if (!item.$error) {
return ''
}
console.log('errorMsg', cosa, item)
if (cosa === 'repeatpassword') {
if (!item.sameAsPassword) {
return t('reg.err.sameaspassword')
}
}
if (item.email) {
if (item.email.$invalid)
return t('reg.err.email')
}
if (item.minLength !== undefined) {
if (item.minLength.$invalid) {
return t('reg.err.atleast') + ` ${item.minLength.$params.min} ` + t('reg.err.char')
}
}
if (item.complexity !== undefined) {
if (item.complexity.$invalid) {
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.$invalid) {
console.log('required')
return t('reg.err.required')
}
}
console.log(' cosa', cosa)
// console.log(' ....avanti')
if (cosa === 'email') {
// console.log("EMAIL " + item.isUnique);
// console.log(item);
if (!item.email.$invalid) {
return t('reg.err.duplicate_email')
}
} else if (cosa === 'username') {
// console.log(item);
console.log('username')
console.log(item.$error)
if (!item.registereduser.$invalid) {
return t('reg.err.duplicate_username')
}
} else if (cosa === 'aportador_solidario') {
// console.log(item);
if (!item.aportadorexist) {
// console.log('!item.aportadorexist !')
return t('reg.err.aportador_not_exist')
}
} else if ((cosa === 'name') || (cosa === 'surname')) {
// console.log(item);
}
return ''
} catch (error) {
// console.log("ERR : " + error);
}
console.log('item', item)
// console.log('errorMsg', cosa, item)
if (item.$params.email && !item.email) {
return this.$t('reg.err.email')
}
if (cosa === 'repeatpassword') {
if (!item.sameAsPassword) {
return this.$t('reg.err.sameaspassword')
}
}
// console.log('item', item)
if (item.minLength !== undefined) {
if (!item.minLength) {
return this.$t('reg.err.atleast') + ` ${item.$params.minLength.min} ` + this.$t('reg.err.char')
}
}
if (item.complexity !== undefined) {
if (!item.complexity) {
return this.$t('reg.err.complexity')
}
}
// if (!item.maxLength) { return this.$t('reg.err.notmore') + ` ${item.$params.maxLength.max} ` + this.$t('reg.err.char') }
if (item.required !== undefined) {
if (!item.required) {
return this.$t('reg.err.required')
}
}
// console.log(' ....avanti')
if (cosa === 'email') {
// console.log("EMAIL " + item.isUnique);
// console.log(item);
if (!item.isUnique) {
return this.$t('reg.err.duplicate_email')
}
} else if (cosa === 'username') {
// console.log(item);
console.log('username')
console.log(item.$error)
if (!item.isUnique) {
return this.$t('reg.err.duplicate_username')
}
} else if (cosa === 'aportador_solidario') {
// console.log(item);
if (!item.aportadorexist) {
// console.log('!item.aportadorexist !')
return this.$t('reg.err.aportador_not_exist')
}
} else if ((cosa === 'name') || (cosa === 'surname')) {
// console.log(item);
}
return ''
} catch (error) {
// console.log("ERR : " + error);
}
}
public changeemail(value) {
this.signup.email = tools.removespaces(this.signup.email)
this.signup.email = this.signup.email.toLowerCase()
this.$emit('update:value', this.signup.email)
}
public changeusername(value) {
this.signup.username = tools.removespaces(this.signup.username)
this.$emit('update:value', this.signup.username)
}
public submitOk() {
this.$v.signup.$touch()
this.signup.email = tools.removespaces(this.signup.email)
this.signup.email = this.signup.email.toLowerCase()
this.signup.username = tools.removespaces(this.signup.username)
this.duplicate_email = false
this.duplicate_username = false
if (!this.signup.terms) {
tools.showNotif(this.$q, this.$t('reg.err.terms'))
return
}
if (this.$v.signup.$error) {
tools.showNotif(this.$q, this.$t('reg.err.errore_generico'))
return
function changeemail() {
signup.email = tools.removespaces(signup.email!)
signup.email = signup.email.toLowerCase()
emit('update:value', signup.email)
}
this.signup.name = tools.CapitalizeAllWords(this.signup.name)
this.signup.surname = tools.CapitalizeAllWords(this.signup.surname)
function changeusername(value: string) {
signup.username = tools.removespaces(signup.username)
emit('update:value', signup.username)
}
this.$q.loading.show({ message: this.$t('reg.incorso') })
function submitOk() {
v$.value.$touch()
console.log(this.signup)
return UserStore.actions.signup(tools.clone(this.signup))
.then((ris) => {
if (tools.SignUpcheckErrors(this, ris.code, ris.msg))
this.$q.loading.hide()
}).catch((error) => {
console.log('ERROR = ' + error)
this.$q.loading.hide()
})
signup.email = tools.removespaces(signup.email!)
signup.email = signup.email.toLowerCase()
signup.username = tools.removespaces(signup.username)
}
duplicate_email.value = false
duplicate_username.value = false
public intcode_change(coderec) {
// console.log('intcode', coderec)
this.signup.profile.intcode_cell = '+' + coderec.dialCode
this.signup.profile.iso2_cell = coderec.iso2
}
if (!signup.terms) {
tools.showNotif($q, t('reg.err.terms'))
return
}
public selectcountry({ name, iso2, dialCode }) {
// console.log(name, iso2, dialCode)
this.signup.profile.nationality = iso2
this.countryname = name
}
/*if (v$.signup.$error) {
tools.showNotif($q, t('reg.err.errore_generico'))
return
} */
public inputUsername(value) {
this.signup.username = value.trim()
}
signup.name = tools.CapitalizeAllWords(signup.name)
signup.surname = tools.CapitalizeAllWords(signup.surname)
}
$q.loading.show({ message: t('reg.incorso') })
console.log(signup)
return userStore.signup(tools.clone(signup))
.then((ris: any) => {
if (tools.SignUpcheckErrors($q, ris.code, ris.msg))
$q.loading.hide()
}).catch((error: string) => {
console.log('ERROR = ' + error)
$q.loading.hide()
})
}
function intcode_change(coderec: any) {
// console.log('intcode', coderec)
if (signup.profile) {
signup.profile.intcode_cell = '+' + coderec.dialCode
signup.profile.iso2_cell = coderec.iso2
}
}
function selectcountry({ name, iso2, dialCode }: { name: string, iso2: string, dialCode: string }) {
// console.log(name, iso2, dialCode)
signup.profile.nationality = iso2
countryname.value = name
}
function inputUsername(value: string) {
signup.username = value.trim()
}
return {
errorMsg,
changeemail,
changeusername,
submitOk,
inputUsername,
selectcountry,
intcode_change,
tools,
countryname,
signup,
iamadult,
v$,
allowSubmit,
}
},
})

75
src/components/CSignUp/CSignUp.vue
View File

@@ -13,12 +13,12 @@
<q-input
v-model="signup.email"
rounded outlined
@blur="$v.signup.email.$touch"
@input="changeemail"
:error="$v.signup.email.$error"
:error-message="errorMsg('email', $v.signup.email)"
@blur="v$.email.$touch"
@input="changeemail()"
:error="v$.email.$error"
:error-message="errorMsg('email', v$.email)"
maxlength="50"
debounce="1000"
debounce="3000"
:label="$t('reg.email')">
<template v-slot:prepend>
@@ -30,15 +30,13 @@
<q-input
v-model="signup.username"
rounded outlined
@blur="v$.username.$touch"
@input="changeusername"
@blur="$v.signup.username.$touch"
:error="$v.signup.username.$error"
@keydown.native.54="(event) => event.preventDefault()"
@keydown.native.52="(event) => event.preventDefault()"
:error="v$.username.$error"
@keydown.space="(event) => event.preventDefault()"
maxlength="20"
debounce="1000"
:error-message="errorMsg('username', $v.signup.username)"
:error-message="errorMsg('username', v$.username)"
:label="$t('reg.username')">
<template v-slot:prepend>
@@ -50,11 +48,11 @@
<q-input
v-model="signup.name"
rounded outlined
@blur="$v.signup.name.$touch"
:error="$v.signup.name.$error"
@blur="v$.name.$touch"
:error="v$.name.$error"
maxlength="30"
debounce="1000"
:error-message="errorMsg('name', $v.signup.name)"
:error-message="errorMsg('name', v$.name)"
:label="$t('reg.name')">
<template v-slot:prepend>
@@ -66,11 +64,11 @@
<q-input
v-model="signup.surname"
rounded outlined
@blur="$v.signup.surname.$touch"
:error="$v.signup.surname.$error"
:error="v$.surname.$error"
@blur="v$.surname.$touch"
maxlength="30"
debounce="1000"
:error-message="errorMsg('surname', $v.signup.surname)"
:error-message="errorMsg('surname', v$.surname)"
:label="$t('reg.surname')">
<template v-slot:prepend>
@@ -83,10 +81,11 @@
v-model="signup.password"
type="password"
rounded outlined
@blur="$v.signup.password.$touch"
:error="$v.signup.password.$error"
:error-message="`${errorMsg('password', $v.signup.password)}`"
@blur="v$.password.$touch"
:error="v$.password.$error"
:error-message="`${errorMsg('password', v$.password)}`"
maxlength="30"
debounce="1000"
:label="$t('reg.password')">
<template v-slot:prepend>
@@ -100,9 +99,9 @@
type="password"
maxlength="30"
rounded outlined
@blur="$v.signup.repeatPassword.$touch"
:error="$v.signup.repeatPassword.$error"
:error-message="`${errorMsg('repeatpassword', $v.signup.repeatPassword)}`"
@blur="v$.repeatPassword.$touch"
:error="v$.repeatPassword.$error"
:error-message="`${errorMsg('repeatpassword', v$.repeatPassword)}`"
:label="$t('reg.repeatPassword')">
@@ -112,8 +111,6 @@
</q-input>
<!--:hint="$t('reg.tips.repeatpassword')"-->
<q-input
v-if="shownationality"
v-model="countryname"
@@ -124,37 +121,38 @@
:label="$t('reg.nationality')">
<template v-slot:prepend>
<vue-country-code
<!--<vue-country-code
@onSelect="selectcountry"
:preferredCountries="tools.getprefCountries"
:dropdownOptions="{ disabledDialCode: true }"
>
</vue-country-code>
</vue-country-code>-->
</template>
</q-input>
<div v-if="!tools.isMobile()"><br></div>
<vue-tel-input
showcell: {{ showcell}}
<!--<vue-tel-input
v-if="showcell"
@country-changed="intcode_change"
v-model="signup.profile.cell"
@country-changed="intcode_change()"
:value="signup.profile.cell"
:placeholder="$t('reg.cell')"
maxlength="20"
:enabledCountryCode="true"
inputClasses="clCell"
wrapperClasses="clCellCode">
</vue-tel-input>
</vue-tel-input>-->
<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)}`"
@blur="v$.terms.$touch"
:error="v$.terms.$error"
:error-message="`${errorMsg('terms', v$.terms)}`"
:label="$t('reg.terms')">
</q-checkbox>
@@ -171,20 +169,11 @@
</div>
<div class="wrapper">
<q-btn rounded size="lg" color="positive" @click="submitOk" :disabled='!allowSubmit' :label="$t('reg.submit')">
<q-btn rounded size="lg" color="positive" @click="submitOk" :disabled='!allowSubmit()' :label="$t('reg.submit')">
</q-btn>
</div>
</div>
<!--
<div align="center">
<q-btn rounded size="lg" color="primary" @click="submitOk" :disable="">{{$t('reg.submit')}}
</q-btn>
</div>
-->
</div>
</template>