diff options
Diffstat (limited to 'src/tools/token-generator/token-generator.tool.vue')
| -rw-r--r-- | src/tools/token-generator/token-generator.tool.vue | 75 |
1 files changed, 75 insertions, 0 deletions
diff --git a/src/tools/token-generator/token-generator.tool.vue b/src/tools/token-generator/token-generator.tool.vue new file mode 100644 index 0000000..0d27eee --- /dev/null +++ b/src/tools/token-generator/token-generator.tool.vue @@ -0,0 +1,75 @@ +<template> + <div> + <h1>Token generator</h1> + + <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> + + <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="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 { ref, watch } from 'vue'; + +const token = ref('') +const length = ref(64) +const customAlphabet = ref('it-tools <3') + +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) + +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) +} + +refreshToken() +</script> + +<style lang="scss" scoped> +</style>
\ No newline at end of file |