From d59379bcd4e61ace02cc50f290cbdff478bcd26e Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 16 May 2021 15:12:22 +0100
Subject: [PATCH 01/10] Adds a button to open modal

---
 src/assets/interface-icons/config-editor.svg  |  1 +
 src/components/Settings/ConfigEditor.vue      | 71 +++++++++++++++++++
 src/components/Settings/SettingsContainer.vue |  3 +
 3 files changed, 75 insertions(+)
 create mode 100644 src/assets/interface-icons/config-editor.svg
 create mode 100644 src/components/Settings/ConfigEditor.vue

diff --git a/src/assets/interface-icons/config-editor.svg b/src/assets/interface-icons/config-editor.svg
new file mode 100644
index 0000000000..3cb87c2208
--- /dev/null
+++ b/src/assets/interface-icons/config-editor.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="wrench" class="svg-inline--fa fa-wrench fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M507.73 109.1c-2.24-9.03-13.54-12.09-20.12-5.51l-74.36 74.36-67.88-11.31-11.31-67.88 74.36-74.36c6.62-6.62 3.43-17.9-5.66-20.16-47.38-11.74-99.55.91-136.58 37.93-39.64 39.64-50.55 97.1-34.05 147.2L18.74 402.76c-24.99 24.99-24.99 65.51 0 90.5 24.99 24.99 65.51 24.99 90.5 0l213.21-213.21c50.12 16.71 107.47 5.68 147.37-34.22 37.07-37.07 49.7-89.32 37.91-136.73zM64 472c-13.25 0-24-10.75-24-24 0-13.26 10.75-24 24-24s24 10.74 24 24c0 13.25-10.75 24-24 24z"></path></svg>
\ No newline at end of file
diff --git a/src/components/Settings/ConfigEditor.vue b/src/components/Settings/ConfigEditor.vue
new file mode 100644
index 0000000000..71cda9f485
--- /dev/null
+++ b/src/components/Settings/ConfigEditor.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="config-options">
+    <span>Config</span>
+    <div class="config-buttons">
+      <IconSpanner v-tooltip="tooltip('Update configuration locally')" @click="showEditor()" />
+    </div>
+    <modal :name="modalName" :resizable="true" width="80%" height="80%">
+      <p>Hello</p>
+    </modal>
+  </div>
+</template>
+
+<script>
+
+import IconSpanner from '@/assets/interface-icons/config-editor.svg';
+
+export default {
+  name: 'ConfigEditor',
+  data() {
+    return {
+      modalName: 'CONF-EDITOR',
+      input: '',
+    };
+  },
+  components: {
+    IconSpanner,
+  },
+  props: {
+    initialConfig: Object,
+  },
+  methods: {
+    showEditor: function show() {
+      this.$modal.show(this.modalName);
+    },
+    updateConfig() {
+      // this.$emit('iconSizeUpdated', iconSize);
+    },
+    tooltip(content) {
+      return { content, trigger: 'hover focus', delay: 250 };
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+.config-options {
+  display: flex;
+  flex-direction: column;
+  color: var(--settings-text-color);
+  svg {
+    path {
+      fill: var(--settings-text-color);
+    }
+    width: 1rem;
+    height: 1rem;
+    margin: 0.2rem;
+    padding: 0.2rem;
+    text-align: center;
+    background: var(--background);
+    border: 1px solid currentColor;
+    border-radius: var(--curve-factor);
+    cursor: pointer;
+    &:hover, &.selected {
+      background: var(--settings-text-color);
+      path { fill: var(--background); }
+    }
+  }
+}
+
+</style>
diff --git a/src/components/Settings/SettingsContainer.vue b/src/components/Settings/SettingsContainer.vue
index 32e1b6cc95..9fb96619ad 100644
--- a/src/components/Settings/SettingsContainer.vue
+++ b/src/components/Settings/SettingsContainer.vue
@@ -6,6 +6,7 @@
         :confTheme="getInitialTheme()" :userThemes="getUserThemes()" />
       <LayoutSelector :displayLayout="displayLayout" @layoutUpdated="updateDisplayLayout"/>
       <ItemSizeSelector :iconSize="iconSize" @iconSizeUpdated="updateIconSize" />
+      <ConfigEditor />
     </div>
     <KeyboardShortcutInfo />
   </section>
@@ -14,6 +15,7 @@
 <script>
 import Defaults from '@/utils/defaults';
 import SearchBar from '@/components/Settings/SearchBar';
+import ConfigEditor from '@/components/Settings/ConfigEditor';
 import ThemeSelector from '@/components/Settings/ThemeSelector';
 import LayoutSelector from '@/components/Settings/LayoutSelector';
 import ItemSizeSelector from '@/components/Settings/ItemSizeSelector';
@@ -29,6 +31,7 @@ export default {
   },
   components: {
     SearchBar,
+    ConfigEditor,
     ThemeSelector,
     LayoutSelector,
     ItemSizeSelector,

From 52bf47d91e61694f142cde85e362a014b4563a45 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 16 May 2021 18:28:24 +0100
Subject: [PATCH 02/10] A function that converts JSON into YAML for downloading

---
 src/utils/JsonToYaml.js | 87 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 src/utils/JsonToYaml.js

diff --git a/src/utils/JsonToYaml.js b/src/utils/JsonToYaml.js
new file mode 100644
index 0000000000..c855f5d04a
--- /dev/null
+++ b/src/utils/JsonToYaml.js
@@ -0,0 +1,87 @@
+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 0e9aef3f30d9b55908b3a29f691d29f7b307b7b2 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 16 May 2021 18:29:30 +0100
Subject: [PATCH 03/10] Displays a tab view in the config modal, with raw YAML
 for downloading

---
 README.md                                     |  7 ++++---
 package.json                                  |  4 +++-
 src/components/LinkItems/Item.vue             |  2 +-
 src/components/LinkItems/ItemIcon.vue         |  2 +-
 src/components/Settings/ConfigEditor.vue      | 15 +++++++++++++--
 src/components/Settings/SettingsContainer.vue |  3 ++-
 src/main.js                                   |  2 ++
 src/utils/defaults.js                         |  1 +
 src/views/Home.vue                            | 14 ++++++++++++--
 yarn.lock                                     | 10 ++++++++++
 10 files changed, 49 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index ab1228ceaa..8aa0df7087 100644
--- a/README.md
+++ b/README.md
@@ -162,12 +162,13 @@ There are a few self-hosted web apps, that serve a similar purpose to Dashy. Inc
 
 ### Credits 🏆
 
-The app makes use of the following components, kudos to their respective authors
+And the app itself is built with [Vue.js](https://github.com/vuejs/vue) ![vue-logo](https://i.ibb.co/xqKW6h5/vue-logo.png)
+
+It makes use of the following components, kudos to their respective authors
 - [`vue-select`](https://github.com/sagalbot/vue-select) - Dropdown component by @sagalbot
 - [`vue-js-modal`](https://github.com/euvl/vue-js-modal) - Modal component by @euvl
 - [`v-tooltip`](https://github.com/Akryum/v-tooltip) - Tooltip component by @Akryum
-
-And the app itself is built with [Vue.js](https://github.com/vuejs/vue) ![vue-logo](https://i.ibb.co/xqKW6h5/vue-logo.png)
+- [`vue-material-tabs`](https://github.com/jairoblatt/vue-material-tabs) - Tab view component by @jairoblatt
 
 ### License 📜
 
diff --git a/package.json b/package.json
index 414174c6df..e541511364 100644
--- a/package.json
+++ b/package.json
@@ -10,11 +10,13 @@
   "dependencies": {
     "connect": "^3.7.0",
     "register-service-worker": "^1.6.2",
+    "remedial": "^1.0.8",
     "serve-static": "^1.14.1",
     "v-tooltip": "^2.1.3",
     "vue": "^2.6.10",
     "vue-cli-plugin-yaml": "^1.0.2",
     "vue-js-modal": "^2.0.0-rc.6",
+    "vue-material-tabs": "^0.0.7",
     "vue-router": "^3.0.3",
     "vue-select": "^3.11.2"
   },
@@ -61,4 +63,4 @@
     "> 1%",
     "last 2 versions"
   ]
-}
\ No newline at end of file
+}
diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue
index b0b8ff3462..54a968a390 100644
--- a/src/components/LinkItems/Item.vue
+++ b/src/components/LinkItems/Item.vue
@@ -100,7 +100,6 @@ export default {
 
 .item {
   flex-grow: 1;
-  position: relative;
   color: var(--item-text-color);
   vertical-align: middle;
   margin: 0.5rem;
@@ -116,6 +115,7 @@ export default {
   &:hover {
     box-shadow: var(--item-hover-shadow);
     background: var(--item-background-hover);
+    position: relative;
   }
   &:focus {
     outline: 2px solid var(--primary);
diff --git a/src/components/LinkItems/ItemIcon.vue b/src/components/LinkItems/ItemIcon.vue
index ada43964e0..265e61a710 100644
--- a/src/components/LinkItems/ItemIcon.vue
+++ b/src/components/LinkItems/ItemIcon.vue
@@ -99,7 +99,7 @@ export default {
 <style lang="scss">
   .tile-icon {
       width: 60px;
-      filter: var(--item-icon-transform);
+      // filter: var(--item-icon-transform);
       &.broken { display: none; }
   }
   i.fas, i.fab, i.far, i.fal, i.fad {
diff --git a/src/components/Settings/ConfigEditor.vue b/src/components/Settings/ConfigEditor.vue
index 71cda9f485..26a17c40c6 100644
--- a/src/components/Settings/ConfigEditor.vue
+++ b/src/components/Settings/ConfigEditor.vue
@@ -5,7 +5,16 @@
       <IconSpanner v-tooltip="tooltip('Update configuration locally')" @click="showEditor()" />
     </div>
     <modal :name="modalName" :resizable="true" width="80%" height="80%">
-      <p>Hello</p>
+      <Tabs>
+        <TabItem name="Edit">
+          <div class="first-tab">Todo</div>
+        </TabItem>
+        <TabItem name="Download">
+          <div class="second-tab">
+            <pre>{{this.jsonParser(this.sections)}}</pre>
+          </div>
+        </TabItem>
+      </Tabs>
     </modal>
   </div>
 </template>
@@ -13,6 +22,7 @@
 <script>
 
 import IconSpanner from '@/assets/interface-icons/config-editor.svg';
+import JsonToYaml from '@/utils/JsonToYaml';
 
 export default {
   name: 'ConfigEditor',
@@ -20,13 +30,14 @@ export default {
     return {
       modalName: 'CONF-EDITOR',
       input: '',
+      jsonParser: JsonToYaml,
     };
   },
   components: {
     IconSpanner,
   },
   props: {
-    initialConfig: Object,
+    sections: Array,
   },
   methods: {
     showEditor: function show() {
diff --git a/src/components/Settings/SettingsContainer.vue b/src/components/Settings/SettingsContainer.vue
index 9fb96619ad..3811fe77c1 100644
--- a/src/components/Settings/SettingsContainer.vue
+++ b/src/components/Settings/SettingsContainer.vue
@@ -6,7 +6,7 @@
         :confTheme="getInitialTheme()" :userThemes="getUserThemes()" />
       <LayoutSelector :displayLayout="displayLayout" @layoutUpdated="updateDisplayLayout"/>
       <ItemSizeSelector :iconSize="iconSize" @iconSizeUpdated="updateIconSize" />
-      <ConfigEditor />
+      <ConfigEditor :sections="sections" />
     </div>
     <KeyboardShortcutInfo />
   </section>
@@ -28,6 +28,7 @@ export default {
     iconSize: String,
     availableThemes: Object,
     appConfig: Object,
+    sections: Array,
   },
   components: {
     SearchBar,
diff --git a/src/main.js b/src/main.js
index edee5f3181..7ccb802df8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,6 +3,7 @@ import Vue from 'vue';
 import VTooltip from 'v-tooltip'; // A Vue directive for Popper.js, tooltip component
 import VModal from 'vue-js-modal'; // Modal component
 import VSelect from 'vue-select'; // Select dropdown component
+import VTabs from 'vue-material-tabs'; // Tab view component, used on the config page
 
 import App from './App.vue';
 import router from './router';
@@ -10,6 +11,7 @@ import './registerServiceWorker';
 
 Vue.use(VTooltip);
 Vue.use(VModal);
+Vue.use(VTabs);
 Vue.component('v-select', VSelect);
 
 Vue.config.productionTip = false;
diff --git a/src/utils/defaults.js b/src/utils/defaults.js
index ab27a52374..bb4cbc85db 100644
--- a/src/utils/defaults.js
+++ b/src/utils/defaults.js
@@ -44,5 +44,6 @@ module.exports = {
     COLLAPSE_STATE: 'collapseState',
     ICON_SIZE: 'iconSize',
     THEME: 'theme',
+    CONF_SECTIONS: 'confSections',
   },
 };
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 1555b70923..236f6207fa 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -9,13 +9,14 @@
       :iconSize="itemSizeBound"
       :availableThemes="getExternalCSSLinks()"
       :appConfig="appConfig"
+      :sections="getSections(sections)"
       class="filter-container"
     />
     <!-- Main content, section for each group of items -->
     <div v-if="checkTheresData(sections)"
       :class="`item-group-container orientation-${layout} item-size-${itemSizeBound}`">
       <ItemGroup
-        v-for="(section, index) in sections"
+        v-for="(section, index) in getSections(sections)"
         :key="index"
         :title="section.name"
         :displayData="getDisplayData(section)"
@@ -73,7 +74,16 @@ export default {
   methods: {
     /* Returns true if there is one or more sections in the config */
     checkTheresData(sections) {
-      return sections && sections.length >= 1;
+      const localSections = localStorage[localStorageKeys.CONF_SECTIONS];
+      return (sections && sections.length >= 1) || (localSections && localSections.length >= 1);
+    },
+    /* Returns sections from local storage if available, otherwise uses the conf.yml */
+    getSections(sections) {
+      // If the user has stored sections in local storage, return those
+      const localSections = localStorage[localStorageKeys.CONF_SECTIONS];
+      if (localSections && localSections.length >= 1) return localSections;
+      // Otherwise, return the usuall data from conf.yml
+      return sections;
     },
     /* Updates local data with search value, triggered from filter comp */
     searching(searchValue) {
diff --git a/yarn.lock b/yarn.lock
index 19ac5d6e2e..5884cfdff2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7314,6 +7314,11 @@ relateurl@0.2.x:
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
 
+remedial@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/remedial/-/remedial-1.0.8.tgz#a5e4fd52a0e4956adbaf62da63a5a46a78c578a0"
+  integrity sha512-/62tYiOe6DzS5BqVsNpH/nkGlX45C/Sp6V+NtiN6JQNS1Viay7cWkazmRkrQrdFj2eshDe96SIQNIoMxqhzBOg==
+
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
@@ -8756,6 +8761,11 @@ vue-loader@^15.9.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-material-tabs@^0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/vue-material-tabs/-/vue-material-tabs-0.0.7.tgz#5f3fa04ad35384af68582f7c89ad4cecac89207b"
+  integrity sha512-02X5paTksYKrGvSRpMdkctRO9qhvJFD5VEGxd0xjOX4sYz6mZSAez0Z/+aYf7Z5ziY+eJ9dMQmxaLn9DVKQRJw==
+
 vue-resize@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-1.0.1.tgz#c120bed4e09938771d622614f57dbcf58a5147ee"

From e05a04243df2d2e040e06b954da2f1e080d85f34 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 16 May 2021 19:40:43 +0100
Subject: [PATCH 04/10] Added a data prop to be set when modal is open, in
 order to disable key bindings

---
 src/components/Configuration/AddItem.vue      | 19 +++++++
 .../Configuration/ConfigContainer.vue         | 50 +++++++++++++++++++
 .../{ConfigEditor.vue => ConfigLauncher.vue}  | 26 ++++------
 .../Settings/KeyboardShortcutInfo.vue         | 19 +++----
 src/components/Settings/SearchBar.vue         |  7 ++-
 src/components/Settings/SettingsContainer.vue | 18 +++++--
 src/styles/color-palette.scss                 |  2 +
 src/views/Home.vue                            |  7 +++
 8 files changed, 117 insertions(+), 31 deletions(-)
 create mode 100644 src/components/Configuration/AddItem.vue
 create mode 100644 src/components/Configuration/ConfigContainer.vue
 rename src/components/Settings/{ConfigEditor.vue => ConfigLauncher.vue} (77%)

diff --git a/src/components/Configuration/AddItem.vue b/src/components/Configuration/AddItem.vue
new file mode 100644
index 0000000000..782cc9cc13
--- /dev/null
+++ b/src/components/Configuration/AddItem.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'AddItem',
+  props: {
+    sections: Array,
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/components/Configuration/ConfigContainer.vue b/src/components/Configuration/ConfigContainer.vue
new file mode 100644
index 0000000000..1cc18e0358
--- /dev/null
+++ b/src/components/Configuration/ConfigContainer.vue
@@ -0,0 +1,50 @@
+<template>
+  <Tabs>
+    <TabItem name="Edit">
+      <div class="first-tab">Todo</div>
+    </TabItem>
+    <TabItem name="Download">
+      <div class="second-tab">
+        <pre>{{this.jsonParser(this.sections)}}</pre>
+      </div>
+    </TabItem>
+    <TabItem name="Add Item">
+      <div class="third-tab">
+        <AddItem :sections="sections" />
+      </div>
+    </TabItem>
+  </Tabs>
+</template>
+
+<script>
+
+import JsonToYaml from '@/utils/JsonToYaml';
+import AddItem from '@/components/Configuration/AddItem';
+
+export default {
+  name: 'ConfigContainer',
+  data() {
+    return {
+      jsonParser: JsonToYaml,
+    };
+  },
+  props: {
+    sections: Array,
+  },
+  components: {
+    AddItem,
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+pre {
+  color: var(--config-code-color);
+  background: var(--config-code-background);
+}
+
+.tab-item {
+  overflow-y: auto;
+}
+</style>
diff --git a/src/components/Settings/ConfigEditor.vue b/src/components/Settings/ConfigLauncher.vue
similarity index 77%
rename from src/components/Settings/ConfigEditor.vue
rename to src/components/Settings/ConfigLauncher.vue
index 26a17c40c6..a0362f6556 100644
--- a/src/components/Settings/ConfigEditor.vue
+++ b/src/components/Settings/ConfigLauncher.vue
@@ -1,20 +1,15 @@
 <template>
   <div class="config-options">
+    <!-- Button and label -->
     <span>Config</span>
     <div class="config-buttons">
       <IconSpanner v-tooltip="tooltip('Update configuration locally')" @click="showEditor()" />
     </div>
-    <modal :name="modalName" :resizable="true" width="80%" height="80%">
-      <Tabs>
-        <TabItem name="Edit">
-          <div class="first-tab">Todo</div>
-        </TabItem>
-        <TabItem name="Download">
-          <div class="second-tab">
-            <pre>{{this.jsonParser(this.sections)}}</pre>
-          </div>
-        </TabItem>
-      </Tabs>
+
+    <!-- Modal containing all the configuration options -->
+    <modal :name="modalName" :resizable="true" width="80%" height="80%"
+      @closed="$emit('modalChanged', false)">
+      <ConfigContainer :sections="sections" />
     </modal>
   </div>
 </template>
@@ -22,19 +17,18 @@
 <script>
 
 import IconSpanner from '@/assets/interface-icons/config-editor.svg';
-import JsonToYaml from '@/utils/JsonToYaml';
+import ConfigContainer from '@/components/Configuration/ConfigContainer';
 
 export default {
-  name: 'ConfigEditor',
+  name: 'ConfigLauncher',
   data() {
     return {
       modalName: 'CONF-EDITOR',
-      input: '',
-      jsonParser: JsonToYaml,
     };
   },
   components: {
     IconSpanner,
+    ConfigContainer,
   },
   props: {
     sections: Array,
@@ -42,6 +36,7 @@ export default {
   methods: {
     showEditor: function show() {
       this.$modal.show(this.modalName);
+      this.$emit('modalChanged', true);
     },
     updateConfig() {
       // this.$emit('iconSizeUpdated', iconSize);
@@ -54,7 +49,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-
 .config-options {
   display: flex;
   flex-direction: column;
diff --git a/src/components/Settings/KeyboardShortcutInfo.vue b/src/components/Settings/KeyboardShortcutInfo.vue
index 873381069f..cda24ea531 100644
--- a/src/components/Settings/KeyboardShortcutInfo.vue
+++ b/src/components/Settings/KeyboardShortcutInfo.vue
@@ -21,13 +21,13 @@ export default {
   data() {
     return {
       shouldHide: true, // False = show/ true = hide. Intuitive, eh?
+      timeDelay: 3000, // Short delay in ms before popup appears
     };
   },
   methods: {
     /**
-     * If the session storage item exists, true will be returned
-     * Otherwise, if not then false is returned.
-     * Note the !! just converts 'false' to false, as strings resolve to true
+     * Returns true if the key exists in session storage, otherwise false
+     * And the !! just converts 'false' to false, as strings resolve to true
      */
     shouldHideWelcomeMessage() {
       return !!localStorage[localStorageKeys.HIDE_WELCOME_BANNER];
@@ -39,7 +39,11 @@ export default {
     hideWelcomeHelper() {
       this.shouldHide = true;
       localStorage.setItem(localStorageKeys.HIDE_WELCOME_BANNER, true);
-      window.removeEventListener('keyup');
+      window.removeEventListener('keyup', this.keyPressEvent);
+    },
+    /* Passed to window function, to add/ remove event listener */
+    keyPressEvent(event) {
+      if (event.keyCode === 27) this.hideWelcomeHelper();
     },
   },
   /**
@@ -50,11 +54,8 @@ export default {
   mounted() {
     const shouldHide = this.shouldHideWelcomeMessage();
     if (!shouldHide) {
-      window.setTimeout(() => { this.shouldHide = shouldHide; }, 3000);
-      window.addEventListener('keyup', (ev) => {
-        // User pressed the escape key. Trigger permanent dismissal of dialog
-        if (ev.keyCode === 27) this.hideWelcomeHelper();
-      });
+      window.setTimeout(() => { this.shouldHide = shouldHide; }, this.timeDelay);
+      window.addEventListener('keyup', this.keyPressEvent);
     } else { // Meh, component not needed.
       // No point wasting valuable bytes of your 32GB Ram, lets kill it
       this.$destroy();
diff --git a/src/components/Settings/SearchBar.vue b/src/components/Settings/SearchBar.vue
index 0ec1becad9..de846ea019 100644
--- a/src/components/Settings/SearchBar.vue
+++ b/src/components/Settings/SearchBar.vue
@@ -1,6 +1,6 @@
 <template>
   <form>
-    <label for="filter-tiles">Search</label>
+    <label for="filter-tiles">Search {{active}}</label>
     <input
       id="filter-tiles"
       v-model="input"
@@ -21,6 +21,9 @@ import ArrowKeyNavigation from '@/utils/ArrowKeyNavigation';
 
 export default {
   name: 'FilterTile',
+  props: {
+    active: Boolean,
+  },
   data() {
     return {
       input: '', // Users current search term
@@ -31,6 +34,8 @@ export default {
     window.addEventListener('keydown', (event) => {
       const currentElem = document.activeElement.id;
       const { key, keyCode } = event;
+      /* If a modal is open, then do nothing */
+      if (!this.active) return;
       if (/^[a-zA-Z]$/.test(key) && currentElem !== 'filter-tiles') {
         /* Letter key pressed - start searching */
         this.$refs.filter.focus();
diff --git a/src/components/Settings/SettingsContainer.vue b/src/components/Settings/SettingsContainer.vue
index 3811fe77c1..c7f56461ec 100644
--- a/src/components/Settings/SettingsContainer.vue
+++ b/src/components/Settings/SettingsContainer.vue
@@ -1,12 +1,16 @@
 <template>
   <section>
-    <SearchBar @user-is-searchin="userIsTypingSomething" ref="SearchBar" v-if="searchVisible" />
+    <SearchBar ref="SearchBar"
+      @user-is-searchin="userIsTypingSomething"
+      v-if="searchVisible"
+      :active="!modalOpen"
+    />
     <div class="options-container" v-if="settingsVisible">
       <ThemeSelector :themes="availableThemes"
         :confTheme="getInitialTheme()" :userThemes="getUserThemes()" />
       <LayoutSelector :displayLayout="displayLayout" @layoutUpdated="updateDisplayLayout"/>
       <ItemSizeSelector :iconSize="iconSize" @iconSizeUpdated="updateIconSize" />
-      <ConfigEditor :sections="sections" />
+      <ConfigLauncher :sections="sections" @modalChanged="modalChanged" />
     </div>
     <KeyboardShortcutInfo />
   </section>
@@ -15,7 +19,7 @@
 <script>
 import Defaults from '@/utils/defaults';
 import SearchBar from '@/components/Settings/SearchBar';
-import ConfigEditor from '@/components/Settings/ConfigEditor';
+import ConfigLauncher from '@/components/Settings/ConfigLauncher';
 import ThemeSelector from '@/components/Settings/ThemeSelector';
 import LayoutSelector from '@/components/Settings/LayoutSelector';
 import ItemSizeSelector from '@/components/Settings/ItemSizeSelector';
@@ -29,10 +33,11 @@ export default {
     availableThemes: Object,
     appConfig: Object,
     sections: Array,
+    modalOpen: Boolean,
   },
   components: {
     SearchBar,
-    ConfigEditor,
+    ConfigLauncher,
     ThemeSelector,
     LayoutSelector,
     ItemSizeSelector,
@@ -51,6 +56,9 @@ export default {
     updateIconSize(iconSize) {
       this.$emit('change-icon-size', iconSize);
     },
+    modalChanged(changedTo) {
+      this.$emit('change-modal-visibility', changedTo);
+    },
     getInitialTheme() {
       return this.appConfig.theme || '';
     },
@@ -63,7 +71,7 @@ export default {
   },
   data() {
     return {
-      searchVisible: Defaults.visibleComponents.searchBar,
+      searchVisible: Defaults.visibleComponents.searchBar && !this.modalOpen,
       settingsVisible: Defaults.visibleComponents.settings,
     };
   },
diff --git a/src/styles/color-palette.scss b/src/styles/color-palette.scss
index 4f6f5424fc..d340cc637c 100644
--- a/src/styles/color-palette.scss
+++ b/src/styles/color-palette.scss
@@ -51,4 +51,6 @@
   --footer-text-color-link:  var(--primary);
   --welcome-popup-background: var(--background-darker);
   --welcome-popup-text-color: var(--primary);
+  --config-code-background: #fff;
+  --config-code-color: var(--background);
 }
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 236f6207fa..7add7de0d7 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -5,11 +5,13 @@
       @user-is-searchin="searching"
       @change-display-layout="setLayoutOrientation"
       @change-icon-size="setItemSize"
+      @change-modal-visibility="updateModalVisibility"
       :displayLayout="layout"
       :iconSize="itemSizeBound"
       :availableThemes="getExternalCSSLinks()"
       :appConfig="appConfig"
       :sections="getSections(sections)"
+      :modalOpen="modalOpen"
       class="filter-container"
     />
     <!-- Main content, section for each group of items -->
@@ -54,6 +56,7 @@ export default {
     searchValue: '',
     layout: '',
     itemSizeBound: '',
+    modalOpen: false, // When true, keybindings are disabled
   }),
   computed: {
     layoutOrientation: {
@@ -126,6 +129,10 @@ export default {
     setItemSize(itemSize) {
       this.iconSize = itemSize;
     },
+    /* Update data when modal is open (so that key bindings can be disabled) */
+    updateModalVisibility(modalState) {
+      this.modalOpen = modalState;
+    },
     /* Returns an array of links to external CSS from the Config */
     getExternalCSSLinks() {
       const availibleThemes = {};

From 88a3ae9c3a9834312ab1d6e6ef529f6913f792b8 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 16 May 2021 20:03:12 +0100
Subject: [PATCH 05/10] Adds JSON editor component in config modal

---
 README.md                                     |   1 +
 package.json                                  |   1 +
 public/conf.yml                               | 190 +++++++++++++++---
 .../Configuration/ConfigContainer.vue         |   9 +-
 src/components/Configuration/RawEditor.vue    |  40 ++++
 yarn.lock                                     |  71 ++++++-
 6 files changed, 278 insertions(+), 34 deletions(-)
 create mode 100644 src/components/Configuration/RawEditor.vue

diff --git a/README.md b/README.md
index 8aa0df7087..42fbf55ceb 100644
--- a/README.md
+++ b/README.md
@@ -169,6 +169,7 @@ It makes use of the following components, kudos to their respective authors
 - [`vue-js-modal`](https://github.com/euvl/vue-js-modal) - Modal component by @euvl
 - [`v-tooltip`](https://github.com/Akryum/v-tooltip) - Tooltip component by @Akryum
 - [`vue-material-tabs`](https://github.com/jairoblatt/vue-material-tabs) - Tab view component by @jairoblatt
+- [`VJsoneditor`](https://github.com/yansenlei/VJsoneditor) - Interactive JSON editor component by @yansenlei
 
 ### License 📜
 
diff --git a/package.json b/package.json
index e541511364..368bb4efba 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "register-service-worker": "^1.6.2",
     "remedial": "^1.0.8",
     "serve-static": "^1.14.1",
+    "v-jsoneditor": "^1.4.2",
     "v-tooltip": "^2.1.3",
     "vue": "^2.6.10",
     "vue-cli-plugin-yaml": "^1.0.2",
diff --git a/public/conf.yml b/public/conf.yml
index 99c1cd80b0..bfd2ea04a3 100644
--- a/public/conf.yml
+++ b/public/conf.yml
@@ -1,33 +1,165 @@
 ---
 pageInfo:
-  title: Dashy
-  navLinks:
-  - title: Home
-    path: /
-  - title: About
-    path: /about
-  - title: Source Code
-    path: https://github.com/Lissy93/dashy
-appConfig:
-  theme: colorful
-  fontAwesomeKey: 0821c65656
+  title: Networking Services
 sections:
-- name: Getting Started
+- name: Firewall
   items:
-  - title: Source
-    description: Source code and documentation on GitHub
-    icon: fab fa-github
-    url: https://github.com/Lissy93/dashy
-  - title: Issues
-    description: View currently open issues, or raise a new one
-    icon: fas fa-bug
-    url: https://github.com/Lissy93/dashy/issues
-  - title: Demo 1
-    description: 'Live Demo #1'
-    icon: far fa-rocket
-    url: https://dashy-demo-1.netlify.app 
-  - title: Demo 2
-    description: 'Live Demo #2'
-    icon: fad fa-planet-ringed
-    url: https://dashy-demo-2.netlify.app 
-  
+  - title: OPNsense
+    description: Firewall Central Management
+    icon: networking/opnsense.png
+    target: iframe
+    url: https://192.168.1.1
+  - title: NetData
+    description: System resource usage on firewall
+    icon: networking/netdata.png
+    url: http://192.168.1.1:19999/
+  - title: MalTrail
+    description: Malicious traffic detection system
+    icon: networking/maltrail.png
+    url: http://192.168.1.1:8338
+  - title: Ntopng
+    description: Network traffic probe and network use monitor
+    icon: networking/ntop.png
+    url: http://192.168.1.1:3001
+  - title: Sensei
+    description: Additional data features
+    icon: networking/sensei.png
+    url: https://192.168.1.1/ui/sensei/
+  - title: Monit
+    description: Status of firewall system alerts
+    icon: networking/monit.png
+    url: https://192.168.1.1/ui/monit/status
+  - title: Firewall Logs
+    description: Real-time view of firewall data and logs
+    icon: networking/logs.png
+    url: https://192.168.1.1/ui/diagnostics/firewall/log
+  - title: WireGuard
+    description: Manage WireGuard client and server on firewall
+    icon: networking/wireguard.png
+    url: https://192.168.1.1/ui/wireguard/general
+- name: DNS Device
+  displayData:
+    collapsed: false
+    rows: 2
+  items:
+  - title: Pi-Hole
+    description: DNS settings for ad & tracker blocking
+    icon: networking/pihole.png
+    url: http://192.168.130.2/admin
+  - title: PiAlert
+    description: Presence monitoring and ARP scanning
+    icon: networking/pialert.png
+    url: http://192.168.130.2/pialert/
+  - title: SmokePing
+    description: Network latency monitoring
+    icon: networking/smokeping.png
+    url: http://192.168.130.2:8086/
+  - title: StatPing
+    description: Up-time monitoring for local service
+    icon: networking/statping.png
+    url: http://192.168.130.2:8083/
+  - title: LibreSpeed
+    description: Local network speed and latency test
+    icon: networking/librespeed.png
+    url: http://192.168.130.2:49154/
+  - title: NetData
+    description: Real-time system resource usage
+    icon: networking/netdata.png
+    url: http://192.168.130.2:19999
+  - title: Portainer
+    description: Docker container management
+    icon: networking/portainer.png
+    url: http://192.168.130.2:9000/
+  - title: cAdvisor
+    description: Container monitoring
+    icon: networking/cadvisor.png
+    url: http://192.168.130.2:8084/
+  - title: Glances
+    description: Simple resource usage
+    icon: networking/glances.png
+    url: http://192.168.130.2:61208
+  - title: Dozzle
+    description: Docker container web log viewer
+    icon: networking/dozzle.png
+    url: http://192.168.130.2:8093
+  - title: Prometheus
+    description: System Statistics Aggregation with PromQL
+    icon: networking/prometheus.png
+    url: http://192.168.130.2:8090/
+  - title: Grafana
+    description: Data visualised on dashboards
+    icon: networking/grafana.png
+    url: http://192.168.130.2:8091/
+- name: External Services
+  items:
+  - title: DuckDNS
+    description: Dynamic DNS for fixed public IP
+    icon: networking/duckdns.png
+    url: https://www.duckdns.org/
+  - title: BorgBase
+    description: Off-site system Borg backups
+    icon: networking/borgbase.png
+    url: https://www.borgbase.com/repositories
+  - title: Mullvad
+    description: Hosted VPN provider
+    icon: networking/mullvad.png
+    url: https://mullvad.net/en/account/
+  - title: ZeroTier
+    description: Secure networks between devices
+    icon: networking/zeroteir.png
+    url: https://my.zerotier.com/
+  - title: HealthChecks
+    description: Cron Job Monitoring
+    icon: networking/healthchecks.png
+    url: https://healthchecks.io/checks/
+  - title: ISP - Vodafone
+    description: Broadband internet provider
+    icon: networking/vodafone.png
+    url: https://myaccount.vodafone.co.uk/
+  - title: Digital Ocean
+    description: Cloud Hosting
+    icon: networking/digital-ocean.png
+    url: https://cloud.digitalocean.com/
+  - title: CloudFlare
+    description: Domain and DNS Management
+    icon: networking/cloudflare.png
+    url: https://dash.cloudflare.com/
+- name: Other Devices
+  items:
+  - title: Modem
+    description: ISP Router Modem Combo
+    icon: ''
+    url: http://192.168.1.5
+  - title: Wireless Access Point
+    description: View clients connected to WiFi
+    icon: ''
+    url: http://192.168.1.109/info.php
+  - title: Fing
+    description: Monitor connectivity issues, ISP quality, health checks and troubleshooting
+    provider: Fing
+    icon: ''
+    url: https://app.fing.com/
+  - title: Switch
+    description: Manage VLANs on Ubiquity Ethernet switch
+    icon: ''
+    url: "#"
+- name: External Utilities
+  displayData:
+    collapsed: true
+  items:
+  - title: Public IP
+    description: Check public IP and associated data
+    icon: ''
+    url: https://www.whatismyip.com/
+  - title: Who Is Lookup
+    description: Check ICAN info for a given IP address or domain
+    icon: ''
+    url: https://whois.domaintools.com/
+  - title: Speed Test
+    description: Upload + download speeds and latency
+    icon: ''
+    url: https://speed.cloudflare.com/
+  - title: Mullvad Check
+    description: Confirms a secure connection to Mullvad's WireGuard servers
+    icon: ''
+    url: https://mullvad.net/check
diff --git a/src/components/Configuration/ConfigContainer.vue b/src/components/Configuration/ConfigContainer.vue
index 1cc18e0358..129cd29eca 100644
--- a/src/components/Configuration/ConfigContainer.vue
+++ b/src/components/Configuration/ConfigContainer.vue
@@ -3,15 +3,14 @@
     <TabItem name="Edit">
       <div class="first-tab">Todo</div>
     </TabItem>
+    <TabItem name="Raw Editor">
+         <RawEditor :sections="sections" />
+    </TabItem>
     <TabItem name="Download">
-      <div class="second-tab">
         <pre>{{this.jsonParser(this.sections)}}</pre>
-      </div>
     </TabItem>
     <TabItem name="Add Item">
-      <div class="third-tab">
         <AddItem :sections="sections" />
-      </div>
     </TabItem>
   </Tabs>
 </template>
@@ -20,6 +19,7 @@
 
 import JsonToYaml from '@/utils/JsonToYaml';
 import AddItem from '@/components/Configuration/AddItem';
+import RawEditor from '@/components/Configuration/RawEditor';
 
 export default {
   name: 'ConfigContainer',
@@ -33,6 +33,7 @@ export default {
   },
   components: {
     AddItem,
+    RawEditor,
   },
 };
 </script>
diff --git a/src/components/Configuration/RawEditor.vue b/src/components/Configuration/RawEditor.vue
new file mode 100644
index 0000000000..7a1fcdb957
--- /dev/null
+++ b/src/components/Configuration/RawEditor.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <v-jsoneditor
+      v-model="json"
+      :options="options"
+      :plus="false"
+      height="650px"
+      @error="onError"
+    />
+  </div>
+</template>
+
+<script>
+
+import VJsoneditor from 'v-jsoneditor';
+
+export default {
+  name: 'RawEditor',
+  props: {
+    sections: Array,
+  },
+  components: {
+    VJsoneditor,
+  },
+  data() {
+    return {
+      json: this.sections,
+    };
+  },
+  methods: {
+    onError() {
+      console.log('error');
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/yarn.lock b/yarn.lock
index 5884cfdff2..2944b93886 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -957,6 +957,11 @@
   resolved "https://registry.yarnpkg.com/@soda/get-current-script/-/get-current-script-1.0.2.tgz#a53515db25d8038374381b73af20bb4f2e508d87"
   integrity sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==
 
+"@sphinxxxx/color-conversion@^2.2.2":
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/@sphinxxxx/color-conversion/-/color-conversion-2.2.2.tgz#03ecc29279e3c0c832f6185a5bfa3497858ac8ca"
+  integrity sha512-XExJS3cLqgrmNBIP3bBw6+1oQ1ksGjFh0+oClDKFYpCCqx/hlqwWO5KO/S63fzUo67SxI9dMrF0y5T/Ey7h8Zw==
+
 "@types/anymatch@*":
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
@@ -1580,6 +1585,11 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
     mime-types "~2.1.24"
     negotiator "0.6.2"
 
+ace-builds@^1.4.12:
+  version "1.4.12"
+  resolved "https://registry.yarnpkg.com/ace-builds/-/ace-builds-1.4.12.tgz#888efa386e36f4345f40b5233fcc4fe4c588fae7"
+  integrity sha512-G+chJctFPiiLGvs3+/Mly3apXTcfgE45dT5yp12BcWZ1kUs+gm0qd3/fv4gsz6fVag4mM0moHVpjHDIgph6Psg==
+
 acorn-jsx@^5.2.0, acorn-jsx@^5.3.1:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.1.tgz#fc8661e11b7ac1539c47dbfea2e72b3af34d267b"
@@ -1623,7 +1633,7 @@ ajv-keywords@^3.1.0, ajv-keywords@^3.4.1, ajv-keywords@^3.5.2:
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
   integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
 
-ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.3, ajv@^6.12.4:
+ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.6:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -5231,6 +5241,11 @@ isstream@~0.1.2:
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
   integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
 
+javascript-natural-sort@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz#f9e2303d4507f6d74355a73664d1440fb5a0ef59"
+  integrity sha1-+eIwPUUH9tdDVac2ZNFED7Wg71k=
+
 javascript-stringify@^2.0.1:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/javascript-stringify/-/javascript-stringify-2.1.0.tgz#27c76539be14d8bd128219a2d731b09337904e79"
@@ -5244,6 +5259,11 @@ jest-worker@^25.4.0:
     merge-stream "^2.0.0"
     supports-color "^7.0.0"
 
+jmespath@^0.15.0:
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/jmespath/-/jmespath-0.15.0.tgz#a3f222a9aae9f966f5d27c796510e28091764217"
+  integrity sha1-o/Iiqarp+Wb10nx5ZRDigJF2Qhc=
+
 js-message@1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/js-message/-/js-message-1.0.7.tgz#fbddd053c7a47021871bb8b2c95397cc17c20e47"
@@ -5314,6 +5334,11 @@ json-schema@0.2.3:
   resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
   integrity sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=
 
+json-source-map@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/json-source-map/-/json-source-map-0.6.1.tgz#e0b1f6f4ce13a9ad57e2ae165a24d06e62c79a0f"
+  integrity sha512-1QoztHPsMQqhDq0hlXY5ZqcEdUzxQEIxgFkKl4WUp2pgShObl+9ovi4kRh2TfvAfxAoHOJ9vIMEqk3k4iex7tg==
+
 json-stable-stringify-without-jsonify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
@@ -5355,6 +5380,21 @@ json5@^2.1.2:
   dependencies:
     minimist "^1.2.5"
 
+jsoneditor@^9.1.1:
+  version "9.4.1"
+  resolved "https://registry.yarnpkg.com/jsoneditor/-/jsoneditor-9.4.1.tgz#cebd6cefc74ae3c8354b6d84c4e86d4e78fea0b9"
+  integrity sha512-Uf/ru12Y4eRo4xoYaFjpbB13fIXVUQG6GZO21i3yhlfKL389HLV8e8El77grup01IRdtcoB01P8rZTY4d6uXjA==
+  dependencies:
+    ace-builds "^1.4.12"
+    ajv "^6.12.6"
+    javascript-natural-sort "^0.7.1"
+    jmespath "^0.15.0"
+    json-source-map "^0.6.1"
+    jsonrepair "^2.2.0"
+    mobius1-selectr "^2.4.13"
+    picomodal "^3.0.0"
+    vanilla-picker "^2.11.2"
+
 jsonfile@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
@@ -5367,6 +5407,11 @@ jsonify@~0.0.0:
   resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
   integrity sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=
 
+jsonrepair@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/jsonrepair/-/jsonrepair-2.2.0.tgz#3cdaa6fbc9ced360f401cef9c97f1a8caf3470e5"
+  integrity sha512-NyqcDyer9N4OEDwkZZjmSwd17T9tOfvqTSs9GDpbmPp928Rc1Tot7sOTNenIpMaavD3LkAFkDcNcjmxv3Vqvbg==
+
 jsprim@^1.2.2:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
@@ -5874,6 +5919,11 @@ mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.5, mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.5"
 
+mobius1-selectr@^2.4.13:
+  version "2.4.13"
+  resolved "https://registry.yarnpkg.com/mobius1-selectr/-/mobius1-selectr-2.4.13.tgz#0019dfd9f984840d6e40f70683ab3ec78ce3b5df"
+  integrity sha512-Mk9qDrvU44UUL0EBhbAA1phfQZ7aMZPjwtL7wkpiBzGh8dETGqfsh50mWoX9EkjDlkONlErWXArHCKfoxVg0Bw==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -6553,6 +6603,11 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.3.tgz#465547f359ccc206d3c48e46a1bcb89bf7ee619d"
   integrity sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg==
 
+picomodal@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/picomodal/-/picomodal-3.0.0.tgz#facd30f4fbf34a809c1e04ea525f004f399c0b82"
+  integrity sha1-+s0w9PvzSoCcHgTqUl8ATzmcC4I=
+
 pify@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -8662,6 +8717,13 @@ uuid@^3.3.2, uuid@^3.4.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
+v-jsoneditor@^1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/v-jsoneditor/-/v-jsoneditor-1.4.2.tgz#2a877fb3ed137732f8e6269b99b32758bd304ad0"
+  integrity sha512-cLY/41uD7+1fJGpbs7HPwBv20UHlNpi8A6zhI9t5lVGLgQ/7lK5pLsZeLAz+4ybOXXK091HDgdB/wEnCTYMFFw==
+  dependencies:
+    jsoneditor "^9.1.1"
+
 v-tooltip@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/v-tooltip/-/v-tooltip-2.1.3.tgz#281c2015d1e73787f13c8956aa295b8c3a73f261"
@@ -8685,6 +8747,13 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+vanilla-picker@^2.11.2:
+  version "2.11.2"
+  resolved "https://registry.yarnpkg.com/vanilla-picker/-/vanilla-picker-2.11.2.tgz#eaa24efa68c27e7ee9e0776df55d6913b855f133"
+  integrity sha512-2cP7LlUnxHxwOf06ReUVtd2RFJMnJGaxN2s0p8wzBH3In5b00Le7fFZ9VrIoBE0svZkSq/BC/Pwq/k/9n+AA2g==
+  dependencies:
+    "@sphinxxxx/color-conversion" "^2.2.2"
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"

From 25dc8cc4ea06d9b99ea66e7b12d7e6a0f28ce453 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 16 May 2021 21:17:32 +0100
Subject: [PATCH 06/10] =?UTF-8?q?You=20can=20now=20edit=20sections=20and?=
 =?UTF-8?q?=20items=20from=20the=20UI=20=F0=9F=A4=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Configuration/ConfigContainer.vue         | 13 ++--
 src/components/Configuration/JsonEditor.vue   | 77 +++++++++++++++++++
 src/components/Configuration/RawEditor.vue    | 40 ----------
 src/styles/color-palette.scss                 |  6 +-
 src/styles/global-styles.scss                 |  2 +-
 src/views/Home.vue                            |  5 +-
 6 files changed, 92 insertions(+), 51 deletions(-)
 create mode 100644 src/components/Configuration/JsonEditor.vue
 delete mode 100644 src/components/Configuration/RawEditor.vue

diff --git a/src/components/Configuration/ConfigContainer.vue b/src/components/Configuration/ConfigContainer.vue
index 129cd29eca..fae477eaf1 100644
--- a/src/components/Configuration/ConfigContainer.vue
+++ b/src/components/Configuration/ConfigContainer.vue
@@ -1,12 +1,9 @@
 <template>
   <Tabs>
-    <TabItem name="Edit">
-      <div class="first-tab">Todo</div>
+    <TabItem name="Config Editor">
+         <JsonEditor :sections="sections" />
     </TabItem>
-    <TabItem name="Raw Editor">
-         <RawEditor :sections="sections" />
-    </TabItem>
-    <TabItem name="Download">
+    <TabItem name="View/ Save YAML">
         <pre>{{this.jsonParser(this.sections)}}</pre>
     </TabItem>
     <TabItem name="Add Item">
@@ -19,7 +16,7 @@
 
 import JsonToYaml from '@/utils/JsonToYaml';
 import AddItem from '@/components/Configuration/AddItem';
-import RawEditor from '@/components/Configuration/RawEditor';
+import JsonEditor from '@/components/Configuration/JsonEditor';
 
 export default {
   name: 'ConfigContainer',
@@ -33,7 +30,7 @@ export default {
   },
   components: {
     AddItem,
-    RawEditor,
+    JsonEditor,
   },
 };
 </script>
diff --git a/src/components/Configuration/JsonEditor.vue b/src/components/Configuration/JsonEditor.vue
new file mode 100644
index 0000000000..ba2c85aba2
--- /dev/null
+++ b/src/components/Configuration/JsonEditor.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="json-editor-outer">
+    <v-jsoneditor
+      v-model="jsonData"
+      :options="options"
+      height="650px"
+    />
+    <button class="save-button" @click="save()">Save Changes</button>
+
+  </div>
+</template>
+
+<script>
+
+import VJsoneditor from 'v-jsoneditor';
+import { localStorageKeys } from '@/utils/defaults';
+
+export default {
+  name: 'JsonEditor',
+  props: {
+    sections: Array,
+  },
+  components: {
+    VJsoneditor,
+  },
+  data() {
+    return {
+      jsonData: this.sections,
+      options: {
+        mode: 'tree',
+        modes: ['tree', 'code', 'preview'],
+        name: 'sections',
+      },
+    };
+  },
+  methods: {
+    save() {
+      localStorage.setItem(localStorageKeys.CONF_SECTIONS, JSON.stringify(this.jsonData));
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+
+.json-editor-outer {
+  text-align: center;
+}
+
+button.save-button {
+  padding:  0.5rem 1rem;
+  margin: 0.25rem auto;
+  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);
+  cursor: pointer;
+  &:hover {
+    background: var(--config-settings-color);
+    color: var(--config-settings-background);
+  }
+}
+
+.jsoneditor-menu {
+  background: var(--config-settings-background);
+  color: var(--config-settings-color);
+}
+
+.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected,
+.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:focus,
+.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:hover {
+  background: var(--config-settings-background);
+  color: var(--config-settings-color);
+}
+
+</style>
diff --git a/src/components/Configuration/RawEditor.vue b/src/components/Configuration/RawEditor.vue
deleted file mode 100644
index 7a1fcdb957..0000000000
--- a/src/components/Configuration/RawEditor.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <div>
-    <v-jsoneditor
-      v-model="json"
-      :options="options"
-      :plus="false"
-      height="650px"
-      @error="onError"
-    />
-  </div>
-</template>
-
-<script>
-
-import VJsoneditor from 'v-jsoneditor';
-
-export default {
-  name: 'RawEditor',
-  props: {
-    sections: Array,
-  },
-  components: {
-    VJsoneditor,
-  },
-  data() {
-    return {
-      json: this.sections,
-    };
-  },
-  methods: {
-    onError() {
-      console.log('error');
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-
-</style>
diff --git a/src/styles/color-palette.scss b/src/styles/color-palette.scss
index d340cc637c..8d122999f6 100644
--- a/src/styles/color-palette.scss
+++ b/src/styles/color-palette.scss
@@ -31,7 +31,9 @@
   --item-group-shadow: var(--item-shadow);
   --settings-container-shadow: none;
 
-  /* Specific components, using variables allows them to be overridden individually */
+  /* Color variables for specific components
+  * all variables are optional, since they inherit initial values from above*
+  * Using specific variables makes overriding for custom themes really easy */
   --heading-text-color: var(--primary);
   --nav-link-text-color: var(--primary);
   --nav-link-background-color: #607d8b33;
@@ -53,4 +55,6 @@
   --welcome-popup-text-color: var(--primary);
   --config-code-background: #fff;
   --config-code-color: var(--background);
+  --config-settings-color: var(--background);
+  --config-settings-background: var(--primary);
 }
diff --git a/src/styles/global-styles.scss b/src/styles/global-styles.scss
index 6259a9f209..ded7498667 100644
--- a/src/styles/global-styles.scss
+++ b/src/styles/global-styles.scss
@@ -11,7 +11,7 @@ html {
 }
 
 /* Default app font face */
-body, div, p, a, span, label, input {
+body, div, p, a, span, label, input, button {
     font-family: 'Inconsolata', sans-serif;
 }
 
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 7add7de0d7..f425233d77 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -84,7 +84,10 @@ export default {
     getSections(sections) {
       // If the user has stored sections in local storage, return those
       const localSections = localStorage[localStorageKeys.CONF_SECTIONS];
-      if (localSections && localSections.length >= 1) return localSections;
+      if (localSections) {
+        const json = JSON.parse(localSections);
+        if (json.length >= 1) return json;
+      }
       // Otherwise, return the usuall data from conf.yml
       return sections;
     },

From 8064a46b3957b55048ea4feb5c052823ff464ef6 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Mon, 17 May 2021 18:53:35 +0100
Subject: [PATCH 07/10] Adds menu to Config popup, adds delete and download
 functionality

---
 README.md                                     |   1 +
 .../interface-icons/config-delete-local.svg   |   1 +
 .../interface-icons/config-download-file.svg  |   1 +
 .../interface-icons/config-edit-json.svg      |   1 +
 .../Configuration/ConfigContainer.vue         | 115 +++++++++++++++++-
 src/components/Configuration/JsonEditor.vue   |  29 +++--
 src/components/Settings/ConfigLauncher.vue    |  12 +-
 src/components/Settings/SettingsContainer.vue |   5 +-
 src/router.js                                 |   8 +-
 src/styles/color-palette.scss                 |   4 +-
 src/utils/defaults.js                         |   5 +
 src/views/Home.vue                            |   4 +-
 12 files changed, 162 insertions(+), 24 deletions(-)
 create mode 100644 src/assets/interface-icons/config-delete-local.svg
 create mode 100644 src/assets/interface-icons/config-download-file.svg
 create mode 100644 src/assets/interface-icons/config-edit-json.svg

diff --git a/README.md b/README.md
index 42fbf55ceb..6d8856e302 100644
--- a/README.md
+++ b/README.md
@@ -170,6 +170,7 @@ It makes use of the following components, kudos to their respective authors
 - [`v-tooltip`](https://github.com/Akryum/v-tooltip) - Tooltip component by @Akryum
 - [`vue-material-tabs`](https://github.com/jairoblatt/vue-material-tabs) - Tab view component by @jairoblatt
 - [`VJsoneditor`](https://github.com/yansenlei/VJsoneditor) - Interactive JSON editor component by @yansenlei
+  - Forked from [JsonEditor](https://github.com/josdejong/jsoneditor) by @josdejong
 
 ### License 📜
 
diff --git a/src/assets/interface-icons/config-delete-local.svg b/src/assets/interface-icons/config-delete-local.svg
new file mode 100644
index 0000000000..500af9cb82
--- /dev/null
+++ b/src/assets/interface-icons/config-delete-local.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="trash-alt" class="svg-inline--fa fa-trash-alt fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M268 416h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12zM432 80h-82.41l-34-56.7A48 48 0 0 0 274.41 0H173.59a48 48 0 0 0-41.16 23.3L98.41 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16v336a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM171.84 50.91A6 6 0 0 1 177 48h94a6 6 0 0 1 5.15 2.91L293.61 80H154.39zM368 464H80V128h288zm-212-48h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12z"></path></svg>
\ No newline at end of file
diff --git a/src/assets/interface-icons/config-download-file.svg b/src/assets/interface-icons/config-download-file.svg
new file mode 100644
index 0000000000..d1f7f041cb
--- /dev/null
+++ b/src/assets/interface-icons/config-download-file.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="file-download" class="svg-inline--fa fa-file-download fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M216 236.07c0-6.63-5.37-12-12-12h-24c-6.63 0-12 5.37-12 12v84.01h-48.88c-10.71 0-16.05 12.97-8.45 20.52l72.31 71.77c4.99 4.95 13.04 4.95 18.03 0l72.31-71.77c7.6-7.54 2.26-20.52-8.45-20.52H216v-84.01zM369.83 97.98L285.94 14.1c-9-9-21.2-14.1-33.89-14.1H47.99C21.5.1 0 21.6 0 48.09v415.92C0 490.5 21.5 512 47.99 512h287.94c26.5 0 48.07-21.5 48.07-47.99V131.97c0-12.69-5.17-24.99-14.17-33.99zM255.95 51.99l76.09 76.08h-76.09V51.99zM336 464.01H47.99V48.09h159.97v103.98c0 13.3 10.7 23.99 24 23.99H336v287.95z"></path></svg>
\ No newline at end of file
diff --git a/src/assets/interface-icons/config-edit-json.svg b/src/assets/interface-icons/config-edit-json.svg
new file mode 100644
index 0000000000..6f92bb5d0e
--- /dev/null
+++ b/src/assets/interface-icons/config-edit-json.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="edit" class="svg-inline--fa fa-edit fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"></path></svg>
\ No newline at end of file
diff --git a/src/components/Configuration/ConfigContainer.vue b/src/components/Configuration/ConfigContainer.vue
index fae477eaf1..d758708240 100644
--- a/src/components/Configuration/ConfigContainer.vue
+++ b/src/components/Configuration/ConfigContainer.vue
@@ -1,13 +1,33 @@
 <template>
-  <Tabs>
-    <TabItem name="Config Editor">
-         <JsonEditor :sections="sections" />
+  <Tabs :navAuto="true" name="Add Item" ref="tabView">
+    <TabItem name="Config">
+      <div class="main-options-container">
+        <h2>Configuration Options</h2>
+        <a href="/conf.yml" download class="hyperlink-wrapper">
+          <button class="config-button center">
+          <DownloadIcon class="button-icon"/>
+          Download Config
+          </button>
+        </a>
+        <button class="config-button center" @click="goToEdit()">
+          <EditIcon class="button-icon"/>
+          Edit Sections
+        </button>
+        <button class="config-button center" @click="resetLocalSettings()">
+          <DeleteIcon class="button-icon"/>
+          Reset Local Settings
+        </button>
+      </div>
     </TabItem>
-    <TabItem name="View/ Save YAML">
-        <pre>{{this.jsonParser(this.sections)}}</pre>
+    <TabItem name="Edit Sections">
+      <JsonEditor :sections="sections" />
+    </TabItem>
+    <TabItem name="View Raw YAML">
+      <pre>{{this.jsonParser(this.config)}}</pre>
+      <a class="download-button" href="/conf.yml" download>Download Config</a>
     </TabItem>
     <TabItem name="Add Item">
-        <AddItem :sections="sections" />
+      <AddItem :sections="sections" />
     </TabItem>
   </Tabs>
 </template>
@@ -17,6 +37,9 @@
 import JsonToYaml from '@/utils/JsonToYaml';
 import AddItem from '@/components/Configuration/AddItem';
 import JsonEditor from '@/components/Configuration/JsonEditor';
+import DownloadIcon from '@/assets/interface-icons/config-download-file.svg';
+import DeleteIcon from '@/assets/interface-icons/config-delete-local.svg';
+import EditIcon from '@/assets/interface-icons/config-edit-json.svg';
 
 export default {
   name: 'ConfigContainer',
@@ -27,10 +50,28 @@ export default {
   },
   props: {
     sections: Array,
+    config: Object,
   },
   components: {
     AddItem,
     JsonEditor,
+    DownloadIcon,
+    DeleteIcon,
+    EditIcon,
+  },
+  methods: {
+    goToEdit() {
+      const itemToSelect = this.$refs.tabView.navItems[1];
+      this.$refs.tabView.activeTabItem({ tabItem: itemToSelect, byUser: true });
+    },
+    resetLocalSettings() {
+      /* eslint-disable no-alert, no-restricted-globals */
+      const isTheUserSure = confirm('Are you sure?');
+      if (isTheUserSure) {
+        localStorage.clear();
+      }
+      /* eslint-enable no-alert, no-restricted-globals */
+    },
   },
 };
 </script>
@@ -42,7 +83,69 @@ pre {
   background: var(--config-code-background);
 }
 
+a.config-button, button.config-button {
+  display: flex;
+  align-items: center;
+  padding:  0.5rem 1rem;
+  margin: 0.25rem auto;
+  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;
+  width: 18rem;
+  svg.button-icon {
+    path {
+      fill: var(--config-settings-color);
+    }
+    width: 1rem;
+    height: 1rem;
+    padding: 0.2rem;
+  }
+  &:hover {
+    background: var(--config-settings-color);
+    color: var(--config-settings-background);
+    svg path {
+      fill: var(--config-settings-background);
+    }
+  }
+}
+
+a.download-button {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  padding:  0.25rem 0.5rem;
+  font-size: 1rem;
+  color: var(--config-settings-background);
+  border-radius: var(--curve-factor);
+  cursor: pointer;
+  &:hover {
+    background: var(--config-settings-color);
+  }
+}
+
 .tab-item {
   overflow-y: auto;
 }
+
+a.hyperlink-wrapper {
+  margin: 0 auto;
+  text-decoration: none;
+}
+
+.main-options-container {
+  display: flex;
+  flex-direction: column;
+  padding-top: 2rem;
+  background: var(--background-darker);
+  height: calc(100% - 2rem);
+  h2 {
+    margin: 1rem auto;
+  }
+}
+
 </style>
diff --git a/src/components/Configuration/JsonEditor.vue b/src/components/Configuration/JsonEditor.vue
index ba2c85aba2..7b180c1d73 100644
--- a/src/components/Configuration/JsonEditor.vue
+++ b/src/components/Configuration/JsonEditor.vue
@@ -6,7 +6,9 @@
       height="650px"
     />
     <button class="save-button" @click="save()">Save Changes</button>
-
+    <p class="note">
+      It is recommend to backup your existing confiruration before making any changes.
+    </p>
   </div>
 </template>
 
@@ -46,32 +48,37 @@ export default {
 .json-editor-outer {
   text-align: center;
 }
-
+p.note {
+  font-size: 0.8rem;
+  color: var(--medium-grey);
+  margin: 0.2rem;
+}
 button.save-button {
   padding:  0.5rem 1rem;
   margin: 0.25rem auto;
   font-size: 1.2rem;
-  background: var(--config-settings-background);
-  color: var(--config-settings-color);
-  border: 1px solid var(--config-settings-color);
+  background: var(--config-settings-color);
+  color: var(--config-settings-background);
+  border: 1px solid var(--config-settings-background);
   border-radius: var(--curve-factor);
   cursor: pointer;
   &:hover {
-    background: var(--config-settings-color);
-    color: var(--config-settings-background);
+    background: var(--config-settings-background);
+    color: var(--config-settings-color);
   }
 }
 
 .jsoneditor-menu {
-  background: var(--config-settings-background);
-  color: var(--config-settings-color);
+  background: var(--config-settings-color);
+  color: var(--config-settings-background);
 }
-
 .jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected,
 .jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:focus,
 .jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:hover {
   background: var(--config-settings-background);
   color: var(--config-settings-color);
 }
-
+.jsoneditor-poweredBy {
+  display: none;
+}
 </style>
diff --git a/src/components/Settings/ConfigLauncher.vue b/src/components/Settings/ConfigLauncher.vue
index a0362f6556..7b98b855ab 100644
--- a/src/components/Settings/ConfigLauncher.vue
+++ b/src/components/Settings/ConfigLauncher.vue
@@ -9,7 +9,7 @@
     <!-- Modal containing all the configuration options -->
     <modal :name="modalName" :resizable="true" width="80%" height="80%"
       @closed="$emit('modalChanged', false)">
-      <ConfigContainer :sections="sections" />
+      <ConfigContainer :sections="sections" :config="combineConfig()" />
     </modal>
   </div>
 </template>
@@ -18,6 +18,7 @@
 
 import IconSpanner from '@/assets/interface-icons/config-editor.svg';
 import ConfigContainer from '@/components/Configuration/ConfigContainer';
+import { topLevelConfKeys } from '@/utils/defaults';
 
 export default {
   name: 'ConfigLauncher',
@@ -32,12 +33,21 @@ export default {
   },
   props: {
     sections: Array,
+    pageInfo: Object,
+    appConfig: Object,
   },
   methods: {
     showEditor: function show() {
       this.$modal.show(this.modalName);
       this.$emit('modalChanged', true);
     },
+    combineConfig() {
+      const conf = {};
+      conf[topLevelConfKeys.APP_CONFIG] = this.appConfig;
+      conf[topLevelConfKeys.PAGE_INFO] = this.pageInfo;
+      conf[topLevelConfKeys.SECTIONS] = this.sections;
+      return conf;
+    },
     updateConfig() {
       // this.$emit('iconSizeUpdated', iconSize);
     },
diff --git a/src/components/Settings/SettingsContainer.vue b/src/components/Settings/SettingsContainer.vue
index c7f56461ec..d0df71bb85 100644
--- a/src/components/Settings/SettingsContainer.vue
+++ b/src/components/Settings/SettingsContainer.vue
@@ -10,7 +10,8 @@
         :confTheme="getInitialTheme()" :userThemes="getUserThemes()" />
       <LayoutSelector :displayLayout="displayLayout" @layoutUpdated="updateDisplayLayout"/>
       <ItemSizeSelector :iconSize="iconSize" @iconSizeUpdated="updateIconSize" />
-      <ConfigLauncher :sections="sections" @modalChanged="modalChanged" />
+      <ConfigLauncher :sections="sections" :pageInfo="pageInfo" :appConfig="appConfig"
+        @modalChanged="modalChanged" />
     </div>
     <KeyboardShortcutInfo />
   </section>
@@ -32,6 +33,7 @@ export default {
     iconSize: String,
     availableThemes: Object,
     appConfig: Object,
+    pageInfo: Object,
     sections: Array,
     modalOpen: Boolean,
   },
@@ -101,6 +103,7 @@ export default {
     div {
       margin-left: 0.5rem;
       opacity: var(--dimming-factor);
+      opacity: 1;
       &:hover { opacity: 1; }
     }
   }
diff --git a/src/router.js b/src/router.js
index b79b539eb7..71589d5415 100644
--- a/src/router.js
+++ b/src/router.js
@@ -2,9 +2,12 @@ import Vue from 'vue';
 import Router from 'vue-router';
 import Home from './views/Home.vue';
 import conf from '../public/conf.yml'; // Main site configuration
+import { pageInfo as defaultPageInfo } from './utils/defaults';
 
 Vue.use(Router);
 
+const { sections, pageInfo, appConfig } = conf;
+
 const router = new Router({
   routes: [
     {
@@ -12,8 +15,9 @@ const router = new Router({
       name: 'home',
       component: Home,
       props: {
-        sections: conf.sections || [],
-        appConfig: conf.appConfig || {},
+        sections: sections || [],
+        pageInfo: pageInfo || defaultPageInfo,
+        appConfig: appConfig || {},
       },
       meta: {
         title: 'Home Page',
diff --git a/src/styles/color-palette.scss b/src/styles/color-palette.scss
index 8d122999f6..eac8399d9a 100644
--- a/src/styles/color-palette.scss
+++ b/src/styles/color-palette.scss
@@ -55,6 +55,6 @@
   --welcome-popup-text-color: var(--primary);
   --config-code-background: #fff;
   --config-code-color: var(--background);
-  --config-settings-color: var(--background);
-  --config-settings-background: var(--primary);
+  --config-settings-color: var(--primary);
+  --config-settings-background: var(--background-darker);
 }
diff --git a/src/utils/defaults.js b/src/utils/defaults.js
index bb4cbc85db..270de61413 100644
--- a/src/utils/defaults.js
+++ b/src/utils/defaults.js
@@ -46,4 +46,9 @@ module.exports = {
     THEME: 'theme',
     CONF_SECTIONS: 'confSections',
   },
+  topLevelConfKeys: {
+    PAGE_INFO: 'pageInfo',
+    APP_CONFIG: 'appConfig',
+    SECTIONS: 'sections',
+  },
 };
diff --git a/src/views/Home.vue b/src/views/Home.vue
index f425233d77..63e6e69688 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -9,8 +9,9 @@
       :displayLayout="layout"
       :iconSize="itemSizeBound"
       :availableThemes="getExternalCSSLinks()"
-      :appConfig="appConfig"
       :sections="getSections(sections)"
+      :appConfig="appConfig"
+      :pageInfo="pageInfo"
       :modalOpen="modalOpen"
       class="filter-container"
     />
@@ -47,6 +48,7 @@ export default {
   props: {
     sections: Array, // Main site content
     appConfig: Object, // Main site configuation (optional)
+    pageInfo: Object, // Page metadata (optional)
   },
   components: {
     SettingsContainer,

From ce851b2f0c65a78f26016d19159339259ec6ad1b Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Mon, 17 May 2021 19:38:18 +0100
Subject: [PATCH 08/10] Shows toast on success, and other UX improvments

---
 README.md                                     |  3 ++-
 package.json                                  |  3 ++-
 .../Configuration/ConfigContainer.vue         | 21 +++++++++++++------
 .../{AddItem.vue => EditSiteMeta.vue}         |  2 +-
 src/components/Configuration/JsonEditor.vue   |  9 ++++----
 src/main.js                                   |  3 +++
 src/styles/color-palette.scss                 |  2 ++
 src/styles/color-themes.scss                  |  2 ++
 src/styles/global-styles.scss                 |  9 ++++++++
 src/utils/defaults.js                         |  7 +++++++
 yarn.lock                                     |  5 +++++
 11 files changed, 53 insertions(+), 13 deletions(-)
 rename src/components/Configuration/{AddItem.vue => EditSiteMeta.vue} (86%)

diff --git a/README.md b/README.md
index 6d8856e302..5b2ed3c91e 100644
--- a/README.md
+++ b/README.md
@@ -164,13 +164,14 @@ There are a few self-hosted web apps, that serve a similar purpose to Dashy. Inc
 
 And the app itself is built with [Vue.js](https://github.com/vuejs/vue) ![vue-logo](https://i.ibb.co/xqKW6h5/vue-logo.png)
 
-It makes use of the following components, kudos to their respective authors
+And wouldn't have been quite possible, without the following components, kudos to their respective authors
 - [`vue-select`](https://github.com/sagalbot/vue-select) - Dropdown component by @sagalbot
 - [`vue-js-modal`](https://github.com/euvl/vue-js-modal) - Modal component by @euvl
 - [`v-tooltip`](https://github.com/Akryum/v-tooltip) - Tooltip component by @Akryum
 - [`vue-material-tabs`](https://github.com/jairoblatt/vue-material-tabs) - Tab view component by @jairoblatt
 - [`VJsoneditor`](https://github.com/yansenlei/VJsoneditor) - Interactive JSON editor component by @yansenlei
   - Forked from [JsonEditor](https://github.com/josdejong/jsoneditor) by @josdejong
+- [`vue-toasted`](https://github.com/shakee93/vue-toasted) - Toast notification component by @shakee93
 
 ### License 📜
 
diff --git a/package.json b/package.json
index 368bb4efba..316dfcee15 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,8 @@
     "vue-js-modal": "^2.0.0-rc.6",
     "vue-material-tabs": "^0.0.7",
     "vue-router": "^3.0.3",
-    "vue-select": "^3.11.2"
+    "vue-select": "^3.11.2",
+    "vue-toasted": "^1.1.28"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.5.12",
diff --git a/src/components/Configuration/ConfigContainer.vue b/src/components/Configuration/ConfigContainer.vue
index d758708240..f39d794fa0 100644
--- a/src/components/Configuration/ConfigContainer.vue
+++ b/src/components/Configuration/ConfigContainer.vue
@@ -27,7 +27,7 @@
       <a class="download-button" href="/conf.yml" download>Download Config</a>
     </TabItem>
     <TabItem name="Add Item">
-      <AddItem :sections="sections" />
+      <EditSiteMeta :sections="sections" />
     </TabItem>
   </Tabs>
 </template>
@@ -35,7 +35,7 @@
 <script>
 
 import JsonToYaml from '@/utils/JsonToYaml';
-import AddItem from '@/components/Configuration/AddItem';
+import EditSiteMeta from '@/components/Configuration/EditSiteMeta';
 import JsonEditor from '@/components/Configuration/JsonEditor';
 import DownloadIcon from '@/assets/interface-icons/config-download-file.svg';
 import DeleteIcon from '@/assets/interface-icons/config-delete-local.svg';
@@ -53,24 +53,32 @@ export default {
     config: Object,
   },
   components: {
-    AddItem,
+    EditSiteMeta,
     JsonEditor,
     DownloadIcon,
     DeleteIcon,
     EditIcon,
   },
   methods: {
+    /* Seletcs the edit tab of the tab view */
     goToEdit() {
       const itemToSelect = this.$refs.tabView.navItems[1];
       this.$refs.tabView.activeTabItem({ tabItem: itemToSelect, byUser: true });
     },
+    /* Checks that the user is sure, then resets site-wide local storage, and reloads page */
     resetLocalSettings() {
-      /* eslint-disable no-alert, no-restricted-globals */
-      const isTheUserSure = confirm('Are you sure?');
+      const msg = 'This will remove all user settings from local storage, '
+          + 'but won\'t effect your \'conf.yml\' file. '
+          + 'It is recommend to make a backup of your modified YAML settings first.\n\n'
+          + 'Are you sure you want to proceed?';
+      const isTheUserSure = confirm(msg); // eslint-disable-line no-alert, no-restricted-globals
       if (isTheUserSure) {
         localStorage.clear();
+        this.$toasted.show('Data cleared succesfully');
+        setTimeout(() => {
+          location.reload(); // eslint-disable-line no-restricted-globals
+        }, 1900);
       }
-      /* eslint-enable no-alert, no-restricted-globals */
     },
   },
 };
@@ -145,6 +153,7 @@ a.hyperlink-wrapper {
   height: calc(100% - 2rem);
   h2 {
     margin: 1rem auto;
+    color: var(--config-settings-color);
   }
 }
 
diff --git a/src/components/Configuration/AddItem.vue b/src/components/Configuration/EditSiteMeta.vue
similarity index 86%
rename from src/components/Configuration/AddItem.vue
rename to src/components/Configuration/EditSiteMeta.vue
index 782cc9cc13..10891eb96f 100644
--- a/src/components/Configuration/AddItem.vue
+++ b/src/components/Configuration/EditSiteMeta.vue
@@ -7,7 +7,7 @@
 <script>
 
 export default {
-  name: 'AddItem',
+  name: 'EditSiteMeta',
   props: {
     sections: Array,
   },
diff --git a/src/components/Configuration/JsonEditor.vue b/src/components/Configuration/JsonEditor.vue
index 7b180c1d73..62fdab75c9 100644
--- a/src/components/Configuration/JsonEditor.vue
+++ b/src/components/Configuration/JsonEditor.vue
@@ -38,6 +38,7 @@ export default {
   methods: {
     save() {
       localStorage.setItem(localStorageKeys.CONF_SECTIONS, JSON.stringify(this.jsonData));
+      this.$toasted.show('Changes seved succesfully');
     },
   },
 };
@@ -69,14 +70,14 @@ button.save-button {
 }
 
 .jsoneditor-menu {
-  background: var(--config-settings-color);
-  color: var(--config-settings-background);
+  background: var(--config-settings-background);
+  color: var(--config-settings-color);
 }
 .jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected,
 .jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:focus,
 .jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:hover {
-  background: var(--config-settings-background);
-  color: var(--config-settings-color);
+  background: var(--config-settings-color);
+  color: var(--config-settings-background);
 }
 .jsoneditor-poweredBy {
   display: none;
diff --git a/src/main.js b/src/main.js
index 7ccb802df8..f6828001dc 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,7 +4,9 @@ import VTooltip from 'v-tooltip'; // A Vue directive for Popper.js, tooltip comp
 import VModal from 'vue-js-modal'; // Modal component
 import VSelect from 'vue-select'; // Select dropdown component
 import VTabs from 'vue-material-tabs'; // Tab view component, used on the config page
+import Toasted from 'vue-toasted'; // Toast component, used to show confirmation notifications
 
+import { toastedOptions } from './utils/defaults';
 import App from './App.vue';
 import router from './router';
 import './registerServiceWorker';
@@ -12,6 +14,7 @@ import './registerServiceWorker';
 Vue.use(VTooltip);
 Vue.use(VModal);
 Vue.use(VTabs);
+Vue.use(Toasted, toastedOptions);
 Vue.component('v-select', VSelect);
 
 Vue.config.productionTip = false;
diff --git a/src/styles/color-palette.scss b/src/styles/color-palette.scss
index eac8399d9a..6e65c3a6e9 100644
--- a/src/styles/color-palette.scss
+++ b/src/styles/color-palette.scss
@@ -57,4 +57,6 @@
   --config-code-color: var(--background);
   --config-settings-color: var(--primary);
   --config-settings-background: var(--background-darker);
+  --toast-background: var(--primary);
+  --toast-color: var(--background);
 }
diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss
index 1565e26025..8b345838cc 100644
--- a/src/styles/color-themes.scss
+++ b/src/styles/color-themes.scss
@@ -176,6 +176,8 @@ html[data-theme='material-dark'] {
   --item-icon-transform-hover: drop-shadow(1px 3px 2px var(--transparent-30)) saturate(2);
   --welcome-popup-background: #131a1f;
   --welcome-popup-text-color: var(--primary);
+  --config-settings-background: #131a1f;
+  --config-settings-color: #41e2ed;
 }
 
 html[data-theme='colorful'] {
diff --git a/src/styles/global-styles.scss b/src/styles/global-styles.scss
index ded7498667..eff1b4157d 100644
--- a/src/styles/global-styles.scss
+++ b/src/styles/global-styles.scss
@@ -20,4 +20,13 @@ h1, h2, h3, h4, h5 {
     font-family: 'Inconsolata', sans-serif;
 }
 
+/* Overiding styles for the global toast component */
+.toast-message {
+    background: var(--toast-background) !important;
+    color: var(--toast-color) !important;
+    border: 1px solid var(--toast-color) !important;
+    border-radius: var(--curve-factor) !important;
+    font-size: 1.25rem !important;
+}
+
 
diff --git a/src/utils/defaults.js b/src/utils/defaults.js
index 270de61413..f3affe7d45 100644
--- a/src/utils/defaults.js
+++ b/src/utils/defaults.js
@@ -51,4 +51,11 @@ module.exports = {
     APP_CONFIG: 'appConfig',
     SECTIONS: 'sections',
   },
+  toastedOptions: {
+    position: 'bottom-center',
+    duration: 2000,
+    keepOnHover: true,
+    className: 'toast-message',
+    iconPack: 'fontawesome',
+  },
 };
diff --git a/yarn.lock b/yarn.lock
index 2944b93886..603f1a5e2c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8881,6 +8881,11 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vue-toasted@^1.1.28:
+  version "1.1.28"
+  resolved "https://registry.yarnpkg.com/vue-toasted/-/vue-toasted-1.1.28.tgz#dbabb83acc89f7a9e8765815e491d79f0dc65c26"
+  integrity sha512-UUzr5LX51UbbiROSGZ49GOgSzFxaMHK6L00JV8fir/CYNJCpIIvNZ5YmS4Qc8Y2+Z/4VVYRpeQL2UO0G800Raw==
+
 vue@^2.6.10:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"

From 062f48a6ef6f47028ba0600afb88e283ea062647 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Mon, 17 May 2021 20:48:42 +0100
Subject: [PATCH 09/10] Almost finished form that lets user set PageInfo

---
 src/App.vue                                   |  7 +-
 .../interface-icons/config-meta-data.svg      |  1 +
 .../Configuration/ConfigContainer.vue         | 50 +++++++++-
 src/components/Configuration/EditSiteMeta.vue | 97 ++++++++++++++++++-
 src/components/Settings/ConfigLauncher.vue    |  9 +-
 src/components/Settings/SearchBar.vue         |  2 +-
 src/utils/defaults.js                         |  2 +
 7 files changed, 156 insertions(+), 12 deletions(-)
 create mode 100644 src/assets/interface-icons/config-meta-data.svg

diff --git a/src/App.vue b/src/App.vue
index 9cea620195..0ab0caa854 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,7 +9,7 @@
 
 import Header from '@/components/PageStrcture/Header.vue';
 import Footer from '@/components/PageStrcture/Footer.vue';
-import Defaults from '@/utils/defaults';
+import Defaults, { localStorageKeys } from '@/utils/defaults';
 import conf from '../public/conf.yml';
 
 export default {
@@ -27,10 +27,11 @@ export default {
     /* Returns either page info from the config, or default values */
     getPageInfo(pageInfo) {
       const defaults = Defaults.pageInfo;
+      const localPageInfo = JSON.parse(localStorage[localStorageKeys.PAGE_INFO]);
       if (pageInfo) {
         return {
-          title: pageInfo.title || defaults.title,
-          description: pageInfo.description || defaults.description,
+          title: localPageInfo.title || pageInfo.title || defaults.title,
+          description: localPageInfo.description || pageInfo.description || defaults.description,
           navLinks: pageInfo.navLinks || defaults.navLinks,
         };
       }
diff --git a/src/assets/interface-icons/config-meta-data.svg b/src/assets/interface-icons/config-meta-data.svg
new file mode 100644
index 0000000000..9ada371140
--- /dev/null
+++ b/src/assets/interface-icons/config-meta-data.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="digital-tachograph" class="svg-inline--fa fa-digital-tachograph fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M608 96H32c-17.67 0-32 14.33-32 32v256c0 17.67 14.33 32 32 32h576c17.67 0 32-14.33 32-32V128c0-17.67-14.33-32-32-32zm0 288H32V128h576v256zM80 272h208c8.84 0 16-7.16 16-16v-80c0-8.84-7.16-16-16-16H80c-8.84 0-16 7.16-16 16v80c0 8.84 7.16 16 16 16zm8-88h192v64H88v-64zM72 360h224c4.42 0 8-3.58 8-8v-8c0-4.42-3.58-8-8-8H72c-4.42 0-8 3.58-8 8v8c0 4.42 3.58 8 8 8zm272 0h224c4.42 0 8-3.58 8-8v-8c0-4.42-3.58-8-8-8H344c-4.42 0-8 3.58-8 8v8c0 4.42 3.58 8 8 8zM80 288c-4.42 0-8 3.58-8 8v16c0 4.42 3.58 8 8 8h16c4.42 0 8-3.58 8-8v-16c0-4.42-3.58-8-8-8H80zm64 0c-4.42 0-8 3.58-8 8v16c0 4.42 3.58 8 8 8h16c4.42 0 8-3.58 8-8v-16c0-4.42-3.58-8-8-8h-16zm64 0c-4.42 0-8 3.58-8 8v16c0 4.42 3.58 8 8 8h16c4.42 0 8-3.58 8-8v-16c0-4.42-3.58-8-8-8h-16zm64 0c-4.42 0-8 3.58-8 8v16c0 4.42 3.58 8 8 8h16c4.42 0 8-3.58 8-8v-16c0-4.42-3.58-8-8-8h-16z"></path></svg>
\ No newline at end of file
diff --git a/src/components/Configuration/ConfigContainer.vue b/src/components/Configuration/ConfigContainer.vue
index f39d794fa0..6e9c775161 100644
--- a/src/components/Configuration/ConfigContainer.vue
+++ b/src/components/Configuration/ConfigContainer.vue
@@ -13,6 +13,10 @@
           <EditIcon class="button-icon"/>
           Edit Sections
         </button>
+        <button class="config-button center" @click="goToMetaEdit()">
+          <MetaDataIcon class="button-icon"/>
+          Edit Meta Data
+        </button>
         <button class="config-button center" @click="resetLocalSettings()">
           <DeleteIcon class="button-icon"/>
           Reset Local Settings
@@ -26,8 +30,8 @@
       <pre>{{this.jsonParser(this.config)}}</pre>
       <a class="download-button" href="/conf.yml" download>Download Config</a>
     </TabItem>
-    <TabItem name="Add Item">
-      <EditSiteMeta :sections="sections" />
+    <TabItem name="Edit Site Meta">
+      <EditSiteMeta :config="config" />
     </TabItem>
   </Tabs>
 </template>
@@ -40,6 +44,7 @@ import JsonEditor from '@/components/Configuration/JsonEditor';
 import DownloadIcon from '@/assets/interface-icons/config-download-file.svg';
 import DeleteIcon from '@/assets/interface-icons/config-delete-local.svg';
 import EditIcon from '@/assets/interface-icons/config-edit-json.svg';
+import MetaDataIcon from '@/assets/interface-icons/config-meta-data.svg';
 
 export default {
   name: 'ConfigContainer',
@@ -49,15 +54,20 @@ export default {
     };
   },
   props: {
-    sections: Array,
     config: Object,
   },
+  computed: {
+    sections: function getSections() {
+      return this.config.sections;
+    },
+  },
   components: {
     EditSiteMeta,
     JsonEditor,
     DownloadIcon,
     DeleteIcon,
     EditIcon,
+    MetaDataIcon,
   },
   methods: {
     /* Seletcs the edit tab of the tab view */
@@ -65,6 +75,10 @@ export default {
       const itemToSelect = this.$refs.tabView.navItems[1];
       this.$refs.tabView.activeTabItem({ tabItem: itemToSelect, byUser: true });
     },
+    goToMetaEdit() {
+      const itemToSelect = this.$refs.tabView.navItems[3];
+      this.$refs.tabView.activeTabItem({ tabItem: itemToSelect, byUser: true });
+    },
     /* Checks that the user is sure, then resets site-wide local storage, and reloads page */
     resetLocalSettings() {
       const msg = 'This will remove all user settings from local storage, '
@@ -112,6 +126,7 @@ a.config-button, button.config-button {
     width: 1rem;
     height: 1rem;
     padding: 0.2rem;
+    margin-right: 0.5rem;
   }
   &:hover {
     background: var(--config-settings-color);
@@ -156,5 +171,34 @@ a.hyperlink-wrapper {
     color: var(--config-settings-color);
   }
 }
+</style>
 
+<style lang="scss">
+.tab__pagination {
+  background: var(--config-settings-background);
+  color: var(--config-settings-color);
+  .tab__nav__items .tab__nav__item {
+    span {
+      color: var(--config-settings-color);
+    }
+    &:hover {
+      background: var(--config-settings-color) !important;
+      span {
+        color: var(--config-settings-background);
+      }
+    }
+    &.active {
+      span {
+        font-weight: bold;
+        color: var(--config-settings-color) !important;
+      }
+    }
+  }
+  .tab__nav__items .tab__nav__item.active {
+    border-bottom: 2px solid var(--config-settings-color);
+  }
+  hr.tab__slider {
+    background: var(--config-settings-color);
+  }
+}
 </style>
diff --git a/src/components/Configuration/EditSiteMeta.vue b/src/components/Configuration/EditSiteMeta.vue
index 10891eb96f..4ab2f1d8bb 100644
--- a/src/components/Configuration/EditSiteMeta.vue
+++ b/src/components/Configuration/EditSiteMeta.vue
@@ -1,19 +1,110 @@
 <template>
-  <div>
-
+  <div class="site-meta-container">
+    <h2>Edit Site Meta</h2>
+    <div class="form">
+      <div class="row">
+        <span>Title</span>
+        <input v-model="formElements.title" />
+      </div>
+      <div class="row">
+        <span>Description</span>
+        <input v-model="formElements.description" />
+      </div>
+      <div class="row">
+        <span>Footer Text</span>
+        <input v-model="formElements.footerText" />
+      </div>
+    </div>
+    <button class="save-button" @click="save()">Save Changes</button>
   </div>
 </template>
 
 <script>
 
+import { localStorageKeys } from '@/utils/defaults';
+
 export default {
   name: 'EditSiteMeta',
   props: {
-    sections: Array,
+    config: Object,
+  },
+  methods: {
+    save() {
+      const pageInfo = { ...this.config.pageInfo };
+      pageInfo.title = this.formElements.title;
+      pageInfo.description = this.formElements.description;
+      pageInfo.footerText = this.formElements.footerText;
+      localStorage.setItem(localStorageKeys.PAGE_INFO, JSON.stringify(pageInfo));
+      this.$toasted.show('Changes seved succesfully');
+    },
+  },
+  data() {
+    return {
+      formElements: {
+        title: this.config.pageInfo.title,
+        description: this.config.pageInfo.description,
+        footerText: this.config.pageInfo.footerText,
+      },
+    };
   },
 };
 </script>
 
 <style scoped lang="scss">
+.site-meta-container {
+  display: flex;
+  flex-direction: column;
+  padding-top: 1rem;
+  background: var(--background-darker);
+  height: calc(100% - 1rem);
+  h2 {
+    margin: 1rem auto;
+    color: var(--config-settings-color);
+  }
+}
+
+div.form {
+  display: flex;
+  flex-direction: column;
+  div.row {
+    margin: 0.25rem auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    min-width: 24rem;
+    span {
+      font-size: 1.2rem;
+    }
+    input {
+      color: var(--config-settings-color);
+      background: none;
+      border: 1px solid var(--config-settings-color);
+      border-radius: var(--curve-factor);
+      padding: 0.25rem 0.5rem;
+      margin: 0.5rem;
+      min-width: 8rem;
+      font-size: 1.2rem;
+      &:focus {
+        box-shadow: 1px 1px 6px #00ccb4;
+        outline: none;
+      }
+    }
+  }
+}
 
+button.save-button {
+  padding:  0.5rem 1rem;
+  margin: 0.5rem auto;
+  font-size: 1.2rem;
+  width: 24rem;
+  background: var(--config-settings-background);
+  color: var(--config-settings-color);
+  border: 1px solid var(--config-settings-color);
+  border-radius: var(--curve-factor);
+  cursor: pointer;
+  &:hover {
+    background: var(--config-settings-color);
+    color: var(--config-settings-background);
+  }
+}
 </style>
diff --git a/src/components/Settings/ConfigLauncher.vue b/src/components/Settings/ConfigLauncher.vue
index 7b98b855ab..79937738b5 100644
--- a/src/components/Settings/ConfigLauncher.vue
+++ b/src/components/Settings/ConfigLauncher.vue
@@ -7,9 +7,9 @@
     </div>
 
     <!-- Modal containing all the configuration options -->
-    <modal :name="modalName" :resizable="true" width="80%" height="80%"
+    <modal :name="modalName" :resizable="true" width="60%" height="80%"
       @closed="$emit('modalChanged', false)">
-      <ConfigContainer :sections="sections" :config="combineConfig()" />
+      <ConfigContainer :config="combineConfig()" />
     </modal>
   </div>
 </template>
@@ -82,5 +82,10 @@ export default {
     }
   }
 }
+</style>
 
+<style lang="scss">
+  .vm--modal {
+    box-shadow: 0 40px 70px -2px hsl(0deg 0% 0% / 60%), 1px 1px 6px var(--primary);
+  }
 </style>
diff --git a/src/components/Settings/SearchBar.vue b/src/components/Settings/SearchBar.vue
index de846ea019..6c4714c7d3 100644
--- a/src/components/Settings/SearchBar.vue
+++ b/src/components/Settings/SearchBar.vue
@@ -1,6 +1,6 @@
 <template>
   <form>
-    <label for="filter-tiles">Search {{active}}</label>
+    <label for="filter-tiles">Search</label>
     <input
       id="filter-tiles"
       v-model="input"
diff --git a/src/utils/defaults.js b/src/utils/defaults.js
index f3affe7d45..6d13485419 100644
--- a/src/utils/defaults.js
+++ b/src/utils/defaults.js
@@ -45,6 +45,8 @@ module.exports = {
     ICON_SIZE: 'iconSize',
     THEME: 'theme',
     CONF_SECTIONS: 'confSections',
+    PAGE_INFO: 'pageInfo',
+    APP_CONFIG: 'appConfig',
   },
   topLevelConfKeys: {
     PAGE_INFO: 'pageInfo',

From e59f501dab9e1f302ec2e881ff5b0ea255fc7ac8 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Mon, 17 May 2021 21:04:50 +0100
Subject: [PATCH 10/10] Completes basic functionality for UI configuration

---
 public/conf.yml                               | 190 +++---------------
 src/App.vue                                   |   8 +-
 src/components/Configuration/EditSiteMeta.vue |   1 +
 src/router.js                                 |  10 +-
 4 files changed, 45 insertions(+), 164 deletions(-)

diff --git a/public/conf.yml b/public/conf.yml
index bfd2ea04a3..99c1cd80b0 100644
--- a/public/conf.yml
+++ b/public/conf.yml
@@ -1,165 +1,33 @@
 ---
 pageInfo:
-  title: Networking Services
+  title: Dashy
+  navLinks:
+  - title: Home
+    path: /
+  - title: About
+    path: /about
+  - title: Source Code
+    path: https://github.com/Lissy93/dashy
+appConfig:
+  theme: colorful
+  fontAwesomeKey: 0821c65656
 sections:
-- name: Firewall
+- name: Getting Started
   items:
-  - title: OPNsense
-    description: Firewall Central Management
-    icon: networking/opnsense.png
-    target: iframe
-    url: https://192.168.1.1
-  - title: NetData
-    description: System resource usage on firewall
-    icon: networking/netdata.png
-    url: http://192.168.1.1:19999/
-  - title: MalTrail
-    description: Malicious traffic detection system
-    icon: networking/maltrail.png
-    url: http://192.168.1.1:8338
-  - title: Ntopng
-    description: Network traffic probe and network use monitor
-    icon: networking/ntop.png
-    url: http://192.168.1.1:3001
-  - title: Sensei
-    description: Additional data features
-    icon: networking/sensei.png
-    url: https://192.168.1.1/ui/sensei/
-  - title: Monit
-    description: Status of firewall system alerts
-    icon: networking/monit.png
-    url: https://192.168.1.1/ui/monit/status
-  - title: Firewall Logs
-    description: Real-time view of firewall data and logs
-    icon: networking/logs.png
-    url: https://192.168.1.1/ui/diagnostics/firewall/log
-  - title: WireGuard
-    description: Manage WireGuard client and server on firewall
-    icon: networking/wireguard.png
-    url: https://192.168.1.1/ui/wireguard/general
-- name: DNS Device
-  displayData:
-    collapsed: false
-    rows: 2
-  items:
-  - title: Pi-Hole
-    description: DNS settings for ad & tracker blocking
-    icon: networking/pihole.png
-    url: http://192.168.130.2/admin
-  - title: PiAlert
-    description: Presence monitoring and ARP scanning
-    icon: networking/pialert.png
-    url: http://192.168.130.2/pialert/
-  - title: SmokePing
-    description: Network latency monitoring
-    icon: networking/smokeping.png
-    url: http://192.168.130.2:8086/
-  - title: StatPing
-    description: Up-time monitoring for local service
-    icon: networking/statping.png
-    url: http://192.168.130.2:8083/
-  - title: LibreSpeed
-    description: Local network speed and latency test
-    icon: networking/librespeed.png
-    url: http://192.168.130.2:49154/
-  - title: NetData
-    description: Real-time system resource usage
-    icon: networking/netdata.png
-    url: http://192.168.130.2:19999
-  - title: Portainer
-    description: Docker container management
-    icon: networking/portainer.png
-    url: http://192.168.130.2:9000/
-  - title: cAdvisor
-    description: Container monitoring
-    icon: networking/cadvisor.png
-    url: http://192.168.130.2:8084/
-  - title: Glances
-    description: Simple resource usage
-    icon: networking/glances.png
-    url: http://192.168.130.2:61208
-  - title: Dozzle
-    description: Docker container web log viewer
-    icon: networking/dozzle.png
-    url: http://192.168.130.2:8093
-  - title: Prometheus
-    description: System Statistics Aggregation with PromQL
-    icon: networking/prometheus.png
-    url: http://192.168.130.2:8090/
-  - title: Grafana
-    description: Data visualised on dashboards
-    icon: networking/grafana.png
-    url: http://192.168.130.2:8091/
-- name: External Services
-  items:
-  - title: DuckDNS
-    description: Dynamic DNS for fixed public IP
-    icon: networking/duckdns.png
-    url: https://www.duckdns.org/
-  - title: BorgBase
-    description: Off-site system Borg backups
-    icon: networking/borgbase.png
-    url: https://www.borgbase.com/repositories
-  - title: Mullvad
-    description: Hosted VPN provider
-    icon: networking/mullvad.png
-    url: https://mullvad.net/en/account/
-  - title: ZeroTier
-    description: Secure networks between devices
-    icon: networking/zeroteir.png
-    url: https://my.zerotier.com/
-  - title: HealthChecks
-    description: Cron Job Monitoring
-    icon: networking/healthchecks.png
-    url: https://healthchecks.io/checks/
-  - title: ISP - Vodafone
-    description: Broadband internet provider
-    icon: networking/vodafone.png
-    url: https://myaccount.vodafone.co.uk/
-  - title: Digital Ocean
-    description: Cloud Hosting
-    icon: networking/digital-ocean.png
-    url: https://cloud.digitalocean.com/
-  - title: CloudFlare
-    description: Domain and DNS Management
-    icon: networking/cloudflare.png
-    url: https://dash.cloudflare.com/
-- name: Other Devices
-  items:
-  - title: Modem
-    description: ISP Router Modem Combo
-    icon: ''
-    url: http://192.168.1.5
-  - title: Wireless Access Point
-    description: View clients connected to WiFi
-    icon: ''
-    url: http://192.168.1.109/info.php
-  - title: Fing
-    description: Monitor connectivity issues, ISP quality, health checks and troubleshooting
-    provider: Fing
-    icon: ''
-    url: https://app.fing.com/
-  - title: Switch
-    description: Manage VLANs on Ubiquity Ethernet switch
-    icon: ''
-    url: "#"
-- name: External Utilities
-  displayData:
-    collapsed: true
-  items:
-  - title: Public IP
-    description: Check public IP and associated data
-    icon: ''
-    url: https://www.whatismyip.com/
-  - title: Who Is Lookup
-    description: Check ICAN info for a given IP address or domain
-    icon: ''
-    url: https://whois.domaintools.com/
-  - title: Speed Test
-    description: Upload + download speeds and latency
-    icon: ''
-    url: https://speed.cloudflare.com/
-  - title: Mullvad Check
-    description: Confirms a secure connection to Mullvad's WireGuard servers
-    icon: ''
-    url: https://mullvad.net/check
+  - title: Source
+    description: Source code and documentation on GitHub
+    icon: fab fa-github
+    url: https://github.com/Lissy93/dashy
+  - title: Issues
+    description: View currently open issues, or raise a new one
+    icon: fas fa-bug
+    url: https://github.com/Lissy93/dashy/issues
+  - title: Demo 1
+    description: 'Live Demo #1'
+    icon: far fa-rocket
+    url: https://dashy-demo-1.netlify.app 
+  - title: Demo 2
+    description: 'Live Demo #2'
+    icon: fad fa-planet-ringed
+    url: https://dashy-demo-2.netlify.app 
+  
diff --git a/src/App.vue b/src/App.vue
index 0ab0caa854..c1237151b8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,7 +27,13 @@ export default {
     /* Returns either page info from the config, or default values */
     getPageInfo(pageInfo) {
       const defaults = Defaults.pageInfo;
-      const localPageInfo = JSON.parse(localStorage[localStorageKeys.PAGE_INFO]);
+
+      let localPageInfo;
+      try {
+        localPageInfo = JSON.parse(localStorage[localStorageKeys.PAGE_INFO]);
+      } catch (e) {
+        localPageInfo = {};
+      }
       if (pageInfo) {
         return {
           title: localPageInfo.title || pageInfo.title || defaults.title,
diff --git a/src/components/Configuration/EditSiteMeta.vue b/src/components/Configuration/EditSiteMeta.vue
index 4ab2f1d8bb..9e460126ad 100644
--- a/src/components/Configuration/EditSiteMeta.vue
+++ b/src/components/Configuration/EditSiteMeta.vue
@@ -36,6 +36,7 @@ export default {
       pageInfo.footerText = this.formElements.footerText;
       localStorage.setItem(localStorageKeys.PAGE_INFO, JSON.stringify(pageInfo));
       this.$toasted.show('Changes seved succesfully');
+      setTimeout(() => { location.reload(); }, 1500); // eslint-disable-line no-restricted-globals
     },
   },
   data() {
diff --git a/src/router.js b/src/router.js
index 71589d5415..a4b5306771 100644
--- a/src/router.js
+++ b/src/router.js
@@ -2,11 +2,17 @@ import Vue from 'vue';
 import Router from 'vue-router';
 import Home from './views/Home.vue';
 import conf from '../public/conf.yml'; // Main site configuration
-import { pageInfo as defaultPageInfo } from './utils/defaults';
+import { pageInfo as defaultPageInfo, localStorageKeys } from './utils/defaults';
 
 Vue.use(Router);
 
 const { sections, pageInfo, appConfig } = conf;
+let localPageInfo;
+try {
+  localPageInfo = JSON.parse(localStorage[localStorageKeys.PAGE_INFO]);
+} catch (e) {
+  localPageInfo = undefined;
+}
 
 const router = new Router({
   routes: [
@@ -16,7 +22,7 @@ const router = new Router({
       component: Home,
       props: {
         sections: sections || [],
-        pageInfo: pageInfo || defaultPageInfo,
+        pageInfo: localPageInfo || pageInfo || defaultPageInfo,
         appConfig: appConfig || {},
       },
       meta: {