Adds code editor for user to specify custom CSS

src/assets/interface-icons/config-custom-css.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="css3-alt" class="svg-inline--fa fa-css3-alt fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M0 32l34.9 395.8L192 480l157.1-52.2L384 32H0zm313.1 80l-4.8 47.3L193 208.6l-.3.1h111.5l-12.8 146.6-98.2 28.7-98.8-29.2-6.4-73.9h48.9l3.2 38.3 52.6 13.3 54.7-15.4 3.7-61.6-166.3-.5v-.1l-.2.1-3.6-46.3L193.1 162l6.5-2.7H76.7L70.9 112h242.2z"></path></svg>

src/components/Configuration/ConfigContainer.vue

@@ -17,6 +17,10 @@
           <MetaDataIcon class="button-icon"/>
           Edit Meta Data
         </button>
+        <button class="config-button center" @click="goToCustomCss()">
+          <CustomCssIcon class="button-icon"/>
+          Edit Custom CSS
+        </button>
         <button class="config-button center" @click="openCloudSync()">
           <CloudIcon class="button-icon"/>
           {{backupId ? 'Edit Cloud Sync' : 'Enable Cloud Sync'}}
@@ -70,6 +74,7 @@ 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';
+import CustomCssIcon from '@/assets/interface-icons/config-custom-css.svg';
 import CloudIcon from '@/assets/interface-icons/cloud-backup-restore.svg';
 
 export default {
@@ -97,6 +102,7 @@ export default {
     EditIcon,
     CloudIcon,
     MetaDataIcon,
+    CustomCssIcon,
   },
   methods: {
     /* Seletcs the edit tab of the tab view */
@@ -108,6 +114,10 @@ export default {
       const itemToSelect = this.$refs.tabView.navItems[3];
       this.$refs.tabView.activeTabItem({ tabItem: itemToSelect, byUser: true });
     },
+    goToCustomCss() {
+      const itemToSelect = this.$refs.tabView.navItems[4];
+      this.$refs.tabView.activeTabItem({ tabItem: itemToSelect, byUser: true });
+    },
     openCloudSync() {
       this.$modal.show(modalNames.CLOUD_BACKUP);
     },

src/components/Configuration/CustomCss.vue

@@ -1,11 +1,17 @@
 <template>
   <div class="json-editor-outer">
-    <textarea v-model="customCss"></textarea>
+    <prism-editor class="my-editor" v-model="customCss" :highlight="highlighter" line-numbers />
     <button class="save-button" @click="save()">Save Changes</button>
+    <p>Note, you will need to refresh the page for your changes to take effect</p>
   </div>
 </template>
 
 <script>
+import { PrismEditor } from 'vue-prism-editor';
+import { highlight, languages } from 'prismjs/components/prism-core';
+import 'prismjs/components/prism-css';
+import 'prismjs/themes/prism-funky.css';
+import 'vue-prism-editor/dist/prismeditor.min.css';
 
 import { localStorageKeys } from '@/utils/defaults';
 
@@ -14,18 +20,21 @@ export default {
   props: {
     config: Object,
   },
+  components: {
+    PrismEditor,
+  },
   data() {
     return {
-      customCss: this.config.appConfig.customCss || '',
+      customCss: this.config.appConfig.customCss || '\n\n\n\n\n',
     };
   },
   methods: {
-    validate() {
-      return true;
+    validate(css) {
+      return css.match(/((?:^\s*)([\w#.@*,:\-.:>,*\s]+)\s*{(?:[\s]*)((?:[A-Za-z\- \s]+[:]\s*['"0-9\w .,/()\-!%]+;?)*)*\s*}(?:\s*))/gmi);
     },
     save() {
       let msg = '';
-      if (this.validate()) {
+      if (this.validate(this.customCss)) {
         const appConfig = { ...this.config.appConfig };
         appConfig.customCss = this.customCss;
         localStorage.setItem(localStorageKeys.APP_CONFIG, JSON.stringify(appConfig));
@@ -42,6 +51,9 @@ export default {
       style.textContent = cleanedCss;
       document.head.append(style);
     },
+    highlighter(code) {
+      return highlight(code, languages.css);
+    },
   },
 };
 </script>
@@ -64,4 +76,13 @@ button.save-button {
   }
 }
 
+.prism-editor-wrapper {
+  min-height: 200px;
+  border: 1px solid var(--transparent-70);
+  border-radius: var(--curve-factor);
+  width: 90%;
+  margin: 0.5rem auto;
+  background: var(--transparent-50);
+}
+
 </style>

src/main.js

@@ -5,7 +5,6 @@ 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';

src/utils/CloudBackup.js

@@ -37,7 +37,6 @@ const encodeGetParams = p => Object.entries(p).map(kv => kv.map(encodeURICompone
 /* Restores the backup */
 export const restore = (backupId, password) => {
   const params = encodeGetParams({ backupId, subHash: makeSubHash(password) });
-  console.log(makeSubHash(password));
   const url = `${ENDPOINT}/?${params}`;
   return new Promise((resolve, reject) => {
     axios.get(url).then((response) => {