From 606a75f8f5354501a022e9841c42b406117fee58 Mon Sep 17 00:00:00 2001
From: Martijn Voordouw <martijnvoordouw@gmail.com>
Date: Fri, 6 Sep 2024 15:37:40 +0200
Subject: [PATCH 1/4] created link to most recent version

Add package now grabs most recent version if no version was specified,
if the version has already been added you are redirected to that
version.
---
 src/api/dlt/api.ts                     |   8 +-
 src/api/dlt/interface.ts               |   4 +-
 src/api/dlt/mock.ts                    |   6 +-
 src/components/AddPackageComponent.vue | 110 +++++++++++++++++--------
 4 files changed, 92 insertions(+), 36 deletions(-)

diff --git a/src/api/dlt/api.ts b/src/api/dlt/api.ts
index afd935c..6247e0a 100644
--- a/src/api/dlt/api.ts
+++ b/src/api/dlt/api.ts
@@ -128,6 +128,12 @@ export default class DltApi extends DltInterface {
     return data;
   }
 
+  async getMostRecentVersion(pack: Package) {
+    const { data } = await axios.post(this.#getLink('get-most-recent-version'), pack);
+    console.log(data);
+    return data;
+  }
+
   async getMetrics() {
     const { data } = await axios.get(this.#getLink('metrics'));
     return parseMetrics(data);
@@ -144,4 +150,4 @@ export default class DltApi extends DltInterface {
 }
 
 /* This program has been developed by students from the bachelor Computer Science at Utrecht University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences) */
\ No newline at end of file
+© Copyright Utrecht University (Department of Information and Computing Sciences) */
diff --git a/src/api/dlt/interface.ts b/src/api/dlt/interface.ts
index 53d297a..4635172 100644
--- a/src/api/dlt/interface.ts
+++ b/src/api/dlt/interface.ts
@@ -47,6 +47,8 @@ export abstract class DltInterface {
 
   abstract addPackage(pack: AddPackageForm): Promise<string | void>;
 
+  abstract getMostRecentVersion(pack: Package): Promise<string>;
+
   abstract getMetrics(): Promise<Metrics>;
 
   abstract getTrustScore(name: string, version: string): Promise<number | undefined>;
@@ -79,4 +81,4 @@ export const defaultMetrics: Metrics = {
 };
 
 /* This program has been developed by students from the bachelor Computer Science at Utrecht University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences) */
\ No newline at end of file
+© Copyright Utrecht University (Department of Information and Computing Sciences) */
diff --git a/src/api/dlt/mock.ts b/src/api/dlt/mock.ts
index 980232f..ca3f4fe 100644
--- a/src/api/dlt/mock.ts
+++ b/src/api/dlt/mock.ts
@@ -59,6 +59,10 @@ export default class DltMock extends DltInterface {
     return 'Success';
   }
 
+  async getMostRecentVersion(pack: Package): Promise<string> {
+      return "v7.8.9";
+  }
+
   async getMetrics() {
     await fakeDelay();
     return {
@@ -73,4 +77,4 @@ export default class DltMock extends DltInterface {
 }
 
 /* This program has been developed by students from the bachelor Computer Science at Utrecht University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences) */
\ No newline at end of file
+© Copyright Utrecht University (Department of Information and Computing Sciences) */
diff --git a/src/components/AddPackageComponent.vue b/src/components/AddPackageComponent.vue
index df483a9..edd723b 100644
--- a/src/components/AddPackageComponent.vue
+++ b/src/components/AddPackageComponent.vue
@@ -1,42 +1,60 @@
 <template>
-   <va-modal
-    v-model="showAddedModal"
-    hide-default-actions
-    overlay-opacity="0.2"
-  >
+  <va-modal v-model="showAddedModal" hide-default-actions overlay-opacity="0.2">
     <template #header>
       <h2>Package added</h2>
     </template>
-    <div>Your package has been added</div>
+    <div>Package {{ job.name }} with version {{ job.release }} has been added </div>
     <template #footer>
-      <va-button @click="showAddedModal = false">
-        Close
-      </va-button>
+      <va-button @click="showAddedModal = false"> Close </va-button>
     </template>
   </va-modal>
 
-  <va-modal
-    v-model="showFieldEmpty"
-    hide-default-actions
-    overlay-opacity="0.2"
-  >
+  <va-modal v-model="showFieldEmpty" hide-default-actions overlay-opacity="0.2">
     <template #header>
       <h2>Field empty</h2>
     </template>
     <div>One or more fields have been left empty.</div>
     <template #footer>
-      <va-button @click="showFieldEmpty = false">
-        Close
-      </va-button>
+      <va-button @click="showFieldEmpty = false"> Close </va-button>
+    </template>
+  </va-modal>
+
+  <va-modal v-model="showAlreadyAdded" hide-default-actions overlay-opacity="0.2">
+    <template #header>
+      <h2>Already added</h2>
+    </template>
+    <div>Package {{ job.name }} with version {{ job.release }} already in system, click close to show.</div>
+    <template #footer>
+      <va-button @click="showPackage"> Close </va-button>
     </template>
   </va-modal>
 
   <va-form>
     <div class="row">
-      <va-input v-model="job.platform" :rules="[validateRequired]" class="flex xs6" label="Platform"/>
-      <va-input v-model="job.owner" :rules="[validateRequired]" class="flex xs6" label="Owner"/>
-      <va-input v-model="job.name" :rules="[validateRequired]" class="flex xs6" label="Name"/>
-      <va-input v-model="job.release" :rules="[validateRequired]" class="flex xs6" label="Version"/>
+      <va-input
+        v-model="job.platform"
+        :rules="[validateRequired]"
+        class="flex xs6"
+        label="Platform"
+      />
+      <va-input
+        v-model="job.owner"
+        :rules="[validateRequired]"
+        class="flex xs6"
+        label="Owner"
+      />
+      <va-input
+        v-model="job.name"
+        :rules="[validateRequired]"
+        class="flex xs6"
+        label="Name"
+      />
+      <va-input
+        v-model="job.release"
+        class="flex xs6"
+        label="Version"
+        placeholder="leave empty for most recent version"
+      />
       <div class="flex xs12">
         <va-button type="submit" @click="addPackage">Submit</va-button>
         <div v-if="response">
@@ -49,12 +67,14 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import router from '@/router';
 
 export default defineComponent({
   name: 'add-package-component',
   data() {
     return {
-      showAddedModal:false,
+      showAddedModal: false,
+      showAlreadyAdded: false,
       showFieldEmpty: false,
       response: '',
       job: {
@@ -67,26 +87,50 @@ export default defineComponent({
   },
   methods: {
     async addPackage() {
-      if(this.job.platform.length>0 && this.job.owner.length>0 && this.job.name.length>0 && this.job.release.length>0){
-        const result = await this.$dltApi.addPackage(this.job);
-        
-        if (typeof result === 'string') {
-          if(result=="Added jobs.") this.showAddedModal=true;
+      if (this.job.platform.length > 0 && this.job.owner.length > 0 && this.job.name.length > 0) {
+        // if no release was specified grab the latest one
+        if (this.job.release.length === 0) {
+          this.job.release = await this.$dltApi.getMostRecentVersion({
+            platform: this.job.platform,
+            owner: this.job.owner,
+            name: this.job.name,
+            versions: [],
+          });
+        }
+
+        // check if the package is already in the system
+        const pack = await this.$dltApi.getPackage(this.job.name);
+        if (pack.versions.includes(this.job.release))
+        {
+          this.showAlreadyAdded = true;
+        }
+        else
+        {
+          const result = await this.$dltApi.addPackage(this.job);
+
+          if (typeof result === 'string') {
+            if (result == 'Added jobs.') this.showAddedModal = true;
+          }
         }
       } else {
-        this.showFieldEmpty=true;
+        this.showFieldEmpty = true;
       }
-      
     },
     // TODO: Move to generalized validation system
     validateRequired(value: string) {
       return (value && value.length > 0) || 'Field is required';
     },
+    showPackage() {
+      router.push({
+        name: 'Package with Version',
+        params: {
+          name: this.job.name,
+          version: this.job.release,
+        },
+      });
+    }
   },
 });
 </script>
-
-<style scoped>
-</style>
 <!-- This program has been developed by students from the bachelor Computer Science at Utrecht University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences) -->
\ No newline at end of file
+© Copyright Utrecht University (Department of Information and Computing Sciences) -->

From 19110901a4b0d42c890a7ac97201274b9e84d68f Mon Sep 17 00:00:00 2001
From: Martijn Voordouw <martijnvoordouw@gmail.com>
Date: Mon, 9 Sep 2024 17:41:34 +0200
Subject: [PATCH 2/4] added error message for most recent version, added popup
 component

removed code duplication by adding pop up message component, updated vue
version
---
 package-lock.json                           | 506 +++++++++++---------
 src/api/dlt/mock.ts                         |   2 +-
 src/components/AddPackageComponent.vue      |  60 ++-
 src/components/PopUpMessage.vue             |  17 +
 src/components/UserSettingsComponent.vue    | 130 ++---
 src/components/button/SpiderToggle.vue      |  26 +-
 src/components/search/AddMinerComponent.vue |  76 +--
 7 files changed, 391 insertions(+), 426 deletions(-)
 create mode 100644 src/components/PopUpMessage.vue

diff --git a/package-lock.json b/package-lock.json
index 1b497a7..256fd39 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,10 +41,29 @@
         "vue-tsc": "^0.33.9"
       }
     },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
+      "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
+      "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/parser": {
-      "version": "7.17.9",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.9.tgz",
-      "integrity": "sha512-vqUSBLP8dQHFPdPi9bc5GK9vRkYHJ49fsZdtoJ8EQ8ibpwk5rPKfvNIwChB0KVXcIjcepEBBd2VHC5r9Gy8ueg==",
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.6.tgz",
+      "integrity": "sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==",
+      "dependencies": {
+        "@babel/types": "^7.25.6"
+      },
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -52,6 +71,19 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/types": {
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.6.tgz",
+      "integrity": "sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.24.8",
+        "@babel/helper-validator-identifier": "^7.24.7",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@eslint/eslintrc": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.1.tgz",
@@ -184,11 +216,9 @@
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.13",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.13.tgz",
-      "integrity": "sha512-GryiOJmNcWbovBxTfZSF71V/mXbgcV3MewDe3kIMCLyIh5e7SKAeUZs+rMnJ8jkMolZ/4/VsdBmMrw3l+VdZ3w==",
-      "dev": true,
-      "peer": true
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.13",
@@ -593,49 +623,49 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.2.33",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.33.tgz",
-      "integrity": "sha512-AAmr52ji3Zhk7IKIuigX2osWWsb2nQE5xsdFYjdnmtQ4gymmqXbjLvkSE174+fF3A3kstYrTgGkqgOEbsdLDpw==",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.3.tgz",
+      "integrity": "sha512-adAfy9boPkP233NTyvLbGEqVuIfK/R0ZsBsIOW4BZNfb4BRpRW41Do1u+ozJpsb+mdoy80O20IzAsHaihRb5qA==",
       "dependencies": {
-        "@babel/parser": "^7.16.4",
-        "@vue/shared": "3.2.33",
+        "@babel/parser": "^7.25.3",
+        "@vue/shared": "3.5.3",
+        "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
-        "source-map": "^0.6.1"
+        "source-map-js": "^1.2.0"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.2.33",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.33.tgz",
-      "integrity": "sha512-GhiG1C8X98Xz9QUX/RlA6/kgPBWJkjq0Rq6//5XTAGSYrTMBgcLpP9+CnlUg1TFxnnCVughAG+KZl28XJqw8uQ==",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.3.tgz",
+      "integrity": "sha512-wnzFArg9zpvk/811CDOZOadJRugf1Bgl/TQ3RfV4nKfSPok4hi0w10ziYUQR6LnnBAUlEXYLUfZ71Oj9ds/+QA==",
       "dependencies": {
-        "@vue/compiler-core": "3.2.33",
-        "@vue/shared": "3.2.33"
+        "@vue/compiler-core": "3.5.3",
+        "@vue/shared": "3.5.3"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.2.33",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.33.tgz",
-      "integrity": "sha512-H8D0WqagCr295pQjUYyO8P3IejM3vEzeCO1apzByAEaAR/WimhMYczHfZVvlCE/9yBaEu/eu9RdiWr0kF8b71Q==",
-      "dependencies": {
-        "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.33",
-        "@vue/compiler-dom": "3.2.33",
-        "@vue/compiler-ssr": "3.2.33",
-        "@vue/reactivity-transform": "3.2.33",
-        "@vue/shared": "3.2.33",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.3.tgz",
+      "integrity": "sha512-P3uATLny2tfyvMB04OQFe7Sczteno7SLFxwrOA/dw01pBWQHB5HL15a8PosoNX2aG/EAMGqnXTu+1LnmzFhpTQ==",
+      "dependencies": {
+        "@babel/parser": "^7.25.3",
+        "@vue/compiler-core": "3.5.3",
+        "@vue/compiler-dom": "3.5.3",
+        "@vue/compiler-ssr": "3.5.3",
+        "@vue/shared": "3.5.3",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.25.7",
-        "postcss": "^8.1.10",
-        "source-map": "^0.6.1"
+        "magic-string": "^0.30.11",
+        "postcss": "^8.4.44",
+        "source-map-js": "^1.2.0"
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.2.33",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.33.tgz",
-      "integrity": "sha512-XQh1Xdk3VquDpXsnoCd7JnMoWec9CfAzQDQsaMcSU79OrrO2PNR0ErlIjm/mGq3GmBfkQjzZACV+7GhfRB8xMQ==",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.3.tgz",
+      "integrity": "sha512-F/5f+r2WzL/2YAPl7UlKcJWHrvoZN8XwEBLnT7S4BXwncH25iDOabhO2M2DWioyTguJAGavDOawejkFXj8EM1w==",
       "dependencies": {
-        "@vue/compiler-dom": "3.2.33",
-        "@vue/shared": "3.2.33"
+        "@vue/compiler-dom": "3.5.3",
+        "@vue/shared": "3.5.3"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -685,60 +715,49 @@
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.2.33",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.33.tgz",
-      "integrity": "sha512-62Sq0mp9/0bLmDuxuLD5CIaMG2susFAGARLuZ/5jkU1FCf9EDbwUuF+BO8Ub3Rbodx0ziIecM/NsmyjardBxfQ==",
-      "dependencies": {
-        "@vue/shared": "3.2.33"
-      }
-    },
-    "node_modules/@vue/reactivity-transform": {
-      "version": "3.2.33",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.33.tgz",
-      "integrity": "sha512-4UL5KOIvSQb254aqenW4q34qMXbfZcmEsV/yVidLUgvwYQQ/D21bGX3DlgPUGI3c4C+iOnNmDCkIxkILoX/Pyw==",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.3.tgz",
+      "integrity": "sha512-2w61UnRWTP7+rj1H/j6FH706gRBHdFVpIqEkSDAyIpafBXYH8xt4gttstbbCWdU3OlcSWO8/3mbKl/93/HSMpw==",
       "dependencies": {
-        "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.33",
-        "@vue/shared": "3.2.33",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.25.7"
+        "@vue/shared": "3.5.3"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.2.33",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.33.tgz",
-      "integrity": "sha512-N2D2vfaXsBPhzCV3JsXQa2NECjxP3eXgZlFqKh4tgakp3iX6LCGv76DLlc+IfFZq+TW10Y8QUfeihXOupJ1dGw==",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.3.tgz",
+      "integrity": "sha512-5b2AQw5OZlmCzSsSBWYoZOsy75N4UdMWenTfDdI5bAzXnuVR7iR8Q4AOzQm2OGoA41xjk53VQKrqQhOz2ktWaw==",
       "dependencies": {
-        "@vue/reactivity": "3.2.33",
-        "@vue/shared": "3.2.33"
+        "@vue/reactivity": "3.5.3",
+        "@vue/shared": "3.5.3"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.2.33",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.33.tgz",
-      "integrity": "sha512-LSrJ6W7CZTSUygX5s8aFkraDWlO6K4geOwA3quFF2O+hC3QuAMZt/0Xb7JKE3C4JD4pFwCSO7oCrZmZ0BIJUnw==",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.3.tgz",
+      "integrity": "sha512-wPR1DEGc3XnQ7yHbmkTt3GoY0cEnVGQnARRdAkDzZ8MbUKEs26gogCQo6AOvvgahfjIcnvWJzkZArQ1fmWjcSg==",
       "dependencies": {
-        "@vue/runtime-core": "3.2.33",
-        "@vue/shared": "3.2.33",
-        "csstype": "^2.6.8"
+        "@vue/reactivity": "3.5.3",
+        "@vue/runtime-core": "3.5.3",
+        "@vue/shared": "3.5.3",
+        "csstype": "^3.1.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.2.33",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.33.tgz",
-      "integrity": "sha512-4jpJHRD4ORv8PlbYi+/MfP8ec1okz6rybe36MdpkDrGIdEItHEUyaHSKvz+ptNEyQpALmmVfRteHkU9F8vxOew==",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.3.tgz",
+      "integrity": "sha512-28volmaZVG2PGO3V3+gBPKoSHvLlE8FGfG/GKXKkjjfxLuj/50B/0OQGakM/g6ehQeqCrZYM4eHC4Ks48eig1Q==",
       "dependencies": {
-        "@vue/compiler-ssr": "3.2.33",
-        "@vue/shared": "3.2.33"
+        "@vue/compiler-ssr": "3.5.3",
+        "@vue/shared": "3.5.3"
       },
       "peerDependencies": {
-        "vue": "3.2.33"
+        "vue": "3.5.3"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.2.33",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.33.tgz",
-      "integrity": "sha512-UBc1Pg1T3yZ97vsA2ueER0F6GbJebLHYlEi4ou1H5YL4KWvMOOWwpYo9/QpWq93wxKG6Wo13IY74Hcn/f7c7Bg=="
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.3.tgz",
+      "integrity": "sha512-Jp2v8nylKBT+PlOUjun2Wp/f++TfJVFjshLzNtJDdmFJabJa7noGMncqXRM1vXGX+Yo2V7WykQFNxusSim8SCA=="
     },
     "node_modules/@vue/test-utils": {
       "version": "2.0.0-rc.17",
@@ -1425,9 +1444,9 @@
       "devOptional": true
     },
     "node_modules/csstype": {
-      "version": "2.6.20",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
-      "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/data-urls": {
       "version": "3.0.2",
@@ -1573,6 +1592,17 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.19.1",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.1.tgz",
@@ -3553,11 +3583,11 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
-      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "version": "0.30.11",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
+      "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
       "dependencies": {
-        "sourcemap-codec": "^1.4.8"
+        "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
     "node_modules/memory-fs": {
@@ -3639,9 +3669,15 @@
       "devOptional": true
     },
     "node_modules/nanoid": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz",
-      "integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -3850,9 +3886,9 @@
       }
     },
     "node_modules/picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
+      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -3867,9 +3903,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.12",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz",
-      "integrity": "sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==",
+      "version": "8.4.45",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.45.tgz",
+      "integrity": "sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q==",
       "funding": [
         {
           "type": "opencollective",
@@ -3878,12 +3914,16 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.1",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.1",
+        "source-map-js": "^1.2.0"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -4219,14 +4259,15 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4242,11 +4283,6 @@
         "source-map": "^0.6.0"
       }
     },
-    "node_modules/sourcemap-codec": {
-      "version": "1.4.8",
-      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
-    },
     "node_modules/string.prototype.trimend": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
@@ -4430,6 +4466,14 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -4531,7 +4575,7 @@
       "version": "4.5.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz",
       "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -4732,15 +4776,23 @@
       "dev": true
     },
     "node_modules/vue": {
-      "version": "3.2.33",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.33.tgz",
-      "integrity": "sha512-si1ExAlDUrLSIg/V7D/GgA4twJwfsfgG+t9w10z38HhL/HA07132pUQ2KuwAo8qbCyMJ9e6OqrmWrOCr+jW7ZQ==",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.3.tgz",
+      "integrity": "sha512-xvRbd0HpuLovYbOHXRHlSBsSvmUJbo0pzbkKTApWnQGf3/cu5Z39mQeA5cZdLRVIoNf3zI6MSoOgHUT5i2jO+Q==",
       "dependencies": {
-        "@vue/compiler-dom": "3.2.33",
-        "@vue/compiler-sfc": "3.2.33",
-        "@vue/runtime-dom": "3.2.33",
-        "@vue/server-renderer": "3.2.33",
-        "@vue/shared": "3.2.33"
+        "@vue/compiler-dom": "3.5.3",
+        "@vue/compiler-sfc": "3.5.3",
+        "@vue/runtime-dom": "3.5.3",
+        "@vue/server-renderer": "3.5.3",
+        "@vue/shared": "3.5.3"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
     "node_modules/vue-class-component": {
@@ -5062,10 +5114,33 @@
     }
   },
   "dependencies": {
+    "@babel/helper-string-parser": {
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
+      "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ=="
+    },
+    "@babel/helper-validator-identifier": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
+      "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w=="
+    },
     "@babel/parser": {
-      "version": "7.17.9",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.9.tgz",
-      "integrity": "sha512-vqUSBLP8dQHFPdPi9bc5GK9vRkYHJ49fsZdtoJ8EQ8ibpwk5rPKfvNIwChB0KVXcIjcepEBBd2VHC5r9Gy8ueg=="
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.6.tgz",
+      "integrity": "sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==",
+      "requires": {
+        "@babel/types": "^7.25.6"
+      }
+    },
+    "@babel/types": {
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.6.tgz",
+      "integrity": "sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==",
+      "requires": {
+        "@babel/helper-string-parser": "^7.24.8",
+        "@babel/helper-validator-identifier": "^7.24.7",
+        "to-fast-properties": "^2.0.0"
+      }
     },
     "@eslint/eslintrc": {
       "version": "1.2.1",
@@ -5171,11 +5246,9 @@
       }
     },
     "@jridgewell/sourcemap-codec": {
-      "version": "1.4.13",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.13.tgz",
-      "integrity": "sha512-GryiOJmNcWbovBxTfZSF71V/mXbgcV3MewDe3kIMCLyIh5e7SKAeUZs+rMnJ8jkMolZ/4/VsdBmMrw3l+VdZ3w==",
-      "dev": true,
-      "peer": true
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
     },
     "@jridgewell/trace-mapping": {
       "version": "0.3.13",
@@ -5473,49 +5546,49 @@
       }
     },
     "@vue/compiler-core": {
-      "version": "3.2.33",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.33.tgz",
-      "integrity": "sha512-AAmr52ji3Zhk7IKIuigX2osWWsb2nQE5xsdFYjdnmtQ4gymmqXbjLvkSE174+fF3A3kstYrTgGkqgOEbsdLDpw==",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.3.tgz",
+      "integrity": "sha512-adAfy9boPkP233NTyvLbGEqVuIfK/R0ZsBsIOW4BZNfb4BRpRW41Do1u+ozJpsb+mdoy80O20IzAsHaihRb5qA==",
       "requires": {
-        "@babel/parser": "^7.16.4",
-        "@vue/shared": "3.2.33",
+        "@babel/parser": "^7.25.3",
+        "@vue/shared": "3.5.3",
+        "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
-        "source-map": "^0.6.1"
+        "source-map-js": "^1.2.0"
       }
     },
     "@vue/compiler-dom": {
-      "version": "3.2.33",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.33.tgz",
-      "integrity": "sha512-GhiG1C8X98Xz9QUX/RlA6/kgPBWJkjq0Rq6//5XTAGSYrTMBgcLpP9+CnlUg1TFxnnCVughAG+KZl28XJqw8uQ==",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.3.tgz",
+      "integrity": "sha512-wnzFArg9zpvk/811CDOZOadJRugf1Bgl/TQ3RfV4nKfSPok4hi0w10ziYUQR6LnnBAUlEXYLUfZ71Oj9ds/+QA==",
       "requires": {
-        "@vue/compiler-core": "3.2.33",
-        "@vue/shared": "3.2.33"
+        "@vue/compiler-core": "3.5.3",
+        "@vue/shared": "3.5.3"
       }
     },
     "@vue/compiler-sfc": {
-      "version": "3.2.33",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.33.tgz",
-      "integrity": "sha512-H8D0WqagCr295pQjUYyO8P3IejM3vEzeCO1apzByAEaAR/WimhMYczHfZVvlCE/9yBaEu/eu9RdiWr0kF8b71Q==",
-      "requires": {
-        "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.33",
-        "@vue/compiler-dom": "3.2.33",
-        "@vue/compiler-ssr": "3.2.33",
-        "@vue/reactivity-transform": "3.2.33",
-        "@vue/shared": "3.2.33",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.3.tgz",
+      "integrity": "sha512-P3uATLny2tfyvMB04OQFe7Sczteno7SLFxwrOA/dw01pBWQHB5HL15a8PosoNX2aG/EAMGqnXTu+1LnmzFhpTQ==",
+      "requires": {
+        "@babel/parser": "^7.25.3",
+        "@vue/compiler-core": "3.5.3",
+        "@vue/compiler-dom": "3.5.3",
+        "@vue/compiler-ssr": "3.5.3",
+        "@vue/shared": "3.5.3",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.25.7",
-        "postcss": "^8.1.10",
-        "source-map": "^0.6.1"
+        "magic-string": "^0.30.11",
+        "postcss": "^8.4.44",
+        "source-map-js": "^1.2.0"
       }
     },
     "@vue/compiler-ssr": {
-      "version": "3.2.33",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.33.tgz",
-      "integrity": "sha512-XQh1Xdk3VquDpXsnoCd7JnMoWec9CfAzQDQsaMcSU79OrrO2PNR0ErlIjm/mGq3GmBfkQjzZACV+7GhfRB8xMQ==",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.3.tgz",
+      "integrity": "sha512-F/5f+r2WzL/2YAPl7UlKcJWHrvoZN8XwEBLnT7S4BXwncH25iDOabhO2M2DWioyTguJAGavDOawejkFXj8EM1w==",
       "requires": {
-        "@vue/compiler-dom": "3.2.33",
-        "@vue/shared": "3.2.33"
+        "@vue/compiler-dom": "3.5.3",
+        "@vue/shared": "3.5.3"
       }
     },
     "@vue/devtools-api": {
@@ -5545,57 +5618,46 @@
       }
     },
     "@vue/reactivity": {
-      "version": "3.2.33",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.33.tgz",
-      "integrity": "sha512-62Sq0mp9/0bLmDuxuLD5CIaMG2susFAGARLuZ/5jkU1FCf9EDbwUuF+BO8Ub3Rbodx0ziIecM/NsmyjardBxfQ==",
-      "requires": {
-        "@vue/shared": "3.2.33"
-      }
-    },
-    "@vue/reactivity-transform": {
-      "version": "3.2.33",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.33.tgz",
-      "integrity": "sha512-4UL5KOIvSQb254aqenW4q34qMXbfZcmEsV/yVidLUgvwYQQ/D21bGX3DlgPUGI3c4C+iOnNmDCkIxkILoX/Pyw==",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.3.tgz",
+      "integrity": "sha512-2w61UnRWTP7+rj1H/j6FH706gRBHdFVpIqEkSDAyIpafBXYH8xt4gttstbbCWdU3OlcSWO8/3mbKl/93/HSMpw==",
       "requires": {
-        "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.33",
-        "@vue/shared": "3.2.33",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.25.7"
+        "@vue/shared": "3.5.3"
       }
     },
     "@vue/runtime-core": {
-      "version": "3.2.33",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.33.tgz",
-      "integrity": "sha512-N2D2vfaXsBPhzCV3JsXQa2NECjxP3eXgZlFqKh4tgakp3iX6LCGv76DLlc+IfFZq+TW10Y8QUfeihXOupJ1dGw==",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.3.tgz",
+      "integrity": "sha512-5b2AQw5OZlmCzSsSBWYoZOsy75N4UdMWenTfDdI5bAzXnuVR7iR8Q4AOzQm2OGoA41xjk53VQKrqQhOz2ktWaw==",
       "requires": {
-        "@vue/reactivity": "3.2.33",
-        "@vue/shared": "3.2.33"
+        "@vue/reactivity": "3.5.3",
+        "@vue/shared": "3.5.3"
       }
     },
     "@vue/runtime-dom": {
-      "version": "3.2.33",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.33.tgz",
-      "integrity": "sha512-LSrJ6W7CZTSUygX5s8aFkraDWlO6K4geOwA3quFF2O+hC3QuAMZt/0Xb7JKE3C4JD4pFwCSO7oCrZmZ0BIJUnw==",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.3.tgz",
+      "integrity": "sha512-wPR1DEGc3XnQ7yHbmkTt3GoY0cEnVGQnARRdAkDzZ8MbUKEs26gogCQo6AOvvgahfjIcnvWJzkZArQ1fmWjcSg==",
       "requires": {
-        "@vue/runtime-core": "3.2.33",
-        "@vue/shared": "3.2.33",
-        "csstype": "^2.6.8"
+        "@vue/reactivity": "3.5.3",
+        "@vue/runtime-core": "3.5.3",
+        "@vue/shared": "3.5.3",
+        "csstype": "^3.1.3"
       }
     },
     "@vue/server-renderer": {
-      "version": "3.2.33",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.33.tgz",
-      "integrity": "sha512-4jpJHRD4ORv8PlbYi+/MfP8ec1okz6rybe36MdpkDrGIdEItHEUyaHSKvz+ptNEyQpALmmVfRteHkU9F8vxOew==",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.3.tgz",
+      "integrity": "sha512-28volmaZVG2PGO3V3+gBPKoSHvLlE8FGfG/GKXKkjjfxLuj/50B/0OQGakM/g6ehQeqCrZYM4eHC4Ks48eig1Q==",
       "requires": {
-        "@vue/compiler-ssr": "3.2.33",
-        "@vue/shared": "3.2.33"
+        "@vue/compiler-ssr": "3.5.3",
+        "@vue/shared": "3.5.3"
       }
     },
     "@vue/shared": {
-      "version": "3.2.33",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.33.tgz",
-      "integrity": "sha512-UBc1Pg1T3yZ97vsA2ueER0F6GbJebLHYlEi4ou1H5YL4KWvMOOWwpYo9/QpWq93wxKG6Wo13IY74Hcn/f7c7Bg=="
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.3.tgz",
+      "integrity": "sha512-Jp2v8nylKBT+PlOUjun2Wp/f++TfJVFjshLzNtJDdmFJabJa7noGMncqXRM1vXGX+Yo2V7WykQFNxusSim8SCA=="
     },
     "@vue/test-utils": {
       "version": "2.0.0-rc.17",
@@ -6156,9 +6218,9 @@
       }
     },
     "csstype": {
-      "version": "2.6.20",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
-      "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "data-urls": {
       "version": "3.0.2",
@@ -6271,6 +6333,11 @@
         "tapable": "^2.2.0"
       }
     },
+    "entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
+    },
     "es-abstract": {
       "version": "1.19.1",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.1.tgz",
@@ -7650,11 +7717,11 @@
       }
     },
     "magic-string": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
-      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "version": "0.30.11",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
+      "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
       "requires": {
-        "sourcemap-codec": "^1.4.8"
+        "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
     "memory-fs": {
@@ -7721,9 +7788,9 @@
       "devOptional": true
     },
     "nanoid": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz",
-      "integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw=="
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g=="
     },
     "natural-compare": {
       "version": "1.4.0",
@@ -7881,9 +7948,9 @@
       "integrity": "sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ=="
     },
     "picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
+      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw=="
     },
     "picomatch": {
       "version": "2.3.1",
@@ -7892,13 +7959,13 @@
       "devOptional": true
     },
     "postcss": {
-      "version": "8.4.12",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz",
-      "integrity": "sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==",
+      "version": "8.4.45",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.45.tgz",
+      "integrity": "sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q==",
       "requires": {
-        "nanoid": "^3.3.1",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.1",
+        "source-map-js": "^1.2.0"
       }
     },
     "prelude-ls": {
@@ -8117,12 +8184,13 @@
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true
     },
     "source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="
     },
     "source-map-support": {
       "version": "0.5.21",
@@ -8135,11 +8203,6 @@
         "source-map": "^0.6.0"
       }
     },
-    "sourcemap-codec": {
-      "version": "1.4.8",
-      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
-    },
     "string.prototype.trimend": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
@@ -8257,6 +8320,11 @@
       "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-0.3.2.tgz",
       "integrity": "sha512-2+40EP4D3sFYy42UkgkFFB+kiX2Tg3URG/lVvAZFfLxgGpnWl5qQJuBw1gaLttq8UOS+2p3C0WrhJnQigLTT2Q=="
     },
+    "to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog=="
+    },
     "to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -8339,7 +8407,7 @@
       "version": "4.5.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz",
       "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==",
-      "dev": true
+      "devOptional": true
     },
     "unbox-primitive": {
       "version": "1.0.1",
@@ -8445,15 +8513,15 @@
       "dev": true
     },
     "vue": {
-      "version": "3.2.33",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.33.tgz",
-      "integrity": "sha512-si1ExAlDUrLSIg/V7D/GgA4twJwfsfgG+t9w10z38HhL/HA07132pUQ2KuwAo8qbCyMJ9e6OqrmWrOCr+jW7ZQ==",
-      "requires": {
-        "@vue/compiler-dom": "3.2.33",
-        "@vue/compiler-sfc": "3.2.33",
-        "@vue/runtime-dom": "3.2.33",
-        "@vue/server-renderer": "3.2.33",
-        "@vue/shared": "3.2.33"
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.3.tgz",
+      "integrity": "sha512-xvRbd0HpuLovYbOHXRHlSBsSvmUJbo0pzbkKTApWnQGf3/cu5Z39mQeA5cZdLRVIoNf3zI6MSoOgHUT5i2jO+Q==",
+      "requires": {
+        "@vue/compiler-dom": "3.5.3",
+        "@vue/compiler-sfc": "3.5.3",
+        "@vue/runtime-dom": "3.5.3",
+        "@vue/server-renderer": "3.5.3",
+        "@vue/shared": "3.5.3"
       }
     },
     "vue-class-component": {
diff --git a/src/api/dlt/mock.ts b/src/api/dlt/mock.ts
index ca3f4fe..ee699fc 100644
--- a/src/api/dlt/mock.ts
+++ b/src/api/dlt/mock.ts
@@ -56,7 +56,7 @@ export default class DltMock extends DltInterface {
 
   async addPackage(pack: AddPackageForm) {
     await fakeDelay();
-    return 'Success';
+    return 'Added jobs.';
   }
 
   async getMostRecentVersion(pack: Package): Promise<string> {
diff --git a/src/components/AddPackageComponent.vue b/src/components/AddPackageComponent.vue
index edd723b..f0d07d7 100644
--- a/src/components/AddPackageComponent.vue
+++ b/src/components/AddPackageComponent.vue
@@ -1,33 +1,19 @@
 <template>
-  <va-modal v-model="showAddedModal" hide-default-actions overlay-opacity="0.2">
-    <template #header>
-      <h2>Package added</h2>
-    </template>
-    <div>Package {{ job.name }} with version {{ job.release }} has been added </div>
-    <template #footer>
-      <va-button @click="showAddedModal = false"> Close </va-button>
-    </template>
-  </va-modal>
+  <PopUpMessage v-model="showAddedModal" title="Package added">
+    Package {{ job.name }} with version {{ job.release }} has been added
+  </PopUpMessage>
 
-  <va-modal v-model="showFieldEmpty" hide-default-actions overlay-opacity="0.2">
-    <template #header>
-      <h2>Field empty</h2>
-    </template>
-    <div>One or more fields have been left empty.</div>
-    <template #footer>
-      <va-button @click="showFieldEmpty = false"> Close </va-button>
-    </template>
-  </va-modal>
+  <PopUpMessage v-model="showFieldEmpty" title="Field empty">
+    One or more fields have been left empty.
+  </PopUpMessage>
 
-  <va-modal v-model="showAlreadyAdded" hide-default-actions overlay-opacity="0.2">
-    <template #header>
-      <h2>Already added</h2>
-    </template>
-    <div>Package {{ job.name }} with version {{ job.release }} already in system, click close to show.</div>
-    <template #footer>
-      <va-button @click="showPackage"> Close </va-button>
-    </template>
-  </va-modal>
+  <PopUpMessage v-model="showAlreadyAdded" title="Already added" @button-clicked="showPackage">
+    Package {{ job.name }} with version {{ job.release }} already in system, click close to show.
+  </PopUpMessage>
+
+  <PopUpMessage v-model="showError" title="Error retreiving most recent version">
+    Can't retreive most recent version from version.
+  </PopUpMessage>
 
   <va-form>
     <div class="row">
@@ -56,10 +42,7 @@
         placeholder="leave empty for most recent version"
       />
       <div class="flex xs12">
-        <va-button type="submit" @click="addPackage">Submit</va-button>
-        <div v-if="response">
-          <p>{{ response }}</p>
-        </div>
+        <va-button :loading="isLoading" type="submit" @click="addPackage">Submit</va-button>
       </div>
     </div>
   </va-form>
@@ -68,15 +51,18 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import router from '@/router';
+import PopUpMessage from '@/components/PopUpMessage.vue';
 
 export default defineComponent({
   name: 'add-package-component',
+  components: {PopUpMessage},
   data() {
     return {
       showAddedModal: false,
       showAlreadyAdded: false,
+      showError: false,
       showFieldEmpty: false,
-      response: '',
+      isLoading: false,
       job: {
         platform: '',
         owner: '',
@@ -87,15 +73,22 @@ export default defineComponent({
   },
   methods: {
     async addPackage() {
+      this.isLoading = true;
       if (this.job.platform.length > 0 && this.job.owner.length > 0 && this.job.name.length > 0) {
         // if no release was specified grab the latest one
         if (this.job.release.length === 0) {
-          this.job.release = await this.$dltApi.getMostRecentVersion({
+          const version = await this.$dltApi.getMostRecentVersion({
             platform: this.job.platform,
             owner: this.job.owner,
             name: this.job.name,
             versions: [],
           });
+          if (version == '') {
+            this.isLoading = false;
+            this.showError = true;
+            return;
+          }
+          this.job.release = version;
         }
 
         // check if the package is already in the system
@@ -115,6 +108,7 @@ export default defineComponent({
       } else {
         this.showFieldEmpty = true;
       }
+      this.isLoading = false;
     },
     // TODO: Move to generalized validation system
     validateRequired(value: string) {
diff --git a/src/components/PopUpMessage.vue b/src/components/PopUpMessage.vue
new file mode 100644
index 0000000..342e743
--- /dev/null
+++ b/src/components/PopUpMessage.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const props = defineProps<{ title: string }>();
+const enabled = defineModel()
+defineEmits(['button-clicked'])
+</script>
+
+<template>
+  <va-modal v-model="enabled as boolean" hide-default-actions overlay-opacity="0.2">
+    <template #header>
+      <h2>{{ title }}</h2>
+    </template>
+    <div><slot></slot></div>
+    <template #footer>
+      <va-button @click="enabled = false; $emit('button-clicked')"> Close </va-button>
+    </template>
+  </va-modal>
+</template>
diff --git a/src/components/UserSettingsComponent.vue b/src/components/UserSettingsComponent.vue
index 556b74f..844df40 100644
--- a/src/components/UserSettingsComponent.vue
+++ b/src/components/UserSettingsComponent.vue
@@ -1,99 +1,27 @@
 <template>
-  <va-modal
-    v-model="modal.showSavedModal"
-    hide-default-actions
-    overlay-opacity="0.2"
-  >
-    <template #header>
-      <h2>Settings saved</h2>
-    </template>
-    <div>Your settings have been saved</div>
-    <template #footer>
-      <va-button @click="modal.showSavedModal = false">
-        Close
-      </va-button>
-    </template>
-  </va-modal>
-
-  <va-modal
-    v-model="modal.showGitHubProfileLinkModal"
-    hide-default-actions
-    overlay-opacity="0.2"
-  >
-    <template #header>
-      <h2>GitHub Username</h2>
-    </template>
-    <div>Enter your GitHub Username here. <br /></div>
-    <template #footer>
-      <va-button @click="modal.showGitHubProfileLinkModal = false">
-        Close
-      </va-button>
-    </template>
-  </va-modal>
-  
-  <va-modal
-    v-model="modal.showGitHubTokenModal"
-    hide-default-actions
-    overlay-opacity="0.2"
-  >
-    <template #header>
-      <h2>GitHub Token</h2>
-    </template>
-    <div>Follow <a target="_blank" rel="noopener noreferrer" href="https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token">this guide</a> on how to create a personal acces token on GitHub, and paste it here.<br />You do not need to select scopes.</div>
-    <template #footer>
-      <va-button @click="modal.showGitHubTokenModal = false">
-        Close
-      </va-button>
-    </template>
-  </va-modal>
-
-  <va-modal
-    v-model="modal.showLibrariesIOTokenModal"
-    hide-default-actions
-    overlay-opacity="0.2"
-  >
-    <template #header>
-      <h2>Libraries.IO Token</h2>
-    </template>
-    <div>Go to your Libaries.IO <a href="https://libraries.io/account" target="_blank" rel="noopener noreferrer">account page</a> and copy your API token.</div>
-    <template #footer>
-      <va-button @click="modal.showLibrariesIOTokenModal = false">
-        Close
-      </va-button>
-    </template>
-  </va-modal>
-
-  <va-modal
-    v-model="modal.showDLTGPGModal"
-    hide-default-actions
-    overlay-opacity="0.2"
-  >
-    <template #header>
-      <h2>DLT GPG Key</h2>
-    </template>
-    <div>Copy the key below and add it to your GitHub account, following <a target="_blank" rel="noopener noreferrer" href="https://docs.github.com/en/authentication/managing-commit-signature-verification/adding-a-new-gpg-key-to-your-github-account">this guide</a></div>
-    <template #footer>
-      <va-button @click="modal.showDLTGPGModal = false">
-        Close
-      </va-button>
-    </template>
-  </va-modal>
-
-  <va-modal
-    v-model="modal.showGPGkeyInGitHub"
-    hide-default-actions
-    overlay-opacity="0.2"
-  >
-    <template #header>
-      <h2>GPG Key</h2>
-    </template>
-    <div>The DLT GPG key has not been added to your GitHub account yet!</div>
-    <template #footer>
-      <va-button @click="modal.showGPGkeyInGitHub = false">
-        Close
-      </va-button>
-    </template>
-  </va-modal>
+  <PopUpMessage v-model="modal.showSavedModal" title="Settings saved">
+    Your settings have been saved
+  </PopUpMessage>
+
+  <PopUpMessage v-model="modal.showGitHubProfileLinkModal" title="GitHub Username">
+    Enter your GitHub Username here. <br />
+  </PopUpMessage>
+
+  <PopUpMessage v-model="modal.showGitHubTokenModal" title="GitHub Token">
+    Follow <a target="_blank" rel="noopener noreferrer" href="https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token">this guide</a> on how to create a personal acces token on GitHub, and paste it here.<br />You do not need to select scopes.
+  </PopUpMessage>
+
+  <PopUpMessage v-model="modal.showLibrariesIOTokenModal" title="Libraries.IO Token">
+    Go to your Libaries.IO <a href="https://libraries.io/account" target="_blank" rel="noopener noreferrer">account page</a> and copy your API token.
+  </PopUpMessage>
+
+  <PopUpMessage v-model="modal.showDLTGPGModal" title="DLT GPG Key">
+    Copy the key below and add it to your GitHub account, following <a target="_blank" rel="noopener noreferrer" href="https://docs.github.com/en/authentication/managing-commit-signature-verification/adding-a-new-gpg-key-to-your-github-account">this guide</a>
+  </PopUpMessage>
+
+  <PopUpMessage v-model="modal.showGPGkeyInGitHub" title="GPG Key">
+    The DLT GPG key has not been added to your GitHub account yet!
+  </PopUpMessage>
 
 
   <div class="flex xs12">
@@ -159,9 +87,11 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import axios from 'axios';
+import PopUpMessage from '@/components/PopUpMessage.vue';
 
 export default defineComponent({
   name: 'user-settings-component',
+  components: {PopUpMessage},
   props: {
     id: String,
   },
@@ -193,7 +123,7 @@ export default defineComponent({
         data: "https://github.com/"+this.request_data.user.gh_username.toLowerCase()+".gpg",
       }).then((response) => {
         this.modal.showGPGkeyInGitHub = !(response.data.stored_on_github);
-        
+
         axios.post('http://localhost:3000/api/spider/set-tokens', {
           github_token: this.request_data.user.gh_token,
           libraries_token: this.request_data.user.libraries_token,
@@ -204,13 +134,13 @@ export default defineComponent({
         });
       }).catch((error) => {
           console.log(error.message);
-      });            
+      });
     },
     validateRequired(value: string) {
       return (value && value.length > 0) || 'Field is required';
     },
-    copyToClipboard(){      
-      this.$copyText(this.request_data.user.dlt_gpg);            
+    copyToClipboard(){
+      this.$copyText(this.request_data.user.dlt_gpg);
     }
   },
   async mounted() {
@@ -227,4 +157,4 @@ export default defineComponent({
 </style>
 
 <!-- This program has been developed by students from the bachelor Computer Science at Utrecht University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences) -->
\ No newline at end of file
+© Copyright Utrecht University (Department of Information and Computing Sciences) -->
diff --git a/src/components/button/SpiderToggle.vue b/src/components/button/SpiderToggle.vue
index 3585c4e..bc2a1a3 100644
--- a/src/components/button/SpiderToggle.vue
+++ b/src/components/button/SpiderToggle.vue
@@ -5,29 +5,19 @@
     {{ getStatusText }}
   </va-switch>
 
-   <va-modal
-    v-model="showSpiderErrorModal"
-    hide-default-actions
-    overlay-opacity="0.2"
-  >
-    <template #header>
-      <h2>Error: couldn't start spider</h2>
-    </template>
-    <div>{{ modalErrorMessage }}</div>
-    <template #footer>
-      <va-button @click="showSpiderErrorModal = false">
-        Close
-      </va-button>
-    </template>
-  </va-modal>
+  <PopUpMessage v-model="showSpiderErrorModal" title="Error: couldn't start spider">
+    {{ modalErrorMessage }}
+  </PopUpMessage>
+
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-
+import PopUpMessage from '@/components/PopUpMessage.vue';
 
 export default defineComponent({
   name: 'spider-toggle-button',
+  components: {PopUpMessage},
   data() {
     return {
       state: null as boolean | null,
@@ -68,9 +58,9 @@ export default defineComponent({
         } else  {
           this.isActive = newState;
         }
-        
+
         this.state = this.isActive;
-        
+
       } catch (e) {
         this.modalErrorMessage=e.message;
         this.showSpiderErrorModal=true;
diff --git a/src/components/search/AddMinerComponent.vue b/src/components/search/AddMinerComponent.vue
index b399861..fedef05 100644
--- a/src/components/search/AddMinerComponent.vue
+++ b/src/components/search/AddMinerComponent.vue
@@ -1,64 +1,28 @@
 <template>
-  <va-modal v-model="showModalAdded" hide-default-actions overlay-opacity="0.2">
-    <template #header>
-      <h2>Miner Added</h2>
-    </template>
-    <div>Your miner has been added</div>
-    <template #footer>
-      <va-button @click="showModalAdded = false"> Close </va-button>
-    </template>
-  </va-modal>
+  <PopUpMessage v-model="showModalAdded" title="Miner Added">
+    Your miner has been added
+  </PopUpMessage>
 
-  <va-modal v-model="showModalError" hide-default-actions overlay-opacity="0.2">
-    <template #header>
-      <h2>Add Miner Error</h2>
-    </template>
-    <div>{{ errorMessage }}</div>
-    <template #footer>
-      <va-button @click="showModalError = false"> Close </va-button>
-    </template>
-  </va-modal>
+  <PopUpMessage v-model="showModalError" title="Add Miner Error">
+    {{ errorMessage }}
+  </PopUpMessage>
 
-  <va-modal v-model="showFieldEmpty" hide-default-actions overlay-opacity="0.2">
-    <template #header>
-      <h2>Field empty</h2>
-    </template>
-    <div>One or more fields have been left empty.</div>
-    <template #footer>
-      <va-button @click="showFieldEmpty = false"> Close </va-button>
-    </template>
-  </va-modal>
+  <PopUpMessage v-model="showFieldEmpty" title="Field empty">
+    One or more fields have been left empty.
+  </PopUpMessage>
 
   <!-- 2022-09-13 The following params could possibly be useful if supported by search miner
-  <va-modal
-    v-model="showModalVerbose"
-    hide-default-actions
-    overlay-opacity="0.2"
-  >
-    <template #header>
-      <h2>Verbosity Level</h2>
-    </template>
-    <div>
-      1 = Silent<br />
-      2 = Errors Only<br />
-      3 = Warnings &amp; Errors<br />
-      4 = Everything<br />
-      5 = Debug<br />
-    </div>
-    <template #footer>
-      <va-button @click="showModalVerbose = false"> Close </va-button>
-    </template>
-  </va-modal>
+  <PopUpMessage v-model="showModalVerbose" title="Verbosity Level">
+    1 = Silent<br />
+    2 = Errors Only<br />
+    3 = Warnings &amp; Errors<br />
+    4 = Everything<br />
+    5 = Debug<br />
+  </PopUpMessage>
 
-  <va-modal v-model="showModalCPU" hide-default-actions overlay-opacity="0.2">
-    <template #header>
-      <h2>CPUs</h2>
-    </template>
-    <div>computer's cores to use.</div>
-    <template #footer>
-      <va-button @click="showModalCPU = false"> Close </va-button>
-    </template>
-  </va-modal>
+  <PopUpMessage v-model="showModalCPU" title="CPUs">
+    computer's cores to use.
+  </PopUpMessage>
   -->
 
   <va-form>
@@ -116,9 +80,11 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import PopUpMessage from '@/components/PopUpMessage.vue';
 
 export default defineComponent({
   name: 'add-miner-component',
+  components: {PopUpMessage},
   data() {
     return {
       // showModalCPU: false,

From 2367453fa7b44425ac71a49e8b53845d103b6e79 Mon Sep 17 00:00:00 2001
From: Martijn Voordouw <martijnvoordouw@gmail.com>
Date: Fri, 20 Sep 2024 17:57:22 +0200
Subject: [PATCH 3/4] github actions no longer run on self-hosted

---
 .github/workflows/pr.yml | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
index 1dbdb6a..9832378 100644
--- a/.github/workflows/pr.yml
+++ b/.github/workflows/pr.yml
@@ -7,8 +7,10 @@ on: [pull_request]
 
 jobs:
   main:
-    runs-on: self-hosted
-    container: node:16
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: ['16.x']
     permissions: write-all
     steps:
       - name: Checkout code

From 63abe3c8ea40a1806511dbaa5e9d76fbe3987485 Mon Sep 17 00:00:00 2001
From: Martijn Voordouw <martijnvoordouw@gmail.com>
Date: Fri, 20 Sep 2024 19:25:39 +0200
Subject: [PATCH 4/4] linting fixed

---
 src/components/AddPackageComponent.vue   | 15 ++++++---------
 src/components/PopUpMessage.vue          |  9 +++++----
 src/components/UserSettingsComponent.vue | 19 +++++++++----------
 3 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/src/components/AddPackageComponent.vue b/src/components/AddPackageComponent.vue
index f0d07d7..25026b5 100644
--- a/src/components/AddPackageComponent.vue
+++ b/src/components/AddPackageComponent.vue
@@ -55,7 +55,7 @@ import PopUpMessage from '@/components/PopUpMessage.vue';
 
 export default defineComponent({
   name: 'add-package-component',
-  components: {PopUpMessage},
+  components: { PopUpMessage },
   data() {
     return {
       showAddedModal: false,
@@ -83,7 +83,7 @@ export default defineComponent({
             name: this.job.name,
             versions: [],
           });
-          if (version == '') {
+          if (version === '') {
             this.isLoading = false;
             this.showError = true;
             return;
@@ -93,16 +93,13 @@ export default defineComponent({
 
         // check if the package is already in the system
         const pack = await this.$dltApi.getPackage(this.job.name);
-        if (pack.versions.includes(this.job.release))
-        {
+        if (pack.versions.includes(this.job.release)) {
           this.showAlreadyAdded = true;
-        }
-        else
-        {
+        } else {
           const result = await this.$dltApi.addPackage(this.job);
 
           if (typeof result === 'string') {
-            if (result == 'Added jobs.') this.showAddedModal = true;
+            if (result === 'Added jobs.') this.showAddedModal = true;
           }
         }
       } else {
@@ -122,7 +119,7 @@ export default defineComponent({
           version: this.job.release,
         },
       });
-    }
+    },
   },
 });
 </script>
diff --git a/src/components/PopUpMessage.vue b/src/components/PopUpMessage.vue
index 342e743..00bc517 100644
--- a/src/components/PopUpMessage.vue
+++ b/src/components/PopUpMessage.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-const props = defineProps<{ title: string }>();
-const enabled = defineModel()
-defineEmits(['button-clicked'])
+/* eslint-disable no-undef */
+defineProps<{ title: string }>();
+const enabled = defineModel<boolean>();
+defineEmits(['button-clicked']);
 </script>
 
 <template>
-  <va-modal v-model="enabled as boolean" hide-default-actions overlay-opacity="0.2">
+  <va-modal v-model="enabled" hide-default-actions overlay-opacity="0.2">
     <template #header>
       <h2>{{ title }}</h2>
     </template>
diff --git a/src/components/UserSettingsComponent.vue b/src/components/UserSettingsComponent.vue
index 844df40..27cc29c 100644
--- a/src/components/UserSettingsComponent.vue
+++ b/src/components/UserSettingsComponent.vue
@@ -23,7 +23,6 @@
     The DLT GPG key has not been added to your GitHub account yet!
   </PopUpMessage>
 
-
   <div class="flex xs12">
     <va-form
       tag="form"
@@ -91,7 +90,7 @@ import PopUpMessage from '@/components/PopUpMessage.vue';
 
 export default defineComponent({
   name: 'user-settings-component',
-  components: {PopUpMessage},
+  components: { PopUpMessage },
   props: {
     id: String,
   },
@@ -120,31 +119,31 @@ export default defineComponent({
   methods: {
     async handleSubmit() {
       axios.post('http://localhost:3000/api/dlt/store-github-link', {
-        data: "https://github.com/"+this.request_data.user.gh_username.toLowerCase()+".gpg",
+        data: `https://github.com/${this.request_data.user.gh_username.toLowerCase()}.gpg`,
       }).then((response) => {
         this.modal.showGPGkeyInGitHub = !(response.data.stored_on_github);
 
         axios.post('http://localhost:3000/api/spider/set-tokens', {
           github_token: this.request_data.user.gh_token,
           libraries_token: this.request_data.user.libraries_token,
-        }).then((response) => {
-          this.modal.showSavedModal=true;
+        }).then(() => {
+          this.modal.showSavedModal = true;
         }).catch((error) => {
-            console.log(error.message);
+          console.log(error.message);
         });
       }).catch((error) => {
-          console.log(error.message);
+        console.log(error.message);
       });
     },
     validateRequired(value: string) {
       return (value && value.length > 0) || 'Field is required';
     },
-    copyToClipboard(){
+    copyToClipboard() {
       this.$copyText(this.request_data.user.dlt_gpg);
-    }
+    },
   },
   async mounted() {
-    this.request_data.user.gh_username = (await axios.get('http://localhost:3000/api/dlt/get-github-link')).data.slice(19).slice(0,-4);
+    this.request_data.user.gh_username = (await axios.get('http://localhost:3000/api/dlt/get-github-link')).data.slice(19).slice(0, -4);
     const { data } = await axios.get('http://localhost:3000/api/spider/get-tokens');
     this.request_data.user.gh_token = data.github_token;
     this.request_data.user.libraries_token = data.libraries_token;