feat(tool): added token generator

src/tools/index.ts

@@ -1,5 +1,14 @@
+import { LockOpen } from '@vicons/tabler';
 import type { ToolCategory } from './Tool';
 
-export const toolsByCategory: ToolCategory[] = [];
+import { tool as tokenGenerator } from './token-generator';
+
+export const toolsByCategory: ToolCategory[] = [
+  {
+    name: 'Crypto',
+    icon: LockOpen,
+    components: [tokenGenerator],
+  },
+];
 
 export const tools = toolsByCategory.flatMap(({ components }) => components);

src/tools/token-generator/index.ts

@@ -1,3 +1,4 @@
+import { ArrowsShuffle } from '@vicons/tabler';
 import type { ITool } from './../Tool';
 
 export const tool: ITool = {
@@ -6,4 +7,5 @@ export const tool: ITool = {
   description: 'Generate random string with the chars you want: uppercase or lowercase letters, numbers and/or symbols.',
   keywords: ['token', 'random', 'string', 'alphanumeric', 'symbols', 'number', 'letters', 'lowercase', 'uppercase'],
   component: () => import('./token-generator.tool.vue'),
+  icon: ArrowsShuffle,
 };

src/tools/token-generator/token-generator.service.test.ts

@@ -0,0 +1,98 @@
+import { expect, describe, it } from 'vitest';
+import { createToken } from './token-generator.service';
+
+describe('token-generator', () => {
+  describe('createToken', () => {
+    it('should generate an empty string when all params are false', () => {
+      const token = createToken({
+        withLowercase: false,
+        withUppercase: false,
+        withNumbers: false,
+        withSymbols: false,
+        length: 10,
+      });
+
+      expect(token).toHaveLength(0);
+    });
+
+    it('should generate a random string with the specified length', () => {
+      const createTokenWithLength = (length: number) =>
+        createToken({
+          withLowercase: true,
+          withUppercase: true,
+          withNumbers: true,
+          withSymbols: true,
+          length,
+        });
+
+      expect(createTokenWithLength(5)).toHaveLength(5);
+      expect(createTokenWithLength(10)).toHaveLength(10);
+      expect(createTokenWithLength(100)).toHaveLength(100);
+    });
+
+    it('should generate a random string with just uppercase if only withUppercase is set', () => {
+      const token = createToken({
+        withLowercase: false,
+        withUppercase: true,
+        withNumbers: false,
+        withSymbols: false,
+        length: 256,
+      });
+
+      expect(token).toHaveLength(256);
+      expect(token).toMatch(/^[A-Z]+$/);
+    });
+
+    it('should generate a random string with just lowercase if only withLowercase is set', () => {
+      const token = createToken({
+        withLowercase: true,
+        withUppercase: false,
+        withNumbers: false,
+        withSymbols: false,
+        length: 256,
+      });
+
+      expect(token).toHaveLength(256);
+      expect(token).toMatch(/^[a-z]+$/);
+    });
+
+    it('should generate a random string with just numbers if only withNumbers is set', () => {
+      const token = createToken({
+        withLowercase: false,
+        withUppercase: false,
+        withNumbers: true,
+        withSymbols: false,
+        length: 256,
+      });
+
+      expect(token).toHaveLength(256);
+      expect(token).toMatch(/^[0-9]+$/);
+    });
+
+    it('should generate a random string with just symbols if only withSymbols is set', () => {
+      const token = createToken({
+        withLowercase: false,
+        withUppercase: false,
+        withNumbers: false,
+        withSymbols: true,
+        length: 256,
+      });
+
+      expect(token).toHaveLength(256);
+      expect(token).toMatch(/^[.,;:!?./\-"'#{([-|\\@)\]=}*+]+$/);
+    });
+
+    it('should generate a random string with just letters (case incensitive) with withLowercase and withUppercase', () => {
+      const token = createToken({
+        withLowercase: true,
+        withUppercase: true,
+        withNumbers: false,
+        withSymbols: false,
+        length: 256,
+      });
+
+      expect(token).toHaveLength(256);
+      expect(token).toMatch(/^[a-zA-Z]+$/);
+    });
+  });
+});

src/tools/token-generator/token-generator.service.ts

@@ -0,0 +1,24 @@
+import { shuffleString } from '@/utils/random';
+
+export function createToken({
+  withUppercase = true,
+  withLowercase = true,
+  withNumbers = true,
+  withSymbols = false,
+  length = 64,
+}: {
+  withUppercase?: boolean;
+  withLowercase?: boolean;
+  withNumbers?: boolean;
+  withSymbols?: boolean;
+  length?: number;
+}) {
+  const alphabet = [
+    ...(withUppercase ? 'ABCDEFGHIJKLMOPQRSTUVWXYZ' : ''),
+    ...(withLowercase ? 'abcdefghijklmopqrstuvwxyz' : ''),
+    ...(withNumbers ? '0123456789' : ''),
+    ...(withSymbols ? '.,;:!?./-"\'#{([-|\\@)]=}*+' : ''),
+  ].join('');
+
+  return shuffleString(alphabet.repeat(length)).substring(0, length);
+}

src/tools/token-generator/token-generator.tool.vue

@@ -1,71 +1,81 @@
 <template>
     <div>
-        <h1>Token generator</h1>
+        <n-card>
+            <n-form label-placement="left" label-width="140">
+                <n-space justify="center" item-style="padding: 0" :size="0">
+                    <div>
+                        <n-form-item label="Uppercase (ABC...)">
+                            <n-switch v-model:value="withUppercase" />
+                        </n-form-item>
 
-        <n-form label-placement="left" label-width="140">
+                        <n-form-item label="Lowercase (abc...)">
-            <n-space justify="center" item-style="padding: 0" :size="0">
+                            <n-switch v-model:value="withLowercase" />
-                <div>
+                        </n-form-item>
-                    <n-form-item label="Uppercase (ABC...)">
+                    </div>
-                        <n-switch v-model:value="withUppercase" />
-                    </n-form-item>
 
-                    <n-form-item label="Lowercase (abc...)">
+                    <div>
-                        <n-switch v-model:value="withLowercase" />
+                        <n-form-item label="Numbers (012...)">
-                    </n-form-item>
+                            <n-switch v-model:value="withNumbers" />
-                </div>
+                        </n-form-item>
 
-                <div>
+                        <n-form-item label="Symbols (;-!...)">
-                    <n-form-item label="Numbers (012...)">
+                            <n-switch v-model:value="withSymbols" />
-                        <n-switch v-model:value="withNumbers" />
+                        </n-form-item>
-                    </n-form-item>
+                    </div>
+                </n-space>
+            </n-form>
 
-                    <n-form-item label="Symbols (;-!...)">
+            <n-form-item :label="`Length (${length})`" label-placement="left">
-                        <n-switch v-model:value="withSymbols" />
+                <n-slider v-model:value="length" :step="1" :min="1" :max="512" />
-                    </n-form-item>
+            </n-form-item>
-                </div>
+
+            <n-input
+                style="text-align: center;"
+                v-model:value="token"
+                type="textarea"
+                placeholder="The token..."
+                :autosize="{ minRows: 1 }"
+                readonly
+                autocomplete="off"
+                autocorrect="off"
+                autocapitalize="off"
+                spellcheck="false"
+            />
+            <br />
+            <br />
+            <n-space justify="center">
+                <n-button @click="copy" secondary autofocus>Copy</n-button>
+                <n-button @click="refreshToken" secondary>Refresh</n-button>
             </n-space>
-        </n-form>
+        </n-card>
-
-        <!-- <n-form-item label="Custom alphabet" label-placement="left">
-            <n-switch v-model:value="withAlphabet" />
-            <n-input v-model:value="customAlphabet" placeholder="Custom alphabet" />
-        </n-form-item>-->
-
-        <n-form-item :label="`Length (${length})`" label-placement="left">
-            <n-slider v-model:value="length" :step="1" :min="1" :max="512" />
-        </n-form-item>
-
-        <n-input v-model:value="token" type="textarea" placeholder="The token..." />
     </div>
 </template>
 
 <script setup lang="ts">
-import { shuffleString } from '@/utils/random';
+import { useCopy } from '@/composable/copy';
 import { ref, watch } from 'vue';
+import { createToken } from './token-generator.service';
+
 
 const token = ref('')
 const length = ref(64)
-const customAlphabet = ref('it-tools <3')
+const { copy } = useCopy({ source: token, text: 'Token copied to the clipboard' })
 
 const withUppercase = ref(true)
 const withLowercase = ref(true)
 const withNumbers = ref(true)
 const withSymbols = ref(false)
-const withAlphabet = ref(false)
 
-watch([withUppercase, withLowercase, withNumbers, withSymbols, length, customAlphabet, withAlphabet], refreshToken)
+watch([withUppercase, withLowercase, withNumbers, withSymbols, length], refreshToken)
 
 function refreshToken() {
-    const alphabet = withAlphabet.value
+    token.value = createToken({
-        ? customAlphabet.value
+        length: length.value,
-        : [
+        withUppercase: withUppercase.value,
-            ...(withUppercase.value ? 'ABCDEFGHIJKLMOPQRSTUVWXYZ' : ''),
+        withLowercase: withLowercase.value,
-            ...(withLowercase.value ? 'abcdefghijklmopqrstuvwxyz' : ''),
+        withNumbers: withNumbers.value,
-            ...(withNumbers.value ? '0123456789' : ''),
+        withSymbols: withSymbols.value,
-            ...(withSymbols.value ? '.,;:!?./-"\'#{([-|\\@)]=}*+' : '')
+    })
-        ].join('')
-
-    token.value = shuffleString(alphabet.repeat(length.value)).substring(0, length.value)
 }
 
 refreshToken()