From 1bd0c3ccac5a93fc2ce32b82b9c9f13a8140d254 Mon Sep 17 00:00:00 2001 From: Paolo Arena Date: Fri, 11 Oct 2019 21:40:47 +0200 Subject: [PATCH] - SignIn component. Added also in the Toolbar (Header.ts) --- .../CSignIn/CSignIn-validate.ts} | 0 src/components/CSignIn/CSignIn.scss | 5 + src/components/CSignIn/CSignIn.ts | 168 ++++++++++++++ src/components/CSignIn/CSignIn.vue | 69 ++++++ src/components/CSignIn/index.ts | 1 + src/components/Header/Header.ts | 34 ++- src/components/Header/Header.vue | 19 +- src/components/index.ts | 2 + src/store/Modules/GlobalStore.ts | 39 ++-- src/store/Modules/UserStore.ts | 9 +- src/store/Modules/tools.ts | 79 +++++++ src/views/login/signin/signin.ts | 208 ++---------------- src/views/login/signin/signin.vue | 70 +----- 13 files changed, 422 insertions(+), 281 deletions(-) rename src/{views/login/signin/signin-validate.ts => components/CSignIn/CSignIn-validate.ts} (100%) create mode 100644 src/components/CSignIn/CSignIn.scss create mode 100644 src/components/CSignIn/CSignIn.ts create mode 100644 src/components/CSignIn/CSignIn.vue create mode 100644 src/components/CSignIn/index.ts diff --git a/src/views/login/signin/signin-validate.ts b/src/components/CSignIn/CSignIn-validate.ts similarity index 100% rename from src/views/login/signin/signin-validate.ts rename to src/components/CSignIn/CSignIn-validate.ts diff --git a/src/components/CSignIn/CSignIn.scss b/src/components/CSignIn/CSignIn.scss new file mode 100644 index 0000000..7ce52a9 --- /dev/null +++ b/src/components/CSignIn/CSignIn.scss @@ -0,0 +1,5 @@ +.signin { + width: 100%; + margin: 0 auto; + max-width: 450px; +} diff --git a/src/components/CSignIn/CSignIn.ts b/src/components/CSignIn/CSignIn.ts new file mode 100644 index 0000000..cc17e0e --- /dev/null +++ b/src/components/CSignIn/CSignIn.ts @@ -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') + } + +} diff --git a/src/components/CSignIn/CSignIn.vue b/src/components/CSignIn/CSignIn.vue new file mode 100644 index 0000000..8006b83 --- /dev/null +++ b/src/components/CSignIn/CSignIn.vue @@ -0,0 +1,69 @@ + + + + + diff --git a/src/components/CSignIn/index.ts b/src/components/CSignIn/index.ts new file mode 100644 index 0000000..6d4d00d --- /dev/null +++ b/src/components/CSignIn/index.ts @@ -0,0 +1 @@ +export {default as CSignIn} from './CSignIn.vue' diff --git a/src/components/Header/Header.ts b/src/components/Header/Header.ts index 2e79754..133dbc7 100644 --- a/src/components/Header/Header.ts +++ b/src/components/Header/Header.ts @@ -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 + } } diff --git a/src/components/Header/Header.vue b/src/components/Header/Header.vue index abae59e..29a8285 100644 --- a/src/components/Header/Header.vue +++ b/src/components/Header/Header.vue @@ -137,10 +137,13 @@ - +
{{ Username }} - {{ myName }}
-
{{ $t('user.loggati') }}
+
+ {{ $t('user.loggati') }} +
@@ -153,6 +156,18 @@ +
+
+
+ + +
+
+ diff --git a/src/components/index.ts b/src/components/index.ts index 5890c17..73f00c8 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -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' diff --git a/src/store/Modules/GlobalStore.ts b/src/store/Modules/GlobalStore.ts index 12afe48..d5f955b 100644 --- a/src/store/Modules/GlobalStore.ts +++ b/src/store/Modules/GlobalStore.ts @@ -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,23 +422,25 @@ namespace Actions { await globalroutines(null, 'clearalldata', table, null) } - if ('serviceWorker' in navigator) { - // REMOVE ALL SUBSCRIPTION - console.log('REMOVE ALL SUBSCRIPTION...') - await navigator.serviceWorker.ready.then((reg) => { - console.log('... Ready') - reg.pushManager.getSubscription().then((subscription) => { - console.log(' Found Subscription...') - if (subscription) { - subscription.unsubscribe().then((successful) => { - // You've successfully unsubscribed - console.log('You\'ve successfully unsubscribed') - }).catch((e) => { - // Unsubscription failed - }) - } + if (static_data.functionality.PWA) { + if ('serviceWorker' in navigator) { + // REMOVE ALL SUBSCRIPTION + console.log('REMOVE ALL SUBSCRIPTION...') + await navigator.serviceWorker.ready.then((reg) => { + console.log('... Ready') + reg.pushManager.getSubscription().then((subscription) => { + console.log(' Found Subscription...') + if (subscription) { + subscription.unsubscribe().then((successful) => { + // You've successfully unsubscribed + console.log('You\'ve successfully unsubscribed') + }).catch((e) => { + // Unsubscription failed + }) + } + }) }) - }) + } } await deleteSubscriptionToServer(context) diff --git a/src/store/Modules/UserStore.ts b/src/store/Modules/UserStore.ts index 9c512cc..daca69d 100644 --- a/src/store/Modules/UserStore.ts +++ b/src/store/Modules/UserStore.ts @@ -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)) diff --git a/src/store/Modules/tools.ts b/src/store/Modules/tools.ts index 9d08a87..97b1c15 100644 --- a/src/store/Modules/tools.ts +++ b/src/store/Modules/tools.ts @@ -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] diff --git a/src/views/login/signin/signin.ts b/src/views/login/signin/signin.ts index 209e0f7..da4a7b6 100644 --- a/src/views/login/signin/signin.ts +++ b/src/views/login/signin/signin.ts @@ -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) - } - - if (riscode !== serv_constants.RIS_CODE_LOGIN_ERR) { - this.iswaitingforRes = false - setTimeout(() => { - this.$q.loading.hide() - }, 200) - } - - } finally { - - } + tools.checkErrors(this, riscode, true) } - public redirect(response) { - this.loading = false - window.location.href = response.data.redirect + public showNotif(msgcode) { + tools.showNotif(this.$q, this.$t(msgcode)) } - public error(error) { - this.loading = false - this.$errorHandler(this, error) + public mythis() { + return this } - 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) - }) - - } } diff --git a/src/views/login/signin/signin.vue b/src/views/login/signin/signin.vue index aefd450..718b5c8 100644 --- a/src/views/login/signin/signin.vue +++ b/src/views/login/signin/signin.vue @@ -1,66 +1,12 @@