✨ Adds an App Info section, to help users raise bug for current version

src/assets/interface-icons/application-about.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="info" class="svg-inline--fa fa-info fa-w-8" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M224 352.589V224c0-16.475-6.258-31.517-16.521-42.872C225.905 161.14 236 135.346 236 108 236 48.313 187.697 0 128 0 68.313 0 20 48.303 20 108c0 20.882 5.886 40.859 16.874 58.037C15.107 176.264 0 198.401 0 224v39.314c0 23.641 12.884 44.329 32 55.411v33.864C12.884 363.671 0 384.359 0 408v40c0 35.29 28.71 64 64 64h128c35.29 0 64-28.71 64-64v-40c0-23.641-12.884-44.329-32-55.411zM128 48c33.137 0 60 26.863 60 60s-26.863 60-60 60-60-26.863-60-60 26.863-60 60-60zm80 400c0 8.836-7.164 16-16 16H64c-8.836 0-16-7.164-16-16v-40c0-8.836 7.164-16 16-16h16V279.314H64c-8.836 0-16-7.164-16-16V224c0-8.836 7.164-16 16-16h96c8.836 0 16 7.164 16 16v168h16c8.836 0 16 7.164 16 16v40z"></path></svg>

src/components/Configuration/AppInfoModal.vue

@@ -0,0 +1,191 @@
+<template>
+  <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>
+      </router-link>
+      <h3>Service Worker Status</h3>
+      <code v-html="serviceWorkerInfo">{{ serviceWorkerInfo }}</code>
+      <br>
+      <h3>Config Validation Status</h3>
+      <code>{{getIsConfigValidStatus()}}</code>
+      <br>
+      <h3>Help & Support</h3>
+      <ul>
+        <li><a href="https://git.io/JnqPR">Report a Bug</a></li>
+        <li><a href="https://git.io/JnDxL">Request a Feature</a></li>
+        <li><a href="https://git.io/JnDxs">Ask a Question</a></li>
+        <li><a href="https://git.io/JnDxn">Leave Feedback</a></li>
+        <li><a href="https://github.com/Lissy93/dashy/discussions">Join the Discussion</a></li>
+      </ul>
+      <p class="small-note">Please include the following info in your bug report:</p>
+      <a @click="showInfo = !showInfo">{{ showInfo ? 'Hide' : 'Show'}} system info</a>
+      <div class="system-info" v-if="showInfo">
+        <h4>System Info</h4>
+        <code><b>Dashy Version:</b> V {{appVersion}}</code><br>
+        <code><b>Browser:</b> {{systemInfo.browser}}</code><br>
+        <code><b>Is Mobile?</b> {{systemInfo.isMobile ? 'Yes' : 'No'}}</code><br>
+        <code><b>OS:</b> {{systemInfo.os}}</code><br>
+      </div>
+      <h3>About</h3>
+      <p class="about-text">
+        Documentation and Source Code available on
+        <a href="https://github.com/lissy93/dashy">GitHub</a>
+      </p>
+      <h3>License</h3>
+      <code>Licensed under MIT X11. Copyright © 2021</code>
+    </div>
+  </modal>
+</template>
+
+<script>
+import { modalNames, sessionStorageKeys } from '@/utils/defaults';
+
+export default {
+  name: 'AppInfoModal',
+  data() {
+    return {
+      modalName: modalNames.ABOUT_APP,
+      appVersion: process.env.VUE_APP_VERSION,
+      systemInfo: this.getSystemInfo(),
+      serviceWorkerInfo: 'Checking...',
+      showInfo: false,
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.serviceWorkerInfo = this.getSwStatus();
+    }, 100);
+  },
+  methods: {
+    getIsConfigValidStatus() {
+      const isValidVar = process.env.VUE_APP_CONFIG_VALID;
+      if (isValidVar === undefined) return 'Config validation status is missing';
+      return `Config is ${isValidVar ? 'Valid' : 'Invalid'}`;
+    },
+    getSwStatus() {
+      const sessionData = sessionStorage[sessionStorageKeys.SW_STATUS];
+      const swInfo = sessionData ? JSON.parse(sessionData) : {};
+      let swStatus = '';
+      if (swInfo.registered) swStatus += 'Service worker registered<br>';
+      if (swInfo.ready) swStatus += 'Dashy is being served from service worker<br>';
+      if (swInfo.cached) swStatus += 'Content has been cached for offline use<br>';
+      if (swInfo.updateFound) swStatus += 'New content is downloading<br>';
+      if (swInfo.updated) swStatus += 'New content is available; please refresh<br>';
+      if (swInfo.offline) swStatus += 'No internet connection found. App is running in offline mode<br>';
+      if (swInfo.error) swStatus += 'Error during service worker registration<br>';
+      if (swInfo.devMode) swStatus += 'App running in dev mode, no need for service worker<br>';
+      if (swStatus.length === 0) swStatus += 'No service worker info available';
+      return swStatus;
+    },
+    getSystemInfo() {
+      const { userAgent } = navigator;
+
+      // Find Operating System
+      let os = 'Unknown';
+      if (userAgent.indexOf('Win') !== -1) os = 'Windows';
+      else if (userAgent.indexOf('Mac') !== -1) os = 'MacOS';
+      else if (userAgent.indexOf('Android') !== -1) os = 'Android';
+      else if (userAgent.indexOf('iPhone') !== -1) os = 'iOS';
+      else if (userAgent.indexOf('Linux') !== -1) os = 'Linux';
+      else if (userAgent.indexOf('X11') !== -1) os = 'UNIX';
+
+      // Find Browser
+      let browser = 'Unknown';
+      if (userAgent.indexOf('Opera') !== -1) browser = 'Opera';
+      else if (userAgent.indexOf('Chrome') !== -1) browser = 'Chrome';
+      else if (userAgent.indexOf('Safari') !== -1) browser = 'Safari';
+      else if (userAgent.indexOf('Firefox') !== -1) browser = 'Firefox';
+      else if (userAgent.indexOf('MSIE') !== -1) browser = 'IE';
+      else browser = 'Unknown';
+
+      const isMobile = !!navigator.userAgent.match(/iphone|android|blackberry/ig) || false;
+
+      return {
+        os,
+        browser,
+        userAgent,
+        isMobile,
+      };
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+span.options-label {
+  color: var(--settings-text-color);
+}
+
+.display-options {
+  color: var(--settings-text-color);
+  svg {
+    path {
+      fill: var(--settings-text-color);
+    }
+    width: 1rem;
+    height: 1rem;
+    margin: 0.2rem;
+    padding: 0.2rem;
+    text-align: center;
+    background: var(--background);
+    border: 1px solid currentColor;
+    border-radius: var(--curve-factor);
+    cursor: pointer;
+    &:hover, &.selected {
+      background: var(--settings-text-color);
+      path { fill: var(--background); }
+    }
+  }
+}
+
+div.about-modal {
+  background: var(--about-page-background);
+  color: var(--about-page-color);
+  padding: 1rem;
+  height: 100%;
+  hr {
+    border-color: var(--about-page-accent);
+  }
+  h2 {
+    text-decoration: none;
+    font-size: 1.8rem;
+    text-align: center;
+    margin: 0.2rem;
+  }
+  h3 {
+    font-size: 1.3rem;
+    margin: 0.75rem 0 0.2rem 0;
+    color: var(--about-page-accent);
+  }
+  p.small-note {
+    font-size: 0.9rem;
+    margin: 0.2rem 0;
+  }
+  p.about-text {
+    margin: 0.2rem 0;
+  }
+  a {
+    color: var(--about-page-accent);
+  }
+  ul {
+    margin-top: 0.2rem;
+  }
+  .system-info {
+    font-size: 0.8rem;
+    background: var(--black);
+    color: var(--white);
+    border-radius: var(--curve-factor-small);
+    padding: 0.5rem;
+    border: 1px solid var(--white);
+    width: fit-content;
+    h4 {
+      font-size: 0.8rem;
+      margin: 0 0 0.2rem 0;
+      text-decoration: underline;
+    }
+  }
+}
+
+</style>

src/components/Configuration/ConfigContainer.vue

@@ -29,9 +29,14 @@
           <DeleteIcon class="button-icon"/>
           Reset Local Settings
         </button>
+        <button class="config-button center" @click="openAboutModal()">
+          <IconAbout class="button-icon" />
+          App Info
+        </button>
         <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">Dashy version {{ appVersion }}</p>
         <div class="config-note">
           <span>
             It is recommend to make a backup of your conf.yml file, before making any  changes.
@@ -79,6 +84,7 @@ import EditIcon from '@/assets/interface-icons/config-edit-json.svg';
 import CustomCssIcon from '@/assets/interface-icons/config-custom-css.svg';
 import CloudIcon from '@/assets/interface-icons/cloud-backup-restore.svg';
 import RebuildIcon from '@/assets/interface-icons/application-rebuild.svg';
+import IconAbout from '@/assets/interface-icons/application-about.svg';
 
 export default {
   name: 'ConfigContainer',
@@ -86,6 +92,7 @@ export default {
     return {
       jsonParser: JsonToYaml,
       backupId: localStorage[localStorageKeys.BACKUP_ID] || '',
+      appVersion: process.env.VUE_APP_VERSION,
     };
   },
   props: {
@@ -109,6 +116,7 @@ export default {
     CloudIcon,
     CustomCssIcon,
     RebuildIcon,
+    IconAbout,
   },
   methods: {
     /* Seletcs the edit tab of the tab view */
@@ -127,6 +135,9 @@ export default {
     openRebuildAppModal() {
       this.$modal.show(modalNames.REBUILD_APP);
     },
+    openAboutModal() {
+      this.$modal.show(modalNames.ABOUT_APP);
+    },
     openCloudSync() {
       this.$modal.show(modalNames.CLOUD_BACKUP);
     },
@@ -210,6 +221,12 @@ a.config-button, button.config-button {
   }
 }
 
+p.app-version {
+  margin: 0.5rem auto;
+  font-size: 1rem;
+  color: var(--transparent-white-50);
+}
+
 div.code-container {
   background: var(--config-code-background);
   #conf-yaml span {
@@ -275,7 +292,7 @@ a.hyperlink-wrapper {
   background: var(--config-settings-background);
   height: calc(100% - 2rem);
   h2 {
-    margin: 1rem auto;
+    margin: 0 auto 1rem auto;
     color: var(--config-settings-color);
   }
 }

src/components/Settings/AppButtons.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <div class="display-options">
+      <IconLogout @click="logout()" v-tooltip="tooltip('Sign Out')"
+        class="layout-icon" tabindex="-2" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { logout as registerLogout } from '@/utils/Auth';
+import IconLogout from '@/assets/interface-icons/user-logout.svg';
+
+export default {
+  name: 'AppButtons',
+  components: {
+    IconLogout,
+  },
+  methods: {
+    logout() {
+      registerLogout();
+      this.$toasted.show('Logged Out');
+      setTimeout(() => {
+        location.reload(true); // eslint-disable-line no-restricted-globals
+      }, 500);
+    },
+    tooltip(content) {
+      return { content, trigger: 'hover focus', delay: 250 };
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+span.options-label {
+  color: var(--settings-text-color);
+}
+
+.display-options {
+  color: var(--settings-text-color);
+  svg {
+    path {
+      fill: var(--settings-text-color);
+    }
+    width: 1rem;
+    height: 1rem;
+    margin: 0.2rem;
+    padding: 0.2rem;
+    text-align: center;
+    background: var(--background);
+    border: 1px solid currentColor;
+    border-radius: var(--curve-factor);
+    cursor: pointer;
+    &:hover, &.selected {
+      background: var(--settings-text-color);
+      path { fill: var(--background); }
+    }
+  }
+}
+
+</style>

src/components/Settings/SettingsContainer.vue

@@ -13,12 +13,7 @@
         <ItemSizeSelector :iconSize="iconSize" @iconSizeUpdated="updateIconSize" />
         <ConfigLauncher :sections="sections" :pageInfo="pageInfo" :appConfig="appConfig"
           @modalChanged="modalChanged" />
-        <IconLogout
+        <AppButtons  v-if="isUserLoggedIn()" />
-          v-if="isUserLoggedIn()"
-          @click="logout()"
-          v-tooltip="'Logout'"
-          class="logout-icon"
-        />
       </div>
       <div :class="`show-hide-container ${settingsVisible? 'hide-btn' : 'show-btn'}`">
         <button @click="toggleSettingsVisibility()"
@@ -29,6 +24,7 @@
       </div>
     </div>
     <KeyboardShortcutInfo />
+    <AppInfoModal />
   </section>
 </template>
 
@@ -39,9 +35,10 @@ import ConfigLauncher from '@/components/Settings/ConfigLauncher';
 import ThemeSelector from '@/components/Settings/ThemeSelector';
 import LayoutSelector from '@/components/Settings/LayoutSelector';
 import ItemSizeSelector from '@/components/Settings/ItemSizeSelector';
+import AppButtons from '@/components/Settings/AppButtons';
 import KeyboardShortcutInfo from '@/components/Settings/KeyboardShortcutInfo';
+import AppInfoModal from '@/components/Configuration/AppInfoModal';
 import { logout as registerLogout } from '@/utils/Auth';
-import IconLogout from '@/assets/interface-icons/user-logout.svg';
 import IconOpen from '@/assets/interface-icons/config-open-settings.svg';
 import IconClose from '@/assets/interface-icons/config-close.svg';
 
@@ -62,8 +59,9 @@ export default {
     ThemeSelector,
     LayoutSelector,
     ItemSizeSelector,
+    AppButtons,
     KeyboardShortcutInfo,
-    IconLogout,
+    AppInfoModal,
     IconOpen,
     IconClose,
   },

src/main.js

@@ -10,7 +10,7 @@ import Toasted from 'vue-toasted'; // Toast component, used to show confirmation
 import { toastedOptions } from './utils/defaults';
 import Dashy from './App.vue';
 import router from './router';
-import './registerServiceWorker';
+import registerServiceWorker from './registerServiceWorker';
 
 Vue.use(VTooltip);
 Vue.use(VModal);
@@ -20,6 +20,9 @@ Vue.component('v-select', VSelect);
 
 Vue.config.productionTip = false;
 
+// Register Service Worker
+registerServiceWorker();
+
 new Vue({
   router,
   render: (awesome) => awesome(Dashy),

src/styles/color-palette.scss

@@ -69,7 +69,7 @@
   --login-form-background: var(--background);
   --login-form-background-secondary: var(--background-darker);
   --about-page-color: var(--white);
-  --about-page-background: #0b1021;
+  --about-page-background: var(--background);
   --about-page-accent: var(--primary);
   --side-bar-background: var(--background-darker);
   --side-bar-background-lighter: var(--background);

src/styles/color-themes.scss

@@ -87,6 +87,7 @@ html[data-theme='matrix'] {
   --curve-factor: 0px;
   --font-body: 'Cutive Mono', monospace;
   --font-headings: 'VT323', monospace;
+  --about-page-background: var(--background);
   .prism-editor-wrapper.my-editor {
     border: 1px solid var(--primary);
   }
@@ -179,6 +180,9 @@ html[data-theme='material-original'] {
   --status-check-tooltip-background: #f2f2f2;
   --status-check-tooltip-color: #01579b;
   --login-form-background: #fff;
+  --about-page-accent: #000;
+  --about-page-color: var(--background-darker);
+  --about-page-background: var(--background);
 }
 
 html[data-theme='material-dark-original'] {
@@ -254,6 +258,7 @@ html[data-theme='colorful'] {
 html[data-theme='minimal-light'], html[data-theme='minimal-dark'], html[data-theme='vaporware'] {
   --font-body: 'PTMono-Regular', 'Courier New', monospace;
   --font-headings: 'PTMono-Regular', 'Courier New', monospace;
+  
   label.lbl-toggle h3 {
     font-size: 1.8rem;
   }
@@ -289,6 +294,8 @@ html[data-theme='material'], html[data-theme='material-dark'] {
   --font-headings: 'Francois One', serif;
   --curve-factor: 4px;
   --curve-factor-navbar: 8px;
+  --about-page-background: var(--background);
+  --about-page-color: var(--primary);
 
   .collapsable {
     margin: 0;
@@ -541,6 +548,8 @@ html[data-theme='minimal-light'] {
   --status-check-tooltip-background: #f2f2f2;
   --status-check-tooltip-color: #000;
   --login-form-color: #101931;
+  --about-page-background: var(--background);
+  --about-page-color: var(--background-darker);
 
   section.filter-container {
     background: #fff;
@@ -572,6 +581,8 @@ html[data-theme='minimal-dark'] {
   --curve-factor-navbar: 8px;
   --item-group-heading-text-color: #fff;
   --item-group-heading-text-color-hover: #ffffffbf;
+  --about-page-background: var(--background);
+  --about-page-color: var(--primary);
 
   label.lbl-toggle h3 {
     font-size: 1.8rem;

src/utils/ConfigValidator.js

@@ -38,13 +38,19 @@ const bigError = () => {
   return `\n${line}${msg}${line}\n`;
 };
 
+const setIsValidVariable = (isValid) => {
+  process.env.VUE_APP_CONFIG_VALID = isValid;
+};
+
 /* Start the validation */
 const validate = (config) => {
   console.log('\nChecking config file against schema...');
   const valid = ajv.validate(schema, config);
   if (valid) {
+    setIsValidVariable(true);
     console.log(successMsg());
   } else {
+    setIsValidVariable(false);
     console.log(errorMsg(ajv.errors));
   }
 };
@@ -53,6 +59,7 @@ try {
   const config = yaml.load(fs.readFileSync('./public/conf.yml', 'utf8'));
   validate(config);
 } catch (e) {
+  setIsValidVariable(false);
   console.log(bigError());
   console.log('Please ensure that your config file is present, '
     + 'has the correct access rights and is parsable. '

src/utils/defaults.js

@@ -61,10 +61,14 @@ module.exports = {
   cookieKeys: {
     AUTH_TOKEN: 'authenticationToken',
   },
+  sessionStorageKeys: {
+    SW_STATUS: 'serviceWorkerStatus',
+  },
   modalNames: {
     CONF_EDITOR: 'CONF_EDITOR',
     CLOUD_BACKUP: 'CLOUD_BACKUP',
     REBUILD_APP: 'REBUILD_APP',
+    ABOUT_APP: 'ABOUT_APP',
   },
   topLevelConfKeys: {
     PAGE_INFO: 'pageInfo',