#521 Random MAC address generator

components.d.ts

@@ -112,6 +112,7 @@ declare module '@vue/runtime-core' {
     KeycodeInfo: typeof import('./src/tools/keycode-info/keycode-info.vue')['default']
     ListConverter: typeof import('./src/tools/list-converter/list-converter.vue')['default']
     LoremIpsumGenerator: typeof import('./src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue')['default']
+    MacAddressGenerator: typeof import('./src/tools/mac-address-generator/mac-address-generator.vue')['default']
     MacAddressLookup: typeof import('./src/tools/mac-address-lookup/mac-address-lookup.vue')['default']
     MathEvaluator: typeof import('./src/tools/math-evaluator/math-evaluator.vue')['default']
     MenuBar: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar.vue')['default']

src/tools/index.ts

@@ -1,6 +1,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 macAddressGenerator } from './mac-address-generator';
 import { tool as ulidGenerator } from './ulid-generator';
 import { tool as ibanValidatorAndParser } from './iban-validator-and-parser';
 import { tool as stringObfuscator } from './string-obfuscator';
@@ -138,7 +139,7 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Network',
-    components: [ipv4SubnetCalculator, ipv4AddressConverter, ipv4RangeExpander, macAddressLookup, ipv6UlaGenerator],
+    components: [ipv4SubnetCalculator, ipv4AddressConverter, ipv4RangeExpander, macAddressLookup, macAddressGenerator, ipv6UlaGenerator],
   },
   {
     name: 'Math',

src/tools/mac-address-generator/index.ts

@@ -0,0 +1,12 @@
+import { Atom2 } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'MAC address generator',
+  path: '/mac-address-generator',
+  description: 'Enter the quantity and prefix. MAC addresses will be generated in your chosen case (uppercase or lowercase)',
+  keywords: ['mac', 'address', 'generator'],
+  component: () => import('./mac-address-generator.vue'),
+  icon: Atom2,
+  createdAt: new Date('2023-10-11'),
+});

src/tools/mac-address-generator/mac-address-generator.e2e.spec.ts

@@ -0,0 +1,11 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Tool - MAC address generator', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/mac-address-generator');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('MAC address generator - IT Tools');
+  });
+});

src/tools/mac-address-generator/mac-address-generator.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import _ from 'lodash';
+import { computedRefreshable } from '@/composable/computedRefreshable';
+import { useCopy } from '@/composable/copy';
+import { partialMacAddressValidation, partialMacAddressValidationRules } from '@/utils/macAddress';
+
+const amount = useStorage('mac-address-generator-amount', 1);
+const uppercase = useStorage('mac-address-generator-uppercase', true);
+const macAddressPrefix = useStorage('mac-address-generator-prefix', '64:16:7F');
+
+const [macAddresses, refreshMacAddresses] = computedRefreshable(() => {
+  if (!partialMacAddressValidation(macAddressPrefix).isValid) {
+    return '';
+  }
+
+  const ids = _.times(amount.value, () => generateMac(macAddressPrefix.value));
+  return ids.join('\n');
+});
+
+const { copy } = useCopy({ source: macAddresses, text: 'MAC addresses copied to the clipboard' });
+
+function generateMac(prefix: string = ''): string {
+  let mac = prefix;
+
+  for (let i = prefix.length; i < 17; i++) {
+    if (i % 3 === 2) { // Place ':' after every 2 hex characters
+      mac += ':';
+    }
+    else {
+      mac += Math.floor(Math.random() * 16).toString(16);
+    }
+  }
+
+  return uppercase.value ? mac.toUpperCase() : mac;
+}
+</script>
+
+<template>
+  <div flex flex-col justify-center gap-2>
+    <div flex items-center>
+      <label w-75px> Quantity:</label>
+      <n-input-number v-model:value="amount" min="1" max="100" flex-1 />
+    </div>
+
+    <c-input-text
+      v-model:value="macAddressPrefix"
+      label="MAC address prefix:"
+      placeholder="Type a MAC address"
+      clearable
+      label-position="left"
+      spellcheck="false"
+      :validation-rules="partialMacAddressValidationRules"
+      mb-5
+    />
+
+    <n-checkbox v-model:checked="uppercase">
+      Uppercase
+    </n-checkbox>
+
+    <c-card mt-5 flex data-test-id="ulids">
+      <pre m-0 m-x-auto>{{ macAddresses }}</pre>
+    </c-card>
+
+    <div flex justify-center gap-2>
+      <c-button data-test-id="refresh" @click="refreshMacAddresses()">
+        Refresh
+      </c-button>
+      <c-button @click="copy()">
+        Copy
+      </c-button>
+    </div>
+  </div>
+</template>

src/utils/macAddress.ts

@@ -15,4 +15,18 @@ function macAddressValidation(value: Ref) {
   });
 }
 
-export { macAddressValidation, macAddressValidationRules };
+const partialMacAddressValidationRules = [
+  {
+    message: 'Invalid partial MAC address',
+    validator: (value: string) => value.trim().match(/^([0-9A-Fa-f]{2}[:-]){0,5}([0-9A-Fa-f]{0,2})$/),
+  },
+];
+
+function partialMacAddressValidation(value: Ref) {
+  return useValidation({
+    source: value,
+    rules: partialMacAddressValidationRules,
+  });
+}
+
+export { macAddressValidation, macAddressValidationRules, partialMacAddressValidation, partialMacAddressValidationRules };