From 577de74ac41549a0ca405abaeaca6b34768dc9be Mon Sep 17 00:00:00 2001
From: Alicia Sykes <gh@d0h.co>
Date: Sun, 29 May 2022 23:11:05 +0100
Subject: [PATCH] :sparkles: AdGuard DNS info widget (#493)

---
 src/components/Widgets/AdGuardDnsInfo.vue | 174 ++++++++++++++++++++++
 1 file changed, 174 insertions(+)
 create mode 100644 src/components/Widgets/AdGuardDnsInfo.vue

diff --git a/src/components/Widgets/AdGuardDnsInfo.vue b/src/components/Widgets/AdGuardDnsInfo.vue
new file mode 100644
index 00000000..a1b1fcb8
--- /dev/null
+++ b/src/components/Widgets/AdGuardDnsInfo.vue
@@ -0,0 +1,174 @@
+<template>
+<div class="ad-guard-dns-info-wrapper">
+  <div class="enable-status" v-if="enabled !== null">
+    <p v-if="enabled"  class="status connected"><span>✔</span> Enabled</p>
+    <p v-else class="status not-connected"><span>✘</span> Disabled</p>
+  </div>
+  <p @click="toggleShowData" v-if="dnsInfo.length > 0" class="expend-details-btn">
+    {{ showData ? $t('widgets.general.show-less') : $t('widgets.general.show-more') }}
+  </p>
+  <div v-if="showData && dnsInfo.length > 0" class="dns-info">
+    <div v-for="(item, index) in dnsInfo" :key="index" class="row">
+      <span class="lbl">{{ item.lbl }}: </span>
+      <span class="val">{{ item.val | renderVal }}</span>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+import WidgetMixin from '@/mixins/WidgetMixin';
+import { capitalize } from '@/utils/MiscHelpers';
+
+export default {
+  mixins: [WidgetMixin],
+  computed: {
+    /* URL/ IP or hostname to the AdGuardHome instance, without trailing slash */
+    hostname() {
+      if (!this.options.hostname) this.error('You must specify the path to your AdGuard server');
+      return this.options.hostname;
+    },
+    showFullInfo() {
+      return this.options.showFullInfo;
+    },
+    endpoint() {
+      return `${this.hostname}/control/dns_info`;
+    },
+    basicInoEndpoint() {
+      return `${this.hostname}/control/status`;
+    },
+    authHeaders() {
+      if (this.options.username && this.options.password) {
+        const encoded = window.btoa(`${this.options.username}:${this.options.password}`);
+        return { Authorization: `Basic ${encoded}` };
+      }
+      return {};
+    },
+  },
+  data() {
+    return {
+      enabled: null,
+      dnsInfo: [],
+      showData: false,
+    };
+  },
+  filters: {
+    renderVal(val) {
+      if (val === undefined) return 'N/A';
+      if (Array.isArray(val) && val.length === 0) return 'N/A';
+      if (typeof val === 'boolean') return val ? '✔' : '✘';
+      if (typeof val === 'string') return capitalize(val);
+      if (Array.isArray(val)) return val.join('\n');
+      return val;
+    },
+  },
+  methods: {
+    /* Make GET request to AdGuard endpoint */
+    fetchData() {
+      this.makeRequest(this.basicInoEndpoint, this.authHeaders).then(this.processStatusBasics);
+      this.makeRequest(this.endpoint, this.authHeaders).then(this.processData);
+    },
+    processStatusBasics(data) {
+      const newInfo = [
+        { lbl: 'DNS Address', val: data.dns_addresses },
+        { lbl: 'DNS Port', val: data.dns_port },
+        { lbl: 'HTTP Port', val: data.http_port },
+      ];
+      this.dnsInfo = [...this.dnsInfo, ...newInfo];
+    },
+    /* Assign data variables to the returned data */
+    processData(data) {
+      this.enabled = data.protection_enabled;
+      const newInfo = [
+        { lbl: 'Blocking Mode', val: data.blocking_mode },
+        { lbl: 'Cache Size', val: `${data.cache_size} B` },
+        { lbl: 'IPv6', val: !data.disable_ipv6 },
+        { lbl: 'DNSSEC', val: data.dnssec_enabled },
+        { lbl: 'EDNS Client-Subnet', val: data.edns_cs_enabled },
+        { lbl: 'Private PTR', val: data.use_private_ptr_resolvers },
+        { lbl: 'Upstream DNS', val: data.upstream_dns },
+        { lbl: 'PRT Upstream', val: data.local_ptr_upstreams },
+        { lbl: 'Bootstrap DNS', val: data.bootstrap_dns },
+      ];
+      this.dnsInfo = [...this.dnsInfo, ...newInfo];
+    },
+    toggleShowData() {
+      this.showData = !this.showData;
+    },
+  },
+  mounted() {
+    if (this.showFullInfo) this.showData = true;
+  },
+};
+</script>
+
+<style lang="scss">
+.ad-guard-dns-info-wrapper {
+  color: var(--widget-text-color);
+  .enable-status {
+      .status {
+        display: flex;
+        max-width: 250px;
+        font-size: 1.5rem;
+        font-weight: bold;
+        align-items: center;
+        margin: 0.25rem auto;
+        justify-content: space-evenly;
+        span {
+          font-size: 1.5rem;
+          border-radius: 1.5rem;
+          padding: 0.3rem 0.7rem;
+          border: 1px solid;
+          color: var(--background);
+        }
+        &.not-connected {
+          color: var(--danger);
+          span { background: var(--danger); }
+        }
+        &.connected {
+          color: var(--success);
+          span { background: var(--success); }
+        }
+      }
+  }
+
+  p.expend-details-btn {
+    cursor: pointer;
+    text-align: center;
+    margin: 0;
+    font-size: 0.9rem;
+    padding: 0.1rem 0.25rem;
+    border: 1px solid transparent;
+    color: var(--widget-text-color);
+    opacity: var(--dimming-factor);
+    border-radius: var(--curve-factor);
+    &:hover {
+      text-decoration: underline;
+    }
+    &:focus, &:active {
+      background: var(--widget-text-color);
+      color: var(--widget-background-color);
+    }
+  }
+}
+
+.dns-info {
+  .row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.2rem 0.1rem;
+    font-size: 0.9rem;
+    &:not(:last-child) {
+      border-bottom: 1px dashed var(--widget-text-color);
+    }
+    .val {
+      max-width: 80%;
+      overflow: hidden;
+      white-space: pre;
+      text-overflow: ellipsis;
+      font-family: var(--font-monospace);
+    }
+  }
+}
+</style>