From 8e9c5c057bc834fc3b2168c8411bb9c1cc8ae19f Mon Sep 17 00:00:00 2001 From: sharevb Date: Fri, 23 Aug 2024 21:40:27 +0200 Subject: [PATCH] feat(new tool): PIN Code Generator FIx #1242 --- components.d.ts | 4 +- src/composable/queryParams.ts | 33 ++++++++- src/tools/index.ts | 16 ++++- src/tools/pin-code-generator/index.ts | 12 ++++ .../pin-code-generator.service.test.ts | 35 ++++++++++ .../pin-code-generator.service.ts | 22 ++++++ .../pin-code-generator/pin-code-generator.vue | 67 +++++++++++++++++++ 7 files changed, 184 insertions(+), 5 deletions(-) create mode 100644 src/tools/pin-code-generator/index.ts create mode 100644 src/tools/pin-code-generator/pin-code-generator.service.test.ts create mode 100644 src/tools/pin-code-generator/pin-code-generator.service.ts create mode 100644 src/tools/pin-code-generator/pin-code-generator.vue diff --git a/components.d.ts b/components.d.ts index 89f41f80..a99014b4 100644 --- a/components.d.ts +++ b/components.d.ts @@ -129,11 +129,9 @@ declare module '@vue/runtime-core' { MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default'] MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default'] NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default'] - NCode: typeof import('naive-ui')['NCode'] NCollapseTransition: typeof import('naive-ui')['NCollapseTransition'] NConfigProvider: typeof import('naive-ui')['NConfigProvider'] NEllipsis: typeof import('naive-ui')['NEllipsis'] - NForm: typeof import('naive-ui')['NForm'] NFormItem: typeof import('naive-ui')['NFormItem'] NH1: typeof import('naive-ui')['NH1'] NH3: typeof import('naive-ui')['NH3'] @@ -142,7 +140,6 @@ declare module '@vue/runtime-core' { NLayout: typeof import('naive-ui')['NLayout'] NLayoutSider: typeof import('naive-ui')['NLayoutSider'] NMenu: typeof import('naive-ui')['NMenu'] - NScrollbar: typeof import('naive-ui')['NScrollbar'] NSlider: typeof import('naive-ui')['NSlider'] NSwitch: typeof import('naive-ui')['NSwitch'] NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default'] @@ -152,6 +149,7 @@ declare module '@vue/runtime-core' { PdfSignatureDetails: typeof import('./src/tools/pdf-signature-checker/components/pdf-signature-details.vue')['default'] PercentageCalculator: typeof import('./src/tools/percentage-calculator/percentage-calculator.vue')['default'] PhoneParserAndFormatter: typeof import('./src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue')['default'] + PinCodeGenerator: typeof import('./src/tools/pin-code-generator/pin-code-generator.vue')['default'] QrCodeGenerator: typeof import('./src/tools/qr-code-generator/qr-code-generator.vue')['default'] RandomPortGenerator: typeof import('./src/tools/random-port-generator/random-port-generator.vue')['default'] ResultRow: typeof import('./src/tools/ipv4-range-expander/result-row.vue')['default'] diff --git a/src/composable/queryParams.ts b/src/composable/queryParams.ts index 9699abbc..7cc8cc0d 100644 --- a/src/composable/queryParams.ts +++ b/src/composable/queryParams.ts @@ -1,7 +1,8 @@ import { useRouteQuery } from '@vueuse/router'; import { computed } from 'vue'; +import { useStorage } from '@vueuse/core'; -export { useQueryParam }; +export { useQueryParam, useQueryParamOrStorage }; const transformers = { number: { @@ -16,6 +17,12 @@ const transformers = { fromQuery: (value: string) => value.toLowerCase() === 'true', toQuery: (value: boolean) => (value ? 'true' : 'false'), }, + object: { + fromQuery: (value: string) => { + return JSON.parse(value); + }, + toQuery: (value: object) => JSON.stringify(value), + }, }; function useQueryParam({ name, defaultValue }: { name: string; defaultValue: T }) { @@ -33,3 +40,27 @@ function useQueryParam({ name, defaultValue }: { name: string; defaultValue: }, }); } + +function useQueryParamOrStorage({ name, storageName, defaultValue }: { name: string; storageName: string; defaultValue: T }) { + const type = typeof defaultValue; + const transformer = transformers[type as keyof typeof transformers] ?? transformers.string; + + const storageRef = useStorage(storageName, defaultValue); + const proxyDefaultValue = transformer.toQuery(defaultValue as never); + const proxy = useRouteQuery(name, proxyDefaultValue); + + const r = ref(defaultValue); + + watch(r, + (value) => { + proxy.value = transformer.toQuery(value as never); + storageRef.value = value as never; + }, + { deep: true }); + + r.value = (proxy.value && proxy.value !== proxyDefaultValue + ? transformer.fromQuery(proxy.value) as unknown as T + : storageRef.value as T) as never; + + return r; +} diff --git a/src/tools/index.ts b/src/tools/index.ts index b4c161ef..7c97fba4 100644 --- a/src/tools/index.ts +++ b/src/tools/index.ts @@ -2,6 +2,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 emailNormalizer } from './email-normalizer'; +import { tool as pinCodeGenerator } from './pin-code-generator'; import { tool as asciiTextDrawer } from './ascii-text-drawer'; @@ -88,7 +89,20 @@ import { tool as yamlViewer } from './yaml-viewer'; export const toolsByCategory: ToolCategory[] = [ { name: 'Crypto', - components: [tokenGenerator, hashText, bcrypt, uuidGenerator, ulidGenerator, cypher, bip39, hmacGenerator, rsaKeyPairGenerator, passwordStrengthAnalyser, pdfSignatureChecker], + components: [ + tokenGenerator, + pinCodeGenerator, + hashText, + bcrypt, + uuidGenerator, + ulidGenerator, + cypher, + bip39, + hmacGenerator, + rsaKeyPairGenerator, + passwordStrengthAnalyser, + pdfSignatureChecker, + ], }, { name: 'Converter', diff --git a/src/tools/pin-code-generator/index.ts b/src/tools/pin-code-generator/index.ts new file mode 100644 index 00000000..2751f245 --- /dev/null +++ b/src/tools/pin-code-generator/index.ts @@ -0,0 +1,12 @@ +import { FileDigit } from '@vicons/tabler'; +import { defineTool } from '../tool'; + +export const tool = defineTool({ + name: 'Pin Code Generator', + path: '/pin-code-generator', + description: 'Generate Unique PIN (digits) codes', + keywords: ['pin', 'code', 'digits', 'generator'], + component: () => import('./pin-code-generator.vue'), + icon: FileDigit, + createdAt: new Date('2024-08-15'), +}); diff --git a/src/tools/pin-code-generator/pin-code-generator.service.test.ts b/src/tools/pin-code-generator/pin-code-generator.service.test.ts new file mode 100644 index 00000000..0dc31afc --- /dev/null +++ b/src/tools/pin-code-generator/pin-code-generator.service.test.ts @@ -0,0 +1,35 @@ +import { describe, expect, it } from 'vitest'; +import { randomNumber } from './pin-code-generator.service'; + +describe('pin-code-generator', () => { + describe('randomNumber', () => { + it('should generate random pin code of given length', () => { + expect(randomNumber({ + length: 10, + })).toHaveLength(10); + expect(randomNumber({ + length: 4, + })).toHaveLength(4); + expect(randomNumber({ + length: 25, + })).toHaveLength(25); + }); + it('should generate random pin code without duplicate', () => { + const pin = randomNumber({ + length: 10, + }); + expect(pin).toHaveLength(10); + expect(pin.length).to.eq([...new Set(pin.split(''))].length); + }); + + it('should generate random pin code with duplicate', () => { + const pin = randomNumber({ + length: 12, + }); + const uniqueDigits = [...new Set(pin.split(''))]; + expect(pin).toHaveLength(12); + expect(pin.length).to.greaterThan(uniqueDigits.length); + expect(uniqueDigits.length).to.lessThanOrEqual(10); + }); + }); +}); diff --git a/src/tools/pin-code-generator/pin-code-generator.service.ts b/src/tools/pin-code-generator/pin-code-generator.service.ts new file mode 100644 index 00000000..3a9cd0a3 --- /dev/null +++ b/src/tools/pin-code-generator/pin-code-generator.service.ts @@ -0,0 +1,22 @@ +export function randomNumber({ + length, + repeatDigits = false, +}: { + length: number + repeatDigits?: boolean +}) { + const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; + const result: number[] = []; + const willRepeat = length > 10 || repeatDigits; + + while (result.length < length) { + const random = Math.floor(Math.random() * 10); // NOSONAR + const num = arr[random]; + if (!willRepeat && result.includes(num)) { + continue; + } + result.push(num); + } + + return result.join(''); +} diff --git a/src/tools/pin-code-generator/pin-code-generator.vue b/src/tools/pin-code-generator/pin-code-generator.vue new file mode 100644 index 00000000..8d8d6dc6 --- /dev/null +++ b/src/tools/pin-code-generator/pin-code-generator.vue @@ -0,0 +1,67 @@ + + + + +