feat(new tool): IPv4/6 in IP Range

Author: sharevb

package.json

@@ -62,6 +62,7 @@
     "highlight.js": "^11.7.0",
     "iarna-toml-esm": "^3.0.5",
     "ibantools": "^4.3.3",
+    "ip-matching": "^2.1.2",
     "json5": "^2.2.3",
     "jwt-decode": "^3.1.2",
     "libphonenumber-js": "^1.10.28",

pnpm-lock.yaml

@@ -75,6 +75,7 @@ import { tool as urlParser } from './url-parser';
 import { tool as uuidGenerator } from './uuid-generator';
 import { tool as macAddressLookup } from './mac-address-lookup';
 import { tool as xmlFormatter } from './xml-formatter';
+import { tool as ipInRange } from './ip-in-range';
 
 export const toolsByCategory: ToolCategory[] = [
   {
@@ -143,7 +144,15 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Network',
-    components: [ipv4SubnetCalculator, ipv4AddressConverter, ipv4RangeExpander, macAddressLookup, macAddressGenerator, ipv6UlaGenerator],
+    components: [
+      ipv4SubnetCalculator,
+      ipv4AddressConverter,
+      ipInRange,
+      ipv4RangeExpander,
+      macAddressLookup,
+      macAddressGenerator,
+      ipv6UlaGenerator,
+    ],
   },
   {
     name: 'Math',

src/tools/index.ts

@@ -0,0 +1,12 @@
+import { UnfoldMoreOutlined } from '@vicons/material';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'IP in Range/CIDR/Mask',
+  path: '/ip-in-range',
+  description: 'Given a CIDR/IP Range/Wildcard IP/IP Mask, tell if a given IP is in subnet range',
+  keywords: ['ip', 'cidr', 'range'],
+  component: () => import('./ip-in-range.vue'),
+  icon: UnfoldMoreOutlined,
+  createdAt: new Date('2024-03-09'),
+});

src/tools/ip-in-range/index.ts

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { useStorage } from '@vueuse/core';
+import { Check as CheckIcon, LetterX as CrossIcon } from '@vicons/tabler';
+import { getMatch } from 'ip-matching';
+import { withDefaultOnError } from '@/utils/defaults';
+import { isNotThrowing } from '@/utils/boolean';
+import SpanCopyable from '@/components/SpanCopyable.vue';
+
+const range = useStorage('ip-in-range:range', '192.168.0.1/24'); // NOSONAR
+const ip = useStorage('ip-in-range:ip', '192.168.0.1'); // NOSONAR
+
+const match = computed(() => withDefaultOnError(() => getMatch(range.value), undefined));
+const subnets = computed(() => {
+  return (match.value?.convertToMasks() || []).map((mask) => {
+    const subnet = mask.convertToSubnet();
+    if (!subnet) {
+      return { cidr: '', start: '', end: '' };
+    }
+    return {
+      cidr: subnet.toString(),
+      start: subnet.getFirst().toString(),
+      end: subnet.getLast().toString(),
+    };
+  }).filter(subnet => subnet.cidr !== '');
+});
+const ipIsInMatch = computed(() => match.value?.matches(ip.value));
+
+const ipValidationRules = [
+  {
+    message: 'We cannot parse this CIDR/IP Range/Mask/Wildcard, check the format',
+    validator: (value: string) => isNotThrowing(() => getMatch(value)) && getMatch(range.value),
+  },
+];
+</script>
+
+<template>
+  <div>
+    <c-input-text
+      v-model:value="range"
+      label="An IPv4/6 CIDR/Range/Mask/Wildcard"
+      placeholder="The ipv4/6 CIDR..."
+      :validation-rules="ipValidationRules"
+      mb-4
+    />
+
+    <c-input-text
+      v-model:value="ip"
+      label="An IPv4/6 address"
+      placeholder="The ipv4/6 address..."
+      :validation-rules="ipValidationRules"
+      mb-4
+    />
+
+    <n-divider />
+
+    <div flex justify-center>
+      <span v-if="ipIsInMatch">
+        <n-icon color="green">
+          <CheckIcon />
+        </n-icon>
+        Match
+      </span>
+      <span v-else>
+        <n-icon color="red">
+          <CrossIcon />
+        </n-icon>
+        Not Match
+      </span>
+    </div>
+
+    <n-divider />
+
+    <c-card title="Subnets">
+      <n-table>
+        <tbody>
+          <tr v-for="{ cidr, start, end } in subnets" :key="cidr">
+            <td font-bold>
+              <SpanCopyable :value="cidr" />
+            </td>
+            <td>
+              <SpanCopyable :value="start" />
+            </td>
+            <td>
+              <SpanCopyable :value="end" />
+            </td>
+          </tr>
+        </tbody>
+      </n-table>
+    </c-card>
+  </div>
+</template>