- ++Booking List
- ++Delete a Booking also for the Admin.
This commit is contained in:
Paolo Arena
37
src/components/CSignUp/CSignUp-validate.ts
Normal file
37
src/components/CSignUp/CSignUp-validate.ts
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
import { ISignupOptions } from 'model'
|
||||||
|
import { email, minLength, required, sameAs } from 'vuelidate/lib/validators'
|
||||||
|
// import { ValidationRuleset } from 'vuelidate'
|
||||||
|
import { complexity, registeredemail, registereduser } from '../../validation'
|
||||||
|
|
||||||
|
export interface TSignup { signup: ISignupOptions, validationGroup: string[] }
|
||||||
|
|
||||||
|
export const validations = {
|
||||||
|
signup: {
|
||||||
|
repeatPassword: {
|
||||||
|
required,
|
||||||
|
sameAsPassword: sameAs('password')
|
||||||
|
},
|
||||||
|
password: {
|
||||||
|
complexity,
|
||||||
|
required
|
||||||
|
},
|
||||||
|
username: {
|
||||||
|
registereduser,
|
||||||
|
required
|
||||||
|
},
|
||||||
|
name: {
|
||||||
|
required
|
||||||
|
},
|
||||||
|
surname: {
|
||||||
|
required
|
||||||
|
},
|
||||||
|
email: {
|
||||||
|
email,
|
||||||
|
registeredemail,
|
||||||
|
required
|
||||||
|
},
|
||||||
|
terms: {
|
||||||
|
required
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
12
src/components/CSignUp/CSignUp.scss
Normal file
12
src/components/CSignUp/CSignUp.scss
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
.signup {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 450px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
177
src/components/CSignUp/CSignUp.ts
Normal file
177
src/components/CSignUp/CSignUp.ts
Normal file
@@ -0,0 +1,177 @@
|
|||||||
|
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 { ISignupOptions, IUserState } from 'model'
|
||||||
|
import { validations, TSignup } from './CSignUp-validate'
|
||||||
|
|
||||||
|
import { validationMixin } from 'vuelidate'
|
||||||
|
|
||||||
|
import { Logo } from '../../components/logo'
|
||||||
|
|
||||||
|
// import {Loading, QSpinnerFacebook, QSpinnerGears} from 'quasar'
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
name: 'CSignUp',
|
||||||
|
mixins: [validationMixin],
|
||||||
|
validations,
|
||||||
|
components: { Logo }
|
||||||
|
})
|
||||||
|
|
||||||
|
export default class CSignUp extends Vue {
|
||||||
|
public $v
|
||||||
|
public $q
|
||||||
|
public $t: any
|
||||||
|
|
||||||
|
public duplicate_email: boolean = false
|
||||||
|
public duplicate_username: boolean = false
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
|
public created() {
|
||||||
|
this.$v.$reset()
|
||||||
|
}
|
||||||
|
|
||||||
|
public mounted() {
|
||||||
|
}
|
||||||
|
|
||||||
|
get allowSubmit() {
|
||||||
|
|
||||||
|
const error = this.$v.$error || this.$v.$invalid
|
||||||
|
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},
|
||||||
|
|
||||||
|
}
|
||||||
|
}, */
|
||||||
|
public env() {
|
||||||
|
return process.env
|
||||||
|
}
|
||||||
|
|
||||||
|
public errorMsg(cosa: string, item: any) {
|
||||||
|
try {
|
||||||
|
if (!item.$error) { return '' }
|
||||||
|
if (item.$params.email && !item.email) { return this.$t('reg.err.email') }
|
||||||
|
|
||||||
|
if (cosa === 'repeatpassword') {
|
||||||
|
if (!item.sameAsPassword) {
|
||||||
|
return this.$t('reg.err.sameaspassword')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!item.required) { return this.$t('reg.err.required') }
|
||||||
|
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);
|
||||||
|
if (!item.isUnique) { return this.$t('reg.err.duplicate_username') }
|
||||||
|
} else if ((cosa === 'name') || (cosa === 'surname')) {
|
||||||
|
// console.log(item);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
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.maxLength) { return this.$t('reg.err.notmore') + ` ${item.$params.maxLength.max} ` + this.$t('reg.err.char') }
|
||||||
|
return ''
|
||||||
|
} catch (error) {
|
||||||
|
// console.log("ERR : " + error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public SignUpcheckErrors(riscode: number) {
|
||||||
|
console.log('SignUpcheckErrors', riscode)
|
||||||
|
if (riscode === tools.DUPLICATE_EMAIL_ID) {
|
||||||
|
tools.showNotif(this.$q, this.$t('reg.err.duplicate_email'))
|
||||||
|
} else if (riscode === tools.DUPLICATE_USERNAME_ID) {
|
||||||
|
tools.showNotif(this.$q, this.$t('reg.err.duplicate_username'))
|
||||||
|
} else if (riscode === tools.ERR_SERVERFETCH) {
|
||||||
|
tools.showNotif(this.$q, this.$t('fetch.errore_server'))
|
||||||
|
} else if (riscode === tools.ERR_GENERICO) {
|
||||||
|
const msg = this.$t('fetch.errore_generico') + UserStore.mutations.getMsgError(riscode)
|
||||||
|
tools.showNotif(this.$q, msg)
|
||||||
|
} else if (riscode === tools.OK) {
|
||||||
|
this.$router.push('/signin')
|
||||||
|
tools.showNotif(this.$q, this.$t('components.authentication.email_verification.link_sent'), {color: 'warning', textColor: 'black'})
|
||||||
|
} else {
|
||||||
|
tools.showNotif(this.$q, 'Errore num ' + riscode)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
public submitOk() {
|
||||||
|
this.$v.signup.$touch()
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$q.loading.show({ message: this.$t('reg.incorso') })
|
||||||
|
|
||||||
|
console.log(this.signup)
|
||||||
|
UserStore.actions.signup(this.signup)
|
||||||
|
.then((riscode) => {
|
||||||
|
tools.SignUpcheckErrors(this, riscode)
|
||||||
|
this.$q.loading.hide()
|
||||||
|
}).catch((error) => {
|
||||||
|
console.log('ERROR = ' + error)
|
||||||
|
this.$q.loading.hide()
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
144
src/components/CSignUp/CSignUp.vue
Normal file
144
src/components/CSignUp/CSignUp.vue
Normal file
@@ -0,0 +1,144 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="text-center">
|
||||||
|
<p>
|
||||||
|
<logo></logo>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--Prova URL : {{env('PROVA_PAOLO')}}-->
|
||||||
|
|
||||||
|
<div class="q-gutter-xs">
|
||||||
|
<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)"
|
||||||
|
bottom-slots
|
||||||
|
debounce="1000"
|
||||||
|
:label="$t('reg.email')">
|
||||||
|
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="email"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</q-input>
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
v-model="signup.username"
|
||||||
|
rounded outlined
|
||||||
|
@blur="$v.signup.username.$touch"
|
||||||
|
:error="$v.signup.username.$error"
|
||||||
|
bottom-slots
|
||||||
|
debounce="1000"
|
||||||
|
:error-message="errorMsg('username', $v.signup.username)"
|
||||||
|
:label="$t('reg.username')">
|
||||||
|
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="person"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</q-input>
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
v-model="signup.name"
|
||||||
|
rounded outlined
|
||||||
|
@blur="$v.signup.name.$touch"
|
||||||
|
:error="$v.signup.name.$error"
|
||||||
|
bottom-slots
|
||||||
|
debounce="1000"
|
||||||
|
: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"
|
||||||
|
bottom-slots
|
||||||
|
debounce="1000"
|
||||||
|
: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.password"
|
||||||
|
type="password"
|
||||||
|
rounded outlined
|
||||||
|
@blur="$v.signup.password.$touch"
|
||||||
|
:error="$v.signup.password.$error"
|
||||||
|
:error-message="`${errorMsg('password', $v.signup.password)}`"
|
||||||
|
bottom-slots
|
||||||
|
:label="$t('reg.password')">
|
||||||
|
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="vpn_key"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</q-input>
|
||||||
|
|
||||||
|
<q-input
|
||||||
|
v-model="signup.repeatPassword"
|
||||||
|
type="password"
|
||||||
|
rounded outlined
|
||||||
|
@blur="$v.signup.repeatPassword.$touch"
|
||||||
|
:error="$v.signup.repeatPassword.$error"
|
||||||
|
:error-message="`${errorMsg('repeatpassword', $v.signup.repeatPassword)}`"
|
||||||
|
bottom-slots
|
||||||
|
:label="$t('reg.repeatPassword')">
|
||||||
|
|
||||||
|
<template v-slot:prepend>
|
||||||
|
<q-icon name="vpn_key"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</q-input>
|
||||||
|
|
||||||
|
<!--:hint="$t('reg.tips.repeatpassword')"-->
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<div class="wrapper">
|
||||||
|
<q-btn rounded size="lg" color="positive" @click="submitOk" :disabled='!allowSubmit'>
|
||||||
|
{{$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>
|
||||||
|
|
||||||
|
<script lang="ts" src="./CSignUp.ts">
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import './CSignUp.scss';
|
||||||
|
</style>
|
||||||
1
src/components/CSignUp/index.ts
Normal file
1
src/components/CSignUp/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export {default as CSignUp} from './CSignUp.vue'
|
||||||
Reference in New Issue
Block a user