From 03f99d61d861b6267c92ebc36b52888ce14eab8e Mon Sep 17 00:00:00 2001
From: sharevb <sharevb@gmail.com>
Date: Sat, 3 Feb 2024 12:36:05 +0100
Subject: [PATCH 1/3] feat(new tool): IP Geolocation

IP Geolocation information using ip-api.com
FIx #454
---
 components.d.ts                               |   1 +
 src/tools/index.ts                            |  11 +-
 src/tools/ip-geo-location/index.ts            |  12 ++
 src/tools/ip-geo-location/ip-geo-location.vue | 112 ++++++++++++++++++
 4 files changed, 135 insertions(+), 1 deletion(-)
 create mode 100644 src/tools/ip-geo-location/index.ts
 create mode 100644 src/tools/ip-geo-location/ip-geo-location.vue

diff --git a/components.d.ts b/components.d.ts
index fabbe793..846de9d6 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -112,6 +112,7 @@ declare module '@vue/runtime-core' {
     IconMdiVideo: typeof import('~icons/mdi/video')['default']
     InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']
     IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default']
+    IpGeoLocation: typeof import('./src/tools/ip-geo-location/ip-geo-location.vue')['default']
     Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default']
     Ipv4RangeExpander: typeof import('./src/tools/ipv4-range-expander/ipv4-range-expander.vue')['default']
     Ipv4SubnetCalculator: typeof import('./src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue')['default']
diff --git a/src/tools/index.ts b/src/tools/index.ts
index 2a477ed2..5792219c 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -2,6 +2,7 @@ import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
 import { tool as textToUnicode } from './text-to-unicode';
+import { tool as ipGeoLocation } from './ip-geo-location';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -147,7 +148,15 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Network',
-    components: [ipv4SubnetCalculator, ipv4AddressConverter, ipv4RangeExpander, macAddressLookup, macAddressGenerator, ipv6UlaGenerator],
+    components: [
+      ipv4SubnetCalculator,
+      ipv4AddressConverter,
+      ipv4RangeExpander,
+      macAddressLookup,
+      macAddressGenerator,
+      ipv6UlaGenerator,
+      ipGeoLocation,
+    ],
   },
   {
     name: 'Math',
diff --git a/src/tools/ip-geo-location/index.ts b/src/tools/ip-geo-location/index.ts
new file mode 100644
index 00000000..81e4e1eb
--- /dev/null
+++ b/src/tools/ip-geo-location/index.ts
@@ -0,0 +1,12 @@
+import { World } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'IP Geo Location',
+  path: '/ip-geo-location',
+  description: 'Retrieve information about an IPv4/6 address or domain location',
+  keywords: ['ip', 'domain', 'geo', 'location'],
+  component: () => import('./ip-geo-location.vue'),
+  icon: World,
+  createdAt: new Date('2024-01-17'),
+});
diff --git a/src/tools/ip-geo-location/ip-geo-location.vue b/src/tools/ip-geo-location/ip-geo-location.vue
new file mode 100644
index 00000000..ed973685
--- /dev/null
+++ b/src/tools/ip-geo-location/ip-geo-location.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import type { CKeyValueListItems } from '@/ui/c-key-value-list/c-key-value-list.types';
+
+const ipOrDomain = ref('8.8.8.8');
+const errorMessage = ref('');
+
+const fields: Array<{ field: string; name: string }> = [
+  { field: 'message', name: 'Message' },
+  { field: 'continent', name: 'Continent Name' },
+  { field: 'continentCode', name: 'Continent code' },
+  { field: 'country', name: 'Country Name' },
+  { field: 'countryCode', name: 'Country Code' },
+  { field: 'region', name: 'Region/state Code' },
+  { field: 'regionName', name: 'Region/state Name' },
+  { field: 'city', name: 'City' },
+  { field: 'district', name: 'District' },
+  { field: 'zip', name: 'Zip Code' },
+  { field: 'lat', name: 'Latitude' },
+  { field: 'lon', name: 'Longitude' },
+  { field: 'timezone', name: 'Timezone' },
+  { field: 'offset', name: 'Timezone UTC DST offset (in seconds)' },
+  { field: 'currency', name: 'National Currency' },
+  { field: 'isp', name: 'ISP Name' },
+  { field: 'org', name: 'Organization Name' },
+  { field: 'as', name: 'AS Number and Organization' },
+  { field: 'asname', name: 'AS name (RIR)' },
+  { field: 'reverse', name: 'Reverse DNS of the IP' },
+  { field: 'mobile', name: 'Mobile (cellular) connection' },
+  { field: 'proxy', name: 'Proxy, VPN or Tor exit address' },
+  { field: 'hosting', name: 'Hosting, colocated or data center' },
+  { field: 'query', name: 'IP used for the query' },
+];
+
+const geoInfos = ref<CKeyValueListItems>([]);
+const geoInfosData = ref<any>({});
+const status = ref<'pending' | 'error' | 'success'>('pending');
+
+const openStreetMapUrl = computed(
+  () => {
+    const gpsLatitude = geoInfosData.value.lat;
+    const gpsLongitude = geoInfosData.value.lon;
+    return gpsLatitude && gpsLongitude ? `https://www.openstreetmap.org/?mlat=${gpsLatitude}&mlon=${gpsLongitude}#map=18/${gpsLatitude}/${gpsLongitude}` : undefined;
+  },
+);
+
+async function onGetInfos() {
+  try {
+    status.value = 'pending';
+
+    const geoInfoQueryResponse = await fetch(`http://ip-api.com/json/${ipOrDomain.value}`);
+    if (!geoInfoQueryResponse.ok) {
+      throw geoInfoQueryResponse.statusText;
+    }
+
+    const data = await geoInfoQueryResponse.json();
+
+    const allGeoInfos = [];
+    for (const field of fields) {
+      if (data[field.field]) {
+        allGeoInfos.push({
+          label: field.name,
+          value: data[field.field],
+        });
+      }
+    }
+
+    status.value = 'success';
+    geoInfos.value = allGeoInfos;
+    geoInfosData.value = data;
+  }
+  catch (e: any) {
+    errorMessage.value = e.toString();
+    status.value = 'error';
+    return [];
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div flex items-center gap-2>
+      <c-input-text
+        v-model:value="ipOrDomain"
+        placeholder="Enter an IPv4/6 or a domain name"
+        @update:value="() => { status = 'pending' }"
+      />
+      <c-button align-center @click="onGetInfos">
+        Get GEO Location Infos
+      </c-button>
+    </div>
+
+    <n-divider />
+
+    <c-card v-if="status === 'pending'" mt-5>
+      Click on button above to get latest infos
+    </c-card>
+
+    <c-card v-if="status === 'success' && openStreetMapUrl" mt-4>
+      <c-button :href="openStreetMapUrl" target="_blank">
+        Localize on Open Street Map
+      </c-button>
+    </c-card>
+
+    <c-card v-if="status === 'success'" mt-5>
+      <c-key-value-list :items="geoInfos" />
+    </c-card>
+
+    <n-alert v-if="status === 'error'" title="Errors occured" type="error" mt-5>
+      {{ errorMessage }}
+    </n-alert>
+  </div>
+</template>

From a3e4ed9b8755ff9e8bcfba102c0ef3d97e0c4285 Mon Sep 17 00:00:00 2001
From: ShareVB <sharevb@gmail.com>
Date: Sat, 20 Jul 2024 20:29:39 +0200
Subject: [PATCH 2/3] fix: use ipinfo.io to allow https

---
 components.d.ts                               |  2 +
 src/tools/ip-geo-location/ip-geo-location.vue | 51 ++++++++++---------
 2 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 846de9d6..55bbb8d7 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -137,6 +137,7 @@ declare module '@vue/runtime-core' {
     MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']
     MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
     MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
+    NA: typeof import('naive-ui')['NA']
     NAlert: typeof import('naive-ui')['NAlert']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
@@ -163,6 +164,7 @@ declare module '@vue/runtime-core' {
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
+    NP: typeof import('naive-ui')['NP']
     NProgress: typeof import('naive-ui')['NProgress']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSlider: typeof import('naive-ui')['NSlider']
diff --git a/src/tools/ip-geo-location/ip-geo-location.vue b/src/tools/ip-geo-location/ip-geo-location.vue
index ed973685..26394f5f 100644
--- a/src/tools/ip-geo-location/ip-geo-location.vue
+++ b/src/tools/ip-geo-location/ip-geo-location.vue
@@ -1,39 +1,25 @@
 <script setup lang="ts">
 import type { CKeyValueListItems } from '@/ui/c-key-value-list/c-key-value-list.types';
 
-const ipOrDomain = ref('8.8.8.8');
+const ip = ref('8.8.8.8');
 const errorMessage = ref('');
 
 const fields: Array<{ field: string; name: string }> = [
-  { field: 'message', name: 'Message' },
-  { field: 'continent', name: 'Continent Name' },
-  { field: 'continentCode', name: 'Continent code' },
-  { field: 'country', name: 'Country Name' },
-  { field: 'countryCode', name: 'Country Code' },
+  { field: 'ip', name: 'IP' },
+  { field: 'hostname', name: 'Host Name' },
+  { field: 'country', name: 'Country Code' },
   { field: 'region', name: 'Region/state Code' },
-  { field: 'regionName', name: 'Region/state Name' },
   { field: 'city', name: 'City' },
-  { field: 'district', name: 'District' },
-  { field: 'zip', name: 'Zip Code' },
-  { field: 'lat', name: 'Latitude' },
-  { field: 'lon', name: 'Longitude' },
+  { field: 'postal', name: 'Postal Code' },
+  { field: 'loc', name: 'Latitude/Longitude' },
   { field: 'timezone', name: 'Timezone' },
-  { field: 'offset', name: 'Timezone UTC DST offset (in seconds)' },
-  { field: 'currency', name: 'National Currency' },
-  { field: 'isp', name: 'ISP Name' },
   { field: 'org', name: 'Organization Name' },
-  { field: 'as', name: 'AS Number and Organization' },
-  { field: 'asname', name: 'AS name (RIR)' },
-  { field: 'reverse', name: 'Reverse DNS of the IP' },
-  { field: 'mobile', name: 'Mobile (cellular) connection' },
-  { field: 'proxy', name: 'Proxy, VPN or Tor exit address' },
-  { field: 'hosting', name: 'Hosting, colocated or data center' },
-  { field: 'query', name: 'IP used for the query' },
 ];
 
 const geoInfos = ref<CKeyValueListItems>([]);
 const geoInfosData = ref<any>({});
 const status = ref<'pending' | 'error' | 'success'>('pending');
+const token = useStorage('ip-geoloc:token', '');
 
 const openStreetMapUrl = computed(
   () => {
@@ -47,7 +33,10 @@ async function onGetInfos() {
   try {
     status.value = 'pending';
 
-    const geoInfoQueryResponse = await fetch(`http://ip-api.com/json/${ipOrDomain.value}`);
+    const geoInfoQueryResponse = await fetch(
+      token.value !== ''
+        ? `https://ipinfo.io/${ip.value}/json?token=${token.value}`
+        : `https://ipinfo.io/${ip.value}/json`);
     if (!geoInfoQueryResponse.ok) {
       throw geoInfoQueryResponse.statusText;
     }
@@ -80,8 +69,8 @@ async function onGetInfos() {
   <div>
     <div flex items-center gap-2>
       <c-input-text
-        v-model:value="ipOrDomain"
-        placeholder="Enter an IPv4/6 or a domain name"
+        v-model:value="ip"
+        placeholder="Enter an IPv4/6"
         @update:value="() => { status = 'pending' }"
       />
       <c-button align-center @click="onGetInfos">
@@ -89,6 +78,20 @@ async function onGetInfos() {
       </c-button>
     </div>
 
+    <details mt-2>
+      <summary>Optional ipinfo.io token</summary>
+      <c-input-text
+        v-model:value="token"
+        placeholder="Optional ipinfo.io token"
+        @update:value="() => { status = 'pending' }"
+      />
+      <n-p>
+        <n-a href="https://ipinfo.io/">
+          Signup for a free token
+        </n-a>
+      </n-p>
+    </details>
+
     <n-divider />
 
     <c-card v-if="status === 'pending'" mt-5>

From a0b8cf0301ec1d2dab235116c14f3946c6b9d48e Mon Sep 17 00:00:00 2001
From: ShareVB <sharevb@gmail.com>
Date: Sun, 21 Jul 2024 21:26:11 +0200
Subject: [PATCH 3/3] fix: link to openstreetmap

---
 src/tools/ip-geo-location/ip-geo-location.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/tools/ip-geo-location/ip-geo-location.vue b/src/tools/ip-geo-location/ip-geo-location.vue
index 26394f5f..e829fde6 100644
--- a/src/tools/ip-geo-location/ip-geo-location.vue
+++ b/src/tools/ip-geo-location/ip-geo-location.vue
@@ -17,14 +17,15 @@ const fields: Array<{ field: string; name: string }> = [
 ];
 
 const geoInfos = ref<CKeyValueListItems>([]);
-const geoInfosData = ref<any>({});
+const geoInfosData = ref<{
+  loc?: string
+}>({});
 const status = ref<'pending' | 'error' | 'success'>('pending');
 const token = useStorage('ip-geoloc:token', '');
 
 const openStreetMapUrl = computed(
   () => {
-    const gpsLatitude = geoInfosData.value.lat;
-    const gpsLongitude = geoInfosData.value.lon;
+    const [gpsLatitude, gpsLongitude] = geoInfosData.value.loc?.split(',') || [];
     return gpsLatitude && gpsLongitude ? `https://www.openstreetmap.org/?mlat=${gpsLatitude}&mlon=${gpsLongitude}#map=18/${gpsLatitude}/${gpsLongitude}` : undefined;
   },
 );