alert when refresh needed on frontend. remove unnecessary logout page

quasar.conf.js

@@ -88,15 +88,10 @@ module.exports = function () {
       plugins: [
         'Dialog',
         'Loading',
-        'LoadingBar',
         'Meta',
         'Notify'
       ],
       config: {
-        loadingBar: {
-          color: "red",
-          size: "4px"
-        },
         notify: {
           position: "top",
           timeout: 2000,

src/router/routes.js

@@ -39,18 +39,10 @@ const routes = [
       requiresVisitor: true
     }
   },
-  {
-    path: "/logout",
-    name: "Logout",
-    component: () => import("@/views/Logout")
-  },
   {
     path: "/expired",
     name: "SessionExpired",
-    component: () => import("@/views/SessionExpired"),
-    meta: {
-      requireAuth: true
-    }
+    component: () => import("@/views/SessionExpired")
   },
   { path: "*", component: () => import("@/views/NotFound") }
 ]

src/store/index.js

@@ -31,6 +31,7 @@ export default function () {
       installedSoftware: [],
       scripts: [],
       toggleScriptManager: false,
+      needrefresh: false,
     },
     getters: {
       loggedIn(state) {
@@ -70,6 +71,9 @@ export default function () {
       scripts(state) {
         return state.scripts;
       },
+      needRefresh(state) {
+        return state.needrefresh;
+      }
     },
     mutations: {
       TOGGLE_SCRIPT_MANAGER(state, action) {
@@ -121,6 +125,9 @@ export default function () {
       SET_SCRIPTS(state, scripts) {
         state.scripts = scripts;
       },
+      SET_REFRESH_NEEDED(state, action) {
+        state.needrefresh = action;
+      }
     },
     actions: {
       loadAutomatedTasks(context, pk) {
@@ -228,6 +235,27 @@ export default function () {
           //commit("destroySubTable");
         });
       },
+      checkVer(context) {
+        axios.get("/core/version/").then(r => {
+          const version = r.data;
+
+          if (localStorage.getItem("rmmver")) {
+            if (localStorage.getItem("rmmver") === version) {
+              return;
+            } else {
+              localStorage.setItem("rmmver", "0.0.1");
+              context.commit("SET_REFRESH_NEEDED", true);
+            }
+          } else {
+            localStorage.setItem("rmmver", version);
+            return;
+          }
+        })
+      },
+      reload() {
+        localStorage.removeItem("rmmver");
+        location.reload();
+      },
       retrieveToken(context, credentials) {
         return new Promise((resolve, reject) => {
           axios

src/views/Dashboard.vue

@@ -1,6 +1,10 @@
 <template>
   <q-layout view="hHh lpR fFf">
     <q-header elevated class="bg-grey-9 text-white">
+      <q-banner v-if="needRefresh" inline-actions class="bg-red text-white text-center">
+        You are viewing an outdated version of this page.
+        <q-btn color="dark" icon="refresh" label="Refresh" @click="reload" />
+      </q-banner>
       <q-toolbar>
         <q-btn dense flat push @click="refreshEntireSite" icon="refresh" />
         <q-toolbar-title>Tactical RMM</q-toolbar-title>
@@ -9,7 +13,7 @@
 
         <q-btn-dropdown flat no-caps stretch :label="user">
           <q-list>
-            <q-item to="/logout" exact>
+            <q-item to="/expired" exact>
               <q-item-section>
                 <q-item-label>Logout</q-item-label>
               </q-item-section>
@@ -44,14 +48,10 @@
                   <div class="row">
                     <q-icon :name="props.node.icon" :color="props.node.color" class="q-mr-sm" />
                     <span>{{ props.node.label }}</span>
-                    
+
                     <q-menu context-menu>
                       <q-list dense style="min-width: 200px">
-                        <q-item 
-                          clickable 
-                          v-close-popup 
-                          @click="showEditModal(props.node)"
-                        >
+                        <q-item clickable v-close-popup @click="showEditModal(props.node)">
                           <q-item-section side>
                             <q-icon name="edit" />
                           </q-item-section>
@@ -70,11 +70,7 @@
 
                         <q-separator></q-separator>
 
-                        <q-item 
-                          clickable 
-                          v-close-popup 
-                          @click="showPolicyAdd(props.node)"
-                        >
+                        <q-item clickable v-close-popup @click="showPolicyAdd(props.node)">
                           <q-item-section side>
                             <q-icon name="policy" />
                           </q-item-section>
@@ -142,7 +138,7 @@
     </q-dialog>
     <!-- add policy modal -->
     <q-dialog v-model="showPolicyAddModal">
-      <PolicyAdd 
+      <PolicyAdd
         @close="showPolicyAddModal = false"
         :type="policyAddType"
         :pk="parseInt(policyAddPk)"
@@ -158,9 +154,9 @@ import FileBar from "@/components/FileBar";
 import AgentTable from "@/components/AgentTable";
 import SubTableTabs from "@/components/SubTableTabs";
 import AlertsIcon from "@/components/AlertsIcon";
-import PolicyAdd from "@/components/automation/modals/PolicyAdd"
-import EditSites from "@/components/modals/clients/EditSites"
-import EditClients from "@/components/modals/clients/EditClients"
+import PolicyAdd from "@/components/automation/modals/PolicyAdd";
+import EditSites from "@/components/modals/clients/EditSites";
+import EditClients from "@/components/modals/clients/EditClients";
 
 export default {
   components: {
@@ -187,6 +183,7 @@ export default {
       clientActive: "",
       siteActive: "",
       frame: [],
+      poll: null,
       columns: [
         {
           name: "smsalert",
@@ -343,6 +340,14 @@ export default {
       } else {
         this.showEditSiteModal = true;
       }
+    },
+    reload() {
+      this.$store.dispatch("reload");
+    },
+    livePoll() {
+      this.poll = setInterval(() => {
+        this.$store.dispatch("checkVer");
+      }, 60 * 5 * 1000);
     }
   },
   computed: {
@@ -352,7 +357,7 @@ export default {
       treeReady: state => state.treeReady,
       clients: state => state.clients
     }),
-    ...mapGetters(["selectedAgentPk"]),
+    ...mapGetters(["selectedAgentPk", "needRefresh"]),
     allClientsActive() {
       return this.selectedTree === "" ? true : false;
     },
@@ -372,12 +377,14 @@ export default {
   created() {
     this.getTree();
     this.$store.dispatch("getUpdatedSites");
+    this.$store.dispatch("checkVer");
   },
   mounted() {
-    if (localStorage.getItem("reloaded")) {
-      localStorage.removeItem("reloaded");
-    }
     this.loadFrame(this.activeNode);
+    this.livePoll();
+  },
+  beforeDestroy() {
+    clearInterval(this.poll);
   }
 };
 </script>

src/views/Login.vue

@@ -28,7 +28,7 @@
               />
 
               <div>
-                <q-btn label="Login" type="submit" color="primary" />
+                <q-btn label="Login" type="submit" color="primary" class="full-width" />
               </div>
             </q-form>
           </q-card-section>

src/views/Logout.vue

@@ -1,14 +0,0 @@
-<template>
-  <div></div>
-</template>
-
-<script>
-export default {
-  name: "Logout",
-  mounted() {
-    this.$store.dispatch("destroyToken").then(response => {
-      this.$router.push({ name: "Login" });
-    });
-  }
-};
-</script>

src/views/SessionExpired.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="fixed-center text-center">
     <p class="text-faded">Your session has expired</p>
-    <q-btn color="secondary" style="width:200px;" @click="$router.push('/')">Login</q-btn>
+    <q-btn color="secondary" style="width:200px;" to="/login">Login</q-btn>
   </div>
 </template>
 
@@ -10,14 +10,6 @@ export default {
   name: "SessionExpired",
   created() {
     this.$store.dispatch("destroyToken");
-  },
-  mounted() {
-    if (localStorage.getItem("reloaded")) {
-      localStorage.removeItem("reloaded");
-    } else {
-      localStorage.setItem("reloaded", "1");
-      location.reload();
-    }
   }
 };
 </script>