✨ Adds Mullvad and IP blacklist check widgets

docs/privacy.md

@@ -109,6 +109,8 @@ Dashy supports [Widgets](/docs/widgets.md) for displaying dynamic content. Below
 - **[IP Address](/docs/widgets.md#public-ip)**: `https://ipapi.co/json` or `http://ip-api.com/json`
     - [IPGeoLocation Privacy Policy](https://ipgeolocation.io/privacy.html)
     - [IP-API Privacy Policy](https://ip-api.com/docs/legal)
+- **[IP Blacklist](/docs/widgets.md#ip-blacklist)**: `https://api.blacklistchecker.com`
+    - [Blacklist Checker Privacy Policy](https://blacklistchecker.com/privacy)
 - **[Crypto Watch List](/docs/widgets.md#crypto-watch-list)** and **[Token Price History](/docs/widgets.md#crypto-token-price-history)**: `https://api.coingecko.com`
     - [CoinGecko Privacy Policy](https://www.coingecko.com/en/privacy)
 - **[Wallet Balance](/docs/widgets.md#wallet-balance)**: `https://api.blockcypher.com/`
@@ -129,6 +131,8 @@ Dashy supports [Widgets](/docs/widgets.md) for displaying dynamic content. Below
     - No Policy Availible
 - **[News Headlines](/docs/widgets.md#news-headlines)**: `https://api.currentsapi.services`
     - [CurrentsAPI Privacy Policy](https://currentsapi.services/privacy)
+- **[Mullvad Status](/docs/widgets.md#mullvad-status)**: `https://am.i.mullvad.net`
+    - [Mullvad Privacy Policy](https://mullvad.net/en/help/privacy-policy/)
 - **[TFL Status](/docs/widgets.md#tfl-status)**: `https://api.tfl.gov.uk`
     - [TFL Privacy Policy](https://tfl.gov.uk/corporate/privacy-and-cookies/)
 - **[Stock Price History](/docs/widgets.md#stock-price-history)**: `https://alphavantage.co`

docs/widgets.md

@@ -14,10 +14,12 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
   - [RSS Feed](#rss-feed)
   - [Image](#image)
   - [Public IP Address](#public-ip)
+  - [IP Blacklist Checker](#ip-blacklist)
   - [Crypto Watch List](#crypto-watch-list)
   - [Crypto Price History](#crypto-token-price-history)
   - [Crypto Wallet Balance](#wallet-balance)
   - [Code Stats](#code-stats)
+  - [Mullvad Status](#mullvad-status)
   - [Email Aliases (AnonAddy)](#anonaddy)
   - [Vulnerability Feed](#vulnerability-feed)
   - [Exchange Rates](#exchange-rates)
@@ -285,6 +287,37 @@ Or
 
 ---
 
+### IP Blacklist
+
+Notice certain web pages aren't loading? This widget quickly shows which blacklists your IP address (or host, or email) appears on, using data from [blacklistchecker.com](https://blacklistchecker.com/).
+
+<p align="center"><img width="600" src="https://i.ibb.co/hX0fp5Z/ip-blacklist.png" /></p>
+
+##### Options
+
+**Field** | **Type** | **Required** | **Description**
+--- | --- | --- | ---
+**`ipAddress`** | `string` |  _Optional_ | The IP to check. This can also be a domain/ host name or even an email address. If left blank, Dashy will use your current public IP address.
+**`apiKey`** | `string` |  Required | You can get your free API key from [blacklistchecker.com](https://blacklistchecker.com/keys)
+
+##### Example 
+
+```yaml
+- type: blacklist-check
+  options:
+    apiKey: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+    ipAddress: 1.1.1.1
+```
+
+##### Info
+- **CORS**: 🟢 Enabled
+- **Auth**: 🔴 Required
+- **Price**: 🟠 Free Plan
+- **Host**: Managed Instance Only
+- **Privacy**: _See [BlacklistChecker Privacy Policy](https://blacklistchecker.com/privacy)_
+
+---
+
 ### Crypto Watch List
 
 Keep track of price changes of your favorite crypto assets. Data is fetched from [CoinGecko](https://www.coingecko.com/). All fields are optional.
@@ -433,6 +466,31 @@ Display your coding summary. [Code::Stats](https://codestats.net/) is a free and
 
 ---
 
+### Mullvad Status
+
+Shows your Mullvad VPN connection status, as well as server info. Fetched from [am.i.mullvad.net](https://mullvad.net/en/check/)
+
+<p align="center"><img width="400" src="https://i.ibb.co/3BCb2YV/mullvad-check.png" /></p>
+
+##### Options
+
+_No Options_
+
+##### Example
+
+```yaml
+- type: mullvad-status
+```
+
+##### Info
+- **CORS**: 🟢 Enabled
+- **Auth**: 🟢 Not Required
+- **Price**: 🟢 Free
+- **Host**: Managed
+- **Privacy**: _See [Mullvad Privacy Policy](https://mullvad.net/en/help/privacy-policy/)_
+
+---
+
 ### AnonAddy
 
 [AnonAddy](https://anonaddy.com/) is a free and open source mail forwarding service. Use it to protect your real email address, by using a different alias for each of your online accounts, and have all emails land in your normal inbox(es). Supports custom domains, email replies, PGP-encryption, multiple recipients and more

src/components/LinkItems/SubItemGroup.vue

@@ -58,7 +58,6 @@ export default {
   border-radius: var(--curve-factor);
   text-decoration: none;
   transition: all 0.2s ease-in-out 0s;
-  color: var(--item-text-color);
   p.sub-item-group-title {
     margin: 0 auto;
     cursor: default;

src/components/Widgets/BlacklistCheck.vue

@@ -0,0 +1,137 @@
+<template>
+<div class="blacklist-check-wrapper" v-if="blacklisted">
+  <p v-if="message" class="summary-msg">{{ message }}</p>
+  <template v-if="showAll || (blacklisted && blacklistFiltered.length > 0)">
+    <div v-for="blacklist in blacklistFiltered" :key="blacklist.id" class="blacklist-row">
+      <span v-if="blacklist.detected" class="status detected">✘</span>
+      <span v-else class="status not-detected">✔</span>
+      <span>{{ blacklist.name }}</span>
+    </div>
+  </template>
+  <div v-else class="all-clear">
+    <p>No Detections Found</p>
+    <span class="tick">✔</span>
+  </div>
+  <p class="toggle-view-all" @click="showAll = !showAll">
+    {{ showAll ? $t('widgets.general.show-less') : $t('widgets.general.show-more') }}
+  </p>
+</div>
+</template>
+
+<script>
+import WidgetMixin from '@/mixins/WidgetMixin';
+import { widgetApiEndpoints } from '@/utils/defaults';
+
+export default {
+  mixins: [WidgetMixin],
+  computed: {
+    version() {
+      return this.options.version || 'v2';
+    },
+    ipAddress() {
+      if (this.autoIp) return this.autoIp;
+      if (!this.options.apiKey) this.error('Missing IP Address');
+      return this.options.ipAddress;
+    },
+    apiKey() {
+      if (!this.options.apiKey) this.error('Missing API Key');
+      return this.options.apiKey;
+    },
+    endpoint() {
+      return `${widgetApiEndpoints.blacklistCheck}/${this.ipAddress}`;
+    },
+    blacklistFiltered() {
+      return this.showAll ? this.blacklisted : this.blacklisted.filter(bl => (bl.detected));
+    },
+  },
+  data() {
+    return {
+      blacklisted: null,
+      message: '',
+      showAll: false,
+      autoIp: null,
+    };
+  },
+  methods: {
+    /* Make GET request to CoinGecko API endpoint */
+    fetchData() {
+      if (!this.ipAddress) {
+        this.getUsersIpAddress(); return;
+      }
+      this.defaultTimeout = 20000;
+      const options = { Authorization: `Basic ${this.apiKey}` };
+      this.makeRequest(this.endpoint, options).then(this.processData);
+    },
+    /* Assign data variables to the returned data */
+    processData(blResponse) {
+      this.message = `${blResponse.detections} detections found for ${blResponse.ip_address}`;
+      this.blacklisted = blResponse.blacklists;
+    },
+    getUsersIpAddress() {
+      this.makeRequest(widgetApiEndpoints.publicIp)
+        .then((ipInfo) => {
+          this.autoIp = ipInfo.ip;
+          this.fetchData();
+        });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.blacklist-check-wrapper {
+  color: var(--widget-text-color);
+  padding: 0.25rem;
+  cursor: default;
+  max-height: 2800px;
+  overflow: auto;
+  .blacklist-row {
+    display: flex;
+    align-items: center;
+    .status {
+      width: 1rem;
+      height: 1rem;
+      padding: 0 0.25rem 0.5rem 0.25rem;
+      margin: 0.1rem 0.5rem 0.1rem 0.1rem;
+      border: 1px solid var(--widget-text-color);
+      border-radius: 1rem;
+      text-align: center;
+      &.detected { color: var(--danger); border-color: var(--danger); }
+      &.not-detected { color: var(--success); border-color: var(--success); }
+    }
+    &:not(:last-child) { border-bottom: 1px dashed var(--widget-text-color); }
+  }
+  p.summary-msg {
+    font-size: 0.85rem;
+    margin: 0.2rem auto;
+    font-style: italic;
+    opacity: var(--dimming-factor);
+    color: var(--widget-text-color);
+  }
+  p.toggle-view-all {
+    text-align: center;
+    margin: 0.5rem auto;
+    padding: 0.5rem;
+    border-radius: var(--curve-factor);
+    border: 1px dashed transparent;
+    background: var(--widget-accent-color);
+    cursor: pointer;
+    &:hover {
+      border-color: var(--widget-text-color);
+    }
+  }
+  .all-clear {
+    color: var(--success);
+    text-align: center;
+    .tick {
+      font-size: 2rem;
+      margin: 0 auto;
+      border-radius: 1.5rem;
+      padding: 0.3rem 0.8rem;
+      background: var(--success);
+      color: var(--white);
+    }
+  }
+}
+
+</style>

src/components/Widgets/MullvadStatus.vue

@@ -0,0 +1,111 @@
+<template>
+<div class="mullvad-wrapper" v-if="mullvadInfo">
+  <p v-if="mullvadInfo.isMullvad"  class="status connected"><span>✔</span> Connected</p>
+  <p v-else class="status not-connected"><span>✘</span> Not Connected</p>
+  <div class="connection-info">
+    <p><span class="lbl">IP</span><span class="val">{{ mullvadInfo.ip }}</span></p>
+    <p v-if="mullvadInfo.host">
+      <span class="lbl">Host</span><span class="val">{{ mullvadInfo.host }}</span>
+    </p>
+    <p><span class="lbl">Owner</span><span class="val">{{ mullvadInfo.ownedBy }}</span></p>
+    <p v-if="mullvadInfo.serverType">
+      <span class="lbl">Type</span><span class="val">{{ mullvadInfo.serverType }}</span>
+    </p>
+    <p><span class="lbl">Location</span><span class="val">{{ mullvadInfo.location }}</span></p>
+    <p>
+      <span class="lbl">Blacklisted?</span>
+      <span class="val">{{ mullvadInfo.isBlacklisted ? '✘ Yes' : '✔ No' }}</span>
+    </p>
+  </div>
+</div>
+</template>
+
+<script>
+import WidgetMixin from '@/mixins/WidgetMixin';
+import { widgetApiEndpoints } from '@/utils/defaults';
+
+export default {
+  mixins: [WidgetMixin],
+  computed: {
+    endpoint() {
+      return widgetApiEndpoints.mullvad;
+    },
+  },
+  data() {
+    return {
+      mullvadInfo: null,
+    };
+  },
+  methods: {
+    /* Make GET request to Mullvad API endpoint */
+    fetchData() {
+      this.makeRequest(this.endpoint).then(this.processData);
+    },
+    /* Assign data variables to the returned data */
+    processData(mullvad) {
+      this.mullvadInfo = {
+        ip: mullvad.ip,
+        isMullvad: mullvad.mullvad_exit_ip,
+        host: mullvad.mullvad_exit_ip_hostname,
+        serverType: mullvad.mullvad_server_type,
+        ownedBy: mullvad.organization,
+        location: `${mullvad.city}, ${mullvad.country}`,
+        isBlacklisted: mullvad.blacklisted.blacklisted,
+      };
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.mullvad-wrapper {
+  color: var(--widget-text-color);
+  cursor: default;
+
+  .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); }
+    }
+  }
+  .connection-info {
+    p {
+      display: flex;
+      max-width: 250px;
+      font-size: 0.9rem;
+      padding: 0.2rem;
+      margin: 0.2rem auto;
+      justify-content: space-between;
+      opacity: var(--dimming-factor);
+      span {
+        &.lbl {
+          font-weight: bold;
+        }
+        &.val {
+          font-family: monospace;
+        }
+      }
+      &:not(:last-child) { border-bottom: 1px dashed var(--widget-text-color); }
+    }
+  }
+}
+
+</style>

src/components/Widgets/WidgetBase.vue

@@ -34,6 +34,13 @@
         @error="handleError"
         :ref="widgetRef"
       />
+      <BlacklistCheck
+        v-else-if="widgetType === 'blacklist-check'"
+        :options="widgetOptions"
+        @loading="setLoaderState"
+        @error="handleError"
+        :ref="widgetRef"
+      />
       <Clock
         v-else-if="widgetType === 'clock'"
         :options="widgetOptions"
@@ -244,6 +251,13 @@
         @error="handleError"
         :ref="widgetRef"
       />
+      <MullvadStatus
+        v-else-if="widgetType === 'mullvad-status'"
+        :options="widgetOptions"
+        @loading="setLoaderState"
+        @error="handleError"
+        :ref="widgetRef"
+      />
       <NdCpuHistory
         v-else-if="widgetType === 'nd-cpu-history'"
         :options="widgetOptions"
@@ -402,6 +416,7 @@ export default {
     // Register widget components
     AnonAddy: () => import('@/components/Widgets/AnonAddy.vue'),
     Apod: () => import('@/components/Widgets/Apod.vue'),
+    BlacklistCheck: () => import('@/components/Widgets/BlacklistCheck.vue'),
     Clock: () => import('@/components/Widgets/Clock.vue'),
     CodeStats: () => import('@/components/Widgets/CodeStats.vue'),
     CovidStats: () => import('@/components/Widgets/CovidStats.vue'),
@@ -432,6 +447,7 @@ export default {
     IframeWidget: () => import('@/components/Widgets/IframeWidget.vue'),
     ImageWidget: () => import('@/components/Widgets/ImageWidget.vue'),
     Jokes: () => import('@/components/Widgets/Jokes.vue'),
+    MullvadStatus: () => import('@/components/Widgets/MullvadStatus.vue'),
     NdCpuHistory: () => import('@/components/Widgets/NdCpuHistory.vue'),
     NdLoadHistory: () => import('@/components/Widgets/NdLoadHistory.vue'),
     NdRamHistory: () => import('@/components/Widgets/NdRamHistory.vue'),
@@ -476,7 +492,7 @@ export default {
     /* Returns users specified widget options, or empty object */
     widgetOptions() {
       const options = this.widget.options || {};
-      const timeout = this.widget.timeout || 2500;
+      const timeout = this.widget.timeout || null;
       const useProxy = this.appConfig.widgetsAlwaysUseProxy || !!this.widget.useProxy;
       const updateInterval = this.widget.updateInterval !== undefined
         ? this.widget.updateInterval : null;

src/mixins/WidgetMixin.js

@@ -20,6 +20,7 @@ const WidgetMixin = {
     overrideUpdateInterval: null,
     disableLoader: false, // Prevent ever showing the loader
     updater: null, // Stores interval
+    defaultTimeout: 1000,
   }),
   /* When component mounted, fetch initial data */
   mounted() {
@@ -106,7 +107,7 @@ const WidgetMixin = {
       const CustomHeaders = options || null;
       const headers = this.useProxy
         ? { 'Target-URL': endpoint, CustomHeaders: JSON.stringify(CustomHeaders) } : CustomHeaders;
-      const timeout = this.options.timeout || 500;
+      const timeout = this.options.timeout || this.defaultTimeout;
       const requestConfig = {
         method, url, headers, data, timeout,
       };

src/utils/MiscHelpers.js

@@ -46,6 +46,12 @@ export const timestampToDateTime = (timestamp) => {
   return `${timestampToDate(timestamp)} at ${timestampToTime(timestamp)}`;
 };
 
+/* Given a 2-letter country ISO code, return the countries name */
+export const getCountryFromIso = (iso) => {
+  const regionNames = new Intl.DisplayNames(['en'], { type: 'region' });
+  return regionNames.of(iso);
+};
+
 /* Given a 2-digit country code, return path to flag image from Flagpedia */
 export const getCountryFlag = (countryCode, dimens) => {
   const protocol = 'https';

src/utils/defaults.js

@@ -209,6 +209,7 @@ module.exports = {
   widgetApiEndpoints: {
     anonAddy: 'https://app.anonaddy.com',
     astronomyPictureOfTheDay: 'https://apodapi.herokuapp.com/api',
+    blacklistCheck: 'https://api.blacklistchecker.com/check',
     codeStats: 'https://codestats.net/',
     covidStats: 'https://disease.sh/v3/covid-19',
     cryptoPrices: 'https://api.coingecko.com/api/v3/coins/',
@@ -223,6 +224,7 @@ module.exports = {
     holidays: 'https://kayaposoft.com/enrico/json/v2.0/?action=getHolidaysForDateRange',
     jokes: 'https://v2.jokeapi.dev/joke/',
     news: 'https://api.currentsapi.services/v1/latest-news',
+    mullvad: 'https://am.i.mullvad.net/json',
     publicIp: 'https://ipapi.co/json',
     publicIp2: 'https://api.ipgeolocation.io/ipgeo',
     publicIp3: 'http://ip-api.com/json',