add frontend end and backend for keystore

src/components/modals/coresettings/CustomFieldsForm.vue

@@ -224,7 +224,6 @@ export default {
           })
           .catch(e => {
             this.$q.loading.hide();
-            this.onOk();
             this.notifyError("There was an error editing the custom field");
           });
       } else {
@@ -263,7 +262,7 @@ export default {
     },
   },
   mounted() {
-    // If pk prop is set that means we are editting
+    // If pk prop is set that means we are editing
     if (this.field) Object.assign(this.localField, this.field);
 
     // Set model to current tab

src/components/modals/coresettings/CustomFieldsTable.vue

@@ -13,12 +13,7 @@
   >
     <!-- body slots -->
     <template v-slot:body="props">
-      <q-tr
-        :props="props"
-        class="cursor-pointer"
-        @contextmenu="selectedTemplate = props.row"
-        @dblclick="editCustomField(props.row)"
-      >
+      <q-tr :props="props" class="cursor-pointer" @dblclick="editCustomField(props.row)">
         <!-- context menu -->
         <q-menu context-menu>
           <q-list dense style="min-width: 200px">
@@ -133,7 +128,7 @@ export default {
         .onOk(() => {
           this.$q.loading.show();
           this.$axios
-            .delete(`core/customfields/${field.id}/`)
+            .delete(`/core/customfields/${field.id}/`)
             .then(r => {
               this.refresh();
               this.$q.loading.hide();

src/components/modals/coresettings/EditCoreSettings.vue

@@ -8,6 +8,7 @@
           <q-tab name="smsalerts" label="SMS Alerts" />
           <q-tab name="meshcentral" label="MeshCentral" />
           <q-tab name="customfields" label="Custom Fields" />
+          <q-tab name="keystore" label="Key Store" />
         </q-tabs>
       </template>
       <template v-slot:after>
@@ -293,10 +294,14 @@
               <q-tab-panel name="customfields">
                 <CustomFields />
               </q-tab-panel>
+
+              <q-tab-panel name="keystore">
+                <KeyStoreTable />
+              </q-tab-panel>
             </q-tab-panels>
           </q-scroll-area>
           <q-card-section class="row items-center">
-            <q-btn v-show="tab !== 'customfields'" label="Save" color="primary" type="submit" />
+            <q-btn v-show="tab !== 'customfields' || tab !== 'keystore'" label="Save" color="primary" type="submit" />
             <q-btn
               v-show="tab === 'emailalerts'"
               label="Save and Test"
@@ -316,11 +321,13 @@
 import mixins from "@/mixins/mixins";
 import ResetPatchPolicy from "@/components/modals/coresettings/ResetPatchPolicy";
 import CustomFields from "@/components/modals/coresettings/CustomFields";
+import KeyStoreTable from "@/components/modals/coresettings/KeyStoreTable";
 
 export default {
   name: "EditCoreSettings",
   components: {
     CustomFields,
+    KeyStoreTable,
   },
   mixins: [mixins],
   data() {

src/components/modals/coresettings/KeyStoreForm.vue

@@ -0,0 +1,107 @@
+<template>
+  <q-dialog ref="dialog" @hide="onHide">
+    <q-card class="q-dialog-plugin" style="width: 60vw">
+      <q-bar>
+        {{ title }}
+        <q-space />
+        <q-btn dense flat icon="close" v-close-popup>
+          <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+        </q-btn>
+      </q-bar>
+      <q-form @submit="submit">
+        <!-- name -->
+        <q-card-section>
+          <q-input label="Name" outlined dense v-model="localKey.name" :rules="[val => !!val || '*Required']" />
+        </q-card-section>
+
+        <!-- name -->
+        <q-card-section>
+          <q-input label="Value" outlined dense v-model="localKey.value" :rules="[val => !!val || '*Required']" />
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn flat label="Cancel" v-close-popup />
+          <q-btn flat label="Submit" color="primary" type="submit" />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script>
+import mixins from "@/mixins/mixins";
+
+export default {
+  name: "KeyStoreForm",
+  mixins: [mixins],
+  props: { globalKey: Object },
+  data() {
+    return {
+      localKey: {
+        name: "",
+        value: "",
+      },
+    };
+  },
+  computed: {
+    title() {
+      return this.editing ? "Edit Global Key" : "Add Global Key";
+    },
+    editing() {
+      return !!this.globalKey;
+    },
+  },
+  methods: {
+    submit() {
+      this.$q.loading.show();
+
+      let data = {
+        ...this.localKey,
+      };
+
+      if (this.editing) {
+        this.$axios
+          .put(`/core/keystore/${data.id}/`, data)
+          .then(r => {
+            this.$q.loading.hide();
+            this.onOk();
+            this.notifySuccess("Key was edited!");
+          })
+          .catch(e => {
+            this.$q.loading.hide();
+            this.notifyError("There was an error editing the key");
+          });
+      } else {
+        this.$axios
+          .post("/core/keystore/", data)
+          .then(r => {
+            this.$q.loading.hide();
+            this.onOk();
+            this.notifySuccess("Key was added!");
+          })
+          .catch(e => {
+            this.$q.loading.hide();
+            this.notifyError("There was an error adding the key");
+          });
+      }
+    },
+    show() {
+      this.$refs.dialog.show();
+    },
+    hide() {
+      this.$refs.dialog.hide();
+    },
+    onHide() {
+      this.$emit("hide");
+    },
+    onOk() {
+      this.$emit("ok");
+      this.hide();
+    },
+  },
+  mounted() {
+    // If pk prop is set that means we are editing
+    if (this.globalKey) Object.assign(this.localKey, this.globalKey);
+  },
+};
+</script>

src/components/modals/coresettings/KeyStoreTable.vue

@@ -0,0 +1,156 @@
+<template>
+  <div>
+    <div class="row">
+      <div class="text-subtitle2">Global Key Store</div>
+      <q-space />
+      <q-btn size="sm" color="grey-5" icon="fas fa-plus" text-color="black" label="Add key" @click="addKey" />
+    </div>
+    <hr />
+    <q-table
+      dense
+      :data="keystore"
+      :columns="columns"
+      :pagination.sync="pagination"
+      row-key="id"
+      binary-state-sort
+      hide-pagination
+      virtual-scroll
+      :rows-per-page-options="[0]"
+      no-data-label="No Keys added yet"
+    >
+      <!-- body slots -->
+      <template v-slot:body="props">
+        <q-tr :props="props" class="cursor-pointer" @dblclick="editKey(props.row)">
+          <!-- context menu -->
+          <q-menu context-menu>
+            <q-list dense style="min-width: 200px">
+              <q-item clickable v-close-popup @click="editKey(props.row)">
+                <q-item-section side>
+                  <q-icon name="edit" />
+                </q-item-section>
+                <q-item-section>Edit</q-item-section>
+              </q-item>
+              <q-item clickable v-close-popup @click="deleteKey(props.row)">
+                <q-item-section side>
+                  <q-icon name="delete" />
+                </q-item-section>
+                <q-item-section>Delete</q-item-section>
+              </q-item>
+
+              <q-separator></q-separator>
+
+              <q-item clickable v-close-popup>
+                <q-item-section>Close</q-item-section>
+              </q-item>
+            </q-list>
+          </q-menu>
+          <!-- name -->
+          <q-td>
+            {{ props.row.name }}
+          </q-td>
+          <!-- value -->
+          <q-td>
+            {{ props.row.value }}
+          </q-td>
+        </q-tr>
+      </template>
+    </q-table>
+  </div>
+</template>
+
+<script>
+import KeyStoreForm from "@/components/modals/coresettings/KeyStoreForm";
+import mixins from "@/mixins/mixins";
+
+export default {
+  name: "KeyStoreTable",
+  mixins: [mixins],
+  data() {
+    return {
+      keystore: [],
+      pagination: {
+        rowsPerPage: 0,
+        sortBy: "name",
+        descending: true,
+      },
+      columns: [
+        {
+          name: "name",
+          label: "Name",
+          field: "name",
+          align: "left",
+          sortable: true,
+        },
+        {
+          name: "value",
+          label: "Value",
+          field: "value",
+          align: "left",
+          sortable: true,
+        },
+      ],
+    };
+  },
+  methods: {
+    getKeyStore() {
+      this.$q.loading.show();
+
+      this.$axios
+        .get("/core/keystore/")
+        .then(r => {
+          this.$q.loading.hide();
+          this.keystore = r.data;
+        })
+        .catch(e => {
+          this.$q.loading.hide();
+        });
+    },
+    addKey() {
+      this.$q
+        .dialog({
+          component: KeyStoreForm,
+          parent: this,
+        })
+        .onOk(() => {
+          this.getKeyStore();
+        });
+    },
+    editKey(key) {
+      this.$q
+        .dialog({
+          component: KeyStoreForm,
+          parent: this,
+          globalKey: key,
+        })
+        .onOk(() => {
+          this.getKeyStore();
+        });
+    },
+    deleteKey(key) {
+      this.$q
+        .dialog({
+          title: `Delete key: ${key.name}?`,
+          cancel: true,
+          ok: { label: "Delete", color: "negative" },
+        })
+        .onOk(() => {
+          this.$q.loading.show();
+          this.$axios
+            .delete(`/core/keystore/${key.id}/`)
+            .then(r => {
+              this.getKeyStore();
+              this.$q.loading.hide();
+              this.notifySuccess(`key: ${key.name} was deleted!`);
+            })
+            .catch(error => {
+              this.$q.loading.hide();
+              this.notifyError(`An Error occured while deleting key: ${key.name}`);
+            });
+        });
+    },
+  },
+  mounted() {
+    this.getKeyStore();
+  },
+};
+</script>