feat(new tool): PIN Code Generator

FIx CorentinTh#1242

Author: sharevb

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']

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<T>({ name, defaultValue }: { name: string; defaultValue: T }) {
@@ -33,3 +40,27 @@ function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue:
     },
   });
 }
+
+function useQueryParamOrStorage<T>({ 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;
+}

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',

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'),
+});

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);
+    });
+  });
+});

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('');
+}

src/tools/pin-code-generator/pin-code-generator.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { randomNumber } from './pin-code-generator.service';
+import { useCopy } from '@/composable/copy';
+import { useQueryParamOrStorage } from '@/composable/queryParams';
+import { computedRefreshable } from '@/composable/computedRefreshable';
+
+const count = useQueryParamOrStorage({ name: 'count', storageName: 'pin-generator:count', defaultValue: 1 });
+const length = useQueryParamOrStorage({ name: 'length', storageName: 'pin-generator:length', defaultValue: 6 });
+const repeat = useQueryParamOrStorage({ name: 'repeat', storageName: 'pin-generator:repeat', defaultValue: true });
+
+const [pins, refreshPins] = computedRefreshable(() =>
+  Array.from({ length: count.value },
+    () => randomNumber({
+      length: length.value,
+      repeatDigits: repeat.value,
+    })).join('\n'),
+);
+
+const { copy } = useCopy({ source: pins, text: 'Pin code copied to clipboard!' });
+</script>
+
+<template>
+  <div>
+    <c-card>
+      <n-form-item :label="`Number of digits (${length})`" label-placement="left">
+        <n-slider v-model:value="length" :step="1" :min="1" :max="512" mr-2 />
+        <n-input-number v-model:value="length" size="small" />
+      </n-form-item>
+
+      <n-form-item label="Allow repeated digits" label-placement="left">
+        <n-switch v-model:value="repeat" />
+      </n-form-item>
+
+      <n-form-item label="Number of PIN codes to generate" label-placement="left">
+        <n-input-number v-model:value="count" size="small" />
+      </n-form-item>
+
+      <c-input-text
+        v-model:value="pins"
+        multiline
+        placeholder="PIN codes..."
+        readonly
+        rows="3"
+        autosize
+        class="pin-code-display"
+        word-wrap
+      />
+
+      <div mt-5 flex justify-center gap-3>
+        <c-button @click="copy()">
+          Copy
+        </c-button>
+        <c-button @click="refreshPins">
+          Refresh
+        </c-button>
+      </div>
+    </c-card>
+  </div>
+</template>
+
+<style scoped lang="less">
+::v-deep(.pin-code-display) {
+  textarea {
+    text-align: center;
+  }
+}
+</style>