surya/freeplanet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- SignIn component. Added also in the Toolbar (Header.ts)

Browse Source
This commit is contained in:
Paolo Arena
2019-10-11 21:40:47 +02:00
parent 0e0b327858
commit 1bd0c3ccac
13 changed files with 422 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/views/login/signin/signin-validate.ts → src/components/CSignIn/CSignIn-validate.ts
View File

5
src/components/CSignIn/CSignIn.scss Normal file
View File

@@ -0,0 +1,5 @@
.signin {
width: 100%;
margin: 0 auto;
max-width: 450px;
}

168
src/components/CSignIn/CSignIn.ts Normal file
View File

@@ -0,0 +1,168 @@
import Vue from 'vue'
import { GlobalStore } from '@store'
import { UserStore } from '../../store/Modules'
import { Component, Prop, Watch } from 'vue-property-decorator'
import { serv_constants } from '../../store/Modules/serv_constants'
import { tools } from '../../store/Modules/tools'
import { toolsext } from '@src/store/Modules/toolsext'
import { ISigninOptions, IUserState } from 'model'
import { TSignin, validations } from './CSignIn-validate'
import { validationMixin } from 'vuelidate'
import { Logo } from '../logo'
import router from '@router'
import globalroutines from '../../globalroutines/index'
import { ICategory } from '../../model'
// import {Loading, QSpinnerFacebook, QSpinnerGears} from 'quasar'
@Component({
name: 'CSignIn',
mixins: [validationMixin],
validations,
components: { Logo }
})
export default class CSignIn extends Vue {
@Prop({ required: true }) public mythis: any
public $v
public loading: boolean
public $t: any
public iswaitingforRes: boolean = false
public signin: ISigninOptions = {
username: process.env.TEST_USERNAME || '',
password: process.env.TEST_PASSWORD || ''
}
public created() {
this.$v.$reset()
if (UserStore.state.resStatus === serv_constants.RIS_CODE__HTTP_FORBIDDEN_INVALID_TOKEN) {
this.$emit('showNotif', 'fetch.error_doppiologin')
}
// this.$myconfig.socialLogin.facebook = true
// console.log('PROVA fb:', this.$myconfig.socialLogin.facebook)
}
public env() {
return process.env
}
public getlinkforgetpwd() {
return '/requestresetpwd'
}
public errorMsg(cosa: string, item: any) {
try {
if (!item.$error) {
return ''
}
if (item.$params.email && !item.email) {
return this.$t('reg.err.email')
}
if (!item.required) {
return this.$t('reg.err.required')
}
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 redirect(response) {
this.loading = false
window.location.href = response.data.redirect
}
public error(error) {
this.loading = false
// this.$errorHandler(this, error)
}
public facebook() {
this.loading = true
// this.$axios.get('/backend/loginFacebook')
// .then((response) => this.redirect(response))
// .catch((error) => this.error(error))
}
public google() {
// ...
}
public submit() {
// console.log('submit LOGIN')
this.$v.signin.$touch()
if (this.$v.signin.$error) {
this.$emit('showNotif', 'reg.err.errore_generico')
return
}
this.$emit('loginInCorso')
// disable Button Login:
this.iswaitingforRes = true
if (process.env.DEBUG) {
// console.log('this.signin', this.signin)
}
UserStore.actions.signin(this.signin)
.then((riscode) => {
// console.log('signin FINITO CALL: riscode=', riscode)
if (riscode === tools.OK) {
// router.push('/signin')
}
return riscode
})
.then((riscode) => {
if (process.env.DEBUG) {
// console.log(' riscode(1) =', riscode)
}
return riscode
})
.then((riscode) => {
if (riscode === tools.OK) {
// console.log(' -> eseguo $emit(loginOk)')
this.$emit('loginOk')
// GlobalStore.actions.createPushSubscription()
// .then((rissub) => {
// // ...
// })
// .catch((e) => {
// console.log('ERROR Subscription = ' + e)
// })
} else {
this.$emit('checkErrors', riscode)
}
this.iswaitingforRes = false
})
.catch((error) => {
// console.log('ERROR SIGNIN = ' + error)
this.$emit('checkErrors', error)
})
// console.log(' END submit')
}
}

69
src/components/CSignIn/CSignIn.vue Normal file
View File

@@ -0,0 +1,69 @@
<template>
<div>
<div class="text-center">
<p>
<logo></logo>
</p>
</div>
<!--Prova URL : {{env('PROVA_PAOLO')}}-->
<form>
<div class="q-gutter-xs">
<q-input
v-model="signin.username"
rounded outlined
@blur="$v.signin.username.$touch"
:error="$v.signin.username.$error"
:error-message="`${errorMsg('username', $v.signin.username)}`"
:label="$t('reg.username_login')">
<template v-slot:prepend>
<q-icon name="person"/>
</template>
</q-input>
<q-input
v-model="signin.password"
type="password"
rounded outlined
@blur="$v.signin.password.$touch"
:error="$v.signin.password.$error"
:error-message="`${errorMsg('password', $v.signin.password)}`"
:label="$t('reg.password')">
<template v-slot:prepend>
<q-icon name="vpn_key"/>
</template>
</q-input>
<div>
<a :href="getlinkforgetpwd">{{$t('reg.forgetpassword')}}</a>
</div>
<br>
<q-card class="flex flex-center">
<!--<q-btn v-if="$myconfig.socialLogin.facebook" :loading="loading" class="q-mb-md q-mr-md" rounded icon="fab fa-facebook-f" size="sm" color="blue-10" text-color="white" @click="facebook" :label="$t('components.authentication.login.facebook')"/>-->
<!--
<q-btn v-if="$myconfig.socialLogin.facebook" class="q-mb-md q-mr-md" rounded icon="fab fa-facebook-f" size="sm" color="blue-10" text-color="white" @click="facebook" :label="$t('components.authentication.login.facebook')"/>
<q-btn v-if="$myconfig.socialLogin.google" class="q-mb-md q-mr-md" rounded icon="fab fa-google" size="sm" color="deep-orange-14" text-color="white" @click="google" :label="$t('components.authentication.login.google')"/>
-->
</q-card>
<div align="center">
<q-btn rounded size="lg" color="primary" @click="submit"
:disable="$v.$error || iswaitingforRes">{{$t('login.enter')}}
</q-btn>
</div>
</div>
</form>
</div>
</template>
<script lang="ts" src="./CSignIn.ts">
</script>
<style lang="scss" scoped>
@import './CSignIn.scss';
</style>

1
src/components/CSignIn/index.ts Normal file
View File

@@ -0,0 +1 @@
export {default as CSignIn} from './CSignIn.vue'

34
src/components/Header/Header.ts
View File

@@ -3,6 +3,7 @@ import Component from 'vue-class-component'
import drawer from '../../layouts/drawer/drawer.vue'
import messagePopover from '../../layouts/toolbar/messagePopover/messagePopover.vue'
import { CSignIn } from '../../components/CSignIn'
import { GlobalStore, UserStore } from '@modules'
// import { StateConnection } from '../../model'
@@ -12,12 +13,13 @@ import { toolsext } from '@src/store/Modules/toolsext'
import Quasar, { Screen } from 'quasar'
import { static_data } from '../../db/static_data'
import globalroutines from '../../globalroutines'
@Component({
name: 'Header',
components: {
drawer,
messagePopover
messagePopover, CSignIn
}
})
@@ -330,11 +332,11 @@ export default class Header extends Vue {
public logoutHandler() {
UserStore.actions.logout()
.then(() => {
this.$router.replace('/logout')
setTimeout(() => {
this.$router.replace('/')
}, 1000)
// this.$router.replace('/logout')
//
// setTimeout(() => {
// this.$router.replace('/')
// }, 1000)
tools.showNotif(this.$q, this.$t('logout.uscito'), {icon: 'exit_to_app'})
})
@@ -347,4 +349,24 @@ export default class Header extends Vue {
get isLogged() {
return UserStore.state.isLogged
}
public loginOk() {
tools.loginOk(this, false)
}
public loginInCorso() {
tools.loginInCorso(this)
}
public checkErrors(riscode) {
tools.checkErrors(this, riscode)
}
public showNotif(msgcode) {
tools.showNotif(this.$q, this.$t(msgcode))
}
public mythis() {
return this
}
}

19
src/components/Header/Header.vue
View File

@@ -137,10 +137,13 @@
<q-avatar class="q-mb-sm center_img">
<img src="../../statics/images/avatar-1.svg">
</q-avatar>
<q-btn class="absolute-top-right" style="margin-top: 9px; margin-right: 12px; color: white;" dense flat round icon="close" @click="right = !right">
<q-btn class="absolute-top-right" style="margin-top: 9px; margin-right: 12px; color: white;"
dense flat round icon="close" @click="right = !right">
</q-btn>
<div v-if="Username" class="text-weight-bold text-user">{{ Username }} - {{ myName }}</div>
<div v-else class="text-italic">{{ $t('user.loggati') }}</div>
<div v-else class="text-italic">
{{ $t('user.loggati') }}
</div>
<!--<span class="text-white" v-if="Verificato"> {{$t('reg.verificato')}} </span>-->
<!--<span class="text-white background-red" v-else> {{$t('reg.non_verificato')}} </span>-->
@@ -153,6 +156,18 @@
</div>
</q-img>
<div style="margin-top:120px;"></div>
<div v-show="!Username">
<div class="q-ma-md" style="">
<CSignIn :mythis="mythis"
@loginOk="loginOk"
@loginInCorso="loginInCorso"
@checkErrors="checkErrors"
@showNotif="showNotif">
</CSignIn>
</div>
</div>
</div>
</q-drawer>

2
src/components/index.ts
View File

@@ -9,6 +9,8 @@ export * from './CTitle'
export * from './CImgText'
export * from './CImgTitle'
export * from './CPreloadImages'
export * from './CSignIn'
export * from './CEventsCalendar'
export * from './CDate'
export * from './BannerCookies'
export * from './PagePolicy'

7
src/store/Modules/GlobalStore.ts
View File

@@ -19,6 +19,7 @@ import globalroutines from './../../globalroutines/index'
import { cfgrouter } from '../../router/route-config'
import { static_data } from '@src/db/static_data'
// import { static_data } from '@src/db/static_data'
let stateConnDefault = 'online'
@@ -285,6 +286,7 @@ namespace Actions {
}
function createPushSubscription(context) {
console.log('createPushSubscription')
// If Already subscribed, don't send to the Server DB
// if (state.wasAlreadySubOnDb) {
@@ -296,6 +298,9 @@ namespace Actions {
// return
// }
if (!static_data.functionality.PWA)
return
if (!('serviceWorker' in navigator)) {
return
}
@@ -417,6 +422,7 @@ namespace Actions {
await globalroutines(null, 'clearalldata', table, null)
}
if (static_data.functionality.PWA) {
if ('serviceWorker' in navigator) {
// REMOVE ALL SUBSCRIPTION
console.log('REMOVE ALL SUBSCRIPTION...')
@@ -435,6 +441,7 @@ namespace Actions {
})
})
}
}
await deleteSubscriptionToServer(context)

9
src/store/Modules/UserStore.ts
View File

@@ -198,9 +198,14 @@ namespace Mutations {
state.name = ''
state.surname = ''
resetArrToken(state.tokens)
state.x_auth_token = ''
state.verified_email = false
state.categorySel = 'personal'
state.servercode = 0
state.resStatus = 0
state.isLogged = false
state.isAdmin = false
state.x_auth_token = ''
}
function setErrorCatch(state: IUserState, axerr: Types.AxiosError) {
@@ -554,7 +559,7 @@ namespace Actions {
// state.isLogged = true
state.isLogged = isLogged
if (isLogged) {
console.log('state.isLogged')
console.log('state.isLogged', state.isLogged)
GlobalStore.mutations.setleftDrawerOpen(localStorage.getItem(tools.localStorage.leftDrawerOpen) === 'true')
GlobalStore.mutations.setCategorySel(localStorage.getItem(tools.localStorage.categorySel))

79
src/store/Modules/tools.ts
View File

@@ -13,6 +13,7 @@ import { lists } from './lists'
import { static_data } from '@src/db/static_data'
import { IColl, ITimeLineEntry, ITimeLineMain } from '@src/model/GlobalStore'
import { func_tools } from '@src/store/Modules/toolsext'
import { serv_constants } from '@src/store/Modules/serv_constants'
export interface INotify {
color?: string | 'primary'
@@ -2107,8 +2108,86 @@ export const tools = {
} else {
return mythis.$t('msg.myAppName')
}
},
loginOk(mythis, ispageLogin: boolean) {
// console.log('loginOk')
if (toolsext.getLocale() !== '') {
mythis.$i18n.locale = toolsext.getLocale()
} // Set Lang
else {
UserStore.mutations.setlang(mythis.$i18n.locale)
} // Set Lang
if (process.env.DEBUG) {
console.log('LANG ORA=', toolsext.getLocale())
}
globalroutines(mythis, 'loadapp', '')
tools.checkErrors(mythis, tools.OK, ispageLogin)
},
loginInCorso(mythis) {
// console.log('loginInCorso')
let msg = mythis.$t('login.incorso')
if (process.env.DEBUG) {
msg += ' ' + process.env.MONGODB_HOST
}
mythis.$q.loading.show({ message: msg })
},
checkErrors(mythis, riscode, ispageLogin?: boolean) {
// console.log('checkErrors: ', riscode)
try {
if (riscode === tools.OK) {
tools.showNotif(mythis.$q, mythis.$t('login.completato'), { color: 'positive', icon: 'check' })
if (ispageLogin) {
mythis.$router.push('/')
}
} else if (riscode === serv_constants.RIS_CODE_LOGIN_ERR) {
// Wait N seconds to avoid calling many times...
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('anything')
}, 3000)
}).then(() => {
setTimeout(() => {
console.log('HIDE...')
mythis.$q.loading.hide()
}, 500)
tools.showNotif(mythis.$q, mythis.$t('login.errato'), { color: 'negative', icon: 'notifications' })
mythis.iswaitingforRes = false
if (ispageLogin) {
mythis.$router.push('/signin')
}
})
} else if (riscode === tools.ERR_SERVERFETCH) {
tools.showNotif(mythis.$q, mythis.$t('fetch.errore_server'), { color: 'negative', icon: 'notifications' })
} else if (riscode === tools.ERR_GENERICO) {
const msg = mythis.$t('fetch.errore_generico') + UserStore.mutations.getMsgError(riscode)
tools.showNotif(mythis.$q, msg, { color: 'negative', icon: 'notifications' })
} else {
tools.showNotif(mythis.$q, 'Errore num ' + riscode, { color: 'negative', icon: 'notifications' })
}
if (riscode !== serv_constants.RIS_CODE_LOGIN_ERR) {
mythis.iswaitingforRes = false
setTimeout(() => {
mythis.$q.loading.hide()
}, 200)
}
} finally {
// ...
}
}
// getLocale() {
// if (navigator.languages && navigator.languages.length > 0) {
// return navigator.languages[0]

208
src/views/login/signin/signin.ts
View File

@@ -1,218 +1,40 @@
import { GlobalStore } from '@store'
import { UserStore } from '../../../store/Modules'
import Vue from 'vue'
import { Component, Prop, Watch } from 'vue-property-decorator'
import { serv_constants } from '../../../store/Modules/serv_constants'
import { tools } from '../../../store/Modules/tools'
import { toolsext } from '@src/store/Modules/toolsext'
import { ISigninOptions, IUserState } from 'model'
import { TSignin, validations } from './signin-validate'
import { validationMixin } from 'vuelidate'
import { Logo } from '../../../components/logo'
import router from '@router'
import { CSignIn } from '../../../components/CSignIn'
import { toolsext } from '../../../store/Modules/toolsext'
import { UserStore } from '../../../store/Modules'
import globalroutines from '../../../globalroutines/index'
import { tools } from '../../../store/Modules/tools'
// import {Loading, QSpinnerFacebook, QSpinnerGears} from 'quasar'
@Component({
mixins: [validationMixin],
validations,
components: { Logo }
components: { CSignIn }
})
export default class Signin extends Vue {
public $v
public $q
public loading: boolean
public $t: any
public iswaitingforRes: boolean = false
public signin: ISigninOptions = {
username: process.env.TEST_USERNAME || '',
password: process.env.TEST_PASSWORD || ''
public loginOk() {
tools.loginOk(this, true)
}
public created() {
this.$v.$reset()
if (UserStore.state.resStatus === serv_constants.RIS_CODE__HTTP_FORBIDDEN_INVALID_TOKEN) {
tools.showNotif(this.$q, this.$t('fetch.error_doppiologin'))
}
// this.$myconfig.socialLogin.facebook = true
// console.log('PROVA fb:', this.$myconfig.socialLogin.facebook)
}
public env() {
return process.env
}
public getlinkforgetpwd() {
return '/requestresetpwd'
}
public errorMsg(cosa: string, item: any) {
try {
if (!item.$error) {
return ''
}
if (item.$params.email && !item.email) {
return this.$t('reg.err.email')
}
if (!item.required) {
return this.$t('reg.err.required')
}
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 loginInCorso() {
tools.loginInCorso(this)
}
public checkErrors(riscode) {
// console.log('checkErrors: ', riscode)
try {
if (riscode === tools.OK) {
tools.showNotif(this.$q, this.$t('login.completato'), { color: 'positive', icon: 'check' })
this.$router.push('/')
} else if (riscode === serv_constants.RIS_CODE_LOGIN_ERR) {
// Wait N seconds to avoid calling many times...
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve('anything')
}, 3000)
}).then(() => {
setTimeout(() => {
this.$q.loading.hide()
}, 200)
tools.showNotif(this.$q, this.$t('login.errato'))
this.iswaitingforRes = false
this.$router.push('/signin')
})
} 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 {
tools.showNotif(this.$q, 'Errore num ' + riscode)
tools.checkErrors(this, riscode, true)
}
if (riscode !== serv_constants.RIS_CODE_LOGIN_ERR) {
this.iswaitingforRes = false
setTimeout(() => {
this.$q.loading.hide()
}, 200)
public showNotif(msgcode) {
tools.showNotif(this.$q, this.$t(msgcode))
}
} finally {
}
public mythis() {
return this
}
public redirect(response) {
this.loading = false
window.location.href = response.data.redirect
}
public error(error) {
this.loading = false
this.$errorHandler(this, error)
}
public facebook() {
this.loading = true
this.$axios.get('/backend/loginFacebook')
.then((response) => this.redirect(response))
.catch((error) => this.error(error))
}
public google() {
}
public submit() {
console.log('submit LOGIN')
this.$v.signin.$touch()
if (this.$v.signin.$error) {
tools.showNotif(this.$q, this.$t('reg.err.errore_generico'))
return
}
let msg = this.$t('login.incorso')
if (process.env.DEBUG) {
msg += ' ' + process.env.MONGODB_HOST
}
this.$q.loading.show({ message: msg })
// disable Button Login:
this.iswaitingforRes = true
if (process.env.DEBUG) {
console.log('this.signin', this.signin)
}
UserStore.actions.signin(this.signin)
.then((riscode) => {
// console.log('signin FINITO CALL: riscode=', riscode)
if (riscode === tools.OK) {
// router.push('/signin')
}
return riscode
})
.then((riscode) => {
if (process.env.DEBUG) {
console.log(' riscode=', riscode)
}
if (toolsext.getLocale() !== '') {
this.$i18n.locale = toolsext.getLocale()
} // Set Lang
else {
UserStore.mutations.setlang(this.$i18n.locale)
} // Set Lang
if (process.env.DEBUG) {
console.log('LANG ORA=', toolsext.getLocale())
}
globalroutines(this, 'loadapp', '')
return riscode
})
.then((riscode) => {
if (riscode === tools.OK) {
GlobalStore.actions.createPushSubscription()
.then((rissub) => {
})
.catch((e) => {
console.log('ERROR Subscription = ' + e)
})
}
this.checkErrors(riscode)
})
.catch((error) => {
console.log('ERROR SIGNIN = ' + error)
this.checkErrors(error)
})
}
}

66
src/views/login/signin/signin.vue
View File

@@ -1,66 +1,12 @@
<template>
<div>
<q-page padding class="signin">
<div class="text-center">
<p>
<logo></logo>
</p>
</div>
<!--Prova URL : {{env('PROVA_PAOLO')}}-->
<form>
<div class="q-gutter-xs">
<q-input
v-model="signin.username"
rounded outlined
@blur="$v.signin.username.$touch"
:error="$v.signin.username.$error"
:error-message="`${errorMsg('username', $v.signin.username)}`"
:label="$t('reg.username_login')">
<template v-slot:prepend>
<q-icon name="person"/>
</template>
</q-input>
<q-input
v-model="signin.password"
type="password"
rounded outlined
@blur="$v.signin.password.$touch"
:error="$v.signin.password.$error"
:error-message="`${errorMsg('password', $v.signin.password)}`"
:label="$t('reg.password')">
<template v-slot:prepend>
<q-icon name="vpn_key"/>
</template>
</q-input>
<div>
<a :href="getlinkforgetpwd">{{$t('reg.forgetpassword')}}</a>
</div>
<br>
<q-card class="flex flex-center">
<!--<q-btn v-if="$myconfig.socialLogin.facebook" :loading="loading" class="q-mb-md q-mr-md" rounded icon="fab fa-facebook-f" size="sm" color="blue-10" text-color="white" @click="facebook" :label="$t('components.authentication.login.facebook')"/>-->
<!--
<q-btn v-if="$myconfig.socialLogin.facebook" class="q-mb-md q-mr-md" rounded icon="fab fa-facebook-f" size="sm" color="blue-10" text-color="white" @click="facebook" :label="$t('components.authentication.login.facebook')"/>
<q-btn v-if="$myconfig.socialLogin.google" class="q-mb-md q-mr-md" rounded icon="fab fa-google" size="sm" color="deep-orange-14" text-color="white" @click="google" :label="$t('components.authentication.login.google')"/>
-->
</q-card>
<div align="center">
<q-btn rounded size="lg" color="primary" @click="submit"
:disable="$v.$error || iswaitingforRes">{{$t('login.enter')}}
</q-btn>
</div>
</div>
</form>
<CSignIn :mythis="mythis"
@loginOk="loginOk"
@loginInCorso="loginInCorso"
@checkErrors="checkErrors"
@showNotif="showNotif">
</CSignIn>
</q-page>
</div>
</template>
<script lang="ts" src="./signin.ts">