feat(new tool): My IP Address

Fix CorentinTh#1435

Author: sharevb

src/tools/index.ts

@@ -25,6 +25,7 @@ import { tool as angleConverter } from './angle-converter';
 import { tool as floatingPointNumberConverter } from './floating-point-number-converter';
 import { tool as snowflakeIdExtractor } from './snowflake-id-extractor';
 import { tool as emailNormalizer } from './email-normalizer';
+import { tool as myIp } from './my-ip';
 import { tool as geoDistanceCalculator } from './geo-distance-calculator';
 import { tool as xVrSpamcauseDecoder } from './x-vr-spamcause-decoder';
 import { tool as bounceParser } from './bounce-parser';
@@ -491,6 +492,7 @@ export const toolsByCategory: ToolCategory[] = [
       raidCalculator,
       sipAuth,
       xVrSpamcauseDecoder,
+      myIp,
     ],
   },
   {

src/tools/my-ip/index.ts

@@ -0,0 +1,12 @@
+import { World } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'My IP Address',
+  path: '/my-ip',
+  description: 'Get your client IP Address (IPv4/6) using https://getjsonip.com/',
+  keywords: ['my', 'client', 'ip'],
+  component: () => import('./my-ip.vue'),
+  icon: World,
+  createdAt: new Date('2025-01-01'),
+});

src/tools/my-ip/my-ip.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computedRefreshableAsync } from '@/composable/computedRefreshable';
+import { useCopy } from '@/composable/copy';
+
+const [clientIP, refreshClientIP] = computedRefreshableAsync(async () => {
+  try {
+    return (await (await fetch('https://jsonip.com', { mode: 'cors' })).json()).ip?.toString();
+  }
+  catch (e: any) {
+    return e.toString();
+  }
+});
+
+const { copy } = useCopy({ source: clientIP, text: 'Client IP copied to the clipboard' });
+</script>
+
+<template>
+  <c-card title="Your IPv4/6 address">
+    <div class="ip">
+      {{ clientIP }}
+    </div>
+    <div flex justify-center gap-3>
+      <c-button @click="copy()">
+        Copy
+      </c-button>
+      <c-button @click="refreshClientIP">
+        Refresh
+      </c-button>
+    </div>
+  </c-card>
+</template>
+
+<style lang="less" scoped>
+.ip {
+  text-align: center;
+  font-size: 26px;
+  font-weight: 400;
+  margin: 10px 0 25px;
+}
+</style>