From: Floren Munteanu <fmunteanu@users.noreply.github.com>
Date: Sun, 19 Feb 2023 20:18:56 +0000 (-0500)
Subject: Implement PiHole API token (#580)
X-Git-Tag: v23.02.2^0
X-Git-Url: https://git.immae.eu/?a=commitdiff_plain;h=d362add383b622c4b941e8bdd02b741393c65bd0;p=github%2Fbastienwirtz%2Fhomer.git

Implement PiHole API token (#580)

Implement PiHole API token
---

diff --git a/docs/customservices.md b/docs/customservices.md
index b28f399..31d302b 100644
--- a/docs/customservices.md
+++ b/docs/customservices.md
@@ -58,9 +58,13 @@ The following configuration is available for the PiHole service.
   logo: "assets/tools/sample.png"
   # subtitle: "Network-wide Ad Blocking" # optional, if no subtitle is defined, PiHole statistics will be shown
   url: "http://192.168.0.151/admin"
+  apikey: "<---insert-api-key-here--->" # optional, needed if web interface is password protected
   type: "PiHole"
 ```
 
+**Remarks:**
+If PiHole web interface is password protected, obtain the `apikey` from Settings > API/Web interface > Show API token.
+
 ## OpenWeatherMap
 
 Using the OpenWeatherMap service you can display weather information about a given location.
diff --git a/src/components/services/PiHole.vue b/src/components/services/PiHole.vue
index 9aac016..237cb12 100644
--- a/src/components/services/PiHole.vue
+++ b/src/components/services/PiHole.vue
@@ -49,7 +49,11 @@ export default {
   },
   methods: {
     fetchStatus: async function () {
-      const result = await this.fetch("/api.php").catch((e) => console.log(e));
+      const authQueryParams = this.item.apikey
+        ? `?summaryRaw&auth=${this.item.apikey}`
+        : "";
+      const result = await this.fetch(`/api.php${authQueryParams}`)
+        .catch((e) => console.log(e));
 
       this.status = result.status;
       this.ads_percentage_today = result.ads_percentage_today;