Implemented config validation into the JSON editor

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "ajv": "^8.5.0",
+    "ajv7": "npm:ajv@^7.2.2",
     "axios": "^0.21.1",
     "connect": "^3.7.0",
     "crypto-js": "^4.0.0",

src/components/Configuration/ConfigContainer.vue

@@ -48,7 +48,7 @@
       </div>
     </TabItem>
     <TabItem name="Edit Sections">
-      <JsonEditor :sections="sections" />
+      <JsonEditor :config="config" />
     </TabItem>
     <TabItem name="Edit Site Meta">
       <EditSiteMeta :config="config" />

src/components/Configuration/JsonEditor.vue

@@ -5,7 +5,17 @@
       :options="options"
       height="650px"
     />
-    <button class="save-button" @click="save()">Save Changes</button>
+    <button :class="`save-button ${!isValid ? 'err' : ''}`" @click="save()">Save Changes</button>
+    <p class="errors">
+      <ul>
+        <li v-for="(error, index) in errorMessages" :key="index" :class="`type-${error.type}`">
+          {{error.msg}}
+        </li>
+        <li v-if="errorMessages.length < 1" class="type-valid">
+          Config is Valid
+        </li>
+      </ul>
+    </p>
     <p class="note">
       It is recommend to backup your existing confiruration before making any changes.
       <br>
@@ -19,30 +29,84 @@
 
 import VJsoneditor from 'v-jsoneditor';
 import { localStorageKeys } from '@/utils/defaults';
+import configSchema from '@/utils/ConfigSchema';
+import Ajv from 'ajv7';
 
 export default {
   name: 'JsonEditor',
   props: {
-    sections: Array,
+    config: Object,
   },
   components: {
     VJsoneditor,
   },
   data() {
     return {
-      jsonData: this.sections,
+      jsonData: this.config,
+      errorMessages: [],
       options: {
+        schema: configSchema,
         mode: 'tree',
         modes: ['tree', 'code', 'preview'],
-        name: 'sections',
+        name: 'config',
+        ajv: new Ajv({
+          allErrors: true,
+          verbose: true,
+          jsPropertySyntax: false,
+          $data: true,
+        }),
+        onValidationError: this.validationErrors,
       },
     };
   },
+  computed: {
+    isValid() {
+      return this.errorMessages.length < 1;
+    },
+  },
   methods: {
     save() {
-      localStorage.setItem(localStorageKeys.CONF_SECTIONS, JSON.stringify(this.jsonData));
+      const data = this.jsonData;
+      if (data.sections) {
+        localStorage.setItem(localStorageKeys.CONF_SECTIONS, JSON.stringify(data.sections));
+      }
+      if (data.pageInfo) {
+        localStorage.setItem(localStorageKeys.PAGE_INFO, JSON.stringify(data.pageInfo));
+      }
+      if (data.appConfig) {
+        localStorage.setItem(localStorageKeys.APP_CONFIG, JSON.stringify(data.appConfig));
+      }
+      if (data.appConfig.theme) {
+        localStorage.setItem(localStorageKeys.THEME, data.appConfig.theme);
+      }
       this.$toasted.show('Changes saved succesfully');
     },
+    validationErrors(errors) {
+      const errorMessages = [];
+      errors.forEach((error) => {
+        switch (error.type) {
+          case 'validation':
+            errorMessages.push({
+              type: 'validation',
+              msg: `Validatation Warning: ${error.error.keyword} ${error.error.message}`,
+            });
+            break;
+          case 'error':
+            errorMessages.push({
+              type: 'parse',
+              msg: error.message,
+            });
+            break;
+          default:
+            errorMessages.push({
+              type: 'editor',
+              msg: 'Error in JSON',
+            });
+            break;
+        }
+      });
+      this.errorMessages = errorMessages;
+    },
   },
 };
 </script>
@@ -57,6 +121,30 @@ p.note {
   color: var(--medium-grey);
   margin: 0.2rem;
 }
+p.errors {
+  text-align: left;
+  margin: 0.5rem auto;
+  width: 95%;
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    li {
+      &.type-validation {
+        color: var(--warning);
+        &::before { content: "⚠️"; }
+      }
+      &.type-parse {
+        color: var(--danger);
+        &::before { content: "❌"; }
+      }
+      &.type-valid {
+        color: var(--success);
+        &::before { content: "✅"; }
+      }
+    }
+  }
+}
 button.save-button {
   padding:  0.5rem 1rem;
   margin: 0.25rem auto;
@@ -71,6 +159,15 @@ button.save-button {
     color: var(--config-settings-color);
     border-color: var(--config-settings-color);
   }
+  &.err {
+    opacity: 0.8;
+    cursor: default;
+    &:hover {
+      background: var(--config-settings-color);
+      color: var(--config-settings-background);
+      border-color: var(--danger);
+    }
+  }
 }
 
 .jsoneditor-menu {

src/utils/ConfigSchema.js

@@ -74,16 +74,16 @@ module.exports = {
           description: 'Theme names to be added to the dropdown',
           items: {
             type: 'string',
-          }
+          },
         },
         externalStyleSheet: {
           description: 'URL or URLs of external stylesheets to add to dropdown/ load',
           type: [
-            'string', 'array'
+            'string', 'array',
           ],
           items: {
             type: 'string',
-          }
+          },
         },
         customCss: {
           type: 'string',
@@ -211,7 +211,7 @@ module.exports = {
             },
           },
         },
-      }
+      },
     },
   },
 };