Merge branch 'feat/pin-code-generator' into chore/all-my-stuffs

# Conflicts:
#	components.d.ts
#	src/tools/index.ts

Author: sharevb

pnpm-lock.yaml

@@ -30,6 +30,7 @@ import { tool as mathFormatsConverter } from './math-formats-converter';
 import { tool as mathOcr } from './math-ocr';
 import { tool as markdownTocGenerator } from './markdown-toc-generator';
 import { tool as passphraseGenerator } from './passphrase-generator';
+import { tool as pinCodeGenerator } from './pin-code-generator';
 
 import { tool as cssXpathConverter } from './css-xpath-converter';
 import { tool as cssSelectorsMemo } from './css-selectors-memo';
@@ -162,6 +163,7 @@ export const toolsByCategory: ToolCategory[] = [
       crcCalculator,
       fileHasher,
       passphraseGenerator,
+      pinCodeGenerator,
       hashText,
       bcrypt,
       uuidGenerator,
@@ -182,6 +184,8 @@ export const toolsByCategory: ToolCategory[] = [
       passwordStrengthAnalyser,
       pdfSignatureChecker,
       pdfUnlock,
+      passwordStrengthAnalyser,
+      pdfSignatureChecker,
     ],
   },
   {

src/tools/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/index.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.test.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.service.ts

@@ -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>