✨ Add env vars parser to avoid leaking secrets

.env

@@ -38,3 +38,7 @@
 
 # Directory for conf.yml backups
 # BACKUP_DIR=./public/
+
+# Setup any other user defined vars by prepending VUE_APP_ to the var name
+# VUE_APP_pihole_ip=http://your.pihole.ip
+# VUE_APP_pihole_key=your_pihole_secret_key

docs/widgets.md

@@ -1551,6 +1551,19 @@ Displays the number of queries blocked by [Pi-Hole](https://pi-hole.net/).
     apiKey: xxxxxxxxxxxxxxxxxxxxxxx
 ```
 
+> [!TIP]
+> In order to avoid leaking secret data, both `hostname` and `apiKey` can leverage environment variables. Simply pass the name of the variable, which MUST start with `VUE_APP_`.
+
+```yaml
+- type: pi-hole-stats
+  options:
+    hostname: VUE_APP_pihole_ip
+    apiKey: VUE_APP_pihole_key
+```
+
+> [!IMPORTANT]
+> You will need to restart the server (or the docker image) if adding/editing an env var for this to be refreshed.
+
 #### Info
 
 - **CORS**: 🟢 Enabled

src/components/Widgets/PiHoleStats.vue

@@ -36,13 +36,14 @@ export default {
   computed: {
     /* Let user select which comic to display: random, latest or a specific number */
     hostname() {
-      const usersChoice = this.options.hostname;
+      const usersChoice = this.parseAsEnvVar(this.options.hostname);
       if (!usersChoice) this.error('You must specify the hostname for your Pi-Hole server');
       return usersChoice || 'http://pi.hole';
     },
     apiKey() {
-      if (!this.options.apiKey) this.error('API Key is required, please see the docs');
-      return this.options.apiKey;
+      const usersChoice = this.parseAsEnvVar(this.options.apiKey);
+      if (!usersChoice) this.error('API Key is required, please see the docs');
+      return usersChoice;
     },
     endpoint() {
       return `${this.hostname}/admin/api.php?summary&auth=${this.apiKey}`;

src/mixins/WidgetMixin.js

@@ -131,6 +131,11 @@ const WidgetMixin = {
           });
       });
     },
+    /* Check if a value is an environment variable, return its value if so. */
+    parseAsEnvVar(str) {
+      if (str.includes('VUE_APP_')) return process.env[str];
+      return str;
+    },
   },
 };