From 840a4296b3f5a0f7cfa9ac10696cfa89605e9e9f Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 25 Jul 2021 16:46:03 +0100
Subject: [PATCH 1/5] :construction: Adds a component to check for updates

---
 src/components/Configuration/AppVersion.vue | 112 ++++++++++++++++++++
 1 file changed, 112 insertions(+)
 create mode 100644 src/components/Configuration/AppVersion.vue

diff --git a/src/components/Configuration/AppVersion.vue b/src/components/Configuration/AppVersion.vue
new file mode 100644
index 0000000000..48dfc4da9f
--- /dev/null
+++ b/src/components/Configuration/AppVersion.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="app-version">
+    <!-- Current Version -->
+    <p>
+      {{ $t('config.app-version-note') }} {{ appVersion }}
+    </p>
+    <div v-if="checksEnabled">
+      <!-- Results haven't come in yet, either still checking, or error -->
+      <p v-if="!finished">
+        {{ error ? 'Error checking for updates.' : 'Chcekcing for Updates...' }}
+      </p>
+      <!-- App is up-to-date -->
+      <p v-if="finished && isUpToDate" class="up-to-date">
+        ✅ Up-to-Date
+      </p>
+      <!-- An update is available, but not too out-of-date -->
+      <p  v-else-if="finished && !veryOutOfDate" class="update-availible">
+        ⚠️Update Availible: <b>{{ latestVersion }}</b>
+      </p>
+      <!-- Update available, app is VERY out of date, show some additional info -->
+      <p  v-else-if="finished && veryOutOfDate" class="big-update-availible">
+        ❗ Update Availible: <b>{{ latestVersion }}</b>
+        <span class="please-update">
+          You are using an unsupported version of Dashy.<br>
+          For the best experience, and recent security patches, please update to {{ latestVersion }}
+        </span>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+  name: 'AppInfoModal',
+  inject: ['config'],
+  data() {
+    return {
+      appVersion: process.env.VUE_APP_VERSION, // Current version, from package.json
+      latestVersion: '', // Will store latest version, when request returns
+      checksEnabled: true, // Should we check for updates
+      isUpToDate: true, // Is current version === latest version
+      veryOutOfDate: false, // If the app is more than 5 versions out of date
+      finished: false, // Set to true when request is done
+      error: false, // Set to true if checkig fails
+    };
+  },
+  mounted() {
+    const appConfig = this.config.appConfig || {};
+    if (!this.appVersion || (appConfig && appConfig.disableUpdateChecks)) {
+      // Either current version isn't found, or user disabled checks
+      this.checksEnabled = false;
+    } else {
+      this.checkVersion(); // Trigger the check
+    }
+  },
+  methods: {
+    /* Gets the apps latest version from Dashy's git repo */
+    checkVersion() {
+      const packageUrl = 'https://raw.githubusercontent.com/Lissy93/dashy/master/package.json';
+      axios.get(packageUrl).then((response) => {
+        if (response && response.data && response.data.version) {
+          this.latestVersion = response.data.version;
+          this.isUpToDate = this.checkIfUpToDate(this.appVersion, this.latestVersion);
+          this.finished = true;
+        }
+      }).catch(() => {
+        this.error = true;
+      });
+    },
+    /* Compares the current version, with the package.json version */
+    checkIfUpToDate(currentVersion, latestVersion) {
+      const parse = (version) => parseInt(version.replaceAll('.', ''), 10);
+      const difference = parse(latestVersion) - parse(currentVersion);
+      if (difference > 5) this.veryOutOfDate = true;
+      return difference <= 0;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+div.app-version {
+  color: var(--settings-text-color);
+  text-align: center;
+  p {
+    margin: 0.5rem auto;
+    color: var(--transparent-white-50);
+    cursor: default;
+    &.up-to-date {
+      color: var(--success);
+      font-weight: bold;
+      opacity: 0.8;
+    }
+    &.update-availible {
+      color: var(--warning);
+      opacity: 0.8;
+    }
+    &.big-update-availible {
+      color: var(--danger);
+      .please-update {
+        font-size: 0.8rem;
+        color: var(--danger);
+        display: block;
+      }
+    }
+  }
+}
+
+</style>

From dcdcdfb9799b330775693463c94fe2511e7a34b5 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 25 Jul 2021 16:46:49 +0100
Subject: [PATCH 2/5] :sparkles: Shows app version + status in Config and About
 menu

---
 src/components/Configuration/AppInfoModal.vue    | 7 ++++++-
 src/components/Configuration/ConfigContainer.vue | 6 ++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/Configuration/AppInfoModal.vue b/src/components/Configuration/AppInfoModal.vue
index ab136e0b52..8fc237eb8f 100644
--- a/src/components/Configuration/AppInfoModal.vue
+++ b/src/components/Configuration/AppInfoModal.vue
@@ -2,8 +2,9 @@
   <modal :name="modalName" :resizable="true" width="40%" height="60%" classes="dashy-modal">
     <div class="about-modal">
       <router-link to="/about">
-      <h2>Dashy V{{ appVersion }}</h2>
+      <h2>Dashy</h2>
       </router-link>
+      <AppVersion />
       <h3>Service Worker Status</h3>
       <code v-html="serviceWorkerInfo">{{ serviceWorkerInfo }}</code>
       <br>
@@ -39,10 +40,14 @@
 </template>
 
 <script>
+import AppVersion from '@/components/Configuration/AppVersion';
 import { modalNames, sessionStorageKeys } from '@/utils/defaults';
 
 export default {
   name: 'AppInfoModal',
+  components: {
+    AppVersion,
+  },
   data() {
     return {
       modalName: modalNames.ABOUT_APP,
diff --git a/src/components/Configuration/ConfigContainer.vue b/src/components/Configuration/ConfigContainer.vue
index 720e611168..4f6eefc0b7 100644
--- a/src/components/Configuration/ConfigContainer.vue
+++ b/src/components/Configuration/ConfigContainer.vue
@@ -40,8 +40,8 @@
         <p class="small-screen-note" style="display: none;">
             You are using a very small screen, and some screens in this menu may not be optimal
         </p>
-        <p class="app-version">{{ $t('config.app-version-note') }} {{ appVersion }}</p>
         <p class="language">{{ getLanguage() }}</p>
+        <AppVersion />
         <div class="config-note">
           <span>{{ $t('config.backup-note') }}</span>
         </div>
@@ -74,7 +74,6 @@
 </template>
 
 <script>
-
 import hljs from 'highlight.js/lib/core';
 import yaml from 'highlight.js/lib/languages/yaml';
 import 'highlight.js/styles/mono-blue.css';
@@ -85,6 +84,7 @@ import { getUsersLanguage } from '@/utils/ConfigHelpers';
 import JsonEditor from '@/components/Configuration/JsonEditor';
 import CustomCssEditor from '@/components/Configuration/CustomCss';
 import RebuildApp from '@/components/Configuration/RebuildApp';
+import AppVersion from '@/components/Configuration/AppVersion';
 
 import DownloadIcon from '@/assets/interface-icons/config-download-file.svg';
 import DeleteIcon from '@/assets/interface-icons/config-delete-local.svg';
@@ -102,6 +102,7 @@ export default {
       jsonParser: JsonToYaml,
       backupId: localStorage[localStorageKeys.BACKUP_ID] || '',
       appVersion: process.env.VUE_APP_VERSION,
+      latestVersion: '',
     };
   },
   props: {
@@ -119,6 +120,7 @@ export default {
     JsonEditor,
     CustomCssEditor,
     RebuildApp,
+    AppVersion,
     DownloadIcon,
     DeleteIcon,
     EditIcon,

From b90dfe2477c0d6ddade6fd866c77b669d7864f27 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 25 Jul 2021 16:55:13 +0100
Subject: [PATCH 3/5] :globe_with_meridians: Adds translations for Update
 component

---
 src/assets/locales/en.json                  |  8 +++++++-
 src/components/Configuration/AppVersion.vue | 12 ++++++------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index 9b69980bb8..eb638c346f 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -34,7 +34,6 @@
     "change-language-button": "Change App Language",
     "reset-settings-button": "Reset Local Settings",
     "app-info-button": "App Info",
-    "app-version-note": "Dashy version",
     "backup-note": "It is recommend to make a backup of your configuration before making changes.",
     "reset-config-msg-l1": "This will remove all user settings from local storage, but won't effect your 'conf.yml' file.",
     "reset-config-msg-l2": "You should first backup any changes you've made locally, if you want to use them in the future.",
@@ -62,6 +61,13 @@
     "item-size-large": "Large",
     "config-launcher-label": "Config"
   },
+  "updates": {
+    "app-version-note": "Dashy version",
+    "up-to-date": "Up-to-Date",
+    "out-of-date": "Update Available",
+    "unsupported-version-l1": "You are using an unsupported version of Dashy",
+    "unsupported-version-l2": "For the best experience, and recent security patches, please update to"
+  },
   "language-switcher": {
     "title": "Change Application Language",
     "dropdown-label": "Select a Language",
diff --git a/src/components/Configuration/AppVersion.vue b/src/components/Configuration/AppVersion.vue
index 48dfc4da9f..698e8a8394 100644
--- a/src/components/Configuration/AppVersion.vue
+++ b/src/components/Configuration/AppVersion.vue
@@ -2,7 +2,7 @@
   <div class="app-version">
     <!-- Current Version -->
     <p>
-      {{ $t('config.app-version-note') }} {{ appVersion }}
+      {{ $t('updates.app-version-note') }} {{ appVersion }}
     </p>
     <div v-if="checksEnabled">
       <!-- Results haven't come in yet, either still checking, or error -->
@@ -11,18 +11,18 @@
       </p>
       <!-- App is up-to-date -->
       <p v-if="finished && isUpToDate" class="up-to-date">
-        ✅ Up-to-Date
+        ✅ {{ $t('updates.up-to-date') }}
       </p>
       <!-- An update is available, but not too out-of-date -->
       <p  v-else-if="finished && !veryOutOfDate" class="update-availible">
-        ⚠️Update Availible: <b>{{ latestVersion }}</b>
+        ⚠️{{ $t('updates.out-of-date') }}: <b>{{ latestVersion }}</b>
       </p>
       <!-- Update available, app is VERY out of date, show some additional info -->
       <p  v-else-if="finished && veryOutOfDate" class="big-update-availible">
-        ❗ Update Availible: <b>{{ latestVersion }}</b>
+        ❗ {{ $t('updates.out-of-date') }}: <b>{{ latestVersion }}</b>
         <span class="please-update">
-          You are using an unsupported version of Dashy.<br>
-          For the best experience, and recent security patches, please update to {{ latestVersion }}
+          {{ $t('updates.unsupported-version-l1') }}.<br>
+          {{ $t('updates.unsupported-version-2') }} {{ latestVersion }}
         </span>
       </p>
     </div>

From dba108fad365e2820cacea6005364d1567352f14 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 25 Jul 2021 16:56:00 +0100
Subject: [PATCH 4/5] :memo: Documents 'disableUpdateChecks' in Config guide

---
 docs/configuring.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/configuring.md b/docs/configuring.md
index f577197d66..4e1ca03873 100644
--- a/docs/configuring.md
+++ b/docs/configuring.md
@@ -71,6 +71,7 @@ To disallow any changes from being written to disk via the UI config editor, set
 **`customCss`** | `string` | _Optional_ | Raw CSS that will be applied to the page. This can also be set from the UI. Please minify it first.
 **`hideComponents`** | `object` | _Optional_ | A list of key page components (header, footer, search, settings, etc) that are present by default, but can be removed using this option. See [`appConfig.hideComponents`](#appconfighideComponents-optional)
 **`allowConfigEdit`** | `boolean` | _Optional_ | Should prevent / allow the user to write configuration changes to the conf.yml from the UI. When set to `false`, the user can only apply changes locally using the config editor within the app, whereas if set to `true` then changes can be written to disk directly through the UI. Defaults to `true`. Note that if authentication is enabled, the user must be of type `admin` in order to apply changes globally.
+**`disableUpdateChecks`** | `boolean` | _Optional_ | If set to true, Dashy will not check for updates. Defaults to `false`.
 **`disableServiceWorker`** | `boolean` | _Optional_ | Service workers cache web applications to improve load times and offer basic offline functionality, and are enabled by default in Dashy. The service worker can sometimes cause older content to be cached, requiring the app to be hard-refreshed. If you do not want SW functionality, or are having issues with caching, set this property to `true` to disable all service workers.
 **`disableContextMenu`** | `boolean` | _Optional_ | If set to `true`, the custom right-click context menu will be disabled. Defaults to `false`.
 

From 994bea67290a8af1fde89846b672288476545741 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 25 Jul 2021 17:00:55 +0100
Subject: [PATCH 5/5] :bookmark: Bumps to V1.4.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d1196a422a..2dc77a1886 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Dashy",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "license": "MIT",
   "main": "server",
   "scripts": {