diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/tools/index.ts | 11 | ||||
| -rw-r--r-- | src/tools/token-generator/index.ts | 2 | ||||
| -rw-r--r-- | src/tools/token-generator/token-generator.service.test.ts | 98 | ||||
| -rw-r--r-- | src/tools/token-generator/token-generator.service.ts | 24 | ||||
| -rw-r--r-- | src/tools/token-generator/token-generator.tool.vue | 100 |
5 files changed, 189 insertions, 46 deletions
diff --git a/src/tools/index.ts b/src/tools/index.ts index 1bcd931..d7884d2 100644 --- a/src/tools/index.ts +++ b/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); diff --git a/src/tools/token-generator/index.ts b/src/tools/token-generator/index.ts index b619619..70a47e9 100644 --- a/src/tools/token-generator/index.ts +++ b/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, }; diff --git a/src/tools/token-generator/token-generator.service.test.ts b/src/tools/token-generator/token-generator.service.test.ts new file mode 100644 index 0000000..ed9dab3 --- /dev/null +++ b/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]+$/); + }); + }); +}); diff --git a/src/tools/token-generator/token-generator.service.ts b/src/tools/token-generator/token-generator.service.ts new file mode 100644 index 0000000..bf6d9ac --- /dev/null +++ b/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); +} diff --git a/src/tools/token-generator/token-generator.tool.vue b/src/tools/token-generator/token-generator.tool.vue index 0d27eee..48812de 100644 --- a/src/tools/token-generator/token-generator.tool.vue +++ b/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-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-item label="Lowercase (abc...)"> + <n-switch v-model:value="withLowercase" /> + </n-form-item> + </div> - <n-form-item label="Lowercase (abc...)"> - <n-switch v-model:value="withLowercase" /> - </n-form-item> - </div> + <div> + <n-form-item label="Numbers (012...)"> + <n-switch v-model:value="withNumbers" /> + </n-form-item> - <div> - <n-form-item label="Numbers (012...)"> - <n-switch v-model:value="withNumbers" /> - </n-form-item> + <n-form-item label="Symbols (;-!...)"> + <n-switch v-model:value="withSymbols" /> + </n-form-item> + </div> + </n-space> + </n-form> - <n-form-item label="Symbols (;-!...)"> - <n-switch v-model:value="withSymbols" /> - </n-form-item> - </div> - </n-space> - </n-form> - - <!-- <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-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..." /> + <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-card> </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 - ? customAlphabet.value - : [ - ...(withUppercase.value ? 'ABCDEFGHIJKLMOPQRSTUVWXYZ' : ''), - ...(withLowercase.value ? 'abcdefghijklmopqrstuvwxyz' : ''), - ...(withNumbers.value ? '0123456789' : ''), - ...(withSymbols.value ? '.,;:!?./-"\'#{([-|\\@)]=}*+' : '') - ].join('') - - token.value = shuffleString(alphabet.repeat(length.value)).substring(0, length.value) + token.value = createToken({ + length: length.value, + withUppercase: withUppercase.value, + withLowercase: withLowercase.value, + withNumbers: withNumbers.value, + withSymbols: withSymbols.value, + }) } refreshToken() |