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

sistemare class type boolean....

Browse Source
This commit is contained in:
paolo
2018-11-05 22:28:59 +01:00
parent c81e816d97
commit 03d57ba50e
22 changed files with 439 additions and 339 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/App.vue
View File

@@ -15,34 +15,26 @@
</div>
</template>
<script type="text/javascript">
<script type="ts">
import { Component, Vue} from 'vue-property-decorator'
import { UserModule } from './store/modules/user'
import Header from './components/Header.vue';
import * as types from './store/mutation-types'
import {mapGetters, mapActions} from 'vuex'
export default {
name: 'app',
data() {
return {
backgroundColor: 'whitesmoke'
}
},
computed: {
...mapGetters("glob", ['getLayoutNeeded', 'getMobileMode'])
},
@Component({
components: {
appHeader: Header,
},
methods:{
...mapActions("user", {
tryAutoLogin: types.USER_AUTOLOGIN,
}),
},
created() {
}
})
export default class App extends Vue {
backgroundColor = 'whitesmoke'
constructor () {
super()
//this.title = 'My Vue and CosmosDB Heroes App'
console.info(process.env);
this.tryAutoLogin();
UserModule.autologin()
}
}
</script>

81
src/components/Header.vue
View File

@@ -49,68 +49,49 @@
</div>
</template>
<script>
import {openURL} from 'quasar';
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import {Quasar} from 'quasar';
import { UserModule } from '../store/modules/user'
import drawer from '../layouts/drawer/drawer.vue'
import messagePopover from '../layouts/toolbar/messagePopover.vue'
// import user from '../store/modules/user';
import * as types from '../store/mutation-types'
import {mapGetters, mapActions} from 'vuex'
export default {
@Component({
components: {
drawer,
messagePopover,
},
created() {
//this.$store.dispatch('initStocks');
},
methods: {
openURL,
},
computed: {
...mapGetters("user", [
'getUsername',
]),
},
data: function () {
return {
prova: 'AA',
selectOpLang: [
{label: 'Italian', icon: 'fa-facebook', value: 'it'},
{label: 'English (US)', icon: 'fa-flag-us', value: 'en-us'},
{label: 'Spanish', icon: 'fa-flag-es', value: 'es'},
{label: 'German', icon: 'fa-flag-de', value: 'de'}
],
lang: this.$q.i18n.lang,
leftDrawerOpen: this.$q.platform.is.desktop
}
},
watch: {
lang(lang) {
this.$i18n.locale = snakeToCamel(lang);
console.log("LANG LOCALE = " + this.$i18n.locale);
})
export default class Header extends Vue {
prova = 'AA'
selectOpLang = [
{ label: 'Italian', icon: 'fa-facebook', value: 'it' },
{ label: 'English (US)', icon: 'fa-flag-us', value: 'en-us' },
{ label: 'Spanish', icon: 'fa-flag-es', value: 'es' },
{ label: 'German', icon: 'fa-flag-de', value: 'de' }
]
lang = this.$q.i18n.lang
leftDrawerOpen = this.$q.platform.is.desktop
// dynamic import, so loading on demand only
import(`quasar-framework/i18n/${lang}`).then(lang => {
//console.log("lang prima = " + this.$q.i18n.lang);
this.$q.i18n.set(lang.default);
var mylang = this.$q.i18n.lang;
console.log("lang = " + this.$q.i18n.lang);
//console.log("lang DOPO = " + this.$q.i18n.lang);
import(`src/i18n`).then(function () {
@Watch('lang')
lang(lang: string) {
this.$i18n.locale = snakeToCamel(lang)
console.log("LANG LOCALE = " + this.$i18n.locale)
});
});
// dynamic import, so loading on demand only
import(`quasar-framework/i18n/${lang}`).then(lang => {
//console.log("lang prima = " + this.$q.i18n.lang);
this.$q.i18n.set(lang.default)
var mylang = this.$q.i18n.lang
console.log("lang = " + this.$q.i18n.lang)
//console.log("lang DOPO = " + this.$q.i18n.lang);
import(`src/i18n`).then(function () {
// dynamic import, so loading on demand only
}
})
})
// dynamic import, so loading on demand only
}
}

122
src/layouts/drawer/drawer.vue
View File

@@ -1,12 +1,12 @@
<template>
<div>
<div id="profile" v-if="getUsername">
<div id="profile" v-if="Username">
<img :src="photo" style='height: 80px' class="inline-block">
<img src="../img/avatar-1.svg" id="avatar" class="inline-block">
<div id="user-name">
<span class="text-white"> {{ getUsername }} </span>
<span class="text-white"> {{ Username }} </span>
<hr>
<span class="text-white" v-if="getVerificato"> {{$t('reg.verificato')}} </span>
<span class="text-white" v-if="Verificato"> {{$t('reg.verificato')}} </span>
<span class="text-white" v-else> {{$t('reg.non_verificato')}} </span>
<span class="text-white"> {{ getEmail }} </span>
</div>
@@ -17,7 +17,7 @@
</div>
</div>
<menu-one v-if="getMenuCollapse" :links="links"></menu-one>
<menu-one v-if="MenuCollapse" :links="links"></menu-one>
<menu-two v-else :links="links"></menu-two>
<div class="fixed-bottom text-center light text-italic">
@@ -26,76 +26,70 @@
</div>
</template>
<script type="text/javascript">
<script type="ts">
import menuOne from './menuOne.vue'
import menuTwo from './menuTwo.vue'
import * as types from '../../store/mutation-types'
import {mapGetters, mapActions} from 'vuex'
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import { GlobModule } from '../../store/modules/glob'
import { UserModule } from '../../store/modules/user';
export default {
data() {
return {
photo: '',
user: null,
links: {
Dashboard: {
routes: [
{route: '/', faIcon: 'fa fa-home', materialIcon: 'home', name: 'Dashboard One'},
{route: '/signup', faIcon: 'fa fa-signup', materialIcon: 'login', name: 'SignUp'},
{route: '/signin', faIcon: 'fa fa-login', materialIcon: 'login', name: 'Login'},
],
show: true
},
Forms: {
routes: [
{route: '/prec', faIcon: 'fa fa-search', materialIcon: 'search', name: 'Prec'},
{route: '/simpleform', faIcon: 'fa fa-search', materialIcon: 'search', name: 'Simpleform'},
{ route: '/embeeded', faIcon: 'fa fa-check', materialIcon: 'check', name: 'Embeeded validations' },
//{ route: '/advanced-form-one', faIcon: 'fa fa-hdd-o', materialIcon: 'filter_1', name: 'Adv. Form One' }
],
show: false
},
Pages: {
routes: [
{route: '/login', faIcon: 'fa fa-unlock-alt', materialIcon: 'lock_open', name: 'Login'},
//{ route: '/pricing', faIcon: 'fa fa-money', materialIcon: 'attach_money', name: 'Pricing' },
//{ route: '/drag-and-drop', faIcon: 'fa fa-arrows', materialIcon: 'move_to_inbox', name: 'Drag and Drop' },
//{ route: '/server-side-data-table', faIcon: 'fa fa-list-alt', materialIcon: 'list_compact', name: 'Server Side Data Table' }
],
show: false
}
}
}
},
created() {
var vm = this
/*firebase.auth().onAuthStateChanged(function (user) {
if (user) {
vm.user = user
vm.name = vm.user.displayName
vm.email = vm.user.email
vm.photo = vm.user.photoURL
vm.userId = vm.user.uid
}
})*/
},
methods:{
...mapActions("user", ["logout"]),
logoutHandler() {
this.logout({router: this.$router});
this.$q.notify(this.$t('logout.uscito'));
}
},
computed: {
...mapGetters("glob", ['getLayoutNeeded', 'getMenuCollapse']),
...mapGetters("user", ['getUsername', 'getVerificato', 'getEmail']),
},
@Component({
components: {
menuOne,
menuTwo
}
})
export default class Drawer extends Vue {
photo = ''
user = null
links = {
Dashboard: {
routes: [
{route: '/', faIcon: 'fa fa-home', materialIcon: 'home', name: 'Dashboard One'},
{route: '/signup', faIcon: 'fa fa-signup', materialIcon: 'login', name: 'SignUp'},
{route: '/signin', faIcon: 'fa fa-login', materialIcon: 'login', name: 'Login'},
],
show: true
},
Forms: {
routes: [
{route: '/prec', faIcon: 'fa fa-search', materialIcon: 'search', name: 'Prec'},
{route: '/simpleform', faIcon: 'fa fa-search', materialIcon: 'search', name: 'Simpleform'},
{route: '/embeeded', faIcon: 'fa fa-check', materialIcon: 'check', name: 'Embeeded validations'},
//{ route: '/advanced-form-one', faIcon: 'fa fa-hdd-o', materialIcon: 'filter_1', name: 'Adv. Form One' }
],
show: false
},
Pages: {
routes: [
{route: '/login', faIcon: 'fa fa-unlock-alt', materialIcon: 'lock_open', name: 'Login'},
//{ route: '/pricing', faIcon: 'fa fa-money', materialIcon: 'attach_money', name: 'Pricing' },
//{ route: '/drag-and-drop', faIcon: 'fa fa-arrows', materialIcon: 'move_to_inbox', name: 'Drag and Drop' },
//{ route: '/server-side-data-table', faIcon: 'fa fa-list-alt', materialIcon: 'list_compact', name: 'Server Side Data Table' }
],
show: false
}
}
get MenuCollapse () {
return GlobModule.menuCollapse
}
get Username () {
return UserModule.username
}
get Verificato () {
return UserModule.verifiedEmail
}
logoutHandler() {
this.logout({ router: this.$router })
this.$q.notify(this.$t('logout.uscito'))
}
}
</script>
<style scoped>

2
src/pages/Index.vue
View File

@@ -41,7 +41,7 @@
<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import { GlobModule } from '@/store/modules/glob'
import { GlobModule } from '../store/modules/glob'
@Component({})
export default class Login extends Vue {

4
src/plugins/i18n.js
View File

@@ -8,8 +8,8 @@ export default ({ app, store, Vue }) => {
console.log("PLUGINS INIT....");
console.log("LANG_DEFAULT: ")
console.log(process.env.LANG_DEFAULT)
//console.log("LANG_DEFAULT: ")
//console.log(process.env.LANG_DEFAULT)
// Set i18n instance on app
app.i18n = new VueI18n({

2
src/router/routes.ts
View File

@@ -3,8 +3,8 @@ import { RouteConfig } from 'vue-router'
const routes: RouteConfig[] = [
{ path: '/', component: () => import('@/pages/Index.vue'), meta: { name: 'Home' } },
{ path: '/test', component: () => import('@/views/login/test.vue'), meta: { name: 'Test' } },
/*
{ path: '/signup', component: () => import('@/views/login/signup.vue'), meta: { name: 'Registration' } },
/*
{ path: '/signin', component: () => import('@/views/login/signin.vue'), meta: { name: 'Login' } },
{ path: '/vreg', component: () => import('@/views/login/vreg.vue'), meta: { name: 'Verify Reg' } },
{

7
src/store/index.ts
View File

@@ -1,13 +1,16 @@
import Vue from 'vue'
import Vuex from 'vuex'
import { IUserState } from '@/types'
import { IUserState, IGlobState } from '@/types'
Vue.use(Vuex)
export interface IRootState {
user: IUserState
glob: IGlobState
role: IRootState
}
export default new Vuex.Store<IRootState>({})
const store = new Vuex.Store<IRootState>({})
export default store

9
src/store/modules/glob.ts
View File

@@ -9,15 +9,6 @@ import store from '@/store'
Vue.use(Vuex)
export interface IGlob {
conta: number
isLoginPage: boolean
layoutNeeded: boolean
mobileMode: boolean
menuCollapse: boolean
posts: string[]
}
@Module({ dynamic: true, store, name: 'glob' })
class Glob extends VuexModule { // Non occorrono i getters, basta questi qui:

6
src/store/modules/useraa.ts → src/store/modules/user.ts
View File

@@ -2,6 +2,8 @@ import Vue from 'vue'
import Vuex from 'vuex'
import { Module, VuexModule, Mutation, MutationAction, Action, getModule } from 'vuex-module-decorators'
import {Route} from 'vue-router'
import store from '@/store'
const bcrypt = require('bcryptjs')
@@ -10,7 +12,6 @@ import { serv_constants } from '@/store/modules/serv_constants'
import { IUserState, ILinkReg, IResult, IIdToken } from '@/types'
import store from '@/store'
export const ErroriMongoDb = {
CALLING: 10,
@@ -30,7 +31,7 @@ class User extends VuexModule implements IUserState { // Non occorrono i gette
idapp: IUserState['idapp'] = process.env.APP_ID
password: IUserState['password'] = ''
lang: IUserState['lang'] = ''
ripetipassword: IUserState['ripetipassword'] = ''
repeatPassword: IUserState['repeatPassword'] = ''
idToken: IUserState['idToken'] = ''
userId: IUserState['userId'] = 0
tokens: IUserState['tokens'] = []
@@ -98,6 +99,7 @@ class User extends VuexModule implements IUserState { // Non occorrono i gette
this.userId = data.userId
this.idToken = data.idToken
this.verifiedEmail = data.verifiedEmail
// @ts-ignore
this.tokens = [
{ access: 'auth', token: data.idToken }
]

45
src/types/index.d.ts vendored Normal file
View File

@@ -0,0 +1,45 @@
export interface IToken {
access: string
token: string
}
export interface IUserState {
_id?: string
email?: string
username: string
idapp?: any
password?: string
lang?: string
repeatPassword?: string
idToken?: string
userId?: number
tokens?: IToken[]
verifiedEmail?: boolean
tokenforgot?: string
}
export interface IGlobState {
conta: number
isLoginPage: boolean
layoutNeeded: boolean
mobileMode: boolean
menuCollapse: boolean
posts: string[]
}
export interface ILinkReg {
idLink: string
}
export interface IIdToken {
idToken: string
}
export interface IResult {
status: number
statusText: string
}

18
src/utils/config.ts Normal file
View File

@@ -0,0 +1,18 @@
import dotenv from 'dotenv'
dotenv.config()
let path
switch (process.env.NODE_ENV) {
case 'test':
path = `${__dirname}/../../.env.test`
break
case 'production':
path = `${__dirname}/../../.env.production`
break
default:
path = `${__dirname}/../../.env.development`
}
dotenv.config({ path })
export const APP_ID = process.env.APP_ID
export const LOG_LEVEL = process.env.LOG_LEVEL

278
src/views/login/signup.vue
View File

@@ -11,71 +11,72 @@
<!--Prova URL : {{env('PROVA_PAOLO')}}-->
<q-field
:error="$v.form.email.$error"
:error-label="`${errorMsg('email', $v.form.email)}`"
:error="$v.user.email.$error"
:error-label="`${errorMsg('email', $v.user.email)}`"
>
<q-input
v-model="form.email"
:value="form.email"
@change="val => { form.email = val }"
v-model="user.email"
v-validate="'required|email|truthy'"
:value="user.email"
@change="val => { user.email = val }"
:before="[{icon: 'mail', handler () {}}]"
@blur="$v.form.email.$touch"
:error="$v.form.email.$error"
@blur="$v.user.email.$touch"
:error="$v.user.email.$error"
:float-label="$t('reg.email')"
/>
</q-field>
<q-field
:error="$v.form.username.$error"
:error-label="`${errorMsg('username', $v.form.username)}`"
:error="$v.user.username.$error"
:error-label="`${errorMsg('username', $v.user.username)}`"
>
<q-input
:value="form.username"
@change="val => { form.username = val }"
:value="user.username"
@change="val => { user.username = val }"
:before="[{icon: 'person', handler () {}}]"
@blur="$v.form.username.$touch"
:error="$v.form.username.$error"
@blur="$v.user.username.$touch"
:error="$v.user.username.$error"
:float-label="$t('reg.username')"
/>
</q-field>
<q-field
:error="$v.form.password.$error"
:error-label="`${errorMsg('password', $v.form.password)}`"
:error="$v.user.password.$error"
:error-label="`${errorMsg('password', $v.user.password)}`"
>
<q-input
v-model="form.password"
v-model="user.password"
:before="[{icon: 'vpn_key', handler () {}}]"
@blur="$v.form.password.$touch"
:error="$v.form.password.$error"
@blur="$v.user.password.$touch"
:error="$v.user.password.$error"
:float-label="$t('reg.password')"
/>
</q-field>
<q-field
:error="$v.form.repeatPassword.$error"
:error-label="`${errorMsg('repeatpassword', $v.form.repeatPassword)}`"
:error="$v.user.repeatPassword.$error"
:error-label="`${errorMsg('repeatpassword', $v.user.repeatPassword)}`"
>
<q-input
v-model="form.repeatPassword"
v-model="user.repeatPassword"
:before="[{icon: 'vpn_key', handler () {}}]"
@blur="$v.form.repeatPassword.$touch"
:error="$v.form.repeatPassword.$error"
@blur="$v.user.repeatPassword.$touch"
:error="$v.user.repeatPassword.$error"
:float-label="$t('reg.repeatPassword')"
/>
</q-field>
<q-field
:error="$v.form.terms.$error"
:error-label="`${errorMsg('terms', $v.form.terms)}`"
:error="$v.user.terms.$error"
:error-label="`${errorMsg('terms', $v.user.terms)}`"
>
<q-checkbox
v-model="form.terms"
v-model="user.terms"
:before="[{icon: 'vpn_key', handler () {}}]"
color="secondary"
@blur="$v.form.terms.$touch"
:error="$v.form.terms.$error"
@blur="$v.user.terms.$touch"
:error="$v.user.terms.$error"
:float-label="$t('reg.terms')"
:label="$t('reg.terms')"
/>
@@ -92,45 +93,42 @@
</div>
</template>
<script>
<script type="ts">
import Vue from 'vue'
import { Component, Prop } from 'vue-property-decorator'
import { UserModule } from '../../store/modules/user'
import { IUserState } from "../../types";
import {ErroriMongoDb} from '../../store/modules/user'
import {
required,
email,
numeric,
minValue,
minLength,
maxLength,
sameAs,
requiredUnless
} from 'vuelidate/lib/validators'
/*
import VeeValidate from 'vee-validate'
Vue.use(VeeValidate)
import { Validator } from 'vee-validate'
import {mapGetters, mapActions} from 'vuex'
import * as types from '../../store/mutation-types'
Validator.extend('truthy', {
getMessage: field => 'The ' + field + ' value is not truthy.',
validate: value => !!value
})
*/
//import {ErroriMongoDb} from '../../store/modules/user'
import axios from 'axios';
//import {Loading, QSpinnerFacebook, QSpinnerGears} from 'quasar'
import {Loading, QSpinnerFacebook, QSpinnerGears} from 'quasar'
@Component({})
export default class Signup extends Vue {
accountId: number = 0
duplicate_email: boolean = false
duplicate_username: boolean = false
user: IUserState = {
email: process.env.TEST_EMAIL,
username: process.env.TEST_USERNAME,
password: process.env.TEST_PASSWORD,
repeatPassword: process.env.TEST_PASSWORD,
dateOfBirth: '',
terms: true,
}
export default {
data() {
return {
url: process.env.VUE_APP_URL,
form: {
email: process.env.TEST_EMAIL,
username: process.env.TEST_USERNAME,
password: process.env.TEST_PASSWORD,
repeatPassword: process.env.TEST_PASSWORD,
dateOfBirth: '',
terms: true,
},
duplicate_email: false,
duplicate_username: false,
}
},
computed: {
/*
...mapGetters("user", [
'getUsername',
'getPassword',
@@ -141,10 +139,9 @@
'getUserServer',
'getServerCode',
]),
env() {
return env
},
},
*/
/*
validations: {
isAsync: true,
form: {
@@ -179,88 +176,91 @@
terms: {required},
}
},
methods: {
...mapActions("user", {
signup: types.USER_SIGNUP,
}),
showNotif(msg) {
this.$q.notify(msg)
},
errorMsg(cosa, item) {
try {
if (!item.$error) return '';
if (item.$params.email && !item.email) return this.$t('reg.err.email');
}, */
env() {
return env
}
if (cosa === 'repeatpassword') {
if (!item.sameAsPassword) {
return this.$t('reg.err.sameaspassword');
}
showNotif(msg) {
this.$q.notify(msg)
}
errorMsg(cosa, item) {
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 (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');
}
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);
}
},
checkErrors(riscode) {
//console.log("RIS = " + riscode);
if (riscode === ErroriMongoDb.DUPLICATE_EMAIL_ID) {
this.showNotif(this.$t('reg.err.duplicate_email'));
} else if (riscode === ErroriMongoDb.DUPLICATE_USERNAME_ID) {
this.showNotif(this.$t('reg.err.duplicate_username'));
} else if (riscode === ErroriMongoDb.OK) {
this.$router.push('/');
} else {
this.showNotif("Errore num " + riscode);
}
},
submit() {
this.$v.form.$touch();
this.duplicate_email = false;
this.duplicate_username = false;
if (!this.form.terms) {
this.showNotif(this.$t('reg.err.terms'));
return
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')
}
if (this.$v.form.$error) {
this.showNotif(this.$t('reg.err.errore_generico'));
return
}
this.$q.loading.show({message: this.$t('reg.incorso')});
console.log(this.form);
this.signup(this.form)
.then((riscode) => {
this.checkErrors(riscode);
this.$q.loading.hide();
}).catch(error => {
console.log("ERROR = " + error);
this.$q.loading.hide();
});
// ...
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);
}
},
}
checkErrors(riscode) {
//console.log("RIS = " + riscode);
if (riscode === ErroriMongoDb.DUPLICATE_EMAIL_ID) {
this.showNotif(this.$t('reg.err.duplicate_email'))
} else if (riscode === ErroriMongoDb.DUPLICATE_USERNAME_ID) {
this.showNotif(this.$t('reg.err.duplicate_username'))
} else if (riscode === ErroriMongoDb.OK) {
this.$router.push('/')
} else {
this.showNotif("Errore num " + riscode)
}
}
submit() {
this.$v.user.$touch()
this.duplicate_email = false
this.duplicate_username = false
if (!this.user.terms) {
this.showNotif(this.$t('reg.err.terms'))
return
}
if (this.$v.user.$error) {
this.showNotif(this.$t('reg.err.errore_generico'))
return
}
this.$q.loading.show({ message: this.$t('reg.incorso') })
console.log(this.user)
UserModule.signup(this.user)
.then((riscode) => {
this.checkErrors(riscode)
this.$q.loading.hide()
}).catch(error => {
console.log("ERROR = " + error)
this.$q.loading.hide()
})
// ...
}
}
</script>
<style scoped>

2
src/views/login/test.vue
View File

@@ -24,7 +24,7 @@
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import { UserModule } from '@/store/modules/useraa';
import { UserModule } from '../../store/modules/user';
@Component({})