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

17
src/components/CSignIn/CSignIn-validate.ts Normal file
View File

@@ -0,0 +1,17 @@
import { ISigninOptions } from 'model'
import { required, minLength, email, sameAs } from 'vuelidate/lib/validators'
export type TSignin = { signin: ISigninOptions, validationGroup: string[] }
export const validations = {
signin: {
password: {
required,
minLength: minLength(8)
},
username: {
required,
minLength: minLength(6)
}
}
}

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'