.env.production file eliminated ! (-> .env)

.env.production worked in local
added myconfig
messagepopup working (but not ready yet)
added Graphql (only module)

.env.development

@@ -0,0 +1,11 @@
+APP_ID='1'
+VUE_APP_URL='prova SVILUPPO!'
+PROVA_PAOLO='PROVA SVILUPPO'
+LANG_DEFAULT='it'
+MONGODB_HOST='http://localhost:3000'
+PAO_APP_ID='KKPPAA5KJK435J3KSS9F9D8S9F8SD98F9SDF'
+MASTER_KEY='KKPPSS5KJK435J3KSS9F9D8S9F8SD3CR3T'
+LOGO_REG='quasar-logo-full.svg'
+TEST_EMAIL='paolo.arena77@gmail.com'
+TEST_USERNAME='paoloar77'
+TEST_PASSWORD='mypassword@1A'

.gitignore

@@ -26,3 +26,6 @@ yarn-error.log*
 # Coverage
 coverage
 /_PROVE
+/_LOCALE
+deploy.sh
+deploy_production.sh

config/envparser.js

@@ -1,5 +1,19 @@
 const DotEnv = require('dotenv')
-const parsedEnv = DotEnv.config().parsed;
+
+let path
+switch (process.env.NODE_ENV) {
+  case 'test':
+    path = `.env.test`
+    break
+  case 'development':
+    path = `.env.development`
+    break
+  default:
+    path = `.env`
+}
+
+console.log("PATH", path)
+const parsedEnv = DotEnv.config({ path }).parsed;
 
 module.exports = function () {
   // Let's stringify our variables

package.json

@@ -5,16 +5,16 @@
   "scripts": {
     "lint": "tslint --project tsconfig.json",
     "lint:fix": "tslint --project tsconfig.json --fix",
-    "dev": "NODE_OPTIONS=--max_old_space_size=4096 DEBUG=v8:* quasar dev -m pwa",
+    "dev": "NODE_ENV=development NODE_OPTIONS=--max_old_space_size=4096 DEBUG=v8:* quasar dev -m pwa",
-    "dev:ssr": "NODE_OPTIONS=--max_old_space_size=4096 DEBUG=v8:* quasar dev -m ssr",
+    "dev:ssr": "NODE_ENV=development NODE_OPTIONS=--max_old_space_size=4096 DEBUG=v8:* quasar dev -m ssr",
-    "pwa": "NODE_OPTIONS=--max_old_space_size=4096 DEBUG=v8:* quasar dev -m pwa",
+    "pwa": "NODE_ENV=development NODE_OPTIONS=--max_old_space_size=4096 DEBUG=v8:* quasar dev -m pwa",
     "test:unit": "jest",
     "test:cover": "jest --coverage",
     "build": "quasar build -m pwa",
     "build:clean": "quasar clean",
     "serve": "quasar serve ./dist/pwa-mat",
     "serve:coverage": "quasar serve test/coverage/lcov-report/ --cache 0 --port 8788",
-    "deploy": "now dist/pwa-mat"
+    "deploy": "deploy.sh"
   },
   "dependencies": {
     "quasar-extras": "^2.0.8",
@@ -26,6 +26,8 @@
     "bcrypt": "^3.0.2",
     "bcryptjs": "^2.4.3",
     "dotenv": "^6.1.0",
+    "graphql": "^0.13.2",
+    "graphql-tag": "^2.8.0",
     "element-ui": "^2.3.6",
     "google-translate-api": "^2.3.0",
     "js-cookie": "^2.2.0",

quasar.conf.js

@@ -59,7 +59,7 @@ module.exports = function (ctx) {
       store: 'src/store/index.ts'
     },
     // app plugins (/src/plugins)
-    plugins: ['i18n', 'axios', 'vee-validate'],
+    plugins: ['i18n', 'axios', 'vee-validate', 'myconfig', 'local-storage', 'error-handler'],
     css: [
       'app.styl'
     ],
@@ -78,8 +78,8 @@ module.exports = function (ctx) {
       scopeHoisting: true,
       vueRouterMode: 'history',
       vueCompiler: true,
-      gzip: true,
+      gzip: false,   // gzip true
-      analyze: true,
+      analyze: false,  // true
       // extractCSS: false,
       chainWebpack(config) {
         extendTypescriptToWebpack(config);
@@ -93,8 +93,15 @@ module.exports = function (ctx) {
           .test(/\.pug$/)
           .use('pug')
           .loader('pug-plain-loader')
+        /*config.module
+          .rule('template-engine')
+          .test(/\.(gql|graphql)$/)
+          .loader('graphql-tag/loader') */
       }
     },
+    dev: {
+      env: require('./.env.development'),
+    },
     devServer: {
       https: false,
       port: 8080,

src/App.vue

@@ -17,8 +17,6 @@
 </template>
 <script lang="ts">
   import Vue from "vue"
-  import { Store } from "vuex"
-  import { sync } from 'vuex-router-sync'
   import { Component } from 'vue-property-decorator'
   import { EventBus, RootState, storeBuilder, DebugMode } from '@store'
   import router from "./router"
@@ -35,11 +33,19 @@
     router
   })
   export default class App extends Vue {
-    backgroundColor = 'whitesmoke'
+    public backgroundColor = 'whitesmoke'
 
     created() {
       //this.title = 'My Vue and CosmosDB Heroes App'
-      // console.info(process.env)
+      if (process.env.DEV){
+        console.info("SESSIONE IN SVILUPPO ! (DEV)")
+        console.info(process.env)
+      }
+      if (process.env.PROD){
+        console.info("SESSIONE IN PRODUZIONE!")
+        console.info(process.env)
+      }
+
       UserStore.mutations.autologin()
     }
   }

src/boot/local-storage.js

@@ -0,0 +1,62 @@
+import { LocalStorage } from 'quasar'
+// import { onFail } from '../../_LOCALE/src/session/logout'
+// import appSetup from './app-setup'
+import config from '../config'
+
+var authorized = false
+
+export default () => {
+  if (config.localStorage.enableListener) {
+    window.addEventListener('storage', (e) => {
+      if (!authorized) {
+        console.warn('Unauthorized local storage change')
+        switch (config.localStorage.unauthChange) {
+          case 'block':
+            if (e.key === 'null' || e.key === null) {
+              reload()
+            } else {
+              _LocalStorage.setNative(e.key, e.oldValue)
+            }
+            break
+          case 'clear':
+            reload()
+            break
+          default:
+            reload()
+            break
+        }
+      }
+    }, false)
+  }
+  return Promise.resolve(true)
+}
+
+const reload = () => {
+  // onFail().then(success => appSetup())
+}
+
+export const _LocalStorage = {
+  setNative (key, value) {
+    authorized = true
+    localStorage.setItem(key, value)
+    authorized = false
+  },
+  set (key, value) {
+    authorized = true
+    LocalStorage.set(key, value)
+    authorized = false
+  },
+  remove (key) {
+    authorized = true
+    LocalStorage.remove(key)
+    authorized = false
+  },
+  clear () {
+    authorized = true
+    LocalStorage.clear()
+    authorized = false
+  },
+  get (key) {
+    return LocalStorage.get.item(key)
+  }
+}

src/classes/AlertsController.ts

@@ -1,201 +0,0 @@
-import {Forms} from './FormController'
-
-import Router from '@router'
-
-export namespace AlertsElement {
-
-  type AlertType = 'success' | 'confirm' | 'warning' | 'error' | 'info' | 'form'
-  type Diff<T extends string, U extends string> = ({[P in T]: P } & {[P in U]: never } & { [x: string]: never })[T]
-  type Omit<T, K extends keyof T> = Pick<T, Diff<keyof T, K>>
-  type formParam = {
-    form: Forms.Form,
-    validations?: {
-      [x: string]: any
-    },
-    submit: {
-      params?: {[x: string]: any},
-      trigger: Function
-    }
-  }
-
-  export class Alert {
-    public type: AlertType
-    public title: string
-    public message?: string
-    public strict?: boolean
-    public actions: ActionsElements.Action[]
-    public formElement?: formParam
-    public onClose?: Function[]
-
-    constructor(fields?: {type: AlertType, title: string, message?: string, strict?: boolean, actions: ActionsElements.Action[], formElement?: formParam, onClose?: Function[]}) {
-      Object.assign(this, fields)
-      AlertsStore.actions.addAlert(this)
-    }
-
-    async waitResponse() {
-      return AlertsStore.actions.addAlert(this)
-    }
-  }
-
-  export class WarningAlert extends Alert {
-    constructor(fields?: {title: string, message?: string, strict?: boolean, actions?: ActionsElements.Action[], onClose?: Function[]}) {
-      const actions = fields.actions || []
-      const confirmAction = (fields.actions && fields.actions.find(m => m.type == 'confirm')) ? undefined : new ActionsElements.ConfirmAction({})
-      console.log(fields.actions)
-      super({
-        title: fields.title,
-        type: 'warning',
-        strict: fields.strict,
-        message: fields.message,
-        onClose: fields.onClose,
-        actions: [
-          ...actions,
-          confirmAction
-        ]
-      })
-    }
-  }
-
-  export class SuccessAlert extends Alert {
-    constructor(fields?: {title: string, message?: string, strict?: boolean, actions?: ActionsElements.Action[], onClose?: Function[]}) {
-      const actions = fields.actions || []
-      const confirmAction = (fields.actions && fields.actions.find(m => m.type == 'confirm')) ? undefined : new ActionsElements.ConfirmAction({})
-      console.log(fields.actions)
-      super({
-        title: fields.title || 'Opération réussie',
-        type: 'success',
-        strict: fields.strict,
-        message: fields.message,
-        onClose: fields.onClose,
-        actions: [
-          ...actions,
-          confirmAction
-        ]
-      })
-    }
-  }
-
-  export class ErrorAlert extends Alert {
-    constructor(fields?: {title: string, message?: string, strict?: boolean, actions?: ActionsElements.Action[], onClose?: Function[]}) {
-      const actions = fields.actions || []
-      console.log(fields.actions)
-      const confirmAction = (fields.actions && fields.actions.find(m => m.type == 'confirm')) ? undefined : new ActionsElements.ConfirmAction({text: 'Fermer'})
-      super({
-        title: fields.title || `Erreur de l'opération`,
-        type: 'error',
-        strict: fields.strict,
-        message: fields.message,
-        onClose: fields.onClose,
-        actions: [
-          ...actions,
-          confirmAction
-        ]
-      })
-    }
-  }
-
-  export class FormAlert extends Alert {
-    constructor(fields?: {title: string, message?: string, strict?: boolean, formElement: formParam, onClose?: Function[]}) {
-      const confirmAction = new ActionsElements.ConfirmAction({
-        text: 'Valider',
-        triggers: [
-          () => fields.formElement.submit.trigger({form: fields.formElement.form.getData(), ...fields.formElement.submit.params})
-        ]
-      })
-
-      super({
-        title: fields.title || '',
-        type: 'form',
-        strict: fields.strict,
-        formElement: fields.formElement,
-        message: fields.message,
-        onClose: fields.onClose,
-        actions: [
-          confirmAction,
-          new ActionsElements.CancelAction()
-        ]
-      })
-    }
-  }
-}
-
-
-
-
-
-
-export namespace ActionsElements {
-
-  type ActionType = 'confirm' | 'action' | 'cancel' | 'link'
-
-  export class Action {
-    public type: ActionType
-    public text: string
-    public to?: {path: string} | {name: string, params?: {[x: string]: any}}
-    public trigger?: Function
-    public triggers?: Function[]
-
-    constructor({type, text, trigger, triggers, to}: Action) {
-      this.text = text
-      this.type = type
-      this.trigger = trigger
-      this.triggers = triggers
-      this.to = to
-    }
-  }
-
-  export class ConfirmAction extends Action {
-    constructor({text, triggers}: {text?: string, triggers?: Function[]}) {
-      super({
-        text: text ||  'Ça marche!',
-        type: 'confirm'
-      })
-      if (triggers) {
-        this.triggers = [
-          ...triggers,
-          AlertsStore.mutations.confirmAlert
-        ]
-      } else {
-        this.trigger = this.trigger = AlertsStore.mutations.confirmAlert
-      }
-    }
-  }
-
-  export class LinkAction extends Action {
-    constructor({text, to}: {text: string, to: {path: string} | {name: string, params?: {[x: string]: any}}}) {
-      super({
-        text: text,
-        to: to,
-        type: 'link'
-      })
-    }
-  }
-
-  export class LoginAction extends Action {
-    constructor() {
-      super({
-        text: 'Se connecter',
-        type: 'action',
-        triggers: [
-          LoginStore.mutations.showLogin,
-          AlertsStore.actions.hideAlert
-        ]
-      })
-    }
-  }
-  export class CancelAction extends Action {
-    constructor() {
-      super({
-        text: 'Annuler',
-        type: 'cancel',
-        trigger: AlertsStore.mutations.cancelAlert
-      })
-    }
-  }
-
-  export const triggers = {
-    close() {
-      return AlertsStore.mutations.hideAlert()
-    }
-  }
-}

src/classes/DateController.ts

@@ -1,26 +0,0 @@
-import moment from 'moment';
-import 'moment/locale/fr';
-moment.locale('fr')
-
-const monthsStrings = ['Janvier','Fevrier','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'];
-
-
-export class DateMoving {
-  public date: moment.Moment;
-  public hour: string;
-  public number: number;
-  public month: string;
-  public year: number;
-
-  constructor(time: number) {
-    this.date = moment(time * 1000);
-    this.hour = `${this.date.format('HH:mm')}`;
-    this.number = this.date.date();
-    this.year = this.date.year();
-    this.month = monthsStrings[this.date.month()];
-  }
-
-  fullString() {
-    return this.date.format('Do MMMM YYYY, HH:mm');
-  }
-}

src/classes/FormController.ts

@@ -1,205 +0,0 @@
-const css = require('@css')
-
-
-
-export namespace Forms {
-
-  function extractValues(_this, _fieldsData, fields) {
-    for (let prop in fields) {
-      if (fields[prop] instanceof DefaultFormElement) {
-        _this[prop] = fields[prop].value
-        const {value, ...rest} = fields[prop]
-        _fieldsData[prop] = rest
-      } else {
-        _this[prop] = {}
-        _fieldsData[prop] = {}
-        extractValues(_this[prop], _fieldsData[prop], fields[prop])
-      }
-    }
-  }
-
-
-
-  export class Form {
-    public initialState: any
-    public fieldsData = {}
-
-    constructor(fields: Object) {
-      extractValues(this, this.fieldsData, fields)
-      this.initialState = fields
-    }
-
-
-    reset() {
-      const form = new Form(this.initialState)
-      Object.keys(form).forEach(key => {
-        this[key] = form[key]
-      })
-    }
-
-    getData(): {[x: string]: any} {
-      const _this = Object.assign({}, this)
-      delete _this.fieldsData
-      delete _this.initialState
-      return _this
-    }
-
-    validations() {
-      return Object.keys(this.fieldsData).map(m => this.fieldsData[m].validations)
-    }
-  }
-
-  type FormType = 'text' | 'number' | 'password' | 'checkbox' | 'radio' | 'email' | 'tel' | 'date' | 'time' | 'datetime-local'
-  type IOptions = {value: any, text: string}
-  type IComponentType = 'FormText' | 'FormField' | 'StarRating' | 'FormSelect' | 'CheckBox' | 'Radio' | 'FormCalendar' | 'FormPlaceSearch' | 'FormUpload'
-
-  interface FormPayload {
-    value?: any
-    tempValue?: any
-    icon?: any
-    type?: FormType
-    placeholder?: string
-    error?: boolean
-    disabled?: boolean
-    required?: boolean
-    inlineIcon?: boolean
-    debounce?: number
-    options?: IOptions[]
-    component?: IComponentType
-    editMode?: boolean
-    noEdit?: boolean
-    validations?: {
-      [x: string]: any
-    }
-
-  }
-  class DefaultFormElement {
-    value: any
-    tempValue?: any
-    icon?: any
-    type?: FormType
-    placeholder?: string
-    required?: boolean
-    error?: boolean
-    disabled?: boolean
-    inlineIcon?: boolean
-    debounce?: number
-    options?: IOptions[]
-    component: IComponentType
-    editMode?: boolean
-    noEdit?: boolean
-    validations?: {
-      [x: string]: any
-    }
-
-    constructor({error = true, required = true, noEdit = false, editMode = false, ...fields}: FormPayload) {
-      this.value = fields.value !== undefined ? fields.value : ''
-      this.icon = fields.icon || null
-      this.type = fields.type || 'text'
-      this.placeholder = fields.placeholder || `${this.type} input`
-      this.error = error
-      this.disabled = fields.disabled || false
-      this.inlineIcon = fields.inlineIcon || false
-      this.debounce = fields.debounce || null
-      this.required = required
-      this.options = fields.options
-      this.component = fields.component || null
-      this.validations = fields.validations
-      this.tempValue = fields.tempValue
-      this.noEdit = noEdit
-      this.editMode = editMode
-    }
-
-    reset() {
-      this.value = null
-    }
-  }
-
-  export class TextForm extends DefaultFormElement {
-    constructor(fields: FormPayload) {
-      super({...fields, component: 'FormText'})
-    }
-  }
-
-  export class FieldForm extends DefaultFormElement {
-    constructor(fields: FormPayload) {
-      super({...fields, component: 'FormField'})
-    }
-  }
-  export class UploadForm extends DefaultFormElement {
-    constructor(fields: FormPayload) {
-      super({...fields, component: 'FormUpload'})
-    }
-  }
-
-
-  export class PlaceSearchForm extends DefaultFormElement {
-    constructor(fields: FormPayload) {
-      super({...fields, component: 'FormPlaceSearch'})
-    }
-  }
-
-  export class CalendarForm extends DefaultFormElement {
-    constructor(fields: FormPayload) {
-      super({...fields, component: 'FormCalendar'})
-    }
-  }
-
-  export class Radio extends DefaultFormElement {
-    constructor(fields: FormPayload) {
-      super({...fields, type: 'radio', component: 'Radio'})
-    }
-  }
-
-  export class Select extends DefaultFormElement {
-    constructor(fields: FormPayload) {
-      super({...fields, component: 'FormSelect'})
-    }
-  }
-
-  export class CheckBox extends DefaultFormElement {
-    constructor(fields: FormPayload) {
-      super({...fields, type: 'checkbox', component: 'CheckBox'})
-    }
-  }
-
-  interface StarPayload extends FormPayload {
-    starCount?: number,
-    baseColor?: string,
-    selectedColor?: string,
-    hoverColor?: string,
-    editable?: boolean,
-    init?: number,
-    size?: number,
-    displayNote?: boolean,
-    center?: boolean
-  }
-
-  export class StarRating extends DefaultFormElement {
-    starCount?: number
-    baseColor?: string
-    selectedColor?: string
-    hoverColor?: string
-    editable?: boolean
-    init?: number
-    size?: number
-    displayNote?: boolean
-    center?: boolean
-
-    constructor(fields: StarPayload) {
-      fields.component = 'StarRating'
-      super(fields)
-      this.starCount = fields.starCount || 5
-      this.baseColor = fields.baseColor || css.mainStyle
-      this.selectedColor = fields.selectedColor || css.mainStyle
-      this.hoverColor = fields.hoverColor || css.yellow1
-      this.editable = fields.editable != null ? fields.editable : true
-      this.init = fields.init || 0
-      this.size = fields.size || 25
-      this.displayNote = fields.displayNote != null ? fields.displayNote : false
-      this.center = fields.center != null ? fields.center : true
-    }
-  }
-}
-
-

src/classes/index.ts

@@ -1,3 +0,0 @@
-export * from './AlertsController'
-export * from './FormController'
-export * from './DateController'

src/components/Counter.vue

@@ -1,20 +0,0 @@
-<template>
-    <div>
-        <h3>TS Counter</h3>
-        <div>{{count}}</div>
-        <div>
-            <button @click="increment()">INCREMENT</button>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-    import Vue from 'vue'
-    import Component from 'vue-class-component'
-
-    @Component
-    export default class Counter extends Vue {
-        count = 0;
-        increment() { this.count++ }
-    }
-</script>

src/components/Header.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <q-layout-header v-model="header" :reveal="headerReveal">
+        <q-layout-header>
             <q-toolbar
                     color="primary"
                     :glossy="$q.theme === 'mat'"
@@ -26,7 +26,9 @@
 
                 <q-select class="sel_lang" v-model="lang" stack-label="" :options="selectOpLang"/>
 
-                <!--<message-popover></message-popover>-->
+                <!--
+                <message-popover></message-popover>
+                -->
 
                 <!--
                 <div class="right-itens">
@@ -55,7 +57,7 @@
   import Component from 'vue-class-component'
 
   import drawer from '../layouts/drawer/drawer.vue'
-  import messagePopover from '../layouts/toolbar/messagePopover.vue'
+  import messagePopover from '../layouts/toolbar/messagePopover/messagePopover.vue'
 
   @Component({
     components: {

src/components/HelloWorld.ts

@@ -1,6 +0,0 @@
-import { Component, Vue } from 'vue-property-decorator'
-
-@Component
-export default class HelloWorld extends Vue {
-
-}

src/components/hello-world.html

@@ -1,29 +0,0 @@
-<div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-        For guide and recipes on how to configure / customize this project,<br>
-        check out the
-        <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-        <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-        <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-        <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-        <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-        <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-        <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-        <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-        <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-        <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-        <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-        <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-        <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-</div>

src/error-handler/graphql.js

@@ -0,0 +1,19 @@
+import { i18n } from '../plugins/i18n'
+import { Notify } from 'quasar'
+export default (error) => {
+  let message = this.$i18n.t('errors.graphql.undefined')
+
+  if (error[0].validation) {
+    let errors = Object.keys(error[0].validation)
+    message = error[0].validation[errors[0]][0]
+  }
+
+  Notify.create({
+    message,
+    position: 'center'
+  })
+
+  if (message === this.$i18n.t('errors.graphql.undefined')) {
+    console.log(error.response)
+  }
+}

src/error-handler/index.js

@@ -0,0 +1,21 @@
+// import Backend from './backend'
+// import Firebase from './firebase'
+import Graphql from './graphql'
+
+export default (context, error) => {
+  /*
+  if (error.constructor.name === 'FirebaseError') {
+    Firebase(error)
+    return
+  }
+  if (error.response && error.response.data && error.response.data.backend) {
+    Backend(error)
+    return
+  }*/
+
+  if (error[0] && error[0].locations && error[0].validation) {
+    Graphql(error)
+    return
+  }
+  console.log('Error handler', error)
+}

src/i18n.js

@@ -6,7 +6,20 @@ const messages = {
     msg: {
       hello: 'Buongiorno',
       myAppName: 'FreePlanet',
-      myDescriz: 'La prima App Libera e per Tutti'
+      myDescriz: 'La prima App Libera'
+    },
+    pages: {
+      home: 'Principale',
+      SignUp: 'Registrazione',
+      SignIn: 'Login',
+      Test: 'Test',
+    },
+    components: {
+      authentication:{
+        login: {
+          facebook: 'Facebook'
+        }
+      }
     },
     reg: {
       incorso: 'Registrazione in corso...',
@@ -53,6 +66,11 @@ const messages = {
     logout:{
       uscito: 'Sei Uscito',
     },
+    errors: {
+      graphql: {
+        undefined: 'non definito'
+      }
+    },
   },
   enUk: {
     comp:{
@@ -61,7 +79,20 @@ const messages = {
     msg: {
       hello: 'Hello!',
       myAppName: 'FreePlanet',
-      myDescriz: 'The first Free app for Everyone'
+      myDescriz: 'The first Free app'
+    },
+    pages: {
+      home: 'Dashboard One',
+      SignUp: 'SignUp',
+      SignIn: 'SignIn',
+      Test: 'Test',
+    },
+    components: {
+      authentication:{
+        login: {
+          facebook: 'Facebook'
+        }
+      }
     },
     reg: {
       incorso: 'Registration please wait...',
@@ -108,6 +139,11 @@ const messages = {
     logout:{
       uscito: 'Logout successfully',
     },
+    errors: {
+      graphql: {
+        undefined: 'undefined'
+      }
+    },
   },
 };
 

src/layouts/drawer/drawer.vue

@@ -18,8 +18,7 @@
             </div>
         </div>
 
-        <menu-one v-if="MenuCollapse" :links="links"></menu-one>
+        <menu-one :links="links"></menu-one>
-        <menu-two v-else :links="links"></menu-two>
 
         <div class="fixed-bottom text-center light text-italic">
             Powered by Perseo
@@ -30,7 +29,6 @@
 
 <script lang="ts">
   import menuOne from './menuOne.vue'
-  import menuTwo from './menuTwo.vue'
 
   import Vue from 'vue'
   import { Component, Watch, Prop } from 'vue-property-decorator'
@@ -42,42 +40,34 @@
   @Component({
     components: {
       menuOne,
-      menuTwo
     }
   })
   export default class Drawer extends Vue {
     public $q
-    $t: any
+    $t: any;
+
+    created () {
+      console.log('Drawer created...')
+    }
+
 
     photo = ''
     user = null
     links = {
       Dashboard: {
         routes: [
-          {route: '/', faIcon: 'fa fa-home', materialIcon: 'home', name: 'Dashboard One'},
+          {route: '/', faIcon: 'fa fa-home', materialIcon: 'home', name: 'pages.home'},
-          {route: '/signup', faIcon: 'fa fa-signup', materialIcon: 'login', name: 'SignUp'},
+          {route: '/signup', faIcon: 'fa fa-signup', materialIcon: 'login', name: 'pages.SignUp'},
-          {route: '/signin', faIcon: 'fa fa-login', materialIcon: 'login', name: 'Login'},
+          {route: '/signin', faIcon: 'fa fa-login', materialIcon: 'login', name: 'pages.SignIn'},
           ],
         show: true
       },
       Forms: {
         routes: [
-          {route: '/prec', faIcon: 'fa fa-search', materialIcon: 'search', name: 'Prec'},
+          {route: '/prec', faIcon: 'fa fa-search', materialIcon: 'search', name: 'pages.Test'},
-          {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 () {

src/layouts/drawer/menuOne.vue

@@ -11,7 +11,7 @@
                         <div v-show="parent.show">
                                 <q-item link :to="child.route" exact class="item item-link drawer-closer cursor-pointer">
                                     <i :class="child.faIcon" class="item-primary"></i>
-                                    <div class="item-content">{{child.name}}</div>
+                                    <div class="item-content">{{$t(child.name)}}</div>
                                 </q-item>
                         </div>
                     </transition>

src/layouts/drawer/menuTwo.vue

@@ -1,7 +0,0 @@
-<template>
-</template>
-
-<script>
-</script>
-<style scoped>
-</style>

src/layouts/toolbar/messagePopover.vue

@@ -1,84 +0,0 @@
-<template>
-  <button class="relative-position animate-bounce">
-    <i class="fa fa-2x fa-envelope-o"></i>
-    <span class="floating label bg-dark">5</span>
-    <q-popover self="top right" >
-      <div class="list striped">
-        <p class="caption no-margin text-center text-white bg-teal">Messages from people</p>
-        <div class="item item-link two-lines item-delimiter no-margin"
-             v-for="post in filteredPosts"
-        >
-          <img class="item-primary" :src="randomAvatarUrl()">
-          <div class="item-content has-secondary">
-            <div>{{post.title}}</div>
-            <div>{{randomDate()}}</div>
-          </div>
-          <span class="label bg-red text-white item-secondary no-margin">
-            <i class="left-detail"></i> New
-          </span>
-        </div>
-      </div>
-    </q-popover>
-  </button>
-</template>
-<script>
-  import { mapGetters, mapActions } from 'vuex'
-  import * as types from '../../store/mutation-types'
-  export default {
-    mounted () {
-      if (this.getPosts.length < 1) {
-        this.requestPosts()
-      }
-    },
-    computed: {
-      ...mapGetters("glob", ['getPosts']),
-      filteredPosts () {
-        return this.getPosts.slice(0, 5)
-      }
-    },
-    methods: {
-      ...mapActions("glob", {
-        'setPosts': types.SET_POSTS,
-      }),
-      randomDate () {
-        return new Date((new Date()) - Math.floor(Math.random() * 10000000000))
-      },
-      randomAvatarUrl () {
-        return `https://api.adorable.io/avatars/face/${this.randomEye()}/${this.randomNose()}/${this.randomMouth()}/${this.randomHexColor()}`
-      },
-      randomHexColor () {
-        return Math.random().toString(16).slice(2, 8)
-      },
-      randomEye () {
-        return this.randomArrayElement(['eyes1', 'eyes10', 'eyes2', 'eyes3', 'eyes4', 'eyes5', 'eyes6', 'eyes7', 'eyes9'])
-      },
-      randomNose () {
-        return this.randomArrayElement(['nose2', 'nose3', 'nose4', 'nose5', 'nose6', 'nose7', 'nose8', 'nose9'])
-      },
-      randomMouth () {
-        return this.randomArrayElement(['mouth1', 'mouth10', 'mouth11', 'mouth3', 'mouth5', 'mouth6', 'mouth7', 'mouth9'])
-      },
-      randomArrayElement (array) {
-        return array[Math.floor((Math.random() * array.length))]
-      },
-      requestPosts () {
-      }
-    }
-  }
-</script>
-<style scoped>
-  .list{
-    max-width: 400px;
-  }
-  .item > img.item-primary:not(.thumbnail) {
-    border-radius: 10px !important;
-  }
-  .item > img.item-primary {
-    width: 48px;
-    height: 46px;
-  }
-  .item > .item-secondary {
-    width: 57px;
-    font-size: 13px;
-  }
-</style>

src/layouts/toolbar/messagePopover/messagePopover.scss

@@ -0,0 +1,17 @@
+.list {
+  max-width: 400px;
+}
+
+.item > img.item-primary:not(.thumbnail) {
+  border-radius: 10px !important;
+}
+
+.item > img.item-primary {
+  width: 48px;
+  height: 46px;
+}
+
+.item > .item-secondary {
+  width: 57px;
+  font-size: 13px;
+}

src/layouts/toolbar/messagePopover/messagePopover.ts

@@ -0,0 +1,70 @@
+import Vue from 'vue'
+import { Component, Prop } from 'vue-property-decorator'
+
+import { GlobalStore } from '@store'
+import { IPost } from '../../../model/index'
+
+import './messagePopover.scss'
+
+@Component({
+})
+export default class MessagePopover extends Vue {
+  posts: IPost[] = []
+
+  created() {
+    if (GlobalStore.state.posts.length < 1) {
+      this.requestPosts()
+    }
+  }
+
+  get filteredPosts() {
+    if (this.posts.length >= 1)
+      return this.posts.slice(0, 5)
+    else
+      return []
+  }
+
+
+  public randomDate(): Date {
+    let myval = Math.floor(Math.random() * 10000000000)
+    return new Date(new Date().valueOf() - myval)
+  }
+
+  public randomAvatarUrl() {
+    return `https://api.adorable.io/avatars/face/${this.randomEye()}/${this.randomNose()}/${this.randomMouth()}/${this.randomHexColor()}`
+  }
+
+  public randomHexColor() {
+    return Math.random().toString(16).slice(2, 8)
+  }
+
+  public randomEye() {
+    return this.randomArrayElement(['eyes1', 'eyes10', 'eyes2', 'eyes3', 'eyes4', 'eyes5', 'eyes6', 'eyes7', 'eyes9'])
+  }
+
+  public randomNose() {
+    return this.randomArrayElement(['nose2', 'nose3', 'nose4', 'nose5', 'nose6', 'nose7', 'nose8', 'nose9'])
+  }
+
+  public randomMouth() {
+    return this.randomArrayElement(['mouth1', 'mouth10', 'mouth11', 'mouth3', 'mouth5', 'mouth6', 'mouth7', 'mouth9'])
+  }
+
+  public randomArrayElement(array) {
+    return array[Math.floor((Math.random() * array.length))]
+  }
+
+  public requestPosts_old() {
+    /*this.$http.jsonplaceholder
+      .get('posts')
+      .then(response => { this.setPosts(response.data) })
+      */
+  }
+
+  public requestPosts() {
+    // console.log('requestPosts...')
+    let prova = [{ title: 'primo' }, { title: 'Secondo' }]
+    this.posts.push(...prova)
+
+  }
+}

src/layouts/toolbar/messagePopover/messagePopover.vue

@@ -0,0 +1,26 @@
+<template>
+    <button class="relative-position animate-bounce">
+        <i class="fa fa-2x fa-envelope-o"></i>
+        <span class="floating label bg-dark">5</span>
+        <q-popover self="top right">
+            <div class="list striped">
+                <p class="caption no-margin text-center text-white bg-teal">Messages from people</p>
+                <div class="item item-link two-lines item-delimiter no-margin"
+                     v-for="post in filteredPosts"
+                >
+                    <img class="item-primary" :src="randomAvatarUrl()">
+                    <div class="item-content has-secondary">
+                        <div>{{post.title}}</div>
+                        <div>{{randomDate()}}</div>
+                    </div>
+                    <span class="label bg-red text-white item-secondary no-margin">
+            <i class="left-detail"></i> New
+          </span>
+                </div>
+            </div>
+        </q-popover>
+    </button>
+</template>
+
+<script lang="ts" src="./messagePopover.ts">
+</script>

src/model/GlobalStore.ts

@@ -1,8 +1,13 @@
+export interface IPost {
+  title: string
+}
+
 export interface IGlobalState {
   conta: number
   isLoginPage: boolean
   layoutNeeded: boolean
   mobileMode: boolean
   menuCollapse: boolean
-  posts: string[]
+  posts: IPost[]
 }
+

src/myconfig/index.ts

@@ -1,4 +1,5 @@
 export default {
+  // apiGraphQL: 'http://localhost:8000/graphql',
   i18n: {
     languages: [
       { code: 'it', name: 'Italiano', active: true },
@@ -6,5 +7,9 @@ export default {
     ],
     default: 'it',
     fallbackTo: 'it'
+  },
+  socialLogin: {
+    facebook: false,
+    google: false
   }
 }

src/pages/Dashboard.vue

@@ -1,21 +0,0 @@
-<template lang="pug">
-  q-page.flex.flex-center
-    .column.flex-center
-      p {{ $t('pages.dashboard.title') }}
-</template>
-
-<style>
-</style>
-
-<script lang="ts">
-import { Vue, Component, Mixins } from 'vue-property-decorator'
-
-@Component({
-  meta () {
-    return {
-      title: 'Dashboard'
-    }
-  }
-})
-export default class PageDashboard extends Vue {}
-</script>

src/plugins/error-handler.js

@@ -0,0 +1,7 @@
+// import something here
+import errorHandler from '../error-handler'
+// leave the export, even if you don't use it
+export default ({ app, router, Vue }) => {
+  // something to do
+  Vue.prototype.$errorHandler = errorHandler
+}

src/plugins/i18n.js

@@ -6,7 +6,7 @@ export default ({ app, store, Vue }) => {
   Vue.use(VueI18n);
   Vue.config.lang = process.env.LANG_DEFAULT;
 
-  console.log("PLUGINS INIT....");
+  // console.log("PLUGINS INIT....");
 
   //console.log("LANG_DEFAULT: ")
   //console.log(process.env.LANG_DEFAULT)

src/plugins/local-storage.js

@@ -0,0 +1,7 @@
+// import something here
+import { _LocalStorage } from '../boot/local-storage'
+// leave the export, even if you don't use it
+export default ({ app, router, Vue }) => {
+  // something to do
+  Vue.prototype.$_localStorage = _LocalStorage
+}

src/plugins/myconfig.js

@@ -0,0 +1,9 @@
+// import something here
+import myconfig from '../myconfig'
+
+// leave the export, even if you don't use it
+export default ({ Vue }) => {
+  //Vue.use(myconfig);
+  // something to do
+  Vue.prototype.$myconfig = myconfig
+}

src/root/home/home.ts

@@ -17,10 +17,14 @@ export default class Home extends Vue {
 
   constructor() {
     super()
-    console.log('created...')
+    console.log('Home constructor...')
     this.initprompt()
   }
 
+  created() {
+    console.log('Home created...')
+  }
+
   mystilecard() {
     return {
       visibility: this.cardvisible,
@@ -29,7 +33,7 @@ export default class Home extends Vue {
   }
 
   get conta() {
-    return GlobalStore.getters.conta
+    return GlobalStore.state.conta
   }
   set conta(valore) {
     GlobalStore.actions.setConta(valore)

src/store/Api/Instance.ts

@@ -5,7 +5,6 @@ import {clone} from 'lodash'
 import * as Types from './ApiTypes'
 
 export const API_URL = process.env.API_URL
-export const APP_BASE = process.env.NODE_ENV === 'development' ? 'http://localhost:5000/' : 'http://myip:5000/'
 export const axiosInstance: AxiosInstance = axios.create({
   baseURL: API_URL,
   headers: {

src/store/Api/index.ts

@@ -2,7 +2,7 @@ import Request from './Instance'
 import sendRequest from './Inst-Pao'
 export * from './ApiTypes'
 import axios from 'axios'
-export {addAuthHeaders, removeAuthHeaders, API_URL, APP_BASE} from './Instance'
+export {addAuthHeaders, removeAuthHeaders, API_URL} from './Instance'
 // import {AlgoliaSearch} from './AlgoliaController'
 import Paths from '@paths'
 

src/store/Modules/GlobalStore.ts

@@ -16,7 +16,7 @@ const b = storeBuilder.module<IGlobalState>('GlobalModule', state)
 // Getters
 namespace Getters {
 
-  const conta = b.read(state => state.conta , 'conta')
+  const conta = b.read(state => state.conta, 'conta')
 
   export const getters = {
     get conta() {
@@ -52,7 +52,9 @@ const stateGetter = b.state()
 
 // Module
 const GlobalModule = {
-  get state() { return stateGetter()},
+  get state() {
+    return stateGetter()
+  },
   getters: Getters.getters,
   mutations: Mutations.mutations,
   actions: Actions.actions

src/typings/libs/axios.d.ts

@@ -0,0 +1,8 @@
+import { axios } from 'axios'
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $axios: axios
+  }
+}
+

src/typings/libs/errorHandler.d.ts

@@ -0,0 +1,8 @@
+import { errorHandler } from '../../error-handler'
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $errorHandler: errorHandler
+  }
+}
+

src/typings/libs/myconfig.d.ts

@@ -0,0 +1,8 @@
+import { myconfig } from '../../myconfig'
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $myconfig: myconfig
+  }
+}
+

src/views/login/signin/signin.ts

@@ -23,6 +23,7 @@ import './signin.scss'
 export default class Signin extends Vue {
   public $v
   public $q
+  loading: boolean
   $t: any
 
   public signin: ISigninOptions = {
@@ -33,6 +34,8 @@ export default class Signin extends Vue {
 
   created() {
     this.$v.$reset()
+    // this.$myconfig.socialLogin.facebook = true
+    // console.log('PROVA fb:', this.$myconfig.socialLogin.facebook)
   }
 
   public env() {
@@ -79,6 +82,27 @@ export default class Signin extends Vue {
 
   }
 
+  redirect(response) {
+    this.loading = false
+    window.location.href = response.data.redirect
+  }
+
+  error(error) {
+    this.loading = false
+    this.$errorHandler(this, error)
+  }
+
+  facebook() {
+    this.loading = true
+    this.$axios.get('/backend/loginFacebook')
+      .then(response => this.redirect(response))
+      .catch(error => this.error(error))
+  }
+
+  google() {
+
+  }
+
   submit() {
     this.$v.signin.$touch()
 

src/views/login/signin/signin.vue

@@ -21,8 +21,7 @@
                         :before="[{icon: 'person', handler () {}}]"
                         @blur="$v.signin.username.$touch"
                         :error="$v.signin.username.$error"
-                        :float-label="$t('reg.username')"
+                        :float-label="$t('reg.username')"></q-input>
-                />
             </q-field>
 
             <q-field
@@ -34,8 +33,7 @@
                         :before="[{icon: 'vpn_key', handler () {}}]"
                         @blur="$v.signin.password.$touch"
                         :error="$v.signin.password.$error"
-                        :float-label="$t('reg.password')"
+                        :float-label="$t('reg.password')"></q-input>
-                />
             </q-field>
 
             <div>
@@ -44,6 +42,14 @@
 
             <br>
 
+            <q-card-main 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-main>
+
             <div align="center">
                 <q-btn rounded size="lg" color="primary" @click="submit" :disable="$v.$error">{{$t('login.enter')}}
                 </q-btn>

src/views/login/signup/signup.ts

@@ -39,9 +39,6 @@ export default class Signup extends Vue {
   }
 
   mounted() {
-    if (this.$v) {
-      this.$v.$touch()
-    }
   }
 
   public logoimg() {
@@ -109,6 +106,7 @@ export default class Signup extends Vue {
         }
       }
 
+      if (!item.required) return this.$t('reg.err.required')
       if (cosa === 'email') {
         // console.log("EMAIL " + item.isUnique);
         // console.log(item);
@@ -118,7 +116,6 @@ export default class Signup extends Vue {
         if (!item.isUnique) return this.$t('reg.err.duplicate_username')
       }
 
-      if (!item.required) return this.$t('reg.err.required')
       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')