Merge branch 'feat/ip-in-range' into chore/all-my-stuffs

# Conflicts:
#	package.json
#	pnpm-lock.yaml
#	src/tools/index.ts

Author: sharevb

package.json

@@ -205,6 +205,7 @@
     "ip-matching": "^2.1.2",
     "is-cidr": "^5.0.3",
     "is-ip": "^5.0.1",
+    "ip-matching": "^2.1.2",
     "json5": "^2.2.3",
     "jsonpath": "^1.1.1",
     "jsonar-mod": "^1.9.0",

src/tools/index.ts

@@ -200,6 +200,7 @@ import { tool as manyUnitsConverter } from './many-units-converter';
 import { tool as powerConverter } from './power-converter';
 import { tool as dockerComposeConverter } from './docker-compose-converter';
 import { tool as imageExifReader } from './image-exif-reader';
+import { tool as ipInRange } from './ip-in-range';
 import { tool as yamlViewer } from './yaml-viewer';
 import { tool as barcodeReader } from './barcode-reader';
 import { tool as barcodeGenerator } from './barcode-generator';
@@ -404,6 +405,7 @@ export const toolsByCategory: ToolCategory[] = [
       ipv4SubnetCalculator,
       ipv4AddressConverter,
       // ipv6AddressConverter,
+      ipInRange,
       ipv4RangeExpander,
       macAddressLookup,
       macAddressGenerator,

src/tools/ip-in-range/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/ip-in-range.vue

@@ -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>