6 files changed, 64 insertions, 23 deletions

diff --git a/src/App.vue b/src/App.vue
index 1f4f509..c263c8a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -74,7 +74,8 @@
               <Service
                 v-for="(item, index) in group.items"
                 :key="index"
-                v-bind:item="item"
+                :item="item"
+                :proxy="config.proxy"
                 :class="['column', `is-${12 / config.columns}`]"
               />
             </template>
@@ -102,7 +103,8 @@
               <Service
                 v-for="(item, index) in group.items"
                 :key="index"
-                v-bind:item="item"
+                :item="item"
+                :proxy="config.proxy"
               />
             </div>
           </div>
diff --git a/src/assets/defaults.yml b/src/assets/defaults.yml
index 7d3a863..ed1fbc9 100644
--- a/src/assets/defaults.yml
+++ b/src/assets/defaults.yml
@@ -44,3 +44,6 @@ colors:
 message: ~
 links: []
 services: []
+
+
+proxy: ~
\ No newline at end of file
diff --git a/src/components/Service.vue b/src/components/Service.vue
index 39a9ac4..25b86d5 100644
--- a/src/components/Service.vue
+++ b/src/components/Service.vue
@@ -1,5 +1,5 @@
 <template>
-  <component v-bind:is="component" :item="item"></component>
+  <component v-bind:is="component" :item="item" :proxy="proxy"></component>
 </template>
 
 <script>
@@ -9,6 +9,7 @@ export default {
   name: "Service",
   props: {
     item: Object,
+    proxy: Object,
   },
   computed: {
     component() {
diff --git a/src/components/services/AdGuardHome.vue b/src/components/services/AdGuardHome.vue
index 16881fa..b01f0f4 100644
--- a/src/components/services/AdGuardHome.vue
+++ b/src/components/services/AdGuardHome.vue
@@ -20,10 +20,12 @@
 </template>
 
 <script>
+import service from "@/mixins/service.js";
 import Generic from "./Generic.vue";
 
 export default {
   name: "AdGuardHome",
+  mixins: [service],
   props: {
     item: Object,
   },
@@ -60,18 +62,14 @@ export default {
   },
   methods: {
     fetchStatus: async function () {
-      this.status = await fetch(`${this.item.url}/control/status`, {
-        credentials: "include",
-      })
-        .then((response) => response.json())
-        .catch((e) => console.log(e));
+      this.status = await this.fetch("/control/status").catch((e) =>
+        console.log(e)
+      );
     },
     fetchStats: async function () {
-      this.stats = await fetch(`${this.item.url}/control/stats`, {
-        credentials: "include",
-      })
-        .then((response) => response.json())
-        .catch((e) => console.log(e));
+      this.stats = await this.fetch("/control/stats").catch((e) =>
+        console.log(e)
+      );
     },
   },
 };
diff --git a/src/components/services/Ping.vue b/src/components/services/Ping.vue
index 6fd3ec5..d1fda57 100644
--- a/src/components/services/Ping.vue
+++ b/src/components/services/Ping.vue
@@ -9,10 +9,12 @@
 </template>
 
 <script>
+import service from "@/mixins/service.js";
 import Generic from "./Generic.vue";
 
 export default {
   name: "Ping",
+  mixins: [service],
   props: {
     item: Object,
   },
@@ -27,16 +29,8 @@ export default {
   },
   methods: {
     fetchStatus: async function () {
-      const url = `${this.item.url}`;
-      fetch(url, {
-        method: "HEAD",
-        cache: "no-cache",
-        credentials: "include",
-      })
-        .then((response) => {
-          if (!response.ok) {
-            throw Error(response.statusText);
-          }
+      this.fetch("/", { method: "HEAD", cache: "no-cache" }, false)
+        .then(() => {
           this.status = "online";
         })
         .catch(() => {
diff --git a/src/mixins/service.js b/src/mixins/service.js
new file mode 100644
index 0000000..17fa6fc
--- /dev/null
+++ b/src/mixins/service.js
@@ -0,0 +1,43 @@
+export default {
+  props: {
+    proxy: Object,
+  },
+  created: function () {
+    // custom service often consume info from an API using the item link (url) as a base url,
+    // but sometimes the base url is different. An optional alternative URL can be provided with the "endpoint" key.
+    this.endpoint = this.item.endpoint || this.item.url;
+
+    if (this.endpoint.endsWith("/")) {
+      this.endpoint = this.endpoint.slice(0, -1);
+    }
+  },
+  methods: {
+    fetch: function (path, init, json = true) {
+      let options = {};
+
+      if (this.proxy?.useCredentials) {
+        options.credentials = "include";
+      }
+
+      // Each item can override the credential settings
+      if (this.item.useCredentials !== undefined) {
+        options.credentials =
+          this.item.useCredentials === true ? "include" : "omit";
+      }
+
+      options = Object.assign(options, init);
+
+      if (path.startsWith("/")) {
+        path = path.slice(1);
+      }
+
+      return fetch(`${this.endpoint}/${path}`, options).then((response) => {
+        if (!response.ok) {
+          throw new Error("Not 2xx response");
+        }
+
+        return json ? response.json() : response;
+      });
+    },
+  },
+};