From c4f1be2b766c9add4af1926019415f5942866661 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Wed, 9 Feb 2022 18:04:16 +0000
Subject: [PATCH 01/36] :children_crossing: Pressing enter submits login form
 (#483)

---
 src/components/FormElements/Input.vue | 2 ++
 src/views/Login.vue                   | 9 +++++----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/FormElements/Input.vue b/src/components/FormElements/Input.vue
index 42ec58afbd..c0b81b379a 100644
--- a/src/components/FormElements/Input.vue
+++ b/src/components/FormElements/Input.vue
@@ -14,6 +14,7 @@
       :name="name"
       :id="name"
       :placeholder="placeholder"
+      @keyup.enter="onEnter ? onEnter() : () => {}"
       class="input-field"
     />
     <p
@@ -35,6 +36,7 @@ export default {
     name: String, // Required unique ID value, for accessibility
     placeholder: String, // Optional placeholder value
     description: String, // Optional info paragraph
+    onEnter: Function,
     type: {
       default: 'text', // Input type, e.g. text, password, number
       type: String,
diff --git a/src/views/Login.vue b/src/views/Login.vue
index a26685ec98..2dc73e782d 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -21,15 +21,15 @@
     <!-- Main login form -->
     <form class="login-form" v-if="(!isUserAlreadyLoggedIn) && isAuthenticationEnabled">
       <h2 class="login-title">{{ $t('login.title') }}</h2>
-      <Input
+      <Input type="text"
         v-model="username"
-        type="text"
+        :onEnter="submitLogin"
         :label="$t('login.username-label')"
         class="login-field username"
       />
-      <Input
+      <Input type="password"
         v-model="password"
-        type="password"
+        :onEnter="submitLogin"
         :label="$t('login.password-label')"
         class="login-field password"
       />
@@ -38,6 +38,7 @@
         v-model="timeout"
         :selectOnTab="true"
         :options="dropDownMenu"
+        :map-keydown="(map) => ({ ...map, 13: () => this.submitLogin() })"
         class="login-time-dropdown"
       />
       <Button class="login-button" :click="submitLogin">

From 86837105cfda4ad6111044b59b93f08dd55a5f85 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Wed, 9 Feb 2022 18:27:48 +0000
Subject: [PATCH 02/36] :bug: Fix malformed YAML in export menu (#482)

---
 .../Configuration/ConfigContainer.vue           |  5 -----
 src/views/DownloadConfig.vue                    | 17 ++++++++---------
 2 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/src/components/Configuration/ConfigContainer.vue b/src/components/Configuration/ConfigContainer.vue
index c797ff90d9..f145a77312 100644
--- a/src/components/Configuration/ConfigContainer.vue
+++ b/src/components/Configuration/ConfigContainer.vue
@@ -65,7 +65,6 @@
 
 <script>
 
-import JsonToYaml from '@/utils/JsonToYaml';
 import { localStorageKeys, modalNames } from '@/utils/defaults';
 import { getUsersLanguage } from '@/utils/ConfigHelpers';
 import StoreKeys from '@/utils/StoreMutations';
@@ -88,7 +87,6 @@ export default {
   name: 'ConfigContainer',
   data() {
     return {
-      jsonParser: JsonToYaml,
       backupId: localStorage[localStorageKeys.BACKUP_ID] || '',
       appVersion: process.env.VUE_APP_VERSION,
       latestVersion: '',
@@ -101,9 +99,6 @@ export default {
     sections: function getSections() {
       return this.config.sections;
     },
-    yaml() {
-      return this.jsonParser(this.config);
-    },
   },
   components: {
     JsonEditor,
diff --git a/src/views/DownloadConfig.vue b/src/views/DownloadConfig.vue
index ef3bf58c5e..0cc689432e 100644
--- a/src/views/DownloadConfig.vue
+++ b/src/views/DownloadConfig.vue
@@ -1,9 +1,9 @@
 <template>
-  <pre><code>{{ jsonParser(config) }}</code></pre>
+  <pre><code>{{ yamlConfig }}</code></pre>
 </template>
 
 <script>
-import JsonToYaml from '@/utils/JsonToYaml';
+import JsYaml from 'js-yaml';
 
 export default {
   name: 'DownloadConfig',
@@ -11,11 +11,9 @@ export default {
     config() {
       return this.$store.state.config;
     },
-  },
-  data() {
-    return {
-      jsonParser: JsonToYaml,
-    };
+    yamlConfig() {
+      return JsYaml.dump(this.config);
+    },
   },
 };
 
@@ -23,8 +21,9 @@ export default {
 
 <style scoped lang="scss">
 pre {
-  background: var(--code-editor-background);
-  color: var(--code-editor-color);
+  margin: 0;
   padding: 1rem;
+  color: var(--code-editor-color);
+  background: var(--code-editor-background);
 }
 </style>

From 45edc9731add30789ebc1b9415da5f0fc05263fd Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Wed, 9 Feb 2022 18:30:38 +0000
Subject: [PATCH 03/36] :wastebasket: Deletes Json to Yaml script (#482)

RIP my hand written YAML parser, you served me well. Replaced with the js-yaml node package
---
 src/utils/JsonToYaml.js | 87 -----------------------------------------
 1 file changed, 87 deletions(-)
 delete mode 100644 src/utils/JsonToYaml.js

diff --git a/src/utils/JsonToYaml.js b/src/utils/JsonToYaml.js
deleted file mode 100644
index c855f5d04a..0000000000
--- a/src/utils/JsonToYaml.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import { typeOf } from 'remedial';
-
-const trimWhitespace = (input) => input.split('\n').map(x => x.trimRight()).join('\n');
-
-const throwError = (msg) => {
-  throw new Error(`Error in Json to YAML conversion: ${msg}`);
-};
-
-/* A function that converts valid JSON into valid YAML */
-const stringify = (data) => {
-  let indentLevel = '';
-  const handlers = {
-    undefined() {
-      return 'null';
-    },
-    null() {
-      return 'null';
-    },
-    number(x) {
-      return x;
-    },
-    boolean(x) {
-      return x ? 'true' : 'false';
-    },
-    string(x) {
-      return JSON.stringify(x);
-    },
-    array(x) {
-      let output = '';
-      if (x.length === 0) {
-        output += '[]';
-        return output;
-      }
-
-      indentLevel = indentLevel.replace(/$/, '  ');
-      x.forEach((y) => {
-        const handler = handlers[typeOf(y)];
-
-        if (!handler) throwError(typeOf(y));
-
-        output += `\n${indentLevel}- ${handler(y, true)}`;
-      });
-      indentLevel = indentLevel.replace(/ {2}/, '');
-
-      return output;
-    },
-    object(x, inArray, rootNode) {
-      let output = '';
-
-      if (Object.keys(x).length === 0) {
-        output += '{}';
-        return output;
-      }
-
-      if (!rootNode) {
-        indentLevel = indentLevel.replace(/$/, '  ');
-      }
-
-      Object.keys(x).forEach((k, i) => {
-        const val = x[k];
-        const handler = handlers[typeOf(val)];
-
-        if (typeof val === 'undefined') {
-          return;
-        }
-
-        if (!handler) throwError(typeOf(val));
-
-        if (!(inArray && i === 0)) {
-          output += `\n${indentLevel}`;
-        }
-
-        output += `${k}: ${handler(val)}`;
-      });
-      indentLevel = indentLevel.replace(/ {2}/, '');
-
-      return output;
-    },
-    function() {
-      return '[object Function]';
-    },
-  };
-
-  return trimWhitespace(`${handlers[typeOf(data)](data, true, true)}\n`);
-};
-
-export default stringify;

From c3b93e41649b9cd56e0f27cf59d7fa700ea45d6e Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Wed, 9 Feb 2022 20:05:56 +0000
Subject: [PATCH 04/36] :goal_net: Clearer info about any errors found in the
 config

This should make it easier for users to understand exactly where an issue is, and give clear instructions on how to fix it
---
 services/config-validator.js | 81 +++++++++++++++++++++++++-----------
 1 file changed, 57 insertions(+), 24 deletions(-)

diff --git a/services/config-validator.js b/services/config-validator.js
index b56c4d3548..48c1e82772 100644
--- a/services/config-validator.js
+++ b/services/config-validator.js
@@ -1,8 +1,11 @@
-/* eslint-disable no-console */
-/* Script that validates the conf.yml file against Dashy's schema, and outputs any issues */
-const Ajv = require('ajv');
-const yaml = require('js-yaml');
-const fs = require('fs');
+/**
+ * Checks that conf.yml is present + parsable, then validates it against the schema
+ * Prints detailed info about any errors or warnings to help the user fix the issue
+ */
+
+const fs = require('fs'); // For opening + reading files
+const yaml = require('js-yaml'); // For parsing YAML
+const Ajv = require('ajv'); // For validating with schema
 
 const schema = require('../src/utils/ConfigSchema.json');
 
@@ -17,32 +20,29 @@ const validatorOptions = {
 const ajv = new Ajv(validatorOptions);
 
 /* Message printed when validation was successful */
-const successMsg = () => '\x1b[1m\x1b[32mNo issues found, your configuration is valid :)\x1b[0m\n';
+const successMsg = () => '\x1b[1m\x1b[32m✔️ Config file is valid, no issues found\x1b[0m\n';
 
 /* Just a wrapper to system's console.log */
-const logToConsole = (msg) => { console.log(msg); };
+const logToConsole = (msg) => { console.log(msg || '\n'); }; // eslint-disable-line no-console
 
 /* Formats error message. ready for printing to the console */
 const errorMsg = (output) => {
   const warningFont = '\x1b[103m\x1b[34m';
   const line = `${warningFont}${new Array(42).fill('━').join('')}\x1b[0m`;
+  const formatParams = (params) => {
+    if (params.additionalProperty) return `(${params.additionalProperty})`;
+    return '';
+  };
   let msg = `\n${line}\n${warningFont}  Warning: ${output.length} `
     + `issue${output.length > 1 ? 's' : ''} found in config file  \x1b[0m\n${line}\n`;
   output.forEach((details, index) => {
-    msg += `${'\x1b[36m'}${index + 1}. ${details.keyword} ${details.message} `
-      + `in ${details.instancePath}\x1b[0m\n`;
+    msg += `${'\x1b[36m'}${index + 1}. \x1b[4m${details.instancePath}\x1b[0m\x1b[36m `
+      + `${details.message} ${formatParams(details.params)}\x1b[0m\n`;
   });
   return msg;
 };
 
-/* Error message printed when the file could not be opened */
-const bigError = () => {
-  const formatting = '\x1b[30m\x1b[43m';
-  const line = `${formatting}${new Array(38).fill('━').join('')}\x1b[0m\n`;
-  const msg = `${formatting} Error, unable to validate 'conf.yml' \x1b[0m\n`;
-  return `\n${line}${msg}${line}\n`;
-};
-
+/* Sets valid status as environmental variable */
 const setIsValidVariable = (isValid) => {
   process.env.VUE_APP_CONFIG_VALID = isValid;
 };
@@ -60,16 +60,49 @@ const validate = (config) => {
   }
 };
 
-try {
+/* Error message printed when the file could not be opened */
+const bigError = () => {
+  const formatting = '\x1b[30m\x1b[43m';
+  const line = `${formatting}${new Array(38).fill('━').join('')}\x1b[0m\n`;
+  const msg = `${formatting} Error, unable to validate 'conf.yml' \x1b[0m\n`;
+  return `\n${line}${msg}${line}`;
+};
+
+/* Given an error object, prints helpful info to the user */
+const printFileReadError = (e) => {
+  let customError = '';
+  if (e.mark) { // YAML syntax error
+    customError = `\x1b[33m\x1b[4m⚠️ Error on line ${e.mark.line}, column ${e.mark.column}: `
+      + `${e.reason}\x1b[0m\n\n${e.mark.snippet}\n\x1b[0m`
+      + '\n\x1b[36m ℹ️ You might find it helpful to use a YAML validator'
+      + ', like: \x1b[4mhttps://yamlchecker.com/\x1b[0m\n';
+  }
+  if (e.code === 'ENOENT') { // File not found error
+    customError = `\x1b[33m⚠️ Config file could not be found at ${e.path}\x1b[0m\n`;
+  }
+  if (e.code === 'EISDIR') { // Not a file
+    customError = '\x1b[33m⚠️ Config needs to be a file, but found a directory instead \x1b[0m\n';
+  }
+  if (e.code === 'EACCES' || e.code === 'EPERM') { // File permissions error
+    customError = '\x1b[33m⚠️ Permission denied \x1b[0m\n';
+  }
+  logToConsole(customError);
+  if (customError === '') { // Unknown error, print stack trace
+    const moreInfo = 'Ensure that your config file is present, readable, and valid YAML. '
+      + 'If this issue persists, you can get support by raising a ticket on GitHub. '
+      + 'Please include the following stack trace';
+    logToConsole(moreInfo);
+    // eslint-disable-next-line no-console
+    console.warn('\x1b[33mStack Trace for config-validator.js:\x1b[0m\n', e);
+    logToConsole();
+  }
+};
+
+try { // Try to open and parse the YAML file
   const config = yaml.load(fs.readFileSync('./public/conf.yml', 'utf8'));
   validate(config);
 } catch (e) { // Something went very wrong...
   setIsValidVariable(false);
   logToConsole(bigError());
-  logToConsole('Please ensure that your config file is present, '
-    + 'has the correct access rights and is parsable. '
-    + 'If this warning persists, it may be an issue with the '
-    + 'validator function. Please raise an issue, and include the following stack trace:\n');
-  console.warn('\x1b[33mStack Trace for config-validator.js:\x1b[0m\n', e);
-  logToConsole('\n\n');
+  printFileReadError(e);
 }

From f7c3c80b338f47fcb76628e49fff1407a1bed22c Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Thu, 10 Feb 2022 13:23:30 +0000
Subject: [PATCH 05/36] :card_file_box: Adds option for global useProxy (#486)

---
 docs/configuring.md                   | 1 +
 src/components/Widgets/WidgetBase.vue | 5 ++++-
 src/utils/ConfigSchema.json           | 6 ++++++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/docs/configuring.md b/docs/configuring.md
index 64b5028b2c..eeb6657ec2 100644
--- a/docs/configuring.md
+++ b/docs/configuring.md
@@ -99,6 +99,7 @@ Tips:
 **`enableMultiTasking`** | `boolean` | _Optional_ | If set to true, will keep apps open in the background when in the workspace view. Useful for quickly switching between multiple sites, and preserving their state, but comes at the cost of performance.
 **`workspaceLandingUrl`** | `string` | _Optional_ | The URL or an app, service or website to launch when the workspace view is opened, before another service has been launched
 **`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.
+**`widgetsAlwaysUseProxy`** | `boolean` | _Optional_ | If set to `true`, requests made by widgets will always be proxied, same as setting `useProxy: true` on each widget. Note that this may break some widgets.
 **`showSplashScreen`** | `boolean` | _Optional_ | If set to `true`, a loading screen will be shown. Defaults to `false`.
 **`enableErrorReporting`** | `boolean` | _Optional_ | Enable reporting of unexpected errors and crashes. This is off by default, and **no data will ever be captured unless you explicitly enable it**. Turning on error reporting helps previously unknown bugs get discovered and fixed. Dashy uses [Sentry](https://github.com/getsentry/sentry) for error reporting. Defaults to `false`.
 **`sentryDsn`** | `boolean` | _Optional_ | If you need to monitor errors in your instance, then you can use Sentry to collect and process bug reports. Sentry can be self-hosted, or used as SaaS, once your instance is setup, then all you need to do is pass in the DSN here, and enable error reporting. You can learn more on the [Sentry DSN Docs](https://docs.sentry.io/product/sentry-basics/dsn-explainer/). Note that this will only ever be used if `enableErrorReporting` is explicitly enabled.
diff --git a/src/components/Widgets/WidgetBase.vue b/src/components/Widgets/WidgetBase.vue
index b03967f4a0..07b246dd27 100644
--- a/src/components/Widgets/WidgetBase.vue
+++ b/src/components/Widgets/WidgetBase.vue
@@ -446,6 +446,9 @@ export default {
     errorMsg: null,
   }),
   computed: {
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
     /* Returns the widget type, shows error if not specified */
     widgetType() {
       if (!this.widget.type) {
@@ -457,7 +460,7 @@ export default {
     /* Returns users specified widget options, or empty object */
     widgetOptions() {
       const options = this.widget.options || {};
-      const useProxy = !!this.widget.useProxy;
+      const useProxy = this.appConfig.widgetsAlwaysUseProxy || !!this.widget.useProxy;
       const updateInterval = this.widget.updateInterval !== undefined
         ? this.widget.updateInterval : null;
       return { useProxy, updateInterval, ...options };
diff --git a/src/utils/ConfigSchema.json b/src/utils/ConfigSchema.json
index 7b1ca073ca..32c24759ff 100644
--- a/src/utils/ConfigSchema.json
+++ b/src/utils/ConfigSchema.json
@@ -209,6 +209,12 @@
           "default": false,
           "description": "If set to true, will keep apps opened in the workspace open in the background. Useful for switching between sites, but comes at the cost of performance"
         },
+        "widgetsAlwaysUseProxy": {
+          "title": "Widgets always use proxy",
+          "type": "boolean",
+          "default": false,
+          "description": "If set to true, the useProxy option for widgets will always be applied without having to specify it for each widget"
+        },
         "webSearch": {
           "title": "Web Search",
           "type": "object",

From 61bbfcb88564d5fa03a63286bc4fa04864717812 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 11 Feb 2022 09:27:18 +0000
Subject: [PATCH 06/36] :memo: Updes details in configuring and development
 docs

---
 docs/configuring.md        | 60 +++++++++++++++++++++-----------------
 docs/development-guides.md | 39 ++++++++++++++++---------
 2 files changed, 60 insertions(+), 39 deletions(-)

diff --git a/docs/configuring.md b/docs/configuring.md
index eeb6657ec2..c86728eb35 100644
--- a/docs/configuring.md
+++ b/docs/configuring.md
@@ -1,45 +1,53 @@
 # Configuring
 
-All app configuration is specified in [`/public/conf.yml`](https://github.com/Lissy93/dashy/blob/master/public/conf.yml) which is in [YAML Format](https://yaml.org/) format. Changes can also be made [directly through the UI](#editing-config-through-the-ui) and previewed live, from here you can also export, backup, reset, validate and download your configuration file.
+All app configuration is specified in [`/public/conf.yml`](https://github.com/Lissy93/dashy/blob/master/public/conf.yml) which is in [YAML Format](https://yaml.org/) format. If you're using Docker, this file can be passed in as a volume. Changes can either be made directly to this file, or done [through the UI](#editing-config-through-the-ui). From the UI you can also export, backup, reset, validate and download your configuration file.
+
+#### There are three ways to edit the config
+- **Directly in the YAML file** _(5/5 reliability, 3/5 usability)_
+  - Write changes directly to the conf.yml file, optionally using one of the templates provided. This can be done in your favorite editor and uploading to your server, or directly editing the file via SSH, but the easiest method would be to use [Code Server](https://github.com/coder/code-server)
+- **UI JSON Editor** _(4/5 reliability, 4/5 usability)_
+  - From the UI, under the config menu there is a JSON editor, with built-in validation, documentation and advanced options
+- **UI Visual Editor** _(3/5 reliability, 5/5 usability)_
+  - From the UI, enter the Interactive Edit Mode, then click any part of the page to edit. Changes are previewed live, and then saved to disk
+- **REST API** _(Coming soon)_
+  - Programmatically edit config either through the command line, using a script or a third-party application
+
+#### Tips
+- You may find it helpful to look at some sample config files to get you started, a collection of which can be found [here](https://gist.github.com/Lissy93/000f712a5ce98f212817d20bc16bab10)
+- You can check that your config file fits the schema, by running `yarn validate-config`
+- After modifying your config, the app needs to be recompiled, by running `yarn build`  - this happens automatically if you're using Docker
+- It is recommended to keep a backup of your config file. You can download it under Config menu, or use the [Cloud Backup](./docs/backup-restore.md) feature.
+- You can make use of YAML features, like anchors, comments, multi-line strings, etc to reuse attributes and keep your config file readable
+- All fields are optional, unless otherwise stated.
 
 The following file provides a reference of all supported configuration options.
 
----
-
 #### Contents
 
 - [**`pageInfo`**](#pageinfo) - Header text, footer, title, navigation, etc
-	- [`navLinks`](#pageinfonavlinks-optional) - Navigation bar items and links
+  - [`navLinks`](#pageinfonavlinks-optional) - Links to display in the navigation bar
 - [**`appConfig`**](#appconfig-optional) - Main application settings
-	- [`webSearch`](#appconfigwebsearch-optional) - Configure web search engine options
-	- [`hideComponents`](#appconfighidecomponents-optional) - Show/ hide page components
-	- [`auth`](#appconfigauth-optional) - Built-in authentication setup
-	  - [`users`](#appconfigauthusers-optional) - Setup for simple auth
-	  - [`keycloak`](#appconfigauthkeycloak-optional) - Auth using Keycloak
+  - [`webSearch`](#appconfigwebsearch-optional) - Configure web search engine options
+  - [`hideComponents`](#appconfighidecomponents-optional) - Show/ hide page components
+  - [`auth`](#appconfigauth-optional) - Built-in authentication setup
+    - [`users`](#appconfigauthusers-optional) - List or users (for simple auth)
+    - [`keycloak`](#appconfigauthkeycloak-optional) - Auth config for Keycloak
 - [**`sections`**](#section) - List of sections
-	- [`displayData`](#sectiondisplaydata-optional) - Section display settings
-	- [`icon`](#sectionicon-and-sectionitemicon) - Icon for a section
-	- [`items`](#sectionitem) - List of items
-		- [`icon`](#sectionicon-and-sectionitemicon) - Icon for an item
+  - [`displayData`](#sectiondisplaydata-optional) - Section display settings
+    - [`show/hideForKeycloakUsers`](#sectiondisplaydatahideforkeycloakusers-and-sectiondisplaydatashowforkeycloakusers) - Set user controls
+  - [`icon`](#sectionicon-and-sectionitemicon) - Icon for a section
+  - [`items`](#sectionitem) - List of items
+    - [`icon`](#sectionicon-and-sectionitemicon) - Icon for an item
+  - [`widgets`](#sectionwidget-optional) - List of widgets
 - [**Notes**](#notes)
   - [Editing Config through the UI](#editing-config-through-the-ui)
-	- [About YAML](#about-yaml)
-	- [Config Saving Methods](#config-saving-methods)
-	- [Preventing Changes](#preventing-changes-being-written-to-disk)
+  - [About YAML](#about-yaml)
+  - [Config Saving Methods](#config-saving-methods)
+  - [Preventing Changes](#preventing-changes-being-written-to-disk)
   - [Example](#example)
 
 ---
 
-Tips:
-- You may find it helpful to look at some sample config files to get you started, a collection of which can be found [here](https://gist.github.com/Lissy93/000f712a5ce98f212817d20bc16bab10)
-- You can check that your config file fits the schema, by running `yarn validate-config`
-- After modifying your config, the app needs to be recompiled, by running `yarn build`  - this happens automatically whilst the app is running if you're using Docker
-- It is recommended to make and keep a backup of your config file. You can download your current config through the UI either from the Config menu, or using the `/download` endpoint. Alternatively, you can use the [Cloud Backup](./docs/backup-restore.md) feature.
-- The config can also be modified directly through the UI, validated and written to the conf.yml file.
-- All fields are optional, unless otherwise stated.
-
----
-
 ### Top-Level Fields
 
 **Field** | **Type** | **Required**| **Description**
diff --git a/docs/development-guides.md b/docs/development-guides.md
index 07edd838ec..84e6763ad9 100644
--- a/docs/development-guides.md
+++ b/docs/development-guides.md
@@ -94,18 +94,34 @@ If you are not comfortable with making pull requests, or do not want to modify t
 
 # Adding a new option in the config file
 
-This section is for, if you're adding a new component or setting, that requires an additional item to be added to the users config file.
+This section is for, adding a new setting to the config file.
 
 All of the users config is specified in `./public/conf.yml` - see [Configuring Docs](./configuring.md) for info.
-Before adding a new option in the config file, first ensure that there is nothing similar available, that is is definitely necessary, it will not conflict with any other options and most importantly that it will not cause any breaking changes. Ensure that you choose an appropriate and relevant section to place it under.
+It's important to first ensure that there isn't a similar option already available, the new option is definitely necessary, and most importantly that it is fully backwards compatible.
 
-Next decide the most appropriate place for your attribute:
+Next choose the appropriate section to place it under
 - Application settings should be located under `appConfig`
 - Page info (such as text and metadata) should be under `pageInfo`
 - Data relating to specific sections should be under `section[n].displayData`
-- And for setting applied to specific items, it should be under `item[n]`
+- Settings applied to specific items or widgets, should be under `item[n]` or `widget[n]`
 
-In order for the user to be able to add your new attribute using the Config Editor, and for the build validation to pass, your attribute must be included within the [ConfigSchema](https://github.com/Lissy93/dashy/blob/master/src/utils/ConfigSchema.js). You can read about how to do this on the [ajv docs](https://ajv.js.org/json-schema.html). Give your property a type and a description, as well as any other optional fields that you feel are relevant. For example:
+For example, if your option is added under `appConfig`, you can access it within your component using the `$store`, this is typically placed in a computed property, e.g:
+
+```javascript
+computed: {
+  appConfig() {
+    return this.$store.getters.appConfig;
+  },
+  ...
+},
+```
+
+Then, where you want get the users value within your component, use something like: `this.appConfig.myProperty`. Don't forget to have a fallback or default for then the user hasn't specified it.
+
+If you have a default fallback value, then this would typically be specified in the [`defaults.js`](https://github.com/Lissy93/dashy/blob/master/src/utils/defaults.js) file.
+
+You will now need to add the definition of your new attribute into the [ConfigSchema](https://github.com/Lissy93/dashy/blob/master/src/utils/ConfigSchema.js). This will make it available in the UI config editor, and also ensure that the config validation check doesn't fail.
+For example:
 
 ```json
 "fontAwesomeKey": {
@@ -124,24 +140,21 @@ or
 }
 ```
 
-Next, if you're property should have a default value, then add it to [`defaults.js`](https://github.com/Lissy93/dashy/blob/master/src/utils/defaults.js). This ensures that nothing will break if the user does not use your property, and having all defaults together keeps things organised and easy to manage.
-
-If your property needs additional logic for fetching, setting or processing, then you can add a helper function within [`ConfigHelpers.js`](https://github.com/Lissy93/dashy/blob/master/src/utils/ConfigHelpers.js).
-
 Finally, add your new property to the [`configuring.md`](./configuring.md) API docs. Put it under the relevant section, and be sure to include field name, data type, a description and mention that it is optional.  If your new feature needs more explaining, then you can also document it under the relevant section elsewhere in the documentation.
 
 Checklist:
 - [ ] Ensure the new attribute is actually necessary, and nothing similar already exists 
 - [ ] Update the [Schema](https://github.com/Lissy93/dashy/blob/master/src/utils/ConfigSchema.js) with the parameters for your new option
-- [ ] Set a default value (if required) within [`defaults.js`](https://github.com/Lissy93/dashy/blob/master/src/utils/defaults.js)
-- [ ] Document the new value in [`configuring.md`](./configuring.md)
-- [ ] Test that the reading of the new attribute is properly handled, and will not cause any errors when it is missing or populated with an unexpected value
+- [ ] If required, set a default or fallback value (usually in [`defaults.js`](https://github.com/Lissy93/dashy/blob/master/src/utils/defaults.js))
+- [ ] Document the new value in [`configuring.md`](./configuring.md), and if required under the relevant section in the docs
+- [ ] Ensure your changes are backwards compatible, and that nothing breaks if the attribute isn't specified
 
 ---
 
 ## Updating Dependencies
 
-Running `yarn upgrade` will updated all dependencies based on the ranges specified in the `package.json`. The `yarn.lock` file will be updated, as will the contents of `./node_modules`, for more info, see the [yarn upgrade documentation](https://classic.yarnpkg.com/en/docs/cli/upgrade/). It is important to thoroughly test after any big dependency updates.
+Running `yarn upgrade` will updated all dependencies based on the ranges specified in the `package.json`. The `yarn.lock` file will be updated, as will the contents of `./node_modules`, for more info, see the [yarn upgrade documentation](https://classic.yarnpkg.com/en/docs/cli/upgrade/). [`npm-check-updates`](https://github.com/raineorshine/npm-check-updates) is a useful tool to help with this.
+It is important to thoroughly test after any big dependency updates.
 
 ---
 

From 76e5a1b77b587a3e2d36969a0ebd8b61843b2a48 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 11 Feb 2022 09:59:53 +0000
Subject: [PATCH 07/36] :zap: Adds option to prevent saving changes to disk
 (#485)

---
 src/components/Configuration/JsonEditor.vue           |  2 +-
 src/components/Configuration/RebuildApp.vue           | 11 ++++++++++-
 src/components/InteractiveEditor/EditModeSaveMenu.vue |  9 ++++++++-
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/Configuration/JsonEditor.vue b/src/components/Configuration/JsonEditor.vue
index 966288e158..62d0a2792b 100644
--- a/src/components/Configuration/JsonEditor.vue
+++ b/src/components/Configuration/JsonEditor.vue
@@ -99,7 +99,7 @@ export default {
     },
     allowWriteToDisk() {
       const { appConfig } = this.config;
-      return appConfig.allowConfigEdit !== false && isUserAdmin();
+      return !appConfig.preventWriteToDisk && appConfig.allowConfigEdit !== false && isUserAdmin();
     },
     initialSaveMode() {
       return this.allowWriteToDisk ? 'file' : 'local';
diff --git a/src/components/Configuration/RebuildApp.vue b/src/components/Configuration/RebuildApp.vue
index 7bde1fa893..e77eef5344 100644
--- a/src/components/Configuration/RebuildApp.vue
+++ b/src/components/Configuration/RebuildApp.vue
@@ -51,7 +51,9 @@ import Button from '@/components/FormElements/Button';
 import RebuildIcon from '@/assets/interface-icons/application-rebuild.svg';
 import ReloadIcon from '@/assets/interface-icons/application-reload.svg';
 import LoadingAnimation from '@/assets/interface-icons/loader.svg';
+import ErrorHandler from '@/utils/ErrorHandler';
 import { modalNames, serviceEndpoints } from '@/utils/defaults';
+import { isUserAdmin } from '@/utils/Auth';
 
 export default {
   name: 'RebuildApp',
@@ -79,6 +81,10 @@ export default {
   methods: {
     /* Calls to the rebuild endpoint, to kickoff the app build */
     startBuild() {
+      if (!this.allowRebuild) { // Double check user is allowed
+        ErrorHandler('Unable to trigger rebuild, insufficient permission');
+        return;
+      }
       const baseUrl = process.env.VUE_APP_DOMAIN || window.location.origin;
       const endpoint = `${baseUrl}${serviceEndpoints.rebuild}`;
       this.loading = true;
@@ -116,7 +122,10 @@ export default {
     },
   },
   mounted() {
-    if (this.appConfig.allowConfigEdit === false) {
+    // Disable rebuild functionality if user not allowed
+    if (this.appConfig.allowConfigEdit === false
+      || this.appConfig.preventWriteToDisk
+      || !isUserAdmin()) {
       this.allowRebuild = false;
     }
   },
diff --git a/src/components/InteractiveEditor/EditModeSaveMenu.vue b/src/components/InteractiveEditor/EditModeSaveMenu.vue
index 2cf570f4e6..7cbdbcbc06 100644
--- a/src/components/InteractiveEditor/EditModeSaveMenu.vue
+++ b/src/components/InteractiveEditor/EditModeSaveMenu.vue
@@ -110,7 +110,10 @@ export default {
     },
     allowWriteToDisk() {
       const { appConfig } = this.config;
-      return appConfig.allowConfigEdit !== false && isUserAdmin();
+      if (appConfig.preventWriteToDisk) return false;
+      if (appConfig.allowConfigEdit === false) return false;
+      if (!isUserAdmin()) return false; // If auth configured, but user NOT admin
+      return true;
     },
   },
   data() {
@@ -161,6 +164,10 @@ export default {
       this.$store.commit(StoreKeys.SET_EDIT_MODE, false);
     },
     writeToDisk() {
+      if (this.config.appConfig.preventWriteToDisk) {
+        ErrorHandler('Unable to write changed to disk, as this functionality is disabled');
+        return;
+      }
       // 1. Convert JSON into YAML
       const yamlOptions = {};
       const yaml = jsYaml.dump(this.config, yamlOptions);

From a65c3c569ec393ba0b6fd0aa24c8f7c86de38b6d Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 11 Feb 2022 10:20:45 +0000
Subject: [PATCH 08/36] :zap: Adds option to prevent saving changes locally
 (#485)

---
 src/components/Configuration/JsonEditor.vue    | 18 ++++++++++++++----
 src/components/FormElements/Button.vue         |  4 ++--
 .../InteractiveEditor/EditModeSaveMenu.vue     | 13 +++++++++++--
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/components/Configuration/JsonEditor.vue b/src/components/Configuration/JsonEditor.vue
index 62d0a2792b..1fea286d26 100644
--- a/src/components/Configuration/JsonEditor.vue
+++ b/src/components/Configuration/JsonEditor.vue
@@ -8,11 +8,11 @@
       :label="$t('config-editor.save-location-label')"
       :options="saveOptions"
       :initialOption="initialSaveMode"
-      :disabled="!allowWriteToDisk"
+      :disabled="!allowWriteToDisk || !allowSaveLocally"
       />
     <!-- Save Buttons -->
     <div :class="`btn-container ${!isValid ? 'err' : ''}`">
-      <Button :click="save">
+      <Button :click="save" :disallow="!allowWriteToDisk && !allowSaveLocally">
         {{ $t('config-editor.save-button') }}
       </Button>
       <Button :click="startPreview">
@@ -101,8 +101,14 @@ export default {
       const { appConfig } = this.config;
       return !appConfig.preventWriteToDisk && appConfig.allowConfigEdit !== false && isUserAdmin();
     },
+    allowSaveLocally() {
+      if (this.config.appConfig.preventLocalSave) return false;
+      return true;
+    },
     initialSaveMode() {
-      return this.allowWriteToDisk ? 'file' : 'local';
+      if (this.allowWriteToDisk) return 'file';
+      if (this.allowSaveLocally) return 'local';
+      return '';
     },
   },
   mounted() {
@@ -166,6 +172,10 @@ export default {
     },
     /* Saves config to local browser storage */
     saveConfigLocally() {
+      if (!this.allowSaveLocally) {
+        ErrorHandler('Unable to save changes locally, this feature has been disabled');
+        return;
+      }
       const data = this.jsonData;
       if (data.sections) {
         localStorage.setItem(localStorageKeys.CONF_SECTIONS, JSON.stringify(data.sections));
@@ -180,7 +190,7 @@ export default {
       if (data.appConfig.theme) {
         localStorage.setItem(localStorageKeys.THEME, data.appConfig.theme);
       }
-      InfoHandler('Config has succesfully been saved in browser storage', InfoKeys.RAW_EDITOR);
+      InfoHandler('Config has successfully been saved in browser storage', InfoKeys.RAW_EDITOR);
       this.showToast(this.$t('config-editor.success-msg-local'), true);
     },
     /* Clears config from browser storage, only removing relevant items  */
diff --git a/src/components/FormElements/Button.vue b/src/components/FormElements/Button.vue
index d2da7a7c37..11a4ba29c6 100644
--- a/src/components/FormElements/Button.vue
+++ b/src/components/FormElements/Button.vue
@@ -3,7 +3,7 @@
     @click="click ? click() : () => null"
     :class="disallow ? 'disallowed': ''"
     :type="type || 'button'"
-    :disabled="disabled"
+    :disabled="disabled || disallow"
     v-tooltip="hoverText"
     :title="tooltip"
   >
@@ -68,7 +68,7 @@ button {
   background: var(--background);
   border: 1px solid var(--primary);
   border-radius: var(--curve-factor);
-  &:hover:not(:disabled) {
+  &:hover:not(:disabled):not(.disallowed) {
     color: var(--background);
     background: var(--primary);
     border-color: var(--background);
diff --git a/src/components/InteractiveEditor/EditModeSaveMenu.vue b/src/components/InteractiveEditor/EditModeSaveMenu.vue
index 7cbdbcbc06..bc1ef09cda 100644
--- a/src/components/InteractiveEditor/EditModeSaveMenu.vue
+++ b/src/components/InteractiveEditor/EditModeSaveMenu.vue
@@ -17,6 +17,7 @@
       </p>
       <Button
         :click="saveLocally"
+        :disallow="!allowSaveLocally"
         v-tooltip="tooltip($t('interactive-editor.menu.save-locally-tooltip'))"
       >
         {{ $t('interactive-editor.menu.save-locally-btn') }}
@@ -24,7 +25,7 @@
       </Button>
       <Button
         :click="writeToDisk"
-        :disabled="!allowWriteToDisk"
+        :disallow="!allowWriteToDisk"
         v-tooltip="tooltip($t('interactive-editor.menu.save-disk-tooltip'))"
       >
         {{ $t('interactive-editor.menu.save-disk-btn') }}
@@ -115,6 +116,10 @@ export default {
       if (!isUserAdmin()) return false; // If auth configured, but user NOT admin
       return true;
     },
+    allowSaveLocally() {
+      if (this.config.appConfig.preventLocalSave) return false;
+      return true;
+    },
   },
   data() {
     return {
@@ -152,6 +157,10 @@ export default {
       localStorage.removeItem(localStorageKeys.CONF_SECTIONS);
     },
     saveLocally() {
+      if (!this.allowSaveLocally) {
+        ErrorHandler('Unable to save changes locally, this feature has been disabled');
+        return;
+      }
       const data = this.config;
       localStorage.setItem(localStorageKeys.CONF_SECTIONS, JSON.stringify(data.sections));
       localStorage.setItem(localStorageKeys.PAGE_INFO, JSON.stringify(data.pageInfo));
@@ -277,7 +286,7 @@ div.edit-mode-bottom-banner {
     color: var(--interactive-editor-color);
     border-color: var(--interactive-editor-color);
     background: var(--interactive-editor-background);
-    &:hover {
+    &:hover:not(.disallowed) {
       color: var(--interactive-editor-background);
       border-color: var(--interactive-editor-color);
       background: var(--interactive-editor-color);

From e8cee3bd4da98724c1661ba831084e8366ed50a6 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 11 Feb 2022 10:21:59 +0000
Subject: [PATCH 09/36] :card_file_box: Adds options to prevent config saving
 to schema + docs (#485)

---
 docs/configuring.md         |  3 ++-
 src/utils/ConfigSchema.json | 12 ++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/docs/configuring.md b/docs/configuring.md
index c86728eb35..b905c5e614 100644
--- a/docs/configuring.md
+++ b/docs/configuring.md
@@ -106,7 +106,8 @@ The following file provides a reference of all supported configuration options.
 **`routingMode`** | `string` | _Optional_ | Can be either `hash` or `history`. Determines the URL format for sub-pages, hash mode will look like `/#/home` whereas with history mode available you have nice clean URLs, like `/home`. For more info, see the [Vue docs](https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations). If you're hosting Dashy with a custom BASE_URL, you will find that a bit of extra server config is necessary to get history mode working, so here you may want to instead use `hash` mode.Defaults to `history`.
 **`enableMultiTasking`** | `boolean` | _Optional_ | If set to true, will keep apps open in the background when in the workspace view. Useful for quickly switching between multiple sites, and preserving their state, but comes at the cost of performance.
 **`workspaceLandingUrl`** | `string` | _Optional_ | The URL or an app, service or website to launch when the workspace view is opened, before another service has been launched
-**`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.
+**`preventWriteToDisk`** | `boolean` | _Optional_ | If set to `true`, users will be prevented from saving config changes to disk through the UI
+**`preventLocalSave`** | `boolean` | _Optional_ | If set to `true`, users will be prevented from applying config changes to local storage
 **`widgetsAlwaysUseProxy`** | `boolean` | _Optional_ | If set to `true`, requests made by widgets will always be proxied, same as setting `useProxy: true` on each widget. Note that this may break some widgets.
 **`showSplashScreen`** | `boolean` | _Optional_ | If set to `true`, a loading screen will be shown. Defaults to `false`.
 **`enableErrorReporting`** | `boolean` | _Optional_ | Enable reporting of unexpected errors and crashes. This is off by default, and **no data will ever be captured unless you explicitly enable it**. Turning on error reporting helps previously unknown bugs get discovered and fixed. Dashy uses [Sentry](https://github.com/getsentry/sentry) for error reporting. Defaults to `false`.
diff --git a/src/utils/ConfigSchema.json b/src/utils/ConfigSchema.json
index 32c24759ff..daa0c763ee 100644
--- a/src/utils/ConfigSchema.json
+++ b/src/utils/ConfigSchema.json
@@ -445,6 +445,18 @@
           "default": "false",
           "description": "If set to true, a loading screen will be shown"
         },
+        "preventWriteToDisk": {
+          "title": "Prevent saving config to disk",
+          "type": "boolean",
+          "default": false,
+          "description": "If set to true, no users will not be able to save config changes to disk through the UI"
+        },
+        "preventLocalSave": {
+          "title": "Prevent saving config to local storage",
+          "type": "boolean",
+          "default": false,
+          "description": "If set to true, no users will not be able to save config changes to the browser's local storage"
+        },
         "allowConfigEdit": {
           "title": "Allow Config Editing",
           "type": "boolean",

From e194d741ac0d66a4abed0fba046c08f928352da9 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 11 Feb 2022 11:17:48 +0000
Subject: [PATCH 10/36] :adhesive_bandage: Rounds numbers in gl-alerts widget
 (#454)

---
 src/components/Widgets/GlAlerts.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/Widgets/GlAlerts.vue b/src/components/Widgets/GlAlerts.vue
index ab16b14ad5..df819794d6 100644
--- a/src/components/Widgets/GlAlerts.vue
+++ b/src/components/Widgets/GlAlerts.vue
@@ -39,6 +39,7 @@ export default {
   filters: {},
   methods: {
     processData(alertData) {
+      const round = (num) => ((num && typeof num === 'number') ? Math.round(num) : num);
       if (!alertData || alertData.length === 0) {
         this.noResults = true;
       } else {
@@ -51,8 +52,9 @@ export default {
             lasted: alert[1] ? getTimeDifference(alert[0] * 1000, alert[1] * 1000) : 'Ongoing',
             severity: alert[2],
             category: alert[3],
-            value: alert[5],
-            minMax: `Min: ${alert[4]}%<br>Avg: ${alert[5]}%<br>Max: ${alert[6]}%`,
+            value: round(alert[5]),
+            minMax: `Min: ${round(alert[4])}%<br>Avg: `
+            + `${round(alert[5])}%<br>Max: ${round(alert[6])}%`,
           });
         });
         this.alerts = alerts;

From af3343e15aa3842ed24356f81c1d319dfc212534 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 12 Feb 2022 15:17:23 +0000
Subject: [PATCH 11/36] :passport_control: Adds permissions object to Store

---
 src/store.js | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/store.js b/src/store.js
index fe455e514f..fd55f68660 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,4 +1,4 @@
-/* eslint-disable no-param-reassign */
+/* eslint-disable no-param-reassign, prefer-destructuring */
 import Vue from 'vue';
 import Vuex from 'vuex';
 import Keys from '@/utils/StoreMutations';
@@ -63,6 +63,30 @@ const store = new Vuex.Store({
     visibleComponents(state, getters) {
       return componentVisibility(getters.appConfig);
     },
+    /* Make config read/ write permissions object */
+    permissions(state, getters) {
+      const appConfig = getters.appConfig;
+      const perms = {
+        allowWriteToDisk: true,
+        allowSaveLocally: true,
+        allowViewConfig: true,
+      };
+      // Disable saving changes locally, only
+      if (appConfig.preventLocalSave) {
+        perms.allowSaveLocally = false;
+      }
+      // Disable saving changes to disk, only
+      if (appConfig.preventWriteToDisk) {
+        perms.allowWriteToDisk = false;
+      }
+      // Disable everything
+      if (appConfig.disableConfiguration) {
+        perms.allowWriteToDisk = false;
+        perms.allowSaveLocally = false;
+        perms.allowViewConfig = false;
+      }
+      return perms;
+    },
     // eslint-disable-next-line arrow-body-style
     getSectionByIndex: (state, getters) => (index) => {
       return getters.sections[index];

From 69f709001f2b59cb733ba111b0d032de73934851 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 12 Feb 2022 15:18:20 +0000
Subject: [PATCH 12/36] :passport_control: Disables conf features based on
 permissions

---
 .../Configuration/ConfigContainer.vue         | 148 +++++++++++-------
 1 file changed, 91 insertions(+), 57 deletions(-)

diff --git a/src/components/Configuration/ConfigContainer.vue b/src/components/Configuration/ConfigContainer.vue
index f145a77312..a610ebe055 100644
--- a/src/components/Configuration/ConfigContainer.vue
+++ b/src/components/Configuration/ConfigContainer.vue
@@ -1,49 +1,61 @@
 <template>
-  <Tabs :navAuto="true" name="Add Item" ref="tabView">
+  <Tabs :navAuto="true" name="Add Item" ref="tabView" v-bind:class="{ hideTabs: !enableConfig }">
+    <!-- Main tab -->
     <TabItem :name="$t('config.main-tab')" class="main-tab">
       <div class="main-options-container">
         <div class="config-buttons">
           <h2>{{ $t('config.heading') }}</h2>
-          <a class="hyperlink-wrapper"  @click="openExportConfigModal()">
-            <button class="config-button center">
-              <DownloadIcon class="button-icon"/>
-              {{ $t('config.download-config-button') }}
-            </button>
-          </a>
-          <button class="config-button center" @click="() => navigateToTab(1)">
-            <EditIcon class="button-icon"/>
+          <!-- Export config button -->
+          <Button class="config-button" :disallow="!enableConfig" :click="openExportConfigModal">
+            {{ $t('config.download-config-button') }}
+            <DownloadIcon class="button-icon"/>
+          </Button>
+          <!-- Edit config button -->
+          <Button class="config-button" :disallow="!enableConfig" :click="openEditConfigTab">
             {{ $t('config.edit-config-button') }}
-          </button>
-          <button class="config-button center" @click="openLanguageSwitchModal()">
-            <LanguageIcon class="button-icon"/>
+            <EditIcon class="button-icon"/>
+          </Button>
+          <!-- Language switcher button -->
+          <Button class="config-button" :click="openLanguageSwitchModal">
             {{ $t('config.change-language-button') }}
-          </button>
-          <button class="config-button center" @click="() => navigateToTab(3)">
-            <CustomCssIcon class="button-icon"/>
+            <LanguageIcon class="button-icon"/>
+          </Button>
+          <!-- CSS / Styling button -->
+          <Button class="config-button" :disallow="!enableConfig" :click="openEditCssTab">
             {{ $t('config.edit-css-button') }}
-          </button>
-          <button class="config-button center" @click="() => navigateToTab(2)">
-            <CloudIcon class="button-icon"/>
+            <CustomCssIcon class="button-icon"/>
+          </Button>
+          <!-- Cloud sync button -->
+          <Button class="config-button" :disallow="!enableConfig" :click="openCloudSyncTab">
             {{backupId ? $t('config.edit-cloud-sync-button') : $t('config.cloud-sync-button') }}
-          </button>
-          <button class="config-button center" @click="openRebuildAppModal()">
-            <RebuildIcon class="button-icon"/>
+            <CloudIcon class="button-icon"/>
+          </Button>
+          <!-- Rebuild app button -->
+          <Button class="config-button" :disallow="!enableConfig" :click="openRebuildAppModal">
             {{ $t('config.rebuild-app-button') }}
-          </button>
-          <button class="config-button center" @click="resetLocalSettings()">
-            <DeleteIcon class="button-icon"/>
+            <RebuildIcon class="button-icon"/>
+          </Button>
+          <!-- Reset local changes button -->
+          <Button class="config-button" :click="resetLocalSettings">
             {{ $t('config.reset-settings-button') }}
-          </button>
-          <button class="config-button center" @click="openAboutModal()">
-            <IconAbout class="button-icon" />
+            <DeleteIcon class="button-icon"/>
+          </Button>
+          <!-- About modal button -->
+          <Button class="config-button" :click="openAboutModal">
             {{ $t('config.app-info-button') }}
-          </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>
+            <IconAbout class="button-icon" />
+          </Button>
+          <!-- Display app version and language -->
           <p class="language">{{ getLanguage() }}</p>
           <AppVersion />
         </div>
+        <!-- Display note if Config disabled, or if on mobile -->
+        <p v-if="!enableConfig" class="config-disabled-note">
+              Some configuration features have been disabled by your administrator
+          </p>
+          <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>
         <div class="config-note">
           <span>{{ $t('config.backup-note') }}</span>
         </div>
@@ -51,13 +63,13 @@
       <!-- Rebuild App Modal -->
       <RebuildApp />
     </TabItem>
-    <TabItem :name="$t('config.edit-config-tab')">
+    <TabItem :name="$t('config.edit-config-tab')" v-if="enableConfig">
       <JsonEditor />
     </TabItem>
-    <TabItem :name="$t('cloud-sync.title')">
+    <TabItem :name="$t('cloud-sync.title')" v-if="enableConfig">
       <CloudBackupRestore />
     </TabItem>
-    <TabItem :name="$t('config.custom-css-tab')">
+    <TabItem :name="$t('config.custom-css-tab')" v-if="enableConfig">
       <CustomCssEditor />
     </TabItem>
   </Tabs>
@@ -67,12 +79,14 @@
 
 import { localStorageKeys, modalNames } from '@/utils/defaults';
 import { getUsersLanguage } from '@/utils/ConfigHelpers';
+import ErrorHandler from '@/utils/ErrorHandler';
 import StoreKeys from '@/utils/StoreMutations';
 import JsonEditor from '@/components/Configuration/JsonEditor';
 import CustomCssEditor from '@/components/Configuration/CustomCss';
 import CloudBackupRestore from '@/components/Configuration/CloudBackupRestore';
 import RebuildApp from '@/components/Configuration/RebuildApp';
 import AppVersion from '@/components/Configuration/AppVersion';
+import Button from '@/components/FormElements/Button';
 
 import DownloadIcon from '@/assets/interface-icons/config-download-file.svg';
 import DeleteIcon from '@/assets/interface-icons/config-delete-local.svg';
@@ -99,8 +113,12 @@ export default {
     sections: function getSections() {
       return this.config.sections;
     },
+    enableConfig() {
+      return this.$store.getters.permissions.allowViewConfig;
+    },
   },
   components: {
+    Button,
     JsonEditor,
     CustomCssEditor,
     CloudBackupRestore,
@@ -122,7 +140,11 @@ export default {
       this.$refs.tabView.activeTabItem(itemToSelect);
     },
     openRebuildAppModal() {
-      this.$modal.show(modalNames.REBUILD_APP);
+      if (this.enableConfig) {
+        this.$modal.show(modalNames.REBUILD_APP);
+      } else {
+        this.unauthorized();
+      }
     },
     openAboutModal() {
       this.$modal.show(modalNames.ABOUT_APP);
@@ -131,7 +153,20 @@ export default {
       this.$modal.show(modalNames.LANG_SWITCHER);
     },
     openExportConfigModal() {
-      this.$modal.show(modalNames.EXPORT_CONFIG_MENU);
+      if (this.enableConfig) {
+        this.$modal.show(modalNames.EXPORT_CONFIG_MENU);
+      } else {
+        this.unauthorized();
+      }
+    },
+    openEditConfigTab() {
+      this.navigateToTab(1);
+    },
+    openCloudSyncTab() {
+      this.navigateToTab(2);
+    },
+    openEditCssTab() {
+      this.navigateToTab(3);
     },
     /* Checks that the user is sure, then resets site-wide local storage, and reloads page */
     resetLocalSettings() {
@@ -155,6 +190,9 @@ export default {
       if (navToTab && isValidTabIndex(navToTab)) this.navigateToTab(navToTab);
       this.$store.commit(StoreKeys.CONF_MENU_INDEX, undefined);
     },
+    unauthorized() {
+      ErrorHandler('Unauthorized Operation - Config Disabled');
+    },
   },
   mounted() {
     this.navigateToStartingTab();
@@ -175,17 +213,13 @@ pre {
 a.config-button, button.config-button {
   display: flex;
   align-items: center;
-  padding:  0.5rem 1rem;
-  margin: 0.25rem auto;
+  justify-content: flex-end;
   font-size: 1.2rem;
   background: var(--config-settings-background);
   color: var(--config-settings-color);
   border: 1px solid var(--config-settings-color);
-  border-radius: var(--curve-factor);
-  text-decoration: none;
-  cursor: pointer;
   margin: 0.5rem auto;
-  min-width: 18rem;
+  min-width: 15rem;
   width: 100%;
   svg.button-icon {
     path {
@@ -194,9 +228,8 @@ a.config-button, button.config-button {
     width: 1rem;
     height: 1rem;
     padding: 0.2rem;
-    margin-right: 0.5rem;
   }
-  &:hover {
+  &:hover:not(.disallowed) {
     background: var(--config-settings-color);
     color: var(--config-settings-background);
     svg path {
@@ -221,12 +254,6 @@ p.app-version, p.language {
 
 div.code-container {
   background: var(--config-code-background);
-  #conf-yaml span {
-    font-family: var(--font-monospace), monospace !important;
-    &.hljs-attr {
-      font-weight: bold !important;
-    }
-  }
   .yaml-action-buttons {
     position: absolute;
     top: 1.5rem;
@@ -315,6 +342,13 @@ div.code-container {
   display: none;
   @include tablet-up { display: block; }
 }
+p.config-disabled-note {
+  margin: 0.5rem auto;
+  padding: 0 0.5rem;
+  font-weight: bold;
+  color: var(--warning);
+  opacity: var(--dimming-factor);
+}
 p.small-screen-note {
     @include phone {
       display: block !important;
@@ -330,6 +364,10 @@ p.small-screen-note {
 
 <style lang="scss">
 
+.hideTabs .tab__pagination {
+  display: none !important;
+}
+
 .tabs__content {
   height: -webkit-fill-available;
   height: -moz-available;
@@ -359,6 +397,9 @@ p.small-screen-note {
         font-weight: bold !important;
         color: var(--config-settings-color) !important;
       }
+      &:hover span {
+        color: var(--config-settings-background) !important;
+      }
     }
   }
   .tab__nav__items .tab__nav__item.active {
@@ -369,11 +410,4 @@ p.small-screen-note {
   }
 }
 
-#conf-yaml {
-  background: var(--white);
-  .hljs-attr {
-    color: #9c03f5;
-  }
-}
-
 </style>

From c8ad80b79c38381f1a2ba8cb8609d9341f224b2d Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 12 Feb 2022 20:05:14 +0000
Subject: [PATCH 13/36] :passport_control: Adds access control checks in editor
 forms (#455)

---
 src/components/InteractiveEditor/EditAppConfig.vue  |  8 +++++++-
 src/components/InteractiveEditor/EditItem.vue       | 11 +++++++++--
 src/components/InteractiveEditor/EditPageInfo.vue   |  8 +++++++-
 src/components/InteractiveEditor/EditSection.vue    |  8 +++++++-
 .../InteractiveEditor/ExportConfigMenu.vue          | 13 +++++++++++--
 src/components/InteractiveEditor/MoveItemTo.vue     |  8 +++++++-
 6 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/src/components/InteractiveEditor/EditAppConfig.vue b/src/components/InteractiveEditor/EditAppConfig.vue
index 40fe430c33..74f424b79b 100644
--- a/src/components/InteractiveEditor/EditAppConfig.vue
+++ b/src/components/InteractiveEditor/EditAppConfig.vue
@@ -7,7 +7,7 @@
     classes="dashy-modal edit-app-config"
     @closed="modalClosed"
   >
-  <div class="edit-app-config-inner">
+  <div class="edit-app-config-inner" v-if="allowViewConfig">
   <h3>{{ $t('interactive-editor.menu.edit-app-config-btn') }}</h3>
   <!-- Show caution message -->
   <div class="app-config-intro">
@@ -35,6 +35,7 @@
   <!-- Save Button, lower -->
   <SaveCancelButtons :saveClick="saveToState" :cancelClick="cancelEditing" />
   </div>
+  <AccessError v-else />
   </modal>
 </template>
 
@@ -43,6 +44,7 @@ import FormSchema from '@formschema/native';
 import DashySchema from '@/utils/ConfigSchema';
 import StoreKeys from '@/utils/StoreMutations';
 import { modalNames } from '@/utils/defaults';
+import AccessError from '@/components/Configuration/AccessError';
 import SaveCancelButtons from '@/components/InteractiveEditor/SaveCancelButtons';
 
 export default {
@@ -58,6 +60,7 @@ export default {
   components: {
     FormSchema,
     SaveCancelButtons,
+    AccessError,
   },
   mounted() {
     this.formData = this.appConfig;
@@ -66,6 +69,9 @@ export default {
     appConfig() {
       return this.$store.getters.appConfig;
     },
+    allowViewConfig() {
+      return this.$store.getters.permissions.allowViewConfig;
+    },
   },
   methods: {
     /* When form submitteed, update VueX store with new appConfig, and close modal */
diff --git a/src/components/InteractiveEditor/EditItem.vue b/src/components/InteractiveEditor/EditItem.vue
index 5be3683935..2c89bf57ae 100644
--- a/src/components/InteractiveEditor/EditItem.vue
+++ b/src/components/InteractiveEditor/EditItem.vue
@@ -7,7 +7,7 @@
     classes="dashy-modal edit-item"
     @closed="modalClosed"
   >
-  <div class="edit-item-inner">
+  <div class="edit-item-inner" v-if="allowViewConfig">
     <!-- Title and Item ID -->
     <h3 class="title">Edit Item</h3>
     <p class="sub-title">Editing {{item.title}} (ID: {{itemId}})</p>
@@ -67,6 +67,7 @@
     <!-- Save to state button -->
     <SaveCancelButtons :saveClick="saveItem" :cancelClick="modalClosed" />
     </div>
+    <AccessError v-else />
   </modal>
 </template>
 
@@ -74,6 +75,7 @@
 import AddIcon from '@/assets/interface-icons/interactive-editor-add.svg';
 import BinIcon from '@/assets/interface-icons/interactive-editor-remove.svg';
 import SaveCancelButtons from '@/components/InteractiveEditor/SaveCancelButtons';
+import AccessError from '@/components/Configuration/AccessError';
 import Input from '@/components/FormElements/Input';
 import Radio from '@/components/FormElements/Radio';
 import Select from '@/components/FormElements/Select';
@@ -101,13 +103,18 @@ export default {
     isNew: Boolean,
     parentSectionTitle: String, // If adding new item, which section to add it under
   },
-  computed: {},
+  computed: {
+    allowViewConfig() {
+      return this.$store.getters.permissions.allowViewConfig;
+    },
+  },
   components: {
     Input,
     Radio,
     Select,
     AddIcon,
     BinIcon,
+    AccessError,
     SaveCancelButtons,
   },
   mounted() {
diff --git a/src/components/InteractiveEditor/EditPageInfo.vue b/src/components/InteractiveEditor/EditPageInfo.vue
index 71f978daef..1cce90a566 100644
--- a/src/components/InteractiveEditor/EditPageInfo.vue
+++ b/src/components/InteractiveEditor/EditPageInfo.vue
@@ -4,7 +4,7 @@
     :resizable="true" width="50%" height="80%"
     classes="dashy-modal edit-page-info"
   >
-  <div class="edit-page-info-inner">
+  <div class="edit-page-info-inner" v-if="allowViewConfig">
   <h3>{{ $t('interactive-editor.menu.edit-page-info-btn') }}</h3>
   <FormSchema
     :schema="schema"
@@ -19,6 +19,7 @@
     </Button>
   </FormSchema>
   </div>
+  <AccessError v-else />
   </modal>
 </template>
 
@@ -29,6 +30,7 @@ import StoreKeys from '@/utils/StoreMutations';
 import { modalNames } from '@/utils/defaults';
 import Button from '@/components/FormElements/Button';
 import SaveIcon from '@/assets/interface-icons/save-config.svg';
+import AccessError from '@/components/Configuration/AccessError';
 
 export default {
   name: 'EditPageInfo',
@@ -43,6 +45,7 @@ export default {
     FormSchema,
     Button,
     SaveIcon,
+    AccessError,
   },
   mounted() {
     this.formData = this.pageInfo;
@@ -51,6 +54,9 @@ export default {
     pageInfo() {
       return this.$store.getters.pageInfo;
     },
+    allowViewConfig() {
+      return this.$store.getters.permissions.allowViewConfig;
+    },
   },
   methods: {
     /* When form submitteed, update VueX store with new pageInfo, and close modal */
diff --git a/src/components/InteractiveEditor/EditSection.vue b/src/components/InteractiveEditor/EditSection.vue
index 7e9b263587..7222a7a7ef 100644
--- a/src/components/InteractiveEditor/EditSection.vue
+++ b/src/components/InteractiveEditor/EditSection.vue
@@ -4,7 +4,7 @@
     :resizable="true" width="50%" height="80%"
     classes="dashy-modal edit-section"
   >
-  <div class="edit-section-inner">
+  <div class="edit-section-inner" v-if="allowViewConfig">
     <h3>
       {{ $t(`interactive-editor.edit-section.${isAddNew ? 'add' : 'edit'}-section-title`) }}
     </h3>
@@ -19,6 +19,7 @@
       :cancelClick="modalClosed"
     />
     </div>
+    <AccessError v-else />
   </modal>
 </template>
 
@@ -28,6 +29,7 @@ import StoreKeys from '@/utils/StoreMutations';
 import DashySchema from '@/utils/ConfigSchema';
 import { modalNames } from '@/utils/defaults';
 import SaveCancelButtons from '@/components/InteractiveEditor/SaveCancelButtons';
+import AccessError from '@/components/Configuration/AccessError';
 
 export default {
   name: 'EditSection',
@@ -38,6 +40,7 @@ export default {
   components: {
     SaveCancelButtons,
     FormSchema,
+    AccessError,
   },
   data() {
     return {
@@ -71,6 +74,9 @@ export default {
         },
       };
     },
+    allowViewConfig() {
+      return this.$store.getters.permissions.allowViewConfig;
+    },
   },
   mounted() {
     this.sectionData = this.$store.getters.getSectionByIndex(this.sectionIndex);
diff --git a/src/components/InteractiveEditor/ExportConfigMenu.vue b/src/components/InteractiveEditor/ExportConfigMenu.vue
index 1032e8bb05..3b1bdf1021 100644
--- a/src/components/InteractiveEditor/ExportConfigMenu.vue
+++ b/src/components/InteractiveEditor/ExportConfigMenu.vue
@@ -4,10 +4,10 @@
     :resizable="true"
     width="50%"
     height="80%"
-    classes="dashy-modal edit-item"
+    classes="dashy-modal export-modal"
     @closed="modalClosed"
   >
-  <div class="export-config-inner">
+  <div class="export-config-inner" v-if="allowViewConfig">
     <!-- Download and Copy to CLipboard Buttons -->
     <h3>{{ $t('interactive-editor.export.export-title') }}</h3>
     <div class="download-button-container">
@@ -26,6 +26,7 @@
     <h3>{{ $t('interactive-editor.export.view-title') }}</h3>
     <tree-view :data="config" class="config-tree-view" />
   </div>
+  <AccessError v-else />
   </modal>
 </template>
 
@@ -34,6 +35,7 @@ import JsYaml from 'js-yaml';
 import Button from '@/components/FormElements/Button';
 import StoreKeys from '@/utils/StoreMutations';
 import { modalNames } from '@/utils/defaults';
+import AccessError from '@/components/Configuration/AccessError';
 import DownloadConfigIcon from '@/assets/interface-icons/config-download-file.svg';
 import CopyConfigIcon from '@/assets/interface-icons/interactive-editor-copy-clipboard.svg';
 import { InfoHandler, InfoKeys } from '@/utils/ErrorHandler';
@@ -42,6 +44,7 @@ export default {
   name: 'ExportConfigMenu',
   components: {
     Button,
+    AccessError,
     CopyConfigIcon,
     DownloadConfigIcon,
   },
@@ -55,6 +58,9 @@ export default {
     config() {
       return this.$store.state.config;
     },
+    allowViewConfig() {
+      return this.$store.getters.permissions.allowViewConfig;
+    },
   },
   methods: {
     convertJsonToYaml() {
@@ -123,5 +129,8 @@ export default {
     }
   }
 }
+.export-modal {
+  background: var(--interactive-editor-background);
+}
 
 </style>
diff --git a/src/components/InteractiveEditor/MoveItemTo.vue b/src/components/InteractiveEditor/MoveItemTo.vue
index 990d7d3767..4633d2a2e2 100644
--- a/src/components/InteractiveEditor/MoveItemTo.vue
+++ b/src/components/InteractiveEditor/MoveItemTo.vue
@@ -2,7 +2,7 @@
   <modal
     :name="modalName" @closed="close"
     :resizable="true" width="40%" height="40%" classes="dashy-modal">
-    <div class="move-menu-inner">
+    <div class="move-menu-inner" v-if="allowViewConfig">
     <!-- Title and item ID -->
       <h3 class="move-title">Move or Copy Item</h3>
       <p class="item-id">Editing {{ itemId }}</p>
@@ -30,6 +30,7 @@
       <!-- Save and cancel buttons -->
       <SaveCancelButtons :saveClick="save" :cancelClick="close" />
     </div>
+    <AccessError v-else />
   </modal>
 </template>
 
@@ -37,6 +38,7 @@
 import Select from '@/components/FormElements/Select';
 import Radio from '@/components/FormElements/Radio';
 import SaveCancelButtons from '@/components/InteractiveEditor/SaveCancelButtons';
+import AccessError from '@/components/Configuration/AccessError';
 import StoreKeys from '@/utils/StoreMutations';
 import { modalNames } from '@/utils/defaults';
 
@@ -45,6 +47,7 @@ export default {
   components: {
     Select,
     Radio,
+    AccessError,
     SaveCancelButtons,
   },
   props: {
@@ -83,6 +86,9 @@ export default {
       });
       return sectionName;
     },
+    allowViewConfig() {
+      return this.$store.getters.permissions.allowViewConfig;
+    },
   },
   mounted() {
     this.selectedSection = this.currentSection;

From 20f231c6325f78be2a380e758149d0bce625bcd4 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 12 Feb 2022 20:39:44 +0000
Subject: [PATCH 14/36] :passport_control: Adds warning msg, for when config
 disabled (#455)

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

diff --git a/src/components/Configuration/AccessError.vue b/src/components/Configuration/AccessError.vue
new file mode 100644
index 0000000000..4b928b3d12
--- /dev/null
+++ b/src/components/Configuration/AccessError.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="error">
+    <p>
+      Error: Configuration has been disabled on this instance.
+      Please contact your administrator for more information.
+    </p>
+  </div>
+</template>
+
+<script>
+
+import ErrorHandler from '@/utils/ErrorHandler';
+
+export default {
+  name: 'AccessError',
+  mounted() {
+    ErrorHandler('Access Error: Config has been disabled on this instance');
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.error {
+  padding: 0.5rem 1rem;
+  min-width: 20rem;
+  width: 50%;
+  margin: 2rem auto;
+  cursor: default;
+  text-align: center;
+  font-weight: bold;
+  font-size: 1.2rem;
+  color: var(--warning);
+  border-radius: var(--curve-factor);
+  border: 1px dashed var(--warning);
+  background: var(--background);
+}
+</style>

From d5f0c19fbffab785c72ac9a1ae897028defbcdfe Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 12 Feb 2022 21:23:22 +0000
Subject: [PATCH 15/36] :passport_control: Adds access control options to
 interatvie editor menu (#485)

---
 .../InteractiveEditor/EditModeSaveMenu.vue    | 38 +++++++++++--------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/components/InteractiveEditor/EditModeSaveMenu.vue b/src/components/InteractiveEditor/EditModeSaveMenu.vue
index bc1ef09cda..23c696141d 100644
--- a/src/components/InteractiveEditor/EditModeSaveMenu.vue
+++ b/src/components/InteractiveEditor/EditModeSaveMenu.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- Intro Info -->
   <div class="edit-mode-bottom-banner">
-    <div class="edit-banner-section intro-container">
+    <div class="edit-banner-section intro-container"  v-if="showEditMsg">
       <p class="section-sub-title edit-mode-intro l-1">
         {{ $t('interactive-editor.menu.edit-mode-subtitle') }}
       </p>
@@ -9,6 +9,9 @@
         {{ $t('interactive-editor.menu.edit-mode-description') }}
       </p>
     </div>
+    <div class="edit-banner-section intro-container" v-else>
+      <AccessError class="no-permission" />
+    </div>
     <div class="edit-banner-section empty-space"></div>
     <!-- Save Buttons -->
     <div class="edit-banner-section save-buttons-container">
@@ -17,7 +20,7 @@
       </p>
       <Button
         :click="saveLocally"
-        :disallow="!allowSaveLocally"
+        :disallow="!permissions.allowSaveLocally"
         v-tooltip="tooltip($t('interactive-editor.menu.save-locally-tooltip'))"
       >
         {{ $t('interactive-editor.menu.save-locally-btn') }}
@@ -25,7 +28,7 @@
       </Button>
       <Button
         :click="writeToDisk"
-        :disallow="!allowWriteToDisk"
+        :disallow="!permissions.allowWriteToDisk"
         v-tooltip="tooltip($t('interactive-editor.menu.save-disk-tooltip'))"
       >
         {{ $t('interactive-editor.menu.save-disk-btn') }}
@@ -33,6 +36,7 @@
       </Button>
       <Button
         :click="openExportConfigMenu"
+        :disallow="!permissions.allowViewConfig"
         v-tooltip="tooltip($t('interactive-editor.menu.export-config-tooltip'))"
       >
         {{ $t('interactive-editor.menu.export-config-btn') }}
@@ -53,6 +57,7 @@
       </p>
       <Button
         :click="openEditPageInfo"
+        :disallow="!permissions.allowViewConfig"
         v-tooltip="tooltip($t('interactive-editor.menu.edit-page-info-tooltip'))"
       >
         {{ $t('interactive-editor.menu.edit-page-info-btn') }}
@@ -60,6 +65,7 @@
       </Button>
       <Button
         :click="openEditAppConfig"
+        :disallow="!permissions.allowViewConfig"
         v-tooltip="tooltip($t('interactive-editor.menu.edit-app-config-tooltip'))"
       >
         {{ $t('interactive-editor.menu.edit-app-config-btn') }}
@@ -83,7 +89,7 @@ import EditPageInfo from '@/components/InteractiveEditor/EditPageInfo';
 import EditAppConfig from '@/components/InteractiveEditor/EditAppConfig';
 import { modalNames, localStorageKeys, serviceEndpoints } from '@/utils/defaults';
 import ErrorHandler, { InfoHandler } from '@/utils/ErrorHandler';
-import { isUserAdmin } from '@/utils/Auth';
+import AccessError from '@/components/Configuration/AccessError';
 
 import SaveLocallyIcon from '@/assets/interface-icons/interactive-editor-save-locally.svg';
 import SaveToDiskIcon from '@/assets/interface-icons/interactive-editor-save-disk.svg';
@@ -104,21 +110,18 @@ export default {
     AppConfigIcon,
     PageInfoIcon,
     EditAppConfig,
+    AccessError,
   },
   computed: {
     config() {
       return this.$store.state.config;
     },
-    allowWriteToDisk() {
-      const { appConfig } = this.config;
-      if (appConfig.preventWriteToDisk) return false;
-      if (appConfig.allowConfigEdit === false) return false;
-      if (!isUserAdmin()) return false; // If auth configured, but user NOT admin
-      return true;
+    permissions() {
+      // Returns: { allowWriteToDisk, allowSaveLocally, allowViewConfig }
+      return this.$store.getters.permissions;
     },
-    allowSaveLocally() {
-      if (this.config.appConfig.preventLocalSave) return false;
-      return true;
+    showEditMsg() {
+      return this.permissions.allowWriteToDisk || this.permissions.allowSaveLocally;
     },
   },
   data() {
@@ -157,7 +160,7 @@ export default {
       localStorage.removeItem(localStorageKeys.CONF_SECTIONS);
     },
     saveLocally() {
-      if (!this.allowSaveLocally) {
+      if (!this.permissions.allowSaveLocally) {
         ErrorHandler('Unable to save changes locally, this feature has been disabled');
         return;
       }
@@ -244,11 +247,16 @@ div.edit-mode-bottom-banner {
     }
     /* Intro-text container */
     &.intro-container  {
-        p.edit-mode-intro {
+      p.edit-mode-intro {
         margin: 0;
         color: var(--interactive-editor-color);
         cursor: default;
       }
+      .no-permission {
+        margin: 0;
+        width: auto;
+        padding: 0 0.5rem;
+      }
     }
     /* Button containers */
     &.edit-site-config-buttons,

From eb377d287e0147ba51b280c07546627123295af2 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 12 Feb 2022 21:23:47 +0000
Subject: [PATCH 16/36] :passport_control: Improvedd access controlls in Store
 (#485)

---
 src/store.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/store.js b/src/store.js
index fd55f68660..95ae846c4c 100644
--- a/src/store.js
+++ b/src/store.js
@@ -7,6 +7,7 @@ import { componentVisibility } from '@/utils/ConfigHelpers';
 import { applyItemId } from '@/utils/SectionHelpers';
 import filterUserSections from '@/utils/CheckSectionVisibility';
 import { InfoHandler, InfoKeys } from '@/utils/ErrorHandler';
+import { isUserAdmin } from '@/utils/Auth';
 
 Vue.use(Vuex);
 
@@ -76,7 +77,11 @@ const store = new Vuex.Store({
         perms.allowSaveLocally = false;
       }
       // Disable saving changes to disk, only
-      if (appConfig.preventWriteToDisk) {
+      if (appConfig.preventWriteToDisk || !isUserAdmin) {
+        perms.allowWriteToDisk = false;
+      }
+      // Legacy Option: Will be removed in V 2.1.0
+      if (appConfig.allowConfigEdit === false) {
         perms.allowWriteToDisk = false;
       }
       // Disable everything

From 0b07abeb18e05f3986c57ad4e2ae4ebd07e9e8a0 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 12 Feb 2022 21:24:23 +0000
Subject: [PATCH 17/36] :passport_control: Disallow save local/ disk in JSON
 editr (#485)

---
 src/components/Configuration/JsonEditor.vue | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/Configuration/JsonEditor.vue b/src/components/Configuration/JsonEditor.vue
index 1fea286d26..e8a3a54565 100644
--- a/src/components/Configuration/JsonEditor.vue
+++ b/src/components/Configuration/JsonEditor.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="json-editor-outer">
+  <div class="json-editor-outer" v-if="allowViewConfig">
     <!-- Main JSON editor -->
     <v-jsoneditor v-model="jsonData" :options="options" />
     <!-- Options raido, and save button -->
@@ -46,6 +46,7 @@
     </p>
     <p class="note">{{ $t('config.backup-note') }}</p>
   </div>
+  <AccessError v-else />
 </template>
 
 <script>
@@ -58,9 +59,9 @@ import ErrorHandler, { InfoHandler, InfoKeys } from '@/utils/ErrorHandler';
 import configSchema from '@/utils/ConfigSchema.json';
 import StoreKeys from '@/utils/StoreMutations';
 import { localStorageKeys, serviceEndpoints, modalNames } from '@/utils/defaults';
-import { isUserAdmin } from '@/utils/Auth';
 import Button from '@/components/FormElements/Button';
 import Radio from '@/components/FormElements/Radio';
+import AccessError from '@/components/Configuration/AccessError';
 
 export default {
   name: 'JsonEditor',
@@ -68,6 +69,7 @@ export default {
     VJsoneditor,
     Button,
     Radio,
+    AccessError,
   },
   data() {
     return {
@@ -97,13 +99,18 @@ export default {
     isValid() {
       return this.errorMessages.length < 1;
     },
+    permissions() {
+      // Returns: { allowWriteToDisk, allowSaveLocally, allowViewConfig }
+      return this.$store.getters.permissions;
+    },
     allowWriteToDisk() {
-      const { appConfig } = this.config;
-      return !appConfig.preventWriteToDisk && appConfig.allowConfigEdit !== false && isUserAdmin();
+      return this.permissions.allowWriteToDisk;
     },
     allowSaveLocally() {
-      if (this.config.appConfig.preventLocalSave) return false;
-      return true;
+      return this.permissions.allowSaveLocally;
+    },
+    allowViewConfig() {
+      return this.permissions.allowViewConfig;
     },
     initialSaveMode() {
       if (this.allowWriteToDisk) return 'file';
@@ -287,7 +294,7 @@ p.response-output {
 }
 
 p.no-permission-note {
-  color: var(--config-settings-color);
+  color: var(--warning);
 }
 
 .btn-container {

From 0146e996cf8a17c62d765b739ff4ce7a861d3479 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 12 Feb 2022 21:25:22 +0000
Subject: [PATCH 18/36] :passport_control: Remove edit from context menu, if no
 permissions (#455)

---
 src/components/LinkItems/ItemContextMenu.vue | 24 ++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/LinkItems/ItemContextMenu.vue b/src/components/LinkItems/ItemContextMenu.vue
index 6fc9131fcf..d3f25246f2 100644
--- a/src/components/LinkItems/ItemContextMenu.vue
+++ b/src/components/LinkItems/ItemContextMenu.vue
@@ -29,7 +29,7 @@
         </li>
       </ul>
       <!-- Edit Options -->
-      <ul class="menu-section">
+      <ul class="menu-section" v-bind:class="{ disabled: !isEditAllowed }">
         <li class="section-title">
           {{ $t('context-menus.item.options-section-title') }}
         </li>
@@ -85,6 +85,9 @@ export default {
     isEditMode() {
       return this.$store.state.editMode;
     },
+    isEditAllowed() {
+      return this.$store.getters.permissions.allowViewConfig;
+    },
   },
   methods: {
     /* Called on item click, emits an event up to Item */
@@ -93,13 +96,19 @@ export default {
       this.$emit('launchItem', target);
     },
     openSettings() {
-      this.$emit('openItemSettings');
+      if (this.isEditAllowed) {
+        this.$emit('openItemSettings');
+      }
     },
     openMoveMenu() {
-      this.$emit('openMoveItemMenu');
+      if (this.isEditAllowed) {
+        this.$emit('openMoveItemMenu');
+      }
     },
     openDeleteItem() {
-      this.$emit('openDeleteItem');
+      if (this.isEditAllowed) {
+        this.$emit('openDeleteItem');
+      }
     },
   },
 };
@@ -149,6 +158,13 @@ div.context-menu {
           path { fill: currentColor; }
       }
     }
+    &.disabled li:not(.section-title) {
+      cursor: not-allowed;
+      opacity: var(--dimming-factor);
+      &:hover {
+        background: var(--context-menu-background);
+      }
+    }
   }
 }
 

From ca9498ba4a2b5c1ed05c92af8185484507ca7c35 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 12 Feb 2022 21:26:43 +0000
Subject: [PATCH 19/36] :passport_control: Remove start edditing button, if no
 permissions (#455)

---
 src/components/Settings/ConfigLauncher.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Settings/ConfigLauncher.vue b/src/components/Settings/ConfigLauncher.vue
index 6ff4688093..775fd4bb17 100644
--- a/src/components/Settings/ConfigLauncher.vue
+++ b/src/components/Settings/ConfigLauncher.vue
@@ -7,7 +7,7 @@
         v-tooltip="tooltip($t('settings.config-launcher-tooltip'))" />
       <IconInteractiveEditor @click="startInteractiveEditor()" tabindex="-2"
         v-tooltip="tooltip(enterEditModeTooltip)"
-        :class="isEditMode ? 'disabled' : ''" />
+        :class="(isEditMode || !isEditAllowed) ? 'disabled' : ''" />
       <IconViewMode @click="openChangeViewMenu()" tabindex="-2"
         v-tooltip="tooltip($t('alternate-views.alternate-view-heading'))" />
     </div>
@@ -91,8 +91,12 @@ export default {
     isEditMode() {
       return this.$store.state.editMode;
     },
+    isEditAllowed() {
+      return this.$store.getters.permissions.allowViewConfig;
+    },
     /* Tooltip text for Edit Mode button, to change depending on it in edit mode */
     enterEditModeTooltip() {
+      if (!this.isEditAllowed) return 'Config editor not available';
       return this.$t(
         `interactive-editor.menu.${this.isEditMode
           ? 'edit-mode-subtitle' : 'start-editing-tooltip'}`,
@@ -126,7 +130,7 @@ export default {
       this.viewSwitcherOpen = false;
     },
     startInteractiveEditor() {
-      if (!this.isEditMode) {
+      if (!this.isEditMode && this.isEditAllowed) {
         this.$store.commit(Keys.SET_EDIT_MODE, true);
       }
     },

From 04082763d3178b5535e50b0fe415e56299e4742b Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 12 Feb 2022 21:28:27 +0000
Subject: [PATCH 20/36] :goal_net: Catch potential errors

---
 src/components/LinkItems/Section.vue | 4 ++++
 src/utils/SectionHelpers.js          | 3 ++-
 src/views/Home.vue                   | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/LinkItems/Section.vue b/src/components/LinkItems/Section.vue
index 56d1f067d8..f7d8ac1408 100644
--- a/src/components/LinkItems/Section.vue
+++ b/src/components/LinkItems/Section.vue
@@ -244,6 +244,10 @@ export default {
     },
     /* Navigate to the section's single-section view page */
     navigateToSection() {
+      if (!this.title) {
+        ErrorHandler('Cannot open section without a valid name');
+        return;
+      }
       const parse = (section) => section.replace(' ', '-').toLowerCase().trim();
       const sectionIdentifier = parse(this.title);
       router.push({ path: `/home/${sectionIdentifier}` });
diff --git a/src/utils/SectionHelpers.js b/src/utils/SectionHelpers.js
index 28082bfbd8..21f392d86f 100644
--- a/src/utils/SectionHelpers.js
+++ b/src/utils/SectionHelpers.js
@@ -7,7 +7,8 @@ export const shouldBeVisible = (routeName) => !hideFurnitureOn.includes(routeNam
 
 /* Based on section title, item name and index, return a string value for ID */
 const makeItemId = (sectionStr, itemStr, index) => {
-  const charSum = sectionStr.split('').map((a) => a.charCodeAt(0)).reduce((x, y) => x + y);
+  const sectionTitle = sectionStr || `unlabeledSec_${Math.random()}`;
+  const charSum = sectionTitle.split('').map((a) => a.charCodeAt(0)).reduce((x, y) => x + y);
   const newItemStr = itemStr || `unknown_${Math.random()}`;
   const itemTitleStr = newItemStr.replace(/\s+/g, '-').replace(/[^a-zA-Z ]/g, '').toLowerCase();
   return `${index}_${charSum}_${itemTitleStr}`;
diff --git a/src/views/Home.vue b/src/views/Home.vue
index e7f097db35..d42097baf9 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -149,7 +149,7 @@ export default {
       let sectionToReturn;
       const parse = (section) => section.replaceAll(' ', '-').toLowerCase().trim();
       allSections.forEach((section) => {
-        if (parse(sectionTitle) === parse(section.name)) {
+        if (parse(sectionTitle) === parse(section.name || '')) {
           sectionToReturn = [section];
         }
       });

From fd99837b78a1c3c05e789770949b22dc51d5c301 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 12 Feb 2022 21:29:08 +0000
Subject: [PATCH 21/36] :goal_net: Catch error if incorrectly configured user

---
 src/utils/Auth.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/utils/Auth.js b/src/utils/Auth.js
index fb0eab2ce8..df9f347879 100644
--- a/src/utils/Auth.js
+++ b/src/utils/Auth.js
@@ -39,6 +39,10 @@ const getUsers = () => {
  * @returns {String} The hashed token
  */
 const generateUserToken = (user) => {
+  if (!user.user || !user.hash) {
+    ErrorHandler('Invalid user object. Must have `user` and `hash` parameters');
+    return undefined;
+  }
   const strAndUpper = (input) => input.toString().toUpperCase();
   const sha = sha256(strAndUpper(user.user) + strAndUpper(user.hash));
   return strAndUpper(sha);

From 17719daae8f185e7dd7305122bc7b07bccc734c4 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 12 Feb 2022 21:29:49 +0000
Subject: [PATCH 22/36] :lipstick: Default background for modals

---
 src/styles/global-styles.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/global-styles.scss b/src/styles/global-styles.scss
index 710e78ade2..7e4ef40c65 100644
--- a/src/styles/global-styles.scss
+++ b/src/styles/global-styles.scss
@@ -31,7 +31,7 @@ html {
   box-shadow: 0 40px 70px -2px hsl(0deg 0% 0% / 60%), 1px 1px 6px var(--primary) !important;
   min-width: 350px;
   min-height: 200px;
-
+  background: var(--background-darker);
   @include phone {
     left: 0.5rem !important;
     right: 0.5rem !important;

From e83990fa29625e2c05debafe4f47a19b673462c5 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 12 Feb 2022 21:30:52 +0000
Subject: [PATCH 23/36] :memo: Adds guide on permissioning components

---
 docs/development-guides.md | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/docs/development-guides.md b/docs/development-guides.md
index 84e6763ad9..4f2256c8ec 100644
--- a/docs/development-guides.md
+++ b/docs/development-guides.md
@@ -11,6 +11,7 @@ Sections:
 - [Hiding Page Furniture](#hiding-page-furniture-on-certain-routes)
 - [Adding / Using Environmental Variables](#adding--using-environmental-variables)
 - [Building a Widget](#building-a-widget)
+- [Respecting Config Permissions](#respecting-config-permissions)
 
 ## Creating a new theme
 
@@ -443,3 +444,31 @@ Finally, add some documentation for your widget in the [Widget Docs](https://git
 
 
 **Summary**: For a complete example of everything discussed here, see: [`3da76ce`](https://github.com/Lissy93/dashy/commit/3da76ce2999f57f76a97454c0276301e39957b8e)
+
+---
+
+## Respecting Config Permissions
+
+Any screen that displays part or all of the users config, must not be shown when the user has disabled viewing config.
+
+This can be done by checking the `allowViewConfig` attribute of the `permissions` getter, in the store.
+First create a new `computed` property, like:
+```
+allowViewConfig() {
+  return this.$store.getters.permissions.allowViewConfig;
+},
+```
+
+Then wrap the part of your UI which displays config with: `v-if="allowViewConfig"`
+
+If required, add a message showing that the component isn't available, using the `AccessError` component. E.g.
+
+```
+import AccessError from '@/components/Configuration/AccessError';
+```
+
+```
+<AccessError v-else />
+```
+
+The `$store.getters.permissions` object also returns options for when and where config can be saved, using: `allowWriteToDisk`,  and `allowSaveLocally` - both are booleans.

From e2a3195fb459d450701a6b7db4645b77b555c2b5 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 12 Feb 2022 21:32:56 +0000
Subject: [PATCH 24/36] :page_facing_up: Adds link to MIT license in About
 section

---
 src/components/Configuration/AppInfoModal.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Configuration/AppInfoModal.vue b/src/components/Configuration/AppInfoModal.vue
index 7182592c98..4803d7f0e4 100644
--- a/src/components/Configuration/AppInfoModal.vue
+++ b/src/components/Configuration/AppInfoModal.vue
@@ -30,7 +30,8 @@
       <a href="https://github.com/Lissy93/dashy/blob/master/.github/SECURITY.md">Security Policy</a>
       <!-- License -->
       <h3>License</h3>
-      Licensed under MIT X11. Copyright <a href="https://aliciasykes.com">Alicia Sykes</a> © 2021.<br>
+      Licensed under <a href="https://github.com/Lissy93/dashy/blob/master/LICENSE">MIT X11</a>.
+      Copyright <a href="https://aliciasykes.com">Alicia Sykes</a> © 2021.<br>
       For licenses for third-party modules, please see <a href="https://github.com/Lissy93/dashy/blob/master/.github/LEGAL.md">Legal</a>.<br>
       For the full list of contributors and thanks, see <a href="https://github.com/Lissy93/dashy/blob/master/docs/credits.md">Credits</a>.
       <!-- App Version -->

From 40045a637c9751507b7a7ab144f3b7eba3a4a18f Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 13 Feb 2022 14:08:03 +0000
Subject: [PATCH 25/36] :memo: Adds config write permissions to docs

---
 docs/authentication.md | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/docs/authentication.md b/docs/authentication.md
index b429adea54..4d64f75304 100644
--- a/docs/authentication.md
+++ b/docs/authentication.md
@@ -74,13 +74,15 @@ For Example:
     ...
 ```
 
-### Security
-Since all authentication is happening entirely on the client-side, it is vulnerable to manipulation by an adversary. An attacker could look at the source code, find the function used generate the auth token, then decode the minified JavaScript to find the hash, and manually generate a token using it, then just insert that value as a cookie using the console, and become a logged in user. Therefore, if you need secure authentication for your app, it is strongly recommended to implement this using your web server, or use a VPN to control access to Dashy. The purpose of the login page is merely to prevent immediate unauthorized access to your homepage.
+### Permissions
+Any user who is not an admin (with `type: admin`) will not be able to write changes to disk.
+
+You can also prevent any user from writing changes to disk, using `preventWriteToDisk`. Or prevent any changes from being saved locally in browser storage, using `preventLocalSave`. Both properties can be found under [`appConfig`](./docs/configuring.md#appconfig-optional).
 
-Addressing this is on the todo list, and there are several potential solutions:
-1. Encrypt all site data against the users password, so that an attacker can not physically access any data without the correct decryption key
-2. Use a backend service to handle authentication and configuration, with no user data returned from the server until the correct credentials are provided. However, this would require either Dashy to be run using it's Node.js server, or the use of an external service
-3. ~~Implement authentication using a self-hosted identity management solution, such as [Keycloak for Vue](https://www.keycloak.org/securing-apps/vue)~~ **This is now implemented, and released in PR #174 of V 1.6.5!**
+To disable all UI config features, including View Config, set `disableConfiguration`.
+
+### Security
+With basic auth, all logic is happening on the client-side, which could mean a skilled user could manipulate the code to view parts of your configuration, including the hash. If the SHA-256 hash is of a common password, it may be possible to determine it, using a lookup table, in order to find the original password. Which can be used to manually generate the auth token, that can then be inserted into session storage, to become a valid logged in user. Therefore, you should always use a long, strong and unique password, and if you instance contains security-critical info and/ or is exposed directly to the internet, and alternative authentication method may be better. The purpose of the login page is merely to prevent immediate unauthorized access to your homepage.
 
 **[⬆️ Back to Top](#authentication)**
 

From cfe3a484059226d951301acc84d7c55fd60756c4 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 13 Feb 2022 14:09:14 +0000
Subject: [PATCH 26/36] :card_file_box: Adds disableConfiguration to schema and
 docs

---
 docs/configuring.md         | 13 ++++++++++---
 src/utils/ConfigSchema.json |  6 ++++++
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/docs/configuring.md b/docs/configuring.md
index b905c5e614..71356c3d14 100644
--- a/docs/configuring.md
+++ b/docs/configuring.md
@@ -18,6 +18,7 @@ All app configuration is specified in [`/public/conf.yml`](https://github.com/Li
 - After modifying your config, the app needs to be recompiled, by running `yarn build`  - this happens automatically if you're using Docker
 - It is recommended to keep a backup of your config file. You can download it under Config menu, or use the [Cloud Backup](./docs/backup-restore.md) feature.
 - You can make use of YAML features, like anchors, comments, multi-line strings, etc to reuse attributes and keep your config file readable
+- Once you have finished configuring your dashboard, you can choose to [disable UI config](#preventing-changes) if you wish
 - All fields are optional, unless otherwise stated.
 
 The following file provides a reference of all supported configuration options.
@@ -43,7 +44,7 @@ The following file provides a reference of all supported configuration options.
   - [Editing Config through the UI](#editing-config-through-the-ui)
   - [About YAML](#about-yaml)
   - [Config Saving Methods](#config-saving-methods)
-  - [Preventing Changes](#preventing-changes-being-written-to-disk)
+  - [Preventing Changes](#preventing-changes)
   - [Example](#example)
 
 ---
@@ -108,6 +109,7 @@ The following file provides a reference of all supported configuration options.
 **`workspaceLandingUrl`** | `string` | _Optional_ | The URL or an app, service or website to launch when the workspace view is opened, before another service has been launched
 **`preventWriteToDisk`** | `boolean` | _Optional_ | If set to `true`, users will be prevented from saving config changes to disk through the UI
 **`preventLocalSave`** | `boolean` | _Optional_ | If set to `true`, users will be prevented from applying config changes to local storage
+**`disableConfiguration`** | `boolean` | _Optional_ | If set to true, no users will be able to view or edit the config through the UI
 **`widgetsAlwaysUseProxy`** | `boolean` | _Optional_ | If set to `true`, requests made by widgets will always be proxied, same as setting `useProxy: true` on each widget. Note that this may break some widgets.
 **`showSplashScreen`** | `boolean` | _Optional_ | If set to `true`, a loading screen will be shown. Defaults to `false`.
 **`enableErrorReporting`** | `boolean` | _Optional_ | Enable reporting of unexpected errors and crashes. This is off by default, and **no data will ever be captured unless you explicitly enable it**. Turning on error reporting helps previously unknown bugs get discovered and fixed. Dashy uses [Sentry](https://github.com/getsentry/sentry) for error reporting. Defaults to `false`.
@@ -290,8 +292,13 @@ When updating the config through the JSON editor in the UI, you have two save op
 - Changes saved locally will only be applied to the current user through the browser, and will not apply to other instances - you either need to use the cloud sync feature, or manually update the conf.yml file.
 - On the other-hand, if you choose to write changes to disk, then your main `conf.yml` file will be updated, and changes will be applied to all users, and visible across all devices. For this functionality to work, you must be running Dashy with using the Docker container, or the Node server.  A backup of your current configuration will also be saved in the same directory. 
 
-### Preventing Changes being Written to Disk
-To disallow any changes from being written to disk via the UI config editor, set `appConfig.allowConfigEdit: false`. If you are using users, and have setup `auth` within Dashy, then only users with `type: admin` will be able to write config changes to disk.
+### Preventing Changes
+
+If you have authentication set up, then any user who is not an admin (with `type: admin`) will not be able to write changes to disk.
+
+You can also prevent changes fro any user being written to disk, using `preventWriteToDisk`. Or prevent any changes from being saved locally in browser storage, using `preventLocalSave`.
+
+To disable all UI config features, set `disableConfiguration`.
 
 ### Example
 
diff --git a/src/utils/ConfigSchema.json b/src/utils/ConfigSchema.json
index daa0c763ee..dab1e4542e 100644
--- a/src/utils/ConfigSchema.json
+++ b/src/utils/ConfigSchema.json
@@ -457,6 +457,12 @@
           "default": false,
           "description": "If set to true, no users will not be able to save config changes to the browser's local storage"
         },
+        "disableConfiguration": {
+          "title": "Disable all UI Config",
+          "type": "boolean",
+          "default": false,
+          "description": "If set to true, no users will be able to view or edit the config through the UI"
+        },
         "allowConfigEdit": {
           "title": "Allow Config Editing",
           "type": "boolean",

From c1607cb19bba3ffabcab8b3d8624221b063825d9 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 13 Feb 2022 14:10:23 +0000
Subject: [PATCH 27/36] :passport_control: Prevent download config when (#455)

---
 src/views/DownloadConfig.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/views/DownloadConfig.vue b/src/views/DownloadConfig.vue
index 0cc689432e..e056daa092 100644
--- a/src/views/DownloadConfig.vue
+++ b/src/views/DownloadConfig.vue
@@ -1,12 +1,17 @@
 <template>
-  <pre><code>{{ yamlConfig }}</code></pre>
+  <pre v-if="allowViewConfig"><code>{{ yamlConfig }}</code></pre>
+  <AccessError v-else />
 </template>
 
 <script>
 import JsYaml from 'js-yaml';
+import AccessError from '@/components/Configuration/AccessError';
 
 export default {
   name: 'DownloadConfig',
+  components: {
+    AccessError,
+  },
   computed: {
     config() {
       return this.$store.state.config;
@@ -14,6 +19,9 @@ export default {
     yamlConfig() {
       return JsYaml.dump(this.config);
     },
+    allowViewConfig() {
+      return this.$store.getters.permissions.allowViewConfig;
+    },
   },
 };
 

From 20b7a6b062b8f385e22e6e4c99b1da59fbefed12 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 13 Feb 2022 15:14:11 +0000
Subject: [PATCH 28/36] :necktie: Adds function to convery farenheight to
 celcius

---
 src/utils/MiscHelpers.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/utils/MiscHelpers.js b/src/utils/MiscHelpers.js
index fd34ada921..cc26403e4b 100644
--- a/src/utils/MiscHelpers.js
+++ b/src/utils/MiscHelpers.js
@@ -145,6 +145,11 @@ export const getValueFromCss = (colorVar) => {
   return cssProps.getPropertyValue(`--${colorVar}`).trim();
 };
 
+/* Given a temperature in Fahrenheit, returns value in Celsius */
+export const fahrenheitToCelsius = (fahrenheit) => {
+  return Math.round(((fahrenheit - 32) * 5) / 9);
+};
+
 /* Given a currency code, return the corresponding unicode symbol */
 export const findCurrencySymbol = (currencyCode) => {
   const code = currencyCode.toUpperCase().trim();

From 1626b94285d3f96747a0bb281c87c1c8aca707cf Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 13 Feb 2022 15:15:04 +0000
Subject: [PATCH 29/36] :bar_chart: Adds widget to display CPU temps (#452)

---
 docs/widgets.md                       | 22 ++++++-
 src/components/Widgets/GlCpuTemp.vue  | 83 +++++++++++++++++++++++++++
 src/components/Widgets/WidgetBase.vue |  8 +++
 3 files changed, 112 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Widgets/GlCpuTemp.vue

diff --git a/docs/widgets.md b/docs/widgets.md
index 131f70756a..dc789c250e 100644
--- a/docs/widgets.md
+++ b/docs/widgets.md
@@ -57,6 +57,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
   - [Network Traffic](#network-traffic)
   - [Resource Usage Alerts](#resource-usage-alerts)
   - [Public & Private IP](#ip-address)
+  - [CPU Temperature](#cpu-temp)
 - **[Dynamic Widgets](#dynamic-widgets)**
   - [Iframe Widget](#iframe-widget)
   - [HTML Embed Widget](#html-embedded-widget)
@@ -1488,6 +1489,25 @@ Shows public and private IP address. Note that the ip plugin is not available on
 
 ---
 
+### CPU Temp
+
+Displays temperature data from system CPUs.
+
+Note: This widget uses the [`sensors`](https://github.com/nicolargo/glances/blob/develop/glances/plugins/glances_sensors.py) plugin, which is disabled by default, and may cause [performance issues](https://github.com/nicolargo/glances/issues/1664#issuecomment-632063558).
+You'll need to enable the sensors plugin to use this widget, using: `--enable-plugin sensors` when you start Glances.
+
+<p align="center"><img width="400" src="https://i.ibb.co/xSs4Gqd/gl-cpu-temp.png" /></p>
+
+##### Example 
+
+```yaml
+- type: gl-cpu-temp
+  options:
+    hostname: http://192.168.130.2:61208
+```
+
+---
+
 ## Dynamic Widgets
 
 ### Iframe Widget
@@ -1786,4 +1806,4 @@ For testing purposes, you can use an addon, which will disable the CORS checks.
 
 ### Raising an Issue
 
-If you need to submit a bug report for a failing widget, then please include the full console output (see [how](/docs/troubleshooting.md#how-to-open-browser-console)) as well as the relevant parts of your config file. Before sending the request, ensure you've read the docs. If you're new to GitHub, an haven't previously contributed to the project, then please fist star the repo to avoid your ticket being closed by the anti-spam bot.
\ No newline at end of file
+If you need to submit a bug report for a failing widget, then please include the full console output (see [how](/docs/troubleshooting.md#how-to-open-browser-console)) as well as the relevant parts of your config file. Before sending the request, ensure you've read the docs. If you're new to GitHub, an haven't previously contributed to the project, then please fist star the repo to avoid your ticket being closed by the anti-spam bot.
diff --git a/src/components/Widgets/GlCpuTemp.vue b/src/components/Widgets/GlCpuTemp.vue
new file mode 100644
index 0000000000..af915080af
--- /dev/null
+++ b/src/components/Widgets/GlCpuTemp.vue
@@ -0,0 +1,83 @@
+<template>
+<div class="glances-temp-wrapper" v-if="tempData">
+  <div class="temp-row" v-for="sensor in tempData" :key="sensor.label">
+    <p class="label">{{ sensor.label | formatLbl }}</p>
+    <p :class="`temp range-${sensor.color}`">{{ sensor.value | formatVal }}</p>
+  </div>
+</div>
+</template>
+
+<script>
+import WidgetMixin from '@/mixins/WidgetMixin';
+import GlancesMixin from '@/mixins/GlancesMixin';
+import { capitalize, fahrenheitToCelsius } from '@/utils/MiscHelpers';
+
+export default {
+  mixins: [WidgetMixin, GlancesMixin],
+  data() {
+    return {
+      tempData: null,
+      noResults: false,
+    };
+  },
+  computed: {
+    endpoint() {
+      return this.makeGlancesUrl('sensors');
+    },
+  },
+  filters: {
+    formatLbl(lbl) {
+      return capitalize(lbl);
+    },
+    formatVal(val) {
+      return `${Math.round(val)}°C`;
+    },
+  },
+  methods: {
+    getTempColor(temp) {
+      if (temp <= 50) return 'green';
+      if (temp > 50 && temp < 75) return 'yellow';
+      if (temp >= 75) return 'red';
+      return 'grey';
+    },
+    processData(sensorData) {
+      const results = [];
+      sensorData.forEach((sensor) => {
+        const tempC = sensor.unit === 'F' ? fahrenheitToCelsius(sensor.value) : sensor.value;
+        results.push({
+          label: sensor.label,
+          value: tempC,
+          color: this.getTempColor(tempC),
+        });
+      });
+      this.tempData = results;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.glances-temp-wrapper {
+  .temp-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    p.label {
+      margin: 0.5rem 0;
+      color: var(--widget-text-color);
+    }
+    p.temp {
+      margin: 0.5rem 0;
+      font-size: 1.5rem;
+      font-weight: bold;
+      &.range-green { color: var(--success); }
+      &.range-yellow { color: var(--warning); }
+      &.range-red { color: var(--danger); }
+      &.range-grey { color: var(--medium-grey); }
+    }
+    &:not(:last-child) {
+      border-bottom: 1px dashed var(--widget-text-color);
+    }
+  }
+}
+</style>
diff --git a/src/components/Widgets/WidgetBase.vue b/src/components/Widgets/WidgetBase.vue
index 07b246dd27..ffd1d737ae 100644
--- a/src/components/Widgets/WidgetBase.vue
+++ b/src/components/Widgets/WidgetBase.vue
@@ -209,6 +209,13 @@
         @error="handleError"
         :ref="widgetRef"
       />
+      <GlCpuTemp
+        v-else-if="widgetType === 'gl-cpu-temp'"
+        :options="widgetOptions"
+        @loading="setLoaderState"
+        @error="handleError"
+        :ref="widgetRef"
+      />
       <HealthChecks
         v-else-if="widgetType === 'health-checks'"
         :options="widgetOptions"
@@ -413,6 +420,7 @@ export default {
     GlNetworkInterfaces: () => import('@/components/Widgets/GlNetworkInterfaces.vue'),
     GlNetworkTraffic: () => import('@/components/Widgets/GlNetworkTraffic.vue'),
     GlSystemLoad: () => import('@/components/Widgets/GlSystemLoad.vue'),
+    GlCpuTemp: () => import('@/components/Widgets/GlCpuTemp.vue'),
     HealthChecks: () => import('@/components/Widgets/HealthChecks.vue'),
     IframeWidget: () => import('@/components/Widgets/IframeWidget.vue'),
     Jokes: () => import('@/components/Widgets/Jokes.vue'),

From 2bf821784dd1f6fbd44d4a044e282c9bb5bc09fd Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 13 Feb 2022 16:59:06 +0000
Subject: [PATCH 30/36] :memo: Adds Kubernetes Keycloak ingress rules into
 troubleshooting (#479)

---
 docs/troubleshooting.md | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/docs/troubleshooting.md b/docs/troubleshooting.md
index 6b07cb6203..c60cc4dc72 100644
--- a/docs/troubleshooting.md
+++ b/docs/troubleshooting.md
@@ -22,6 +22,7 @@
 - [Status Checks Failing](#status-checks-failing)
 - [Diagnosing Widget Errors](#widget-errors)
 - [Fixing Widget CORS Errors](#widget-cors-errors)
+- [Keycloak Redirect Error](#keycloak-redirect-error)
 - [How-To Open Browser Console](#how-to-open-browser-console)
 - [Git Contributions not Displaying](#git-contributions-not-displaying)
 
@@ -273,6 +274,25 @@ For testing purposes, you can use an addon, which will disable the CORS checks.
 
 ---
 
+## Keycloak Redirect Error
+
+Firstly, ensure that in your Keycloak instance you have populated the Valid Redirect URIs field ([screenshot](https://user-images.githubusercontent.com/1862727/148599768-db4ee4f8-72c5-402d-8f00-051d999e6267.png)) with the URL to your Dashy instance.
+
+You may need to specify CORS headers on your Keycloak instance, to allow requests coming from Dashy, e.g:
+
+```
+Access-Control-Allow-Origin: https://dashy.example.com
+```
+
+If you're running in Kubernetes, you will need to enable CORS ingress rules, see [docs](https://kubernetes.github.io/ingress-nginx/user-guide/nginx-configuration/annotations/#enable-cors), e.g:
+
+```
+nginx.ingress.kubernetes.io/cors-allow-origin: "https://dashy.example.com"
+nginx.ingress.kubernetes.io/enable-cors: "true"
+```
+
+---
+
 ## How-To Open Browser Console
 When raising a bug, one crucial piece of info needed is the browser's console output. This will help the developer diagnose and fix the issue.
 

From 8dd392ff8b0c037d400cad64949208ca4f9889d7 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 13 Feb 2022 18:34:43 +0000
Subject: [PATCH 31/36] :whale: Adds (shorter) readme file for DockerHub

---
 docker/docker-readme.md | 136 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 136 insertions(+)
 create mode 100644 docker/docker-readme.md

diff --git a/docker/docker-readme.md b/docker/docker-readme.md
new file mode 100644
index 0000000000..cab89e3070
--- /dev/null
+++ b/docker/docker-readme.md
@@ -0,0 +1,136 @@
+<h1 align="center">Dashy</h1>
+<p align="center">
+  <i>Dashy helps you organize your self-hosted services by making them accessible from a single place</i>
+   <br/>
+  <img width="120" src="https://i.ibb.co/yhbt6CY/dashy.png" />
+  <br/>
+  <b><a href="https://github.com/Lissy93/dashy/blob/master/docs/showcase.md">User Showcase</a></b> | <b><a href="https://demo.dashy.to">Live Demo</a></b> | <b><a href="https://github.com/Lissy93/dashy/blob/master/docs/quick-start.md">Getting Started</a></b> | <b><a href="https://dashy.to/docs">Documentation</a></b> | <b><a href="https://github.com/Lissy93/dashy">GitHub</a></b>
+  <br/><br/>
+  <a href="https://github.com/awesome-selfhosted/awesome-selfhosted#personal-dashboards">
+    <img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Awesome Self-Hosted">
+  </a>
+  <a href="https://github.com/Lissy93/dashy/blob/master/LICENSE">
+    <img src="https://img.shields.io/badge/License-MIT-0aa8d2?logo=opensourceinitiative&logoColor=fff" alt="License MIT">
+  </a>
+  <a href="https://github.com/Lissy93/dashy/blob/master/.github/CHANGELOG.md">
+    <img src="https://img.shields.io/github/package-json/v/lissy93/dashy?logo=azurepipelines&amp;color=0aa8d2" alt="Current Version">
+  </a>
+  <a href="https://hub.docker.com/r/lissy93/dashy">
+    <img src="https://img.shields.io/docker/pulls/lissy93/dashy?logo=docker&color=0aa8d2&logoColor=fff" alt="Docker Pulls">
+  </a>
+  <a href="http://as93.link/dashy-build-status">
+   <img src="https://badgen.net/github/status/lissy93/dashy?icon=github" alt="GitHub Status">
+  </a>
+  <a href="https://snyk.io/test/github/lissy93/dashy">
+    <img src="https://snyk.io/test/github/lissy93/dashy/badge.svg" alt="Known Vulnerabilities">
+  </a>
+</p>
+
+## Features 🌈
+
+- 🔎 Instant search by name, domain, or tags + customizable hotkeys & keyboard shortcuts
+- 🎨 Multiple built-in color themes, with UI color editor and support for custom CSS
+- 🧸 Many icon options - Font-Awesome, homelab icons, auto-fetching Favicon, images, emojis, etc.
+- 🚦 Status monitoring for each of your apps/links for basic availability and uptime checking
+- 📊 Widgets for displaying info and dynamic content from your self-hosted services
+- 💂 Optional authentication with multi-user access, configurable privileges, and SSO support
+- 🌎 Multi-language support, with 10+ human-translated languages, and more on the way
+- ☁ Optional, encrypted, free off-site cloud backup and restore feature available
+- 💼 A workspace view, for easily switching between multiple apps simultaneously
+- 🛩️ A minimal view, for use as a fast-loading browser Startpage
+- 🖱️ Choose app launch method, either new tab, same tab, a pop-up modal, or in the workspace view
+- 📏 Customizable layout, sizes, text, component visibility, sort order, behavior, etc.
+- 🖼️ Options for a full-screen background image, custom nav-bar links, HTML footer, title, etc.
+- 🚀 Easy to setup with Docker, or on bare metal, or with 1-Click cloud deployment
+- ⚙️ Easy configuration, either through the UI, or using a YAML file
+- ✨ Under active development with improvements and new features added regularly 
+- 🤏 Small bundle size, fully responsive UI, and PWA for basic offline access
+- 🆓 100% free and open-source
+- 🔐 Strong focus on privacy
+- 🌈 And loads more...
+
+## Demo ⚡
+
+**Live Instances**: [Demo 1](https://demo.dashy.to) (Live Demo) ┆ [Demo 2](https://live.dashy.to) (Dashy Links) ┆ [Demo 3](https://dev.dashy.to) (Dev Preview)
+
+**Screenshots**: Checkout the [Showcase](https://github.com/Lissy93/dashy/blob/master/docs/showcase.md), to see example dashboards from the community
+
+**Spin up your own demo**: [![One-Click Deploy with PWD](https://img.shields.io/badge/Play--with--Docker-Deploy-2496ed?style=flat-square&logo=docker)](https://labs.play-with-docker.com/?stack=https://raw.githubusercontent.com/Lissy93/dashy/master/docker-compose.yml) or [`docker run -p 8080:80 lissy93/dashy`](./docs/quick-start.md)
+
+
+<p align="center">
+  <img width="800" src="https://i.ibb.co/L8YbNNc/dashy-demo2.gif" alt="Demo" />
+</p>
+
+
+**[⬆️ Back to Top](#dashy)**
+
+---
+
+## Getting Started 🛫
+
+To deploy Dashy with Docker, just run `docker run -p 8080:80 lissy93/dashy`, then open `http://localhost:8080`
+
+For full list of options and a Docker compose file, see the [Deployment Docs](https://github.com/Lissy93/dashy/blob/master/docs/deployment.md).
+
+Dashy can also be run on bare metal using Node.js, or deployed to a cloud service, using the 1-Click deploy script.
+
+---
+
+## Documentation 📝
+
+#### Running Dashy
+- **[Quick Start](https://github.com/Lissy93/dashy/blob/master/docs/quick-start.md)** - TDLR guide on getting Dashy up and running
+- **[Deployment](https://github.com/Lissy93/dashy/blob/master/docs/deployment.md)** - Full guide on deploying Dashy either locally or online
+- **[Configuring](https://github.com/Lissy93/dashy/blob/master/docs/configuring.md)** - Complete list of all available options in the config file
+- **[App Management](https://github.com/Lissy93/dashy/blob/master/docs/management.md)** - Managing your app, updating, security, web server configuration, etc
+- **[Troubleshooting](https://github.com/Lissy93/dashy/blob/master/docs/troubleshooting.md)** - Common errors and problems, and how to fix them
+
+#### Feature Docs
+- **[Authentication](https://github.com/Lissy93/dashy/blob/master/docs/authentication.md)** - Guide to setting up authentication to protect your dashboard
+- **[Alternate Views](https://github.com/Lissy93/dashy/blob/master/docs/alternate-views.md)** - Outline of available pages / views and item opening methods
+- **[Backup & Restore](https://github.com/Lissy93/dashy/blob/master/docs/backup-restore.md)** - Guide to backing up config with Dashy's cloud sync feature
+- **[Icons](https://github.com/Lissy93/dashy/blob/master/docs/icons.md)** - Outline of all available icon types for sections and items, with examples
+- **[Language Switching](https://github.com/Lissy93/dashy/blob/master/docs/multi-language-support.md)** - Details on how to switch language, or add a new locale
+- **[Status Indicators](https://github.com/Lissy93/dashy/blob/master/docs/status-indicators.md)** - Using Dashy to monitor uptime and status of your apps
+- **[Searching  & Shortcuts](https://github.com/Lissy93/dashy/blob/master/docs/searching.md)** - Searching, launching methods + keyboard shortcuts
+- **[Theming](https://github.com/Lissy93/dashy/blob/master/docs/theming.md)** - Complete guide to applying, writing and modifying themes + styles
+- **[Widgets](https://github.com/Lissy93/dashy/blob/master/docs/widgets.md)** - List of all dynamic content widgets, with usage guides and examples
+
+#### Development and Contributing 
+- **[Developing](https://github.com/Lissy93/dashy/blob/master/docs/developing.md)** - Running Dashy development server locally, and general workflow
+- **[Development Guides](https://github.com/Lissy93/dashy/blob/master/docs/development-guides.md)** - Common development tasks, to help new contributors
+- **[Contributing](https://github.com/Lissy93/dashy/blob/master/docs/contributing.md)** - How you can help keep Dashy alive
+- **[Showcase](https://github.com/Lissy93/dashy/blob/master/docs/showcase.md)** - See how others are using Dashy, and share your dashboard
+- **[Credits](https://github.com/Lissy93/dashy/blob/master/docs/credits.md)** - List of people and projects that have made Dashy possible
+- **[Release Workflow](https://github.com/Lissy93/dashy/blob/master/docs/release-workflow.md)** - Info about releases, CI and automated tasks
+
+---
+
+## License 📜
+
+Dashy is Licensed under [MIT X11](https://en.wikipedia.org/wiki/MIT_License)
+
+```
+Copyright © 2021 Alicia Sykes <https://aliciasykes.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this
+software and associated documentation files (the "Software"), to deal in the Software
+without restriction, including without limitation the rights to use, copy, modify, merge,
+publish, distribute, sublicense, and/or sell copies of the Software, and to permit
+persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or
+substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
+PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES, OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF, OR IN CONNECTION WITH THE SOFTWARE OR THE USE
+OR OTHER DEALINGS IN THE SOFTWARE.
+
+Except as contained in this notice, Dashy shall not be used in advertising or otherwise
+to promote the sale, use, or other dealings in this Software without prior written
+authorization from the repo owner.
+```

From c9283fc3be2626efd4b4fe0c7e675a554bc3fec1 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 13 Feb 2022 19:01:40 +0000
Subject: [PATCH 32/36] :memo: Adds example of embedding an image (#487)

---
 docs/widgets.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/docs/widgets.md b/docs/widgets.md
index dc789c250e..475c494a2a 100644
--- a/docs/widgets.md
+++ b/docs/widgets.md
@@ -1576,6 +1576,14 @@ Or
       scriptSrc: 'https://files.coinmarketcap.com/static/widget/currency.js'
 ```
 
+You can also use this widget to display an image, wither locally or from a remote origin.
+
+```yaml
+- type: embed
+  options:
+    html: '<img src="https://dashy.lan/item-icons/my-image.png" />'
+```
+
 ---
 
 ### API Response

From 7b6815a3188628bb1cf1a9f34a43632ec6be8155 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 13 Feb 2022 23:24:16 +0000
Subject: [PATCH 33/36] :sparkles: Adds a static image widget (#487)

---
 docs/widgets.md                        | 36 ++++++++++++++++++++++++++
 src/components/Widgets/ImageWidget.vue | 28 ++++++++++++++++++++
 src/components/Widgets/WidgetBase.vue  |  8 ++++++
 3 files changed, 72 insertions(+)
 create mode 100644 src/components/Widgets/ImageWidget.vue

diff --git a/docs/widgets.md b/docs/widgets.md
index 475c494a2a..1059d7ad77 100644
--- a/docs/widgets.md
+++ b/docs/widgets.md
@@ -12,6 +12,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
   - [Weather](#weather)
   - [Weather Forecast](#weather-forecast)
   - [RSS Feed](#rss-feed)
+  - [Image](#image)
   - [Public IP Address](#public-ip)
   - [Crypto Watch List](#crypto-watch-list)
   - [Crypto Price History](#crypto-token-price-history)
@@ -210,6 +211,41 @@ Display news and updates from any RSS-enabled service.
 
 ---
 
+### Image
+
+Displays an image.
+
+This may be useful if you have a service (such as Grafana - [see example](https://mattionline.de/grafana-api-export-graph-as-png/)), which periodically exports charts or other data as an image.
+
+You can also store images within Dashy's public directory (using a Docker volume), and reference them directly. E.g. `-v ./path/to/my-homelab-logo.png:/app/public/logo.png`, then in the widget `imagePath: /logo.png`.
+
+Similarly, any web service that serves up widgets as image can be used. E.g. you could show current star chart for a GitHub repo, with: `imagePath: https://starchart.cc/Lissy93/dashy.svg`.
+
+If you'd like to embed a live screenshot, of all or just part of a website, then this can be done using [API Flash](https://apiflash.com/).
+
+Or what about showing a photo of the day? Try `https://source.unsplash.com/random/400x300` or `https://picsum.photos/400/300`
+
+<p align="center"><img width="300" src="https://i.ibb.co/P48Y443/image-widget.png" /></p>
+
+##### Options
+
+**Field** | **Type** | **Required** | **Description**
+--- | --- | --- | ---
+**`imagePath`** | `string` |  Required | The path (local or remote) of the image to display
+
+##### Example 
+
+```yaml
+- type: image
+  options:
+    imagePath: https://i.ibb.co/yhbt6CY/dashy.png
+```
+
+##### Info
+Unless image fetched from remote source, no external data request is made.
+
+---
+
 ### Public IP
 
 Often find yourself searching "What's my IP", just so you can check your VPN is still connected? This widget displays your public IP address, along with ISP name and approx location. Data can be fetched from either [IpApi.co](https://ipapi.co/), [IP-API.com](https://ip-api.com/) or [IpGeolocation.io](https://ipgeolocation.io/).
diff --git a/src/components/Widgets/ImageWidget.vue b/src/components/Widgets/ImageWidget.vue
new file mode 100644
index 0000000000..a556810f08
--- /dev/null
+++ b/src/components/Widgets/ImageWidget.vue
@@ -0,0 +1,28 @@
+<template>
+<div class="image-widget">
+  <img :src="imagePath" class="embedded-image" />
+</div>
+</template>
+
+<script>
+import WidgetMixin from '@/mixins/WidgetMixin';
+
+export default {
+  mixins: [WidgetMixin],
+  computed: {
+    imagePath() {
+      if (!this.options.imagePath) this.error('You must specify an imagePath');
+      return this.options.imagePath;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.image-widget {
+  img.embedded-image {
+    max-width: 100%;
+    margin: 0.2rem auto;
+  }
+}
+</style>
diff --git a/src/components/Widgets/WidgetBase.vue b/src/components/Widgets/WidgetBase.vue
index ffd1d737ae..63b13be52d 100644
--- a/src/components/Widgets/WidgetBase.vue
+++ b/src/components/Widgets/WidgetBase.vue
@@ -230,6 +230,13 @@
         @error="handleError"
         :ref="widgetRef"
       />
+      <ImageWidget
+        v-else-if="widgetType === 'image'"
+        :options="widgetOptions"
+        @loading="setLoaderState"
+        @error="handleError"
+        :ref="widgetRef"
+      />
       <Jokes
         v-else-if="widgetType === 'joke'"
         :options="widgetOptions"
@@ -423,6 +430,7 @@ export default {
     GlCpuTemp: () => import('@/components/Widgets/GlCpuTemp.vue'),
     HealthChecks: () => import('@/components/Widgets/HealthChecks.vue'),
     IframeWidget: () => import('@/components/Widgets/IframeWidget.vue'),
+    ImageWidget: () => import('@/components/Widgets/ImageWidget.vue'),
     Jokes: () => import('@/components/Widgets/Jokes.vue'),
     NdCpuHistory: () => import('@/components/Widgets/NdCpuHistory.vue'),
     NdLoadHistory: () => import('@/components/Widgets/NdLoadHistory.vue'),

From 94e61900533d5e6fd4760c11c0bafd893773976a Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 13 Feb 2022 23:26:27 +0000
Subject: [PATCH 34/36] :whale: Updates Docker build action, to set DockerHub
 readme

---
 .github/workflows/docker-build-publish.yml | 23 ++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/.github/workflows/docker-build-publish.yml b/.github/workflows/docker-build-publish.yml
index 076f26213b..e35048c646 100644
--- a/.github/workflows/docker-build-publish.yml
+++ b/.github/workflows/docker-build-publish.yml
@@ -1,5 +1,4 @@
-# Builds, scans and tests the multi-architecture docker image
-# Then releases it to the DockerHub, GHCR and Quay registries
+# Scans, builds and releases a multi-architecture docker image
 name: 🐳 Build + Publish Multi-Platform Image
 
 on:
@@ -77,6 +76,9 @@ jobs:
         username: ${{ secrets.ACR_USERNAME }}
         password: ${{ secrets.ACR_PASSWORD }}
 
+    - name: 🚦 Check Registry Status
+      uses: crazy-max/ghaction-docker-status@v1
+
     - name: ⚒️ Build and push
       uses: docker/build-push-action@v2
       with:
@@ -87,11 +89,12 @@ jobs:
         labels: ${{ steps.meta.outputs.labels }}
         push: true
           
-    # - name: 💬 Set Docker Hub Description
-    #   uses: peter-evans/dockerhub-description@v2
-    #   with:
-    #     repository: lissy93/dashy
-    #     readme-filepath: ./README.md
-    #     short-description: Dashy - A self-hosted start page for your server
-    #     username: ${{ secrets.DOCKER_USERNAME }}
-    #     password: ${{ secrets.DOCKER_PASSWORD }}
+    - name: 💬 Set Docker Hub Description
+      uses: peter-evans/dockerhub-description@v2
+      with:
+        repository: lissy93/dashy
+        readme-filepath: ./docker/docker-readme.md
+        short-description: Dashy - A self-hosted start page for your server
+        username: ${{ secrets.DOCKER_USERNAME }}
+        password: ${{ secrets.DOCKER_PASSWORD }}
+

From cde8060e23214364ce83d8e3ef0ecf8cc0b183e7 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 13 Feb 2022 23:30:34 +0000
Subject: [PATCH 35/36] :whale: Updates comments in Dockerfile

---
 Dockerfile | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 86ae3f759e..ebb6f41ca9 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,9 +1,10 @@
 FROM node:16.13.2-alpine AS BUILD_IMAGE
 
+# Set the platform to build image for
 ARG TARGETPLATFORM
 ENV TARGETPLATFORM=${TARGETPLATFORM:-linux/amd64}
 
-# Install additional tools needed on arm64 and armv7
+# Install additional tools needed if on arm64 / armv7
 RUN \
   case "${TARGETPLATFORM}" in \
   'linux/arm64') apk add --no-cache python3 make g++ ;; \
@@ -23,7 +24,7 @@ COPY . ./
 # Build initial app for production
 RUN yarn build
 
-# Build the final image
+# Production stage
 FROM node:16.13.2-alpine
 
 # Define some ENV Vars
@@ -44,8 +45,8 @@ COPY --from=BUILD_IMAGE /app ./
 ENTRYPOINT [ "/sbin/tini", "--" ]
 CMD [ "yarn", "build-and-start" ]
 
-# Expose given port
+# Expose the port
 EXPOSE ${PORT}
 
-# Run simple healthchecks every 5 mins, to check the Dashy's everythings great
+# Run simple healthchecks every 5 mins, to check that everythings still great
 HEALTHCHECK --interval=5m --timeout=2s --start-period=30s CMD yarn health-check

From 075bca98ceed0462a66443da27649229803b7bbd Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Mon, 14 Feb 2022 13:40:29 +0000
Subject: [PATCH 36/36] :bookmark: Bumps to V 2.0.3 and updates changelog

---
 .github/CHANGELOG.md | 12 ++++++++++++
 package.json         |  5 +----
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/.github/CHANGELOG.md b/.github/CHANGELOG.md
index 1dcd21579b..10d57bc33a 100644
--- a/.github/CHANGELOG.md
+++ b/.github/CHANGELOG.md
@@ -1,5 +1,17 @@
 # Changelog
 
+## 🐛 2.0.3 - Bug Fixes [PR #488](https://github.com/Lissy93/dashy/pull/488)
+- Press enter to submit login form (Re: #483)
+- Allow disabling write to local storage and disk (Re: #485)
+- Fix malformed YAML from export config (Re: #482)
+- Allow global option for useProxy (Re: #486)
+- Look into arrow key navigation error (Re: #463)
+- Disallow displaying config (Re: #455)
+- Round values in Glances Alerts widget (Re: #454)
+- Create a CPU temp widget (Re: #452)
+- Add to docs: Keycloak in Kubernetes (Re: #479)
+- Add a widget for displaying images (Re: #487)
+
 ## ⬆️ 2.0.2 - Dependency Updates [PR #471](https://github.com/Lissy93/dashy/pull/471)
 - Updates Alpine version for main Dockerfile
 - Updates node_modules to latest stable versions
diff --git a/package.json b/package.json
index 8a60cc1b3a..adbdd61539 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Dashy",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "license": "MIT",
   "main": "server",
   "author": "Alicia Sykes <alicia@omg.lol> (https://aliciasykes.com)",
@@ -64,9 +64,6 @@
     "vue-svg-loader": "^0.16.0",
     "vue-template-compiler": "^2.6.14"
   },
-  "gitHooks": {
-    "pre-commit": "yarn lint"
-  },
   "engines": {
     "node": ">=16.0.0"
   },