feat(new tool): IPv4/6 CIDR to IP Range

IPv4/6 CIDR to IP Range
Reverse fof CorentinTh#802

Author: sharevb

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']
+    IpCidrToRange: typeof import('./src/tools/ip-cidr-to-range/ip-cidr-to-range.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']

package.json

@@ -48,6 +48,7 @@
     "@vueuse/router": "^10.0.0",
     "bcryptjs": "^2.4.3",
     "change-case": "^4.1.2",
+    "cidr-tools": "^7.0.4",
     "colord": "^2.9.3",
     "composerize-ts": "^0.6.2",
     "country-code-lookup": "^0.1.0",
@@ -62,6 +63,11 @@
     "highlight.js": "^11.7.0",
     "iarna-toml-esm": "^3.0.5",
     "ibantools": "^4.3.3",
+    "ip-address": "^9.0.5",
+    "ip-bigint": "^8.0.2",
+    "ip-cidr": "^4.0.0",
+    "is-cidr": "^5.0.3",
+    "is-ip": "^5.0.1",
     "json5": "^2.2.3",
     "jwt-decode": "^3.1.2",
     "libphonenumber-js": "^1.10.28",

pnpm-lock.yaml

@@ -77,6 +77,7 @@ 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 yamlViewer } from './yaml-viewer';
+import { tool as ipCidrToRange } from './ip-cidr-to-range';
 
 export const toolsByCategory: ToolCategory[] = [
   {
@@ -147,7 +148,15 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Network',
-    components: [ipv4SubnetCalculator, ipv4AddressConverter, ipv4RangeExpander, macAddressLookup, macAddressGenerator, ipv6UlaGenerator],
+    components: [
+      ipv4SubnetCalculator,
+      ipv4AddressConverter,
+      ipv4RangeExpander,
+      ipCidrToRange,
+      macAddressLookup,
+      macAddressGenerator,
+      ipv6UlaGenerator,
+    ],
   },
   {
     name: 'Math',

src/tools/index.ts

@@ -0,0 +1,12 @@
+import { Binary } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Ipv4/6 CIDR to IP Range Calculator',
+  path: '/ip-cidr-to-range',
+  description: 'Calculate IP Range from a CIDR (IPv4/6)',
+  keywords: ['ipv4', 'ipv6', 'cidr'],
+  component: () => import('./ip-cidr-to-range.vue'),
+  icon: Binary,
+  createdAt: new Date('2024-01-10'),
+});

src/tools/ip-cidr-to-range/index.ts

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import isCidr from 'is-cidr';
+import { expand } from 'cidr-tools';
+import { useValidation } from '@/composable/validation';
+
+const rawCIDR = useStorage('ip-cidr-to-range:cidr', '192.168.1.0/24');
+
+const result = computed(() => {
+  const ips = expand(rawCIDR.value);
+  if (!ips || !ips.length) {
+    return undefined;
+  }
+
+  return { startIpAddress: ips.slice(0, 1)[0], endIpAddress: ips.slice(-1)[0] };
+});
+
+const cidrValidation = useValidation({
+  source: rawCIDR,
+  rules: [{ message: 'Invalid ipv4/6 CIDR', validator: cidr => isCidr(cidr) }],
+});
+
+const showResult = computed(() => cidrValidation.isValid && result.value !== undefined);
+</script>
+
+<template>
+  <div>
+    <c-input-text
+      v-model:value="rawCIDR"
+      label="IPv4/6 CIDR (ie, 1.0.0.0/23)"
+      placeholder="IPv4/6 CIDR (ie, 1.0.0.0/23)"
+      :validation="cidrValidation"
+      clearable
+    />
+
+    <c-card v-if="showResult" title="IPv4/6 range" mt-4>
+      <input-copyable
+        label="Start IP Address"
+        label-position="left"
+        label-width="150px"
+        label-align="right"
+
+        :value="result?.startIpAddress"
+        disabled mb-2
+      />
+      <input-copyable
+        label="End IP Address"
+        label-position="left"
+        label-width="150px"
+        label-align="right"
+
+        :value="result?.endIpAddress"
+        disabled mb-2
+      />
+    </c-card>
+  </div>
+</template>