⚡ Adds support for fetching IP via HTTPS (#437)

docs/widgets.md

@@ -210,13 +210,16 @@ Display news and updates from any RSS-enabled service.
 
 ### Public IP
 
-Often find yourself searching "What's my IP", just so you can check your VPN is still connected? This widget displays your public IP address, along with ISP name and approx location. Data is fetched from [IP-API.com](https://ip-api.com/).
+Often find yourself searching "What's my IP", just so you can check your VPN is still connected? This widget displays your public IP address, along with ISP name and approx location. Data can be fetched from either [IP-API.com](https://ip-api.com/) or [ipgeolocation.io](https://ipgeolocation.io/).
 
 <p align="center"><img width="400" src="https://i.ibb.co/vc3c8zN/public-ip.png" /></p>
 
 ##### Options
 
-_No config options._
+**Field** | **Type** | **Required** | **Description**
+--- | --- | --- | ---
+**`provider`** | `string` |  Required | The name of the service to fetch IP address from. Can be either `ip-api` or `ipgeolocation`. Defaults to `ip-api` which only works via HTTP, if you set to `ipgeolocation` then you must also provide an API key
+**`apiKey`** | `string` |  Required | Only required if provider is set to `ipgeolocation`. You can get a free API key [here](https://ipgeolocation.io/signup.html)
 
 ##### Example 
 
@@ -224,12 +227,21 @@ _No config options._
 - type: public-ip
 ```
 
+Or
+
+```yaml
+- type: public-ip
+  options:
+    provider: ipgeolocation
+    apiKey: xxxxxxxxxxxxxxx
+```
+
 ##### Info
 - **CORS**: 🟢 Enabled
 - **Auth**: 🟠 Optional
 - **Price**: 🟢 Free
 - **Host**: Managed Instance Only
-- **Privacy**: _See [IP-API Privacy Policy](https://ip-api.com/docs/legal)_
+- **Privacy**: _See [IPGeoLocation Privacy Policy](https://ipgeolocation.io/privacy.html) or [IP-API Privacy Policy](https://ip-api.com/docs/legal)_
 
 ---
 

src/components/Widgets/PublicIp.vue

@@ -1,25 +1,41 @@
 <template>
 <div class="ip-info-wrapper">
   <p class="ip-address">{{ ipAddr }}</p>
-  <div class="region-wrapper" title="Open in Maps">
+  <div class="region-wrapper">
     <img class="flag-image" :src="flagImg" alt="Flag" />
     <div class="info-text">
       <p class="isp-name">{{ ispName }}</p>
-      <a class="ip-location" :href="mapsUrl">{{ location }}</a>
+      <a class="ip-location" :href="mapsUrl" title="🗺️ Open in Maps">
+        {{ location }}
+      </a>
     </div>
   </div>
 </div>
 </template>
 
 <script>
-import axios from 'axios';
 import WidgetMixin from '@/mixins/WidgetMixin';
 import { widgetApiEndpoints } from '@/utils/defaults';
 import { getCountryFlag, getMapUrl } from '@/utils/MiscHelpers';
 
 export default {
   mixins: [WidgetMixin],
-  components: {},
+  computed: {
+    endpoint() {
+      if (this.provider === 'ipgeolocation') {
+        return `${widgetApiEndpoints.publicIp2}?apiKey=${this.apiKey}`;
+      }
+      return widgetApiEndpoints.publicIp;
+    },
+    apiKey() {
+      if (this.provider === 'ipgeolocation' && !this.options.apiKey) this.error('Missing API Key');
+      return this.options.apiKey;
+    },
+    provider() {
+      // Can be either `ip-api` or `ipgeolocation`
+      return this.options.provider || 'ip-api';
+    },
+  },
   data() {
     return {
       ipAddr: null,
@@ -32,24 +48,23 @@ export default {
   methods: {
     /* Make GET request to CoinGecko API endpoint */
     fetchData() {
-      axios.get(widgetApiEndpoints.publicIp)
+      this.makeRequest(this.endpoint).then(this.processData);
-        .then((response) => {
-          this.processData(response.data);
-        })
-        .catch((dataFetchError) => {
-          this.error('Unable to fetch IP info', dataFetchError);
-        })
-        .finally(() => {
-          this.finishLoading();
-        });
     },
     /* Assign data variables to the returned data */
     processData(ipInfo) {
-      this.ipAddr = ipInfo.query;
+      if (this.provider === 'ip-api') {
-      this.ispName = ipInfo.isp;
+        this.ipAddr = ipInfo.query;
-      this.location = `${ipInfo.city}, ${ipInfo.regionName}`;
+        this.ispName = ipInfo.isp;
-      this.flagImg = getCountryFlag(ipInfo.countryCode);
+        this.location = `${ipInfo.city}, ${ipInfo.regionName}`;
-      this.mapsUrl = getMapUrl({ lat: ipInfo.lat, lon: ipInfo.lon });
+        this.flagImg = getCountryFlag(ipInfo.countryCode);
+        this.mapsUrl = getMapUrl({ lat: ipInfo.lat, lon: ipInfo.lon });
+      } else if (this.provider === 'ipgeolocation') {
+        this.ipAddr = ipInfo.ip;
+        this.ispName = ipInfo.organization || ipInfo.isp;
+        this.flagImg = ipInfo.country_flag;
+        this.location = `${ipInfo.city}, ${ipInfo.country_name}`;
+        this.mapsUrl = getMapUrl({ lat: ipInfo.latitude, lon: ipInfo.longitude });
+      }
     },
   },
 };

src/utils/defaults.js

@@ -223,6 +223,7 @@ module.exports = {
     jokes: 'https://v2.jokeapi.dev/joke/',
     news: 'https://api.currentsapi.services/v1/latest-news',
     publicIp: 'http://ip-api.com/json',
+    publicIp2: 'https://api.ipgeolocation.io/ipgeo',
     readMeStats: 'https://github-readme-stats.vercel.app/api',
     rssToJson: 'https://api.rss2json.com/v1/api.json',
     sportsScores: 'https://www.thesportsdb.com/api/v1/json',