From 99a52bc1b8a558ac5c640d4bf9b818f37ed3944c Mon Sep 17 00:00:00 2001 From: istvan-olah <1.olah.istvan.75@gmail.com> Date: Wed, 11 Oct 2023 01:19:37 +0300 Subject: [PATCH 1/3] #521 Random MAC address generator --- components.d.ts | 1 + src/tools/index.ts | 3 +- src/tools/mac-address-generator/index.ts | 12 +++ .../mac-address-generator.e2e.spec.ts | 11 +++ .../mac-address-generator.vue | 73 +++++++++++++++++++ src/utils/macAddress.ts | 16 +++- 6 files changed, 114 insertions(+), 2 deletions(-) create mode 100644 src/tools/mac-address-generator/index.ts create mode 100644 src/tools/mac-address-generator/mac-address-generator.e2e.spec.ts create mode 100644 src/tools/mac-address-generator/mac-address-generator.vue diff --git a/components.d.ts b/components.d.ts index 1a5ce1a903..349539f0ba 100644 --- a/components.d.ts +++ b/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'] diff --git a/src/tools/index.ts b/src/tools/index.ts index cc5f42ee83..d42849606e 100644 --- a/src/tools/index.ts +++ b/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', diff --git a/src/tools/mac-address-generator/index.ts b/src/tools/mac-address-generator/index.ts new file mode 100644 index 0000000000..fcf811a6be --- /dev/null +++ b/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'), +}); diff --git a/src/tools/mac-address-generator/mac-address-generator.e2e.spec.ts b/src/tools/mac-address-generator/mac-address-generator.e2e.spec.ts new file mode 100644 index 0000000000..1d99ccd756 --- /dev/null +++ b/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'); + }); +}); diff --git a/src/tools/mac-address-generator/mac-address-generator.vue b/src/tools/mac-address-generator/mac-address-generator.vue new file mode 100644 index 0000000000..3387557214 --- /dev/null +++ b/src/tools/mac-address-generator/mac-address-generator.vue @@ -0,0 +1,73 @@ + + + diff --git a/src/utils/macAddress.ts b/src/utils/macAddress.ts index 4488b32937..2d1011c4bd 100644 --- a/src/utils/macAddress.ts +++ b/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 }; From a3efaae04ba7516ac5493428ab81685b89894d71 Mon Sep 17 00:00:00 2001 From: Corentin Thomasset Date: Tue, 31 Oct 2023 12:24:02 +0100 Subject: [PATCH 2/3] refactor(mac-address-generator): improved ux --- src/tools/mac-address-generator/index.ts | 8 +- .../mac-address-generator.vue | 83 +++++++++++++------ .../mac-adress-generator.models.test.ts | 43 ++++++++++ .../mac-adress-generator.models.ts | 18 ++++ src/utils/macAddress.ts | 6 +- 5 files changed, 125 insertions(+), 33 deletions(-) create mode 100644 src/tools/mac-address-generator/mac-adress-generator.models.test.ts create mode 100644 src/tools/mac-address-generator/mac-adress-generator.models.ts diff --git a/src/tools/mac-address-generator/index.ts b/src/tools/mac-address-generator/index.ts index fcf811a6be..9d20fb697d 100644 --- a/src/tools/mac-address-generator/index.ts +++ b/src/tools/mac-address-generator/index.ts @@ -1,12 +1,12 @@ -import { Atom2 } from '@vicons/tabler'; +import { Devices } 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'], + keywords: ['mac', 'address', 'generator', 'random', 'prefix'], component: () => import('./mac-address-generator.vue'), - icon: Atom2, - createdAt: new Date('2023-10-11'), + icon: Devices, + createdAt: new Date('2023-11-31'), }); diff --git a/src/tools/mac-address-generator/mac-address-generator.vue b/src/tools/mac-address-generator/mac-address-generator.vue index 3387557214..1af6730a4f 100644 --- a/src/tools/mac-address-generator/mac-address-generator.vue +++ b/src/tools/mac-address-generator/mac-address-generator.vue @@ -1,61 +1,92 @@