- Manage multiple login, in different browsers... Multi Token...

- visualization of the Connection State (Online, Offline) using fetch.
2019-02-09 18:04:49 +01:00
parent b65d0a2386
commit 4d5cea1c17
20 changed files with 393 additions and 209 deletions
--- a/.env.development
+++ b/.env.development
@@ -1,4 +1,4 @@
-APP_VERSION="DEV 0.0.10"
+APP_VERSION="DEV 0.0.13"
 SERVICE_WORKER_FILE='service-worker.js'
 APP_ID='1'
 APP_URL='https://freeplanet.app'
--- a/src-pwa/custom-service-worker.js
+++ b/src-pwa/custom-service-worker.js
@@ -1,4 +1,3 @@
-
 /*
 * This file (which will be your service worker)
 * is picked up by the build system ONLY if
@@ -7,49 +6,48 @@

 // Questo è il swSrc

-console.log('SW-06 ___________________________  PAO: this is my custom service worker');
+console.log('   [  VER-0.0.12 ] _---------________-----------_________------------__________________________  PAO: this is my custom service worker');

 importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js'); //++Todo: Replace with local workbox.js
 importScripts('../statics/js/idb.js');
 importScripts('../statics/js/storage.js');


-console.log('SW-06 1');
+// console.log('SW-06 1');
 const cfgenv = {
  serverweb: self.location.protocol + "//" + self.location.hostname + ':3000',
  dbname: 'mydb3',
  dbversion: 11,
 }

-console.log('SW-06 2');
+// console.log('SW-06 2');

-console.log('SERVERWEB=', cfgenv.serverweb)
+// console.log('SERVERWEB=', cfgenv.serverweb)

 // console.log('serverweb', cfgenv.serverweb)

 async function writeData(table, data) {
-  console.log('writeData', table, data);
+  // console.log('writeData', table, data);
  await idbKeyval.setdata(table, data);
 }

 async function readAllData(table) {
-  console.log('readAllData', table);
+  // console.log('readAllData', table);
  return await idbKeyval.getalldata(table);
 }

 async function clearAllData(table) {
-  console.log('clearAllData', table);
+  // console.log('clearAllData', table);
  await idbKeyval.clearalldata(table)
 }

 async function deleteItemFromData(table, id) {
-  console.log('deleteItemFromData', table, 'ID:', id);
+  // console.log('deleteItemFromData', table, 'ID:', id);

  await idbKeyval.deletedata(table, id)
 }


-
 // self.addEventListener('activate', function(event) {
 //   event.waitUntil(
 //     // createDB()
@@ -58,7 +56,7 @@ async function deleteItemFromData(table, id) {

 if (!workbox) {
  let workbox = new self.WorkboxSW();
-  console.log('SW-06 3');
+  // console.log('SW-06 3');
 }

 if (workbox) {
@@ -109,15 +107,15 @@ if (workbox) {
  workbox.routing.registerRoute(
    new RegExp(cfgenv.serverweb + '/todos/'),
    function (args) {
-      console.log('registerRoute!')
+      // console.log('registerRoute!')
      return fetch(args.event.request, args.event.headers)
        .then(function (res) {
-          console.log('1° *******  [[[ SERVICE-WORKER ]]] registerRoute fetch: ', args.event)
+          console.log('1° *******  [[[ SERVICE-WORKER ]]] registerRoute fetch: -> ', args.event.headers)
          // LOAD FROM SERVER , AND SAVE INTO INDEXEDDB
          console.log('res.status', res.status)
          if (res.status === 200) {
-            var clonedRes = res.clone();
-            clearAllData('todos')
+            const clonedRes = res.clone();
+            return clearAllData('todos')
              .then(function () {
                return clonedRes.json();
              })
@@ -129,8 +127,8 @@ if (workbox) {
                  }
                }
              });
-            return res
          }
+          return res
        })
    }
  );
@@ -201,18 +199,18 @@ if (workbox) {
    })
  );

-  workbox.routing.registerRoute(
-    new RegExp(/^http/),
-    workbox.strategies.networkFirst({
-      cacheName: 'all-stuff',
-      plugins: [
-        new workbox.expiration.Plugin({
-          maxAgeSeconds: 10 * 24 * 60 * 60,
-          // Only cache 10 requests.
-        }),
-      ]
-    })
-  );
+  // workbox.routing.registerRoute(
+  //   new RegExp(/^http/),
+  //   workbox.strategies.networkFirst({
+  //     cacheName: 'all-stuff',
+  //     plugins: [
+  //       new workbox.expiration.Plugin({
+  //         maxAgeSeconds: 10 * 24 * 60 * 60,
+  //         // Only cache 10 requests.
+  //       }),
+  //     ]
+  //   })
+  // );


  workbox.routing.registerRoute(
@@ -225,14 +223,14 @@ if (workbox) {

 if ('serviceWorker' in navigator) {

-  console.log('*****************      Entering in custom-service-worker.js:')
+  // console.log('*****************      Entering in custom-service-worker.js:')

 }

 self.addEventListener('fetch', (event) => {
  if (event.request.url === '/') {
    const staleWhileRevalidate = new workbox.strategies.StaleWhileRevalidate();
-    event.respondWith(staleWhileRevalidate.handle({event}));
+    event.respondWith(staleWhileRevalidate.handle({ event }));
  }
 });

@@ -280,13 +278,13 @@ self.addEventListener('sync', function (event) {
        headers.append('Accept', 'application/json')
        headers.append('x-auth', token)

-        console.log('A1) INIZIO.............................................................');
+        // console.log('A1) INIZIO.............................................................');

        event.waitUntil(
          readAllData(table)
            .then(function (alldata) {
              const myrecs = [...alldata]
-              console.log('----------------------- LEGGO QUALCOSA DAL WAITUNTIL ')
+              // console.log('----------------------- LEGGO QUALCOSA DAL WAITUNTIL ')
              if (myrecs) {
                for (let rec of myrecs) {
                  //console.log('syncing', table, '', rec.descr)
@@ -304,18 +302,10 @@ self.addEventListener('sync', function (event) {
                    mode: 'cors',   // 'no-cors',
                    body: JSON.stringify(rec)
                  })
-                    .then(function (resData) {
-                      // console.log('Result CALL ', method, ' OK? =', resData.ok);
-
-                      // Anyway Delete this, otherwise in some cases will return error, but it's not a problem.
-                      // for example if I change a record and then I deleted ...
-                      // if (resData.ok) {
-                      deleteItemFromData(table, rec._id);
-                      // }
-
+                    .then(resData => deleteItemFromData(table, rec._id))
+                    .then(() => {
                      console.log('DELETE: ', mystrparam)
                      deleteItemFromData('swmsg', mystrparam)
-
                    })
                    .catch(function (err) {
                      console.log('!!!!!!!!!!!!!!!   Error while sending data', err);
@@ -360,7 +350,7 @@ self.addEventListener('sync', event => {
 })
 */

-self.addEventListener('notificationclick', function(event) {
+self.addEventListener('notificationclick', function (event) {
  var notification = event.notification;
  var action = event.action;

@@ -373,8 +363,8 @@ self.addEventListener('notificationclick', function(event) {
    console.log(action);
    event.waitUntil(
      clients.matchAll()
-        .then(function(clis) {
-          var client = clis.find(function(c) {
+        .then(function (clis) {
+          var client = clis.find(function (c) {
            return c.visibilityState === 'visible';
          });

@@ -390,14 +380,14 @@ self.addEventListener('notificationclick', function(event) {
  }
 });

-self.addEventListener('notificationclose', function(event) {
+self.addEventListener('notificationclose', function (event) {
  console.log('Notification was closed', event);
 });

-self.addEventListener('push', function(event) {
+self.addEventListener('push', function (event) {
  console.log('Push Notification received', event);

-  var data = {title: 'New!', content: 'Something new happened!', openUrl: '/'};
+  var data = { title: 'New!', content: 'Something new happened!', openUrl: '/' };

  if (event.data) {
    data = JSON.parse(event.data.text());
--- a/src/App.ts
+++ b/src/App.ts
@@ -37,9 +37,9 @@ export default class App extends Vue {
      // console.info(process.env)
    }

-    UserStore.actions.autologin()
-      .then((loginEseguito) => {
-        if (loginEseguito) {
+    UserStore.actions.autologin_FromLocalStorage()
+      .then((loadstorage) => {
+        if (loadstorage) {
          globalroutines(this, 'loadapp', '')
          // this.$router.replace('/')

@@ -48,6 +48,9 @@ export default class App extends Vue {
        }
      })

+    // Calling the Server for updates ?
+    // Check the verified_email
+
  }


--- a/src/common/axios.ts
+++ b/src/common/axios.ts
@@ -5,6 +5,7 @@ import {
  AxiosResponse
 } from 'axios'
 import { default as VueRouter } from 'vue-router'
+import { serv_constants } from "@src/store/Modules/serv_constants"
 // import { TokenHelper } from "./token-helper";

 let initialized: boolean = false
@@ -54,7 +55,7 @@ export function UseAxios(router: VueRouter) {
        }
      }

-      if (response.status === 403 && handle(response.status, exclude)) {
+      if (response.status === serv_constants.RIS_CODE__HTTP_FORBIDDEN_INVALID_TOKEN && handle(response.status, exclude)) {
        window.setTimeout(() => router.replace('/forbidden'), 200)
      }

--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -32,6 +32,17 @@
                    <div slot="subtitle">{{$t('msg.myDescriz')}} {{ getAppVersion() }}</div>
                </q-toolbar-title>

+                <q-btn
+                        flat
+                        dense
+                        round
+                        @click=""
+                        aria-label="Connection"
+                >
+                    <q-icon :name="iconConn" :class="clIconConn"></q-icon>
+                    <q-icon v-if="isUserNotAuth" name="device_unknown"></q-icon>
+                </q-btn>
+
                <q-select class="sel_lang" v-model="lang" stack-label="" :options="selectOpLang"/>

                <!--
@@ -68,17 +79,72 @@

  import { GlobalStore } from '@modules'
  import { rescodes } from '../store/Modules/rescodes'
+  import QIcon from "quasar-framework/src/components/icon/QIcon";
+  import { StateConnection } from "../model";
+  import { Watch } from "vue-property-decorator";
+  import QField from "quasar-framework/src/components/field/QField";

  @Component({
    components: {
+      QField,
+      QIcon,
      drawer,
      messagePopover,
    }
  })

  export default class Header extends Vue {
+    public $t
    public $v
    public $q
+    public isUserNotAuth: boolean = false
+    public iconConn: string = 'wifi'
+    public clIconConn: string = 'clIconOnline'
+    public strConn: string = ''
+
+    get conn_changed() {
+      return GlobalStore.state.stateConnection
+    }
+
+    @Watch('GlobalStore.state.stateConnection', { immediate: true, deep: true })
+    changeconn(value: string, oldValue: string) {
+
+      this.strConn = value
+
+      this.$q.notify({
+        color : 'primary',
+        icon: 'wifi',
+        message: "CAMBIATOO! " + value
+      })
+
+    }
+
+
+    @Watch('conn_changed', { immediate: true, deep: true })
+    changeconn_changed(value: string, oldValue: string) {
+      if (value != oldValue) {
+
+        console.log('SSSSSSSS: ', value, oldValue)
+
+        const color = (value === 'online') ? 'positive' : 'warning'
+
+        if (oldValue !== undefined) {
+          this.$q.notify({
+            color,
+            icon: 'wifi',
+            message: this.$t('connection') + ` ${value}`
+          })
+        }
+
+        // console.log('Todos.state.todos_changed CHANGED!', value, oldValue)
+        this.changeIconConn()
+      }
+    }
+
+    changeIconConn() {
+      this.iconConn = GlobalStore.state.stateConnection === 'online' ? "wifi" : "wifi_off"
+      this.clIconConn = GlobalStore.state.stateConnection === 'online' ? 'clIconOnline' : 'clIconOffline'
+    }

    public selectOpLang = [
      { label: 'English (UK)', icon: 'fa-flag-us', value: 'en-uk' },
@@ -115,6 +181,38 @@
      })
    }

+
+    create () {
+
+      // Test this by running the code snippet below and then
+// use the "Offline" checkbox in DevTools Network panel
+
+      let mythis = this
+      console.log('Event LOAD')
+      if (window) {
+        window.addEventListener('load', function () {
+          console.log('2) ENTERING Event LOAD')
+
+          function updateOnlineStatus(event) {
+            if (navigator.onLine) {
+              console.log('ONLINE!')
+              // handle online status
+              GlobalStore.mutations.setStateConnection('online')
+              mythis.changeIconConn()
+            } else {
+              console.log('OFFLINE!')
+              // handle offline status
+              GlobalStore.mutations.setStateConnection('offline')
+              mythis.changeIconConn()
+            }
+          }
+
+          window.addEventListener('online', updateOnlineStatus);
+          window.addEventListener('offline', updateOnlineStatus);
+        });
+      }
+    }
+
    public snakeToCamel(str) {
      return str.replace(/(-\w)/g, m => {
        return m[1].toUpperCase()
@@ -359,5 +457,13 @@
        content: url('../statics/icons/flag_it.svg');
    }

+    .clIconOnline {
+        color: white;
+    }
+
+    .clIconOffline {
+        color: red;
+    }
+
 </style>

--- a/src/components/todos/todo/todo.ts
+++ b/src/components/todos/todo/todo.ts
@@ -80,7 +80,7 @@ export default class Todo extends Vue {
  @Watch('todos_changed', { immediate: true, deep: true })
  changetodos_changed(value: string, oldValue: string) {

-    this.$q.notify('Changed...')
+    // this.$q.notify('Changed...')

    // console.log('Todos.state.todos_changed CHANGED!', value, oldValue)
    this.updatetable(true)
@@ -287,7 +287,7 @@ export default class Todo extends Vue {
    let update = false
    await this.todos_arr.forEach((elem: ITodo) => {
      if (elem.modified) {
-        console.log('calling MODIFY 3')
+        // console.log('calling MODIFY 3')
        this.modify(elem, false)
        update = true
        elem.modified = false
@@ -367,7 +367,7 @@ export default class Todo extends Vue {
    let mydatenow = new Date().getDate()
    let mydateexp = new Date().getDate() + 10

-    console.log('User:' + UserStore.state.userId)
+    // console.log('User:' + UserStore.state.userId)

    const objtodo: ITodo = {
      // _id: new Date().toISOString(),  // Create NEW
@@ -432,30 +432,18 @@ export default class Todo extends Vue {
      return
    }

-    await globalroutines(this, 'write', 'todos', objtodo)
-      .then((id) => {
-        console.log('*** IDNEW (3) = ', id)
+    const id = await globalroutines(this, 'write', 'todos', objtodo)
+    // update also the last elem
+    if (lastelem !== null) {
+      lastelem.id_next = id
+      // lastelem.modified = true
+      // console.log('calling MODIFY 4', lastelem)
+    }

-        // update also the last elem
-        if (lastelem !== null) {
-          lastelem.id_next = id
-          // lastelem.modified = true
-          console.log('calling MODIFY 4', lastelem)
-        }
+    const rismod = await this.modify(lastelem, false)

-        this.modify(lastelem, false)
-          .then(ris => {
-            console.log('END calling MODIFY 4')
-
-            this.saveItemToSyncAndDb(rescodes.DB.TABLE_SYNC_TODOS, 'POST', objtodo, true)
-            this.updatetable(false)
-
-          })
-
-
-      }).catch(err => {
-        console.log('Errore: ' + err.message)
-      })
+    this.saveItemToSyncAndDb(rescodes.DB.TABLE_SYNC_TODOS, 'POST', objtodo, true)
+    this.updatetable(false)

    // console.log('ESCO.........')

@@ -587,14 +575,14 @@ export default class Todo extends Vue {
      if (myobjprev !== null) {
        myobjprev.id_next = myobjtrov.id_next
        myobjprev.modified = true
-        console.log('calling MODIFY 2')
+        // console.log('calling MODIFY 2')
        this.modify(myobjprev, false)
      }

      if (myobjnext !== null) {
        myobjnext.id_prev = myobjtrov.id_prev
        myobjnext.modified = true
-        console.log('calling MODIFY 1')
+        // console.log('calling MODIFY 1')
        this.modify(myobjnext, false)
      }

@@ -610,7 +598,7 @@ export default class Todo extends Vue {
        })
    }

-    console.log('FINE deleteitem')
+    // console.log('FINE deleteitem')
  }

  getElem(myarray: ITodo[], id) {
@@ -729,7 +717,7 @@ export default class Todo extends Vue {
  }

  updateitem(myobj) {
-    console.log('updateitem')
+    // console.log('updateitem')
    this.modify(myobj, true)
  }

@@ -778,7 +766,7 @@ export default class Todo extends Vue {

  modifyField(recOut, recIn, field) {
    if (recOut[field] !== recIn[field]) {
-      console.log('***************  CAMPO ', field, 'MODIFICATO!', recOut[field], recIn[field])
+      // console.log('***************  CAMPO ', field, 'MODIFICATO!', recOut[field], recIn[field])
      recOut.modified = true
      recOut[field] = recIn[field]
      return true
--- a/src/globalroutines/indexdb.js
+++ b/src/globalroutines/indexdb.js
@@ -73,6 +73,8 @@ export default async (context, cmd, table, datakey = null, id = '') => {
    return await storage.getdata(table, id)
  } else if (cmd === 'delete') {
    return await storage.deletedata(table, id)
+  } else if (cmd === 'clearalldata') {
+    return await storage.clearalldata(table)
  } else if (cmd === 'log') {
    consolelogpao(table)
  }
--- a/src/js/storage.js
+++ b/src/js/storage.js
@@ -80,7 +80,7 @@ export let idbKeyval = (() => {
    },
    async setdata(table, value) {
      let req;
-      console.log('setdata', table, value)
+      // console.log('setdata', table, value)

      await withStore('readwrite', table, store  => {
        req = store.put(value);
--- a/src/layouts/drawer/drawer.vue
+++ b/src/layouts/drawer/drawer.vue
@@ -102,7 +102,7 @@
    }

    get Verificato() {
-      return UserStore.state.verifiedEmail
+      return UserStore.state.verified_email
    }

    get Email() {
@@ -111,6 +111,7 @@

    logoutHandler() {
      UserStore.actions.logout()
+      this.$router.push('/signin')
      this.$q.notify(this.$t('logout.uscito'))
    }
  }
--- a/src/model/GlobalStore.ts
+++ b/src/model/GlobalStore.ts
@@ -2,6 +2,8 @@ export interface IPost {
  title: string
 }

+export type StateConnection = 'online' | 'offline'
+
 export interface IGlobalState {
  conta: number
  isSubscribed: boolean
@@ -11,6 +13,7 @@ export interface IGlobalState {
  menuCollapse: boolean
  leftDrawerOpen: boolean
  category: string
+  stateConnection: StateConnection
  posts: IPost[]
  listatodo: ITodoList[]
 }
--- a/src/model/UserStore.ts
+++ b/src/model/UserStore.ts
@@ -27,6 +27,7 @@ export interface IUserState {
  tokenforgot?: string

  servercode?: number
+  resStatus?: number
  x_auth_token?: string
  isLogged?: boolean
 }
--- a/src/statics/i18n.js
+++ b/src/statics/i18n.js
@@ -51,6 +51,7 @@ const messages = {
    fetch: {
      errore_generico: 'Errore Generico',
      errore_server: 'Impossibile accedere al Server. Riprovare Grazie',
+      error_doppiologin: 'Rieseguire il Login. Accesso aperto da un altro dispositivo.',
    },
    user: {
      notregistered: 'Devi registrarti al servizio prima di porter memorizzare i dati'
@@ -121,7 +122,8 @@ const messages = {
      titledenied: 'Permesso Notifiche Disabilitato!',
      title_subscribed: 'Sottoscrizione a FreePlanet.app!',
      subscribed: 'Ora potrai ricevere i messaggi e le notifiche.'
-    }
+    },
+    connection: 'Connessione',
  },
  es: {
    dialog: {
@@ -175,6 +177,7 @@ const messages = {
    fetch: {
      errore_generico: 'Error genérico',
      errore_server: 'No se puede acceder al Servidor. Inténtalo de nuevo, Gracias',
+      error_doppiologin: 'Vuelva a iniciar sesión. Acceso abierto por otro dispositivo.',
    },
    user: {
      notregistered: 'Debe registrarse en el servicio antes de poder almacenar los datos'
@@ -245,7 +248,8 @@ const messages = {
      titledenied: 'Notificaciones permitidas deshabilitadas!',
      title_subscribed: 'Suscripción a FreePlanet.app!',
      subscribed: 'Ahora puedes recibir mensajes y notificaciones.'
-    }
+    },
+    connection: 'Connection',
  },
  enUk: {
    dialog: {
@@ -299,6 +303,7 @@ const messages = {
    fetch: {
      errore_generico: 'Generic Error',
      errore_server: 'Unable to access to the Server. Retry. Thank you.',
+      error_doppiologin: 'Signup again. Another access was made with another device.',
    },
    user: {
      notregistered: 'You need first to SignUp before storing data'
@@ -369,7 +374,8 @@ const messages = {
      titledenied: 'Notification Permission Denied!',
      title_subscribed: 'Subscribed to FreePlanet.app!',
      subscribed: 'You can now receive Notification and Messages.'
-    }
+    },
+    connection: 'Conexión',
  },
 };

--- a/src/store/Api/Inst-Pao.ts
+++ b/src/store/Api/Inst-Pao.ts
@@ -16,18 +16,21 @@ async function sendRequest(url: string, lang: string, mytok: string, method: str
    configInit = {
      method: method,
      cache: 'no-cache',
+      mode: 'cors',
      headers: authHeader
    }
  } else if (method === 'DELETE') {
    configInit = {
      method: method,
      cache: 'no-cache',
+      mode: 'cors',
      headers: authHeader
    }
  } else {
    configInit = {
      method: method,
      cache: 'no-cache',
+      mode: 'cors',
      body: JSON.stringify(mydata),
      headers: authHeader
    }
--- a/src/store/Api/index.ts
+++ b/src/store/Api/index.ts
@@ -9,8 +9,10 @@ export { addAuthHeaders, removeAuthHeaders, API_URL } from './Instance'
 import Paths from '@paths'
 import { rescodes } from '@src/store/Modules/rescodes'

-import { UserStore } from '@modules'
+import { GlobalStore, UserStore } from '@modules'
 import globalroutines from './../../globalroutines/index'
+import { serv_constants } from '@src/store/Modules/serv_constants'
+import router from '@router'


 // const algoliaApi = new AlgoliaSearch()
@@ -45,53 +47,68 @@ export namespace ApiTool {
    })
  }

-  export async function SendReq(url: string, lang: string, mytok: string, method: string, mydata: any, noAuth: boolean = false) {
+  export async function SendReq(url: string, lang: string, mytok: string, method: string, mydata: any, setAuthToken: boolean = false) {
    UserStore.mutations.setServerCode(rescodes.EMPTY)
+    UserStore.mutations.setResStatus(0)
    UserStore.mutations.setAuth('')
    return await new Promise(function (resolve, reject) {
      let ricevuto = false
-      sendRequest(url, lang, mytok, method, mydata)
+
+      return sendRequest(url, lang, mytok, method, mydata)
        .then(resreceived => {
+          console.log('resreceived', resreceived)
          ricevuto = true
          let res = resreceived.clone()
          if (process.env.DEV) {
            console.log('SendReq RES [', res.status, ']', res)
          }

-          let x_auth_token = ''
+          UserStore.mutations.setResStatus(res.status)
          if (res.status === 200) {
+            let x_auth_token = ''
            try {
-              if (!noAuth) {
+              if (setAuthToken) {
                x_auth_token = String(res.headers.get('x-auth'))

+                if (x_auth_token === '') {
+                  UserStore.mutations.setServerCode(rescodes.ERR_AUTHENTICATION)
+                }
+                UserStore.mutations.setAuth(x_auth_token)
+
                if (url === process.env.MONGODB_HOST + '/updatepwd') {
                  UserStore.mutations.UpdatePwd({ idToken: x_auth_token })
                  localStorage.setItem(rescodes.localStorage.token, x_auth_token)
                }
-
-                if (x_auth_token === '') {
-                  UserStore.mutations.setServerCode(rescodes.ERR_AUTHENTICATION)
-                }
              }

              UserStore.mutations.setServerCode(rescodes.OK)
-              UserStore.mutations.setAuth(x_auth_token)
            } catch (e) {
-              if (!noAuth) {
+              if (setAuthToken) {
                UserStore.mutations.setServerCode(rescodes.ERR_AUTHENTICATION)
-                UserStore.mutations.setAuth(x_auth_token)
+                UserStore.mutations.setAuth('')
              }
-              return reject(e)
+              GlobalStore.mutations.setStateConnection(ricevuto ? 'online' : 'offline')
+              return reject({ code: rescodes.ERR_AUTHENTICATION, status: res.status })
            }
+          } else if (res.status === serv_constants.RIS_CODE__HTTP_FORBIDDEN_INVALID_TOKEN) {
+            // Forbidden
+            // You probably is connectiong with other page...
+            UserStore.mutations.setServerCode(rescodes.ERR_AUTHENTICATION)
+            UserStore.mutations.setAuth('')
+            GlobalStore.mutations.setStateConnection(ricevuto ? 'online' : 'offline')
+            router.push('/signin')
+            return reject({ code: rescodes.ERR_AUTHENTICATION, status: res.status })
          }

+          GlobalStore.mutations.setStateConnection(ricevuto ? 'online' : 'offline')
+
          return res.json()
            .then((body) => {
              return resolve({ res, body })
            })
            .catch(e => {
              UserStore.mutations.setServerCode(rescodes.ERR_GENERICO)
-              return reject(e)
+              return reject({ code: rescodes.ERR_GENERICO, status: res.status })
            })

        })
@@ -104,7 +121,10 @@ export namespace ApiTool {
          } else {
            UserStore.mutations.setServerCode(rescodes.ERR_GENERICO)
          }
-          return reject(error)
+
+          GlobalStore.mutations.setStateConnection(ricevuto ? 'online' : 'offline')
+
+          return reject({ code: error, status: 0 })
        })
    })
  }
@@ -129,50 +149,56 @@ export namespace ApiTool {
          headers.append('Accept', 'application/json')
          headers.append('x-auth', token)

-          console.log('A1) INIZIO.............................................................')
-
+          // console.log('A1) INIZIO.............................................................')
          await globalroutines(null, 'readall', table, null)
            .then(function (alldata) {
-              const myrecs = [...alldata]
-              console.log('----------------------- LEGGO QUALCOSA ')
-              if (myrecs) {
-                for (let rec of myrecs) {
-                  // console.log('syncing', table, '', rec.descr)
-                  let link = process.env.MONGODB_HOST + '/todos'
+                const myrecs = [...alldata]
+                // console.log('----------------------- LEGGO QUALCOSA ')
+                if (myrecs) {
+                  for (let rec of myrecs) {
+                    // console.log('syncing', table, '', rec.descr)
+                    let link = process.env.MONGODB_HOST + '/todos'

-                  if (method !== 'POST')
-                    link += '/' + rec._id
+                    if (method !== 'POST')
+                      link += '/' + rec._id

-                  console.log(' [Alternative] ++++++++++++++++++ SYNCING !!!!  ', rec.descr, table, 'FETCH: ', method, link, 'data:')
+                    console.log(' [Alternative] ++++++++++++++++++ SYNCING !!!!  ', rec.descr, table, 'FETCH: ', method, link, 'data:')

-                  // Insert/Delete/Update table to the server
-                  fetch(link, {
-                    method: method,
-                    headers: headers,
-                    mode: 'cors',   // 'no-cors',
-                    body: JSON.stringify(rec)
-                  })
-                    .then(function (resData) {
-                      // console.log('Result CALL ', method, ' OK? =', resData.ok);
+                    let lettoqualcosa = false

-                      // Anyway Delete this, otherwise in some cases will return error, but it's not a problem.
-                      // for example if I change a record and then I deleted ...
-                      // if (resData.ok) {
-                      // deleteItemFromData(table, rec._id);
-                      globalroutines(null, 'delete', table, null, rec._id)
-
-                      console.log('DELETE: ', mystrparam)
-                      // deleteItemFromData('swmsg', mystrparam)
-                      globalroutines(null, 'delete', 'swmsg', null, mystrparam)
+                    // Insert/Delete/Update table to the server
+                    return fetch(link, {
+                      method: method,
+                      headers: headers,
+                      cache: 'no-cache',
+                      mode: 'cors',   // 'no-cors',
+                      body: JSON.stringify(rec)
+                    }).then(resData => {
+                      lettoqualcosa = true

+                      console.log('Clear', table, rec._id)
+                      return globalroutines(null, 'delete', table, null, rec._id)
                    })
-                    .catch(function (err) {
-                      console.log(' [Alternative] !!!!!!!!!!!!!!!   Error while sending data', err)
-                    })
+                      .then((ris) => {
+                        console.log('Clear', 'swmsg', method)
+                        GlobalStore.mutations.setStateConnection(lettoqualcosa ? 'online' : 'offline')
+                        // deleteItemFromData('swmsg', mystrparam)
+                        return globalroutines(null, 'delete', 'swmsg', null, mystrparam)
+                      })
+                      .catch(function (err) {
+                        console.log(' [Alternative] !!!!!!!!!!!!!!!   Error while sending data', err)
+                        GlobalStore.mutations.setStateConnection(lettoqualcosa ? 'online' : 'offline')
+                      })
+
+                  }
                }
              }
+            ).catch(e => {
+              console.log('ERROR:', e)
            })
+
          console.log(' [Alternative] A2) ?????????????????????????? ESCO DAL LOOP !!!!!!!!! err=')
+
        }
      }
    }
--- a/src/store/Modules/GlobalStore.ts
+++ b/src/store/Modules/GlobalStore.ts
@@ -1,4 +1,4 @@
-import { IGlobalState } from 'model'
+import { IGlobalState, StateConnection } from 'model'
 import { storeBuilder } from './Store/Store'

 import Vue from 'vue'
@@ -8,7 +8,10 @@ import translate from './../../globalroutines/util'
 import urlBase64ToUint8Array from '../../js/utility'

 import messages from '../../statics/i18n'
-import { UserStore } from "@store"
+import { UserStore } from '@store'
+import globalroutines from './../../globalroutines/index'
+
+const allTables = ['todos', 'sync_todos', 'sync_todos_patch', 'delete_todos', 'config', 'swmsg']

 const state: IGlobalState = {
  conta: 0,
@@ -18,6 +21,7 @@ const state: IGlobalState = {
  mobileMode: false,
  menuCollapse: true,
  leftDrawerOpen: true,
+  stateConnection: 'online',
  category: 'personal',
  posts: [],
  listatodo: [
@@ -65,11 +69,18 @@ namespace Mutations {
    state.category = cat
  }

+  function setStateConnection(state: IGlobalState, stateconn: StateConnection) {
+    if (state.stateConnection !== stateconn) {
+      console.log('INTERNET ', stateconn)
+      state.stateConnection = stateconn
+    }
+  }

  export const mutations = {
    setConta: b.commit(setConta),
    setleftDrawerOpen: b.commit(setleftDrawerOpen),
-    setCategorySel: b.commit(setCategorySel)
+    setCategorySel: b.commit(setCategorySel),
+    setStateConnection: b.commit(setStateConnection)
  }

 }
@@ -109,9 +120,10 @@ namespace Actions {
        }
      })
      .then(function (newSub) {
+        // console.log('newSub', newSub)
        if (newSub) {
          saveNewSubscriptionToServer(context, newSub)
-          mystate.isSubscribed = true;
+          mystate.isSubscribed = true
        }
        return null
      })
@@ -174,8 +186,17 @@ namespace Actions {

  }

-  function loadAfterLogin (context) {
+  async function clearDataAfterLogout (context) {

+    // Clear all data from the IndexedDB
+    allTables.forEach(table => {
+      globalroutines(null, 'clearalldata', table, null)
+    })
+
+  }
+
+  async function loadAfterLogin (context) {
+    actions.clearDataAfterLogout()
  }


@@ -183,6 +204,7 @@ namespace Actions {
    setConta: b.dispatch(setConta),
    createPushSubscription: b.dispatch(createPushSubscription),
    loadAfterLogin: b.dispatch(loadAfterLogin),
+    clearDataAfterLogout: b.dispatch(clearDataAfterLogout),
    prova: b.dispatch(prova)
  }

@@ -202,4 +224,3 @@ const GlobalModule = {


 export default GlobalModule
-
--- a/src/store/Modules/Todos.ts
+++ b/src/store/Modules/Todos.ts
@@ -6,6 +6,7 @@ import { rescodes } from './rescodes'
 import { GlobalStore, Todos, UserStore } from '@store'
 import globalroutines from './../../globalroutines/index'
 import { Mutation } from "vuex-module-decorators"
+import { serv_constants } from "@src/store/Modules/serv_constants"


 const state: ITodosState = {
@@ -73,7 +74,7 @@ namespace Actions {
    let something = false

    if ('serviceWorker' in navigator) {
-      console.log(' -------- sendSwMsgIfAvailable')
+      // console.log(' -------- sendSwMsgIfAvailable')

      let count = await checkPendingMsg(null)
      if (count > 0) {
@@ -135,7 +136,7 @@ namespace Actions {
  async function waitAndRefreshData(context) {
    await aspettansec(3000)

-    console.log('waitAndRefreshData')
+    // console.log('waitAndRefreshData')

    return await dbLoadTodo(context, false)
  }
@@ -186,33 +187,38 @@ namespace Actions {
        state.todos = [...body.todos]
        Todos.mutations.setTodos_changed()

-        console.log('state.todos', state.todos, 'checkPending', checkPending)
+        console.log('**********  resData', resData, 'state.todos', state.todos, 'checkPending', checkPending)

        // After Login will store into the indexedDb...

        return rescodes.OK
      })
      .catch((error) => {
+        console.log('error=', error)
        UserStore.mutations.setErrorCatch(error)
        return UserStore.getters.getServerCode
      })

-    console.log('fine della funz...')
+    console.log('ris FUNZ: ', ris.code, 'status', ris.status)

    if (!Todos.state.networkDataReceived) {
-      console.log('NETWORK UNREACHABLE ! (Error in fetch)')
-      consolelogpao('NETWORK UNREACHABLE ! (Error in fetch)')
+
+      if (ris.status === serv_constants.RIS_CODE__HTTP_FORBIDDEN_INVALID_TOKEN) {
+        consolelogpao('UNAUTHORIZING... TOKEN EXPIRED... !! ')
+      } else {
+        consolelogpao('NETWORK UNREACHABLE ! (Error in fetch)', UserStore.getters.getServerCode, ris.code)
+      }
      // Read all data from IndexedDB Store into Memory
      await updateArrayInMemory(context)
    } else {
-      if (ris === rescodes.OK && checkPending) {
+      if (ris.code === rescodes.OK && checkPending) {
        waitAndcheckPendingMsg(context)
      }
    }
  }

  async function updateArrayInMemory(context) {
-    console.log('Update the array in memory, from todos table from IndexedDb')
+    // console.log('Update the array in memory, from todos table from IndexedDb')
    await globalroutines(null, 'updateinMemory', 'todos', null)
      .then(() => {
        // console.log('updateArrayInMemory! ')
@@ -246,8 +252,8 @@ namespace Actions {
  }

  function UpdateNewIdFromDB(oldItem, newItem, method) {
-    console.log('PRIMA state.todos', state.todos)
-    console.log('ITEM', newItem)
+    // console.log('PRIMA state.todos', state.todos)
+    // console.log('ITEM', newItem)
    if (method === 'POST') {
      state.todos.push(newItem)
      Todos.mutations.setTodos_changed()
@@ -260,7 +266,7 @@ namespace Actions {
    }


-    console.log('DOPO state.todos', state.todos)
+    // console.log('DOPO state.todos', state.todos)
  }

  async function dbInsertSaveTodo(context, itemtodo: ITodo, method) {
@@ -290,7 +296,7 @@ namespace Actions {
  }

  async function dbDeleteTodo(context, item: ITodo) {
-    console.log('dbDeleteTodo', item)
+    // console.log('dbDeleteTodo', item)
    let call = process.env.MONGODB_HOST + '/todos/' + item._id

    const token = UserStore.state.idToken
--- a/src/store/Modules/UserStore.ts
+++ b/src/store/Modules/UserStore.ts
@@ -121,6 +121,10 @@ namespace Mutations {
    state.servercode = num
  }

+  function setResStatus(state: IUserState, status: number) {
+    state.resStatus = status
+  }
+
  function setAuth(state: IUserState, x_auth_token: string) {
    state.x_auth_token = x_auth_token
  }
@@ -168,6 +172,7 @@ namespace Mutations {
    setlang: b.commit(setlang),
    UpdatePwd: b.commit(UpdatePwd),
    setServerCode: b.commit(setServerCode),
+    setResStatus: b.commit(setResStatus),
    setAuth: b.commit(setAuth),
    clearAuthData: b.commit(clearAuthData),
    setErrorCatch: b.commit(setErrorCatch),
@@ -205,7 +210,7 @@ namespace Actions {

    Mutations.mutations.setServerCode(rescodes.CALLING)

-    return await Api.SendReq(call, state.lang, Getters.getters.tok, 'POST', usertosend)
+    return await Api.SendReq(call, state.lang, Getters.getters.tok, 'POST', usertosend, true)
      .then(({ res, body }) => {
        return { code: body.code, msg: body.msg }
      })
@@ -259,7 +264,7 @@ namespace Actions {
        // mutations.setServerCode(myres);
        if (body.code === serv_constants.RIS_CODE_EMAIL_VERIFIED) {
          console.log('VERIFICATO !!')
-          localStorage.setItem(rescodes.localStorage.verifiedEmail, '1')
+          localStorage.setItem(rescodes.localStorage.verified_email, String(true))
        } else {
          console.log('Risultato di vreg: ', body.code)
        }
@@ -326,7 +331,7 @@ namespace Actions {
              localStorage.setItem(rescodes.localStorage.username, username)
              localStorage.setItem(rescodes.localStorage.token, x_auth_token)
              localStorage.setItem(rescodes.localStorage.expirationDate, expirationDate.toString())
-              localStorage.setItem(rescodes.localStorage.verifiedEmail, '0')
+              localStorage.setItem(rescodes.localStorage.verified_email, String(false))
              state.isLogged = true
              // dispatch('storeUser', authData);
              // dispatch('setLogoutTimer', myres.data.expiresIn);
@@ -363,7 +368,7 @@ namespace Actions {

    Mutations.mutations.setServerCode(rescodes.CALLING)

-    return await Api.SendReq(call, state.lang, Getters.getters.tok, 'POST', usertosend)
+    return await Api.SendReq(call, state.lang, Getters.getters.tok, 'POST', usertosend, true)
      .then(({ res, body }) => {
        myres = res
        if (res.code === serv_constants.RIS_CODE_LOGIN_ERR) {
@@ -375,36 +380,41 @@ namespace Actions {

        if (myres.status === 200) {
          let myuser: IUserState = body.usertosend
-          let userId = myuser.userId
-          let username = authData.username
-          let verifiedEmail = myuser.verified_email === true
-          if (process.env.DEV) {
-            console.log('USERNAME = ' + username)
-            console.log('IDUSER= ' + userId)
-            Mutations.mutations.authUser({
-              userId: userId,
-              username: username,
-              idToken: state.x_auth_token,
-              verified_email: verifiedEmail
-            })
+          if (myuser) {
+            let userId = myuser.userId
+            let username = authData.username
+            let verified_email = myuser.verified_email
+            if (process.env.DEV) {
+              console.log('USERNAME = ' + username)
+              console.log('IDUSER= ' + userId)
+              console.log('state.x_auth_token= ' + state.x_auth_token)
+              Mutations.mutations.authUser({
+                userId,
+                username,
+                idToken: state.x_auth_token,
+                verified_email
+              })
+            }
+
+            const now = new Date()
+            // const expirationDate = new Date(now.getTime() + myres.data.expiresIn * 1000);
+            const expirationDate = new Date(now.getTime() * 1000)
+            localStorage.setItem(rescodes.localStorage.userId, userId)
+            localStorage.setItem(rescodes.localStorage.username, username)
+            localStorage.setItem(rescodes.localStorage.token, state.x_auth_token)
+            localStorage.setItem(rescodes.localStorage.expirationDate, expirationDate.toString())
+            localStorage.setItem(rescodes.localStorage.isLogged, String(true))
+            localStorage.setItem(rescodes.localStorage.verified_email, String(verified_email))
+
+            setGlobal()
+
+            // dispatch('storeUser', authData);
+            // dispatch('setLogoutTimer', myres.data.expiresIn);
+            return rescodes.OK
+          } else {
+            return rescodes.ERR_GENERICO
          }
-
-          const now = new Date()
-          // const expirationDate = new Date(now.getTime() + myres.data.expiresIn * 1000);
-          const expirationDate = new Date(now.getTime() * 1000)
-          localStorage.setItem(rescodes.localStorage.userId, userId)
-          localStorage.setItem(rescodes.localStorage.username, username)
-          localStorage.setItem(rescodes.localStorage.token, state.x_auth_token)
-          localStorage.setItem(rescodes.localStorage.expirationDate, expirationDate.toString())
-          localStorage.setItem(rescodes.localStorage.isLogged, String(true))
-          localStorage.setItem(rescodes.localStorage.verifiedEmail, Number(verifiedEmail).toString())
-
-          setGlobal()
-
-          // dispatch('storeUser', authData);
-          // dispatch('setLogoutTimer', myres.data.expiresIn);
-          return rescodes.OK
-        } else if (myres.status === 404) {
+        } else if (myres.status === serv_constants.RIS_CODE__HTTP_FORBIDDEN_INVALID_TOKEN) {
          if (process.env.DEV) {
            console.log('CODE = ' + body.code)
          }
@@ -449,31 +459,35 @@ namespace Actions {
    localStorage.removeItem(rescodes.localStorage.username)
    localStorage.removeItem(rescodes.localStorage.isLogged)
    // localStorage.removeItem(rescodes.localStorage.leftDrawerOpen)
-    localStorage.removeItem(rescodes.localStorage.verifiedEmail)
+    localStorage.removeItem(rescodes.localStorage.verified_email)
    localStorage.removeItem(rescodes.localStorage.categorySel)

-    router.push('/signin')
+    GlobalStore.actions.clearDataAfterLogout()
+
+    // this.$router.push('/signin')
  }

-  function setGlobal() {
+  async function setGlobal() {
    state.isLogged = true
    GlobalStore.mutations.setleftDrawerOpen(localStorage.getItem(rescodes.localStorage.leftDrawerOpen) === 'true')
    GlobalStore.mutations.setCategorySel(localStorage.getItem(rescodes.localStorage.categorySel))

-    GlobalStore.actions.loadAfterLogin()
-
-    Todos.actions.dbLoadTodo(true)


+    await GlobalStore.actions.loadAfterLogin()
+      .then(() => {
+        Todos.actions.dbLoadTodo(true)
+      })
  }


-  async function autologin(context) {
+  async function autologin_FromLocalStorage(context) {
    try {
-      console.log('*** Autologin ***')
+      console.log('*** autologin_FromLocalStorage ***')
      // INIT
+
      UserStore.mutations.setlang(process.env.LANG_DEFAULT)
-      // ++Todo: Estrai la Lang dal Localstorage
+      // Estrai la Lang dal Localstorage
      const lang = localStorage.getItem('lang')
      if (lang) {
        UserStore.mutations.setlang(lang)
@@ -492,7 +506,7 @@ namespace Actions {
      }
      const userId = String(localStorage.getItem(rescodes.localStorage.userId))
      const username = String(localStorage.getItem(rescodes.localStorage.username))
-      const verifiedEmail = localStorage.getItem(rescodes.localStorage.verifiedEmail) === '1'
+      const verified_email = localStorage.getItem(rescodes.localStorage.verified_email) === 'true'

      console.log('autologin userId', userId)

@@ -500,10 +514,10 @@ namespace Actions {
        userId: userId,
        username: username,
        idToken: token,
-        verified_email: verifiedEmail
+        verified_email: verified_email
      })

-      setGlobal()
+      await setGlobal()

      console.log('autologin userId STATE ', state.userId)

@@ -522,7 +536,7 @@ namespace Actions {
    signup: b.dispatch(signup),
    signin: b.dispatch(signin),
    logout: b.dispatch(logout),
-    autologin: b.dispatch(autologin)
+    autologin_FromLocalStorage: b.dispatch(autologin_FromLocalStorage)

  }
 }
--- a/src/store/Modules/rescodes.ts
+++ b/src/store/Modules/rescodes.ts
@@ -12,7 +12,7 @@ export const rescodes = {
  LIST_START: '0',

  localStorage: {
-    verifiedEmail: 'vf',
+    verified_email: 'vf',
    categorySel: 'cs',
    isLogged: 'ilog',
    expirationDate: 'expdate',
--- a/src/store/Modules/serv_constants.ts
+++ b/src/store/Modules/serv_constants.ts
@@ -6,10 +6,11 @@ export const serv_constants = {
  RIS_CODE_EMAIL_VERIFIED: 1,

  RIS_CODE_LOGIN_ERR_GENERIC: -20,
+
  RIS_CODE_LOGIN_ERR: -10,
  RIS_CODE_OK: 1,
+  RIS_CODE_LOGIN_OK: 1,

-  RIS_CODE_LOGIN_OK: 1
-
+  RIS_CODE__HTTP_FORBIDDEN_INVALID_TOKEN: 403

 }
--- a/src/views/login/signin/signin.ts
+++ b/src/views/login/signin/signin.ts
@@ -39,6 +39,11 @@ export default class Signin extends Vue {

  created() {
    this.$v.$reset()
+
+    if (UserStore.state.resStatus === serv_constants.RIS_CODE__HTTP_FORBIDDEN_INVALID_TOKEN) {
+      this.showNotif(this.$t('fetch.error_doppiologin'))
+    }
+
    // this.$myconfig.socialLogin.facebook = true
    // console.log('PROVA fb:', this.$myconfig.socialLogin.facebook)
  }
@@ -125,18 +130,25 @@ export default class Signin extends Vue {
        console.log('riscode=', riscode)
        if (riscode === rescodes.OK) {
          router.push('/signin')
-          globalroutines(this, 'loadapp', '')
-
+        }
+        return riscode
+      }).then((riscode) => {
+        globalroutines(this, 'loadapp', '')
+        return riscode
+      })
+      .then((riscode) => {
+        if (riscode === rescodes.OK) {
          GlobalStore.actions.createPushSubscription()
        }
        this.checkErrors(riscode)
        this.$q.loading.hide()
-      }).catch(error => {
-      console.log('ERROR = ' + error)
+      })
+      .catch(error => {
+        console.log('ERROR = ' + error)

-      this.checkErrors(error)
-      this.$q.loading.hide()
-    })
+        this.checkErrors(error)
+        this.$q.loading.hide()
+      })

  }
 }