Notify user to reload when front-end accounts are deprecated

package-lock.json

@@ -6956,6 +6956,11 @@
                 }
             }
         },
+        "object-equals": {
+            "version": "0.3.0",
+            "resolved": "https://registry.npmjs.org/object-equals/-/object-equals-0.3.0.tgz",
+            "integrity": "sha512-ohwpvRXLVdPilHZMr3EserWka4Zz0aX9/BbTg6Z1SWv1QHsSfu3pXbzcOavH8G9eF9XMgTd0qT2g2IlQFEnOgA=="
+        },
         "object-inspect": {
             "version": "1.8.0",
             "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.8.0.tgz",

package.json

@@ -30,6 +30,7 @@
         "bulma": "^0.9.0",
         "bulma-checkradio": "^1.1.1",
         "bulma-switch": "^2.0.0",
+        "object-equals": "^0.3.0",
         "v-clipboard": "^2.2.3",
         "vue": "^2.6.12",
         "vue-axios": "^3.1.3",

resources/js/views/Accounts.vue

@@ -217,6 +217,7 @@
     import TokenDisplayer from '../components/TokenDisplayer'
     import draggable from 'vuedraggable'
     import Form from './../components/Form'
+    import objectEquals from 'object-equals'
 
     export default {
         data(){
@@ -281,17 +282,19 @@
 
         mounted() {
 
-            if( this.toRefresh || this.$route.params.isFirstLoad ) {
-                this.fetchAccounts()
-                this.fetchGroups()
-            } else {
+            // we don't have to fetch fresh data so we try to load them from localstorage to avoid display latency
+            if( !this.toRefresh && !this.$route.params.isFirstLoad ) {
                 const accounts = this.$storage.get('accounts', null) // use null as fallback if localstorage is empty
-                !accounts ? this.fetchAccounts() : this.accounts = accounts
+                if( accounts ) this.accounts = accounts
 
                 const groups = this.$storage.get('groups', null) // use null as fallback if localstorage is empty
-                !groups ? this.fetchGroups() : this.groups = groups
+                if( groups ) this.groups = groups
             }
 
+            // we fetch fresh data whatever. The user will be notified to reload the page if there are any data changes
+            this.fetchAccounts()
+            this.fetchGroups()
+
             // stop OTP generation on modal close
             this.$on('modalClose', function() {
                 console.log('modalClose triggered')
@@ -324,15 +327,15 @@
             },
 
             /**
-             * Populate the view with existing accounts
+             * Fetch accounts from db
              */
             fetchAccounts() {
-                this.accounts = []
+                let accounts = []
                 this.selectedAccounts = []
 
                 this.axios.get('api/twofaccounts').then(response => {
                     response.data.forEach((data) => {
-                        this.accounts.push({
+                        accounts.push({
                             id : data.id,
                             service : data.service,
                             account : data.account ? data.account : '-',
@@ -342,12 +345,17 @@
                         })
                     })
 
-                    this.$storage.set('accounts', this.accounts)
-                    
-                    // No account yet, we force user to land on the start view.
-                    if( this.accounts.length === 0 ) {
+                    if ( this.accounts.length > 0 && !objectEquals(accounts, this.accounts) ) {
+                        this.$notify({ type: 'is-warning', text: '<span class="is-size-7">' + this.$t('commons.some_data_have_changed') + '</span><br /><a href="." class="button is-rounded is-dark is-small">' + this.$t('commons.reload') + '</a>', duration:-1, closeOnClick: false })
+                    }
+                    else if( this.accounts.length === 0 && accounts.length === 0 ) {
+                        // No account yet, we force user to land on the start view.
                         this.$router.push({ name: 'start' });
                     }
+                    else {
+                        this.accounts = accounts
+                        this.$storage.set('accounts', this.accounts)
+                    }
                 })
             },
 
@@ -421,11 +429,11 @@
              * Get the existing group list
              */
             fetchGroups() {
-                this.groups = []
+                let groups = []
 
                 this.axios.get('api/groups').then(response => {
                     response.data.forEach((data) => {
-                        this.groups.push({
+                        groups.push({
                             id : data.id,
                             name : data.name,
                             isActive: data.isActive,
@@ -433,6 +441,10 @@
                         })
                     })
 
+                    if ( !objectEquals(groups, this.groups) ) {
+                        this.groups = groups
+                    } 
+
                     this.$storage.set('groups', this.groups)
                 })
             },

resources/lang/en/commons.php

@@ -34,4 +34,6 @@
     'all' => 'All',
     'rename' => 'Rename',
     'options' => 'Options',
+    'reload' => 'Reload',
+    'some_data_have_changed' => 'Some data have changed. You should'
 ];