fix(Token Generator): multi token, last settings, length input, denied chars

Fix #777, #822 , #797, #466, #806, #1065
This commit is contained in:
sharevb 2024-03-03 09:44:53 +01:00 committed by ShareVB
parent a07806cd15
commit ff57fda388
5 changed files with 270 additions and 179 deletions

View file

@ -1,393 +1,422 @@
'404':
notFound: 404 Not Found
sorry: Sorry, this page does not seem to exist
maybe: Maybe the cache is doing tricky things, try force-refreshing?
backHome: Back home
home: home:
categories: categories:
newestTools: Newest tools newestTools: Newest tools
favoriteTools: 'Your favorite tools' favoriteTools: Your favorite tools
allTools: 'All the tools' allTools: All the tools
subtitle: 'Handy tools for developers' subtitle: Handy tools for developers
toggleMenu: 'Toggle menu' toggleMenu: Toggle menu
home: Home home: Home
uiLib: 'UI Lib' uiLib: UI Lib
support: 'Support IT Tools development' support: Support IT Tools development
buyMeACoffee: 'Buy me a coffee' buyMeACoffee: Buy me a coffee
follow: follow:
title: 'You like it-tools?' title: You like it-tools?
p1: 'Give us a star on' p1: Give us a star on
githubRepository: 'IT-Tools GitHub repository' githubRepository: IT-Tools GitHub repository
p2: 'or follow us on' p2: or follow us on
twitterAccount: 'IT-Tools Twitter account' twitterAccount: IT-Tools Twitter account
thankYou: 'Thank you !' thankYou: Thank you !
nav: nav:
github: 'GitHub repository' github: GitHub repository
githubRepository: 'IT-Tools GitHub repository' githubRepository: IT-Tools GitHub repository
twitter: 'Twitter account' twitter: Twitter account
twitterAccount: 'IT Tools Twitter account' twitterAccount: IT Tools Twitter account
about: 'About IT-Tools' about: About IT-Tools
aboutLabel: 'About' aboutLabel: About
darkMode: 'Dark mode' darkMode: Dark mode
lightMode: 'Light mode' lightMode: Light mode
mode: 'Toggle dark/light mode' mode: Toggle dark/light mode
about: about:
content: > content: >
# About IT-Tools # About IT-Tools
This wonderful website, made with ❤ by [Corentin Thomasset](https://github.com/CorentinTh) , aggregates useful tools for developer and people working in IT. If you find it useful, please feel free to share it to people you think may find it useful too and don't forget to bookmark it in your shortcut bar! This wonderful website, made with ❤ by [Corentin
Thomasset](https://github.com/CorentinTh) , aggregates useful tools for
developer and people working in IT. If you find it useful, please feel free
to share it to people you think may find it useful too and don't forget to
bookmark it in your shortcut bar!
IT Tools is open-source (under the MIT license) and free, and will always be, but it costs me money to host and renew the domain name. If you want to support my work, and encourage me to add more tools, please consider supporting by [sponsoring me](https://www.buymeacoffee.com/cthmsst). IT Tools is open-source (under the MIT license) and free, and will always
be, but it costs me money to host and renew the domain name. If you want to
support my work, and encourage me to add more tools, please consider
supporting by [sponsoring me](https://www.buymeacoffee.com/cthmsst).
## Technologies ## Technologies
IT Tools is made in Vue.js (Vue 3) with the the Naive UI component library and is hosted and continuously deployed by Vercel. Third-party open-source libraries are used in some tools, you may find the complete list in the [package.json](https://github.com/CorentinTh/it-tools/blob/main/package.json) file of the repository. IT Tools is made in Vue.js (Vue 3) with the the Naive UI component library
and is hosted and continuously deployed by Vercel. Third-party open-source
libraries are used in some tools, you may find the complete list in the
[package.json](https://github.com/CorentinTh/it-tools/blob/main/package.json)
file of the repository.
## Found a bug? A tool is missing? ## Found a bug? A tool is missing?
If you need a tool that is currently not present here, and you think can be useful, you are welcome to submit a feature request in the [issues section](https://github.com/CorentinTh/it-tools/issues/new/choose) in the GitHub repository. If you need a tool that is currently not present here, and you think can be
useful, you are welcome to submit a feature request in the [issues
section](https://github.com/CorentinTh/it-tools/issues/new/choose) in the
GitHub repository.
And if you found a bug, or something doesn't work as expected, please file a bug report in the [issues section](https://github.com/CorentinTh/it-tools/issues/new/choose) in the GitHub repository. And if you found a bug, or something doesn't work as expected, please file a
bug report in the [issues
404: section](https://github.com/CorentinTh/it-tools/issues/new/choose) in the
notFound: '404 Not Found' GitHub repository.
sorry: 'Sorry, this page does not seem to exist'
maybe: 'Maybe the cache is doing tricky things, try force-refreshing?'
backHome: 'Back home'
favoriteButton: favoriteButton:
remove: 'Remove from favorites' remove: Remove from favorites
add: 'Add to favorites' add: Add to favorites
toolCard: toolCard:
new: New new: New
search: search:
label: Search label: Search
tools: tools:
categories: categories:
favorite-tools: 'Your favorite tools' favorite-tools: Your favorite tools
crypto: Crypto crypto: Crypto
converter: Converter converter: Converter
web: Web web: Web
images and videos: 'Images & Videos' images and videos: Images & Videos
development: Development development: Development
network: Network network: Network
math: Math math: Math
measurement: Measurement measurement: Measurement
text: Text text: Text
data: Data data: Data
password-strength-analyser: password-strength-analyser:
title: Password strength analyser title: Password strength analyser
description: Discover the strength of your password with this client side only password strength analyser and crack time estimation tool. description: >-
Discover the strength of your password with this client side only password
strength analyser and crack time estimation tool.
chronometer: chronometer:
title: Chronometer title: Chronometer
description: Monitor the duration of a thing. Basically a chronometer with simple chronometer features. description: >-
Monitor the duration of a thing. Basically a chronometer with simple
chronometer features.
token-generator: token-generator:
title: Token generator title: Token generator
description: Generate random string with the chars you want, uppercase or lowercase letters, numbers and/or symbols. description: >-
Generate random string with the chars you want, uppercase or lowercase
letters, numbers and/or symbols.
uppercase: Uppercase (ABC...) uppercase: Uppercase (ABC...)
lowercase: Lowercase (abc...) lowercase: Lowercase (abc...)
numbers: Numbers (123...) numbers: Numbers (123...)
symbols: Symbols (!-;...) symbols: Symbols (!-;...)
length: Length length: Length
tokenPlaceholder: 'The token...' tokenPlaceholder: The token...
copied: Token copied to the clipboard copied: Token copied to the clipboard
button: button:
copy: Copy copy: Copy
refresh: Refresh refresh: Refresh
count: Tokens to generate
percentage-calculator: percentage-calculator:
title: Percentage calculator title: Percentage calculator
description: Easily calculate percentages from a value to another value, or from a percentage to a value. description: >-
Easily calculate percentages from a value to another value, or from a
percentage to a value.
svg-placeholder-generator: svg-placeholder-generator:
title: SVG placeholder generator title: SVG placeholder generator
description: Generate svg images to use as placeholder in your applications. description: Generate svg images to use as placeholder in your applications.
json-to-csv: json-to-csv:
title: JSON to CSV title: JSON to CSV
description: Convert JSON to CSV with automatic header detection. description: Convert JSON to CSV with automatic header detection.
camera-recorder: camera-recorder:
title: Camera recorder title: Camera recorder
description: Take a picture or record a video from your webcam or camera. description: Take a picture or record a video from your webcam or camera.
keycode-info: keycode-info:
title: Keycode info title: Keycode info
description: Find the javascript keycode, code, location and modifiers of any pressed key. description: >-
Find the javascript keycode, code, location and modifiers of any pressed
key.
emoji-picker: emoji-picker:
title: Emoji picker title: Emoji picker
description: Copy and paste emojis easily and get the unicode and code points value of each emoji. description: >-
Copy and paste emojis easily and get the unicode and code points value of
each emoji.
color-converter: color-converter:
title: Color converter title: Color converter
description: Convert color between the different formats (hex, rgb, hsl and css name) description: Convert color between the different formats (hex, rgb, hsl and css name)
bcrypt: bcrypt:
title: Bcrypt title: Bcrypt
description: Hash and compare text string using bcrypt. Bcrypt is a password-hashing function based on the Blowfish cipher. description: >-
Hash and compare text string using bcrypt. Bcrypt is a password-hashing
function based on the Blowfish cipher.
crontab-generator: crontab-generator:
title: Crontab generator title: Crontab generator
description: Validate and generate crontab and get the human readable description of the cron schedule. description: >-
Validate and generate crontab and get the human readable description of
the cron schedule.
http-status-codes: http-status-codes:
title: HTTP status codes title: HTTP status codes
description: The list of all HTTP status codes their name and their meaning. description: The list of all HTTP status codes their name and their meaning.
sql-prettify: sql-prettify:
title: SQL prettify and format title: SQL prettify and format
description: Format and prettify your SQL queries online (it supports various SQL dialects). description: >-
Format and prettify your SQL queries online (it supports various SQL
dialects).
benchmark-builder: benchmark-builder:
title: Benchmark builder title: Benchmark builder
description: Easily compare execution time of tasks with this very simple online benchmark builder. description: >-
Easily compare execution time of tasks with this very simple online
benchmark builder.
git-memo: git-memo:
title: Git cheatsheet title: Git cheatsheet
description: Git is a decentralized version management software. With this cheatsheet you will have a quick access to the most common git commands. description: >-
Git is a decentralized version management software. With this cheatsheet
you will have a quick access to the most common git commands.
slugify-string: slugify-string:
title: Slugify string title: Slugify string
description: Make a string url, filename and id safe. description: Make a string url, filename and id safe.
encryption: encryption:
title: Encrypt / decrypt text title: Encrypt / decrypt text
description: Encrypt and decrypt text clear text using crypto algorithm like AES, TripleDES, Rabbit or RC4. description: >-
Encrypt and decrypt text clear text using crypto algorithm like AES,
TripleDES, Rabbit or RC4.
random-port-generator: random-port-generator:
title: Random port generator title: Random port generator
description: Generate random port numbers outside of the range of "known" ports (0-1023). description: >-
Generate random port numbers outside of the range of "known" ports
(0-1023).
yaml-prettify: yaml-prettify:
title: YAML prettify and format title: YAML prettify and format
description: Prettify your YAML string to a human friendly readable format. description: Prettify your YAML string to a human friendly readable format.
eta-calculator: eta-calculator:
title: ETA calculator title: ETA calculator
description: An ETA (Estimated Time of Arrival) calculator to know the approximate end time of a task, for example the moment of ending of a download. description: >-
An ETA (Estimated Time of Arrival) calculator to know the approximate end
time of a task, for example the moment of ending of a download.
roman-numeral-converter: roman-numeral-converter:
title: Roman numeral converter title: Roman numeral converter
description: Convert Roman numerals to numbers and convert numbers to Roman numerals. description: Convert Roman numerals to numbers and convert numbers to Roman numerals.
hmac-generator: hmac-generator:
title: Hmac generator title: Hmac generator
description: Computes a hash-based message authentication code (HMAC) using a secret key and your favorite hashing function. description: >-
Computes a hash-based message authentication code (HMAC) using a secret
key and your favorite hashing function.
bip39-generator: bip39-generator:
title: BIP39 passphrase generator title: BIP39 passphrase generator
description: Generate BIP39 passphrase from existing or random mnemonic, or get the mnemonic from the passphrase. description: >-
Generate BIP39 passphrase from existing or random mnemonic, or get the
mnemonic from the passphrase.
base64-file-converter: base64-file-converter:
title: Base64 file converter title: Base64 file converter
description: Convert string, files or images into a it\'s base64 representation. description: Convert string, files or images into a it\'s base64 representation.
list-converter: list-converter:
title: List converter title: List converter
description: This tool can process column-based data and apply various changes (transpose, add prefix and suffix, reverse list, sort list, lowercase values, truncate values) to each row. description: >-
This tool can process column-based data and apply various changes
(transpose, add prefix and suffix, reverse list, sort list, lowercase
values, truncate values) to each row.
base64-string-converter: base64-string-converter:
title: Base64 string encoder/decoder title: Base64 string encoder/decoder
description: Simply encode and decode string into a their base64 representation. description: Simply encode and decode string into a their base64 representation.
toml-to-yaml: toml-to-yaml:
title: TOML to YAML title: TOML to YAML
description: Parse and convert TOML to YAML. description: Parse and convert TOML to YAML.
math-evaluator: math-evaluator:
title: Math evaluator title: Math evaluator
description: A calculator for evaluating mathematical expressions. You can use functions like sqrt, cos, sin, abs, etc. description: >-
A calculator for evaluating mathematical expressions. You can use
functions like sqrt, cos, sin, abs, etc.
json-to-yaml-converter: json-to-yaml-converter:
title: JSON to YAML converter title: JSON to YAML converter
description: Simply convert JSON to YAML with this live online converter. description: Simply convert JSON to YAML with this live online converter.
url-parser: url-parser:
title: Url parser title: Url parser
description: Parse an url string to get all the different parts (protocol, origin, params, port, username-password, ...) description: >-
Parse an url string to get all the different parts (protocol, origin,
params, port, username-password, ...)
iban-validator-and-parser: iban-validator-and-parser:
title: IBAN validator and parser title: IBAN validator and parser
description: Validate and parse IBAN numbers. Check if IBAN is valid and get the country, BBAN, if it is a QR-IBAN and the IBAN friendly format. description: >-
Validate and parse IBAN numbers. Check if IBAN is valid and get the
country, BBAN, if it is a QR-IBAN and the IBAN friendly format.
user-agent-parser: user-agent-parser:
title: User-agent parser title: User-agent parser
description: Detect and parse Browser, Engine, OS, CPU, and Device type/model from an user-agent string. description: >-
Detect and parse Browser, Engine, OS, CPU, and Device type/model from an
user-agent string.
numeronym-generator: numeronym-generator:
title: Numeronym generator title: Numeronym generator
description: A numeronym is a word where a number is used to form an abbreviation. For example, "i18n" is a numeronym of "internationalization" where 18 stands for the number of letters between the first i and the last n in the word. description: >-
A numeronym is a word where a number is used to form an abbreviation. For
example, "i18n" is a numeronym of "internationalization" where 18 stands
for the number of letters between the first i and the last n in the word.
case-converter: case-converter:
title: Case converter title: Case converter
description: Change the case of a string and chose between different formats description: Change the case of a string and chose between different formats
html-entities: html-entities:
title: Escape html entities title: Escape html entities
description: Escape or unescape html entities (replace <,>, &, " and \' to their html version) description: >-
Escape or unescape html entities (replace <,>, &, " and \' to their html
version)
json-prettify: json-prettify:
title: JSON prettify and format title: JSON prettify and format
description: Prettify your JSON string to a human friendly readable format. description: Prettify your JSON string to a human friendly readable format.
docker-run-to-docker-compose-converter: docker-run-to-docker-compose-converter:
title: Docker run to Docker compose converter title: Docker run to Docker compose converter
description: Turns docker run commands into docker-compose files! description: Turns docker run commands into docker-compose files!
mac-address-lookup: mac-address-lookup:
title: MAC address lookup title: MAC address lookup
description: Find the vendor and manufacturer of a device by its MAC address. description: Find the vendor and manufacturer of a device by its MAC address.
mime-types: mime-types:
title: Mime types title: Mime types
description: Convert mime types to extensions and vice-versa. description: Convert mime types to extensions and vice-versa.
toml-to-json: toml-to-json:
title: TOML to JSON title: TOML to JSON
description: Parse and convert TOML to JSON. description: Parse and convert TOML to JSON.
lorem-ipsum-generator: lorem-ipsum-generator:
title: Lorem ipsum generator title: Lorem ipsum generator
description: Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content description: >-
Lorem ipsum is a placeholder text commonly used to demonstrate the visual
form of a document or a typeface without relying on meaningful content
qrcode-generator: qrcode-generator:
title: QR Code generator title: QR Code generator
description: Generate and download QR-code for an url or just a text and customize the background and foreground colors. description: >-
Generate and download QR-code for an url or just a text and customize the
background and foreground colors.
wifi-qrcode-generator: wifi-qrcode-generator:
title: WiFi QR Code generator title: WiFi QR Code generator
description: Generate and download QR-codes for quick connections to WiFi networks. description: Generate and download QR-codes for quick connections to WiFi networks.
xml-formatter: xml-formatter:
title: XML formatter title: XML formatter
description: Prettify your XML string to a human friendly readable format. description: Prettify your XML string to a human friendly readable format.
temperature-converter: temperature-converter:
title: Temperature converter title: Temperature converter
description: Temperature degrees conversions for Kelvin, Celsius, Fahrenheit, Rankine, Delisle, Newton, Réaumur and Rømer. description: >-
Temperature degrees conversions for Kelvin, Celsius, Fahrenheit, Rankine,
Delisle, Newton, Réaumur and Rømer.
chmod-calculator: chmod-calculator:
title: Chmod calculator title: Chmod calculator
description: Compute your chmod permissions and commands with this online chmod calculator. description: >-
Compute your chmod permissions and commands with this online chmod
calculator.
rsa-key-pair-generator: rsa-key-pair-generator:
title: RSA key pair generator title: RSA key pair generator
description: Generate new random RSA private and public key pem certificates. description: Generate new random RSA private and public key pem certificates.
html-wysiwyg-editor: html-wysiwyg-editor:
title: HTML WYSIWYG editor title: HTML WYSIWYG editor
description: Online HTML editor with feature-rich WYSIWYG editor, get the source code of the content immediately. description: >-
Online HTML editor with feature-rich WYSIWYG editor, get the source code
of the content immediately.
yaml-to-toml: yaml-to-toml:
title: YAML to TOML title: YAML to TOML
description: Parse and convert YAML to TOML. description: Parse and convert YAML to TOML.
mac-address-generator: mac-address-generator:
title: MAC address generator title: MAC address generator
description: Enter the quantity and prefix. MAC addresses will be generated in your chosen case (uppercase or lowercase) description: >-
Enter the quantity and prefix. MAC addresses will be generated in your
chosen case (uppercase or lowercase)
json-diff: json-diff:
title: JSON diff title: JSON diff
description: Compare two JSON objects and get the differences between them. description: Compare two JSON objects and get the differences between them.
jwt-parser: jwt-parser:
title: JWT parser title: JWT parser
description: Parse and decode your JSON Web Token (jwt) and display its content. description: Parse and decode your JSON Web Token (jwt) and display its content.
date-converter: date-converter:
title: Date-time converter title: Date-time converter
description: Convert date and time into the various different formats description: Convert date and time into the various different formats
phone-parser-and-formatter: phone-parser-and-formatter:
title: Phone parser and formatter title: Phone parser and formatter
description: Parse, validate and format phone numbers. Get information about the phone number, like the country code, type, etc. description: >-
Parse, validate and format phone numbers. Get information about the phone
number, like the country code, type, etc.
ipv4-subnet-calculator: ipv4-subnet-calculator:
title: IPv4 subnet calculator title: IPv4 subnet calculator
description: Parse your IPv4 CIDR blocks and get all the info you need about your sub network. description: >-
Parse your IPv4 CIDR blocks and get all the info you need about your sub
network.
og-meta-generator: og-meta-generator:
title: Open graph meta generator title: Open graph meta generator
description: Generate open-graph and socials html meta tags for your website. description: Generate open-graph and socials html meta tags for your website.
ipv6-ula-generator: ipv6-ula-generator:
title: IPv6 ULA generator title: IPv6 ULA generator
description: Generate your own local, non-routable IP addresses on your network according to RFC4193. description: >-
Generate your own local, non-routable IP addresses on your network
according to RFC4193.
hash-text: hash-text:
title: Hash text title: Hash text
description: 'Hash a text string using the function you need : MD5, SHA1, SHA256, SHA224, SHA512, SHA384, SHA3 or RIPEMD160' description: >-
Hash a text string using the function you need : MD5, SHA1, SHA256,
SHA224, SHA512, SHA384, SHA3 or RIPEMD160
json-to-toml: json-to-toml:
title: JSON to TOML title: JSON to TOML
description: Parse and convert JSON to TOML. description: Parse and convert JSON to TOML.
device-information: device-information:
title: Device information title: Device information
description: Get information about your current device (screen size, pixel-ratio, user agent, ...) description: >-
Get information about your current device (screen size, pixel-ratio, user
agent, ...)
pdf-signature-checker: pdf-signature-checker:
title: PDF signature checker title: PDF signature checker
description: Verify the signatures of a PDF file. A signed PDF file contains one or more signatures that may be used to determine whether the contents of the file have been altered since the file was signed. description: >-
Verify the signatures of a PDF file. A signed PDF file contains one or
more signatures that may be used to determine whether the contents of the
file have been altered since the file was signed.
json-minify: json-minify:
title: JSON minify title: JSON minify
description: Minify and compress your JSON by removing unnecessary white spaces. description: Minify and compress your JSON by removing unnecessary white spaces.
ulid-generator: ulid-generator:
title: ULID generator title: ULID generator
description: Generate random Universally Unique Lexicographically Sortable Identifier (ULID). description: >-
Generate random Universally Unique Lexicographically Sortable Identifier
(ULID).
string-obfuscator: string-obfuscator:
title: String obfuscator title: String obfuscator
description: Obfuscate a string (like a secret, an IBAN, or a token) to make it shareable and identifiable without revealing its content. description: >-
Obfuscate a string (like a secret, an IBAN, or a token) to make it
shareable and identifiable without revealing its content.
base-converter: base-converter:
title: Integer base converter title: Integer base converter
description: Convert number between different bases (decimal, hexadecimal, binary, octal, base64, ...) description: >-
Convert number between different bases (decimal, hexadecimal, binary,
octal, base64, ...)
yaml-to-json-converter: yaml-to-json-converter:
title: YAML to JSON converter title: YAML to JSON converter
description: Simply convert YAML to JSON with this live online converter. description: Simply convert YAML to JSON with this live online converter.
uuid-generator: uuid-generator:
title: UUIDs generator title: UUIDs generator
description: A Universally Unique Identifier (UUID) is a 128-bit number used to identify information in computer systems. The number of possible UUIDs is 16^32, which is 2^128 or about 3.4x10^38 (which is a lot!). description: >-
A Universally Unique Identifier (UUID) is a 128-bit number used to
identify information in computer systems. The number of possible UUIDs is
16^32, which is 2^128 or about 3.4x10^38 (which is a lot!).
ipv4-address-converter: ipv4-address-converter:
title: Ipv4 address converter title: Ipv4 address converter
description: Convert an ip address into decimal, binary, hexadecimal or event in ipv6 description: Convert an ip address into decimal, binary, hexadecimal or event in ipv6
text-statistics: text-statistics:
title: Text statistics title: Text statistics
description: Get information about a text, the amount of characters, the amount of words, it\'s size, ... description: >-
Get information about a text, the amount of characters, the amount of
words, it\'s size, ...
text-to-nato-alphabet: text-to-nato-alphabet:
title: Text to NATO alphabet title: Text to NATO alphabet
description: Transform text into NATO phonetic alphabet for oral transmission. description: Transform text into NATO phonetic alphabet for oral transmission.
basic-auth-generator: basic-auth-generator:
title: Basic auth generator title: Basic auth generator
description: Generate a base64 basic auth header from an username and a password. description: Generate a base64 basic auth header from an username and a password.
text-to-unicode: text-to-unicode:
title: Text to Unicode title: Text to Unicode
description: Parse and convert text to unicode and vice-versa description: Parse and convert text to unicode and vice-versa
ipv4-range-expander: ipv4-range-expander:
title: IPv4 range expander title: IPv4 range expander
description: Given a start and an end IPv4 address this tool calculates a valid IPv4 network with its CIDR notation. description: >-
Given a start and an end IPv4 address this tool calculates a valid IPv4
network with its CIDR notation.
text-diff: text-diff:
title: Text diff title: Text diff
description: Compare two texts and see the differences between them. description: Compare two texts and see the differences between them.
otp-generator: otp-generator:
title: OTP code generator title: OTP code generator
description: Generate and validate time-based OTP (one time password) for multi-factor authentication. description: >-
Generate and validate time-based OTP (one time password) for multi-factor
authentication.
url-encoder: url-encoder:
title: Encode/decode url formatted strings title: Encode/decode url formatted strings
description: Encode to url-encoded format (also known as "percent-encoded") or decode from it. description: >-
Encode to url-encoded format (also known as "percent-encoded") or decode
from it.
text-to-binary: text-to-binary:
title: Text to ASCII binary title: Text to ASCII binary
description: Convert text to its ASCII binary representation and vice versa. description: Convert text to its ASCII binary representation and vice versa.

View file

@ -1,7 +1,8 @@
import { useRouteQuery } from '@vueuse/router'; import { useRouteQuery } from '@vueuse/router';
import { computed } from 'vue'; import { computed } from 'vue';
import { useStorage } from '@vueuse/core';
export { useQueryParam }; export { useQueryParam, useQueryParamOrStorage };
const transformers = { const transformers = {
number: { number: {
@ -33,3 +34,31 @@ 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 storageDefaultValue = storageRef.value ?? defaultValue;
const proxy = useRouteQuery(name, transformer.toQuery(storageDefaultValue as never));
const ref = computed<T>({
get() {
return transformer.fromQuery(proxy.value) as unknown as T;
},
set(value) {
proxy.value = transformer.toQuery(value as never);
},
});
watch(
ref,
(newValue) => {
storageRef.value = newValue;
},
);
return ref;
}

View file

@ -94,5 +94,19 @@ describe('token-generator', () => {
expect(token).toHaveLength(256); expect(token).toHaveLength(256);
expect(token).toMatch(/^[a-zA-Z]+$/); expect(token).toMatch(/^[a-zA-Z]+$/);
}); });
it('should generate a random string with just numbers except 1 and 2 if only withNumbers is set and deniedChars contains 1 and 2', () => {
const token = createToken({
withLowercase: false,
withUppercase: false,
withNumbers: true,
withSymbols: false,
length: 256,
deniedChars: '12',
});
expect(token).toHaveLength(256);
expect(token).toMatch(/^[0-9]+$/);
});
}); });
}); });

View file

@ -5,6 +5,7 @@ export function createToken({
withLowercase = true, withLowercase = true,
withNumbers = true, withNumbers = true,
withSymbols = false, withSymbols = false,
deniedChars = '',
length = 64, length = 64,
alphabet, alphabet,
}: { }: {
@ -12,6 +13,7 @@ export function createToken({
withLowercase?: boolean withLowercase?: boolean
withNumbers?: boolean withNumbers?: boolean
withSymbols?: boolean withSymbols?: boolean
deniedChars?: string
length?: number length?: number
alphabet?: string alphabet?: string
}) { }) {
@ -20,7 +22,7 @@ export function createToken({
withLowercase ? 'abcdefghijklmopqrstuvwxyz' : '', withLowercase ? 'abcdefghijklmopqrstuvwxyz' : '',
withNumbers ? '0123456789' : '', withNumbers ? '0123456789' : '',
withSymbols ? '.,;:!?./-"\'#{([-|\\@)]=}*+' : '', withSymbols ? '.,;:!?./-"\'#{([-|\\@)]=}*+' : '',
].join(''); ; ].filter(c => !(deniedChars?.includes(c))).join(''); ;
return shuffleString(allAlphabet.repeat(length)).substring(0, length); return shuffleString(allAlphabet.repeat(length)).substring(0, length);
} }

View file

@ -1,27 +1,31 @@
<script setup lang="ts"> <script setup lang="ts">
import { createToken } from './token-generator.service'; import { createToken } from './token-generator.service';
import { useCopy } from '@/composable/copy'; import { useCopy } from '@/composable/copy';
import { useQueryParam } from '@/composable/queryParams'; import { useQueryParamOrStorage } from '@/composable/queryParams';
import { computedRefreshable } from '@/composable/computedRefreshable'; import { computedRefreshable } from '@/composable/computedRefreshable';
const length = useQueryParam({ name: 'length', defaultValue: 64 }); const count = useQueryParamOrStorage({ name: 'count', storageName: 'token-generator:count', defaultValue: 1 });
const withUppercase = useQueryParam({ name: 'uppercase', defaultValue: true }); const length = useQueryParamOrStorage({ name: 'length', storageName: 'token-generator:length', defaultValue: 64 });
const withLowercase = useQueryParam({ name: 'lowercase', defaultValue: true }); const withUppercase = useQueryParamOrStorage({ name: 'uppercase', storageName: 'token-generator:uppercase', defaultValue: true });
const withNumbers = useQueryParam({ name: 'numbers', defaultValue: true }); const withLowercase = useQueryParamOrStorage({ name: 'lowercase', storageName: 'token-generator:lowercase', defaultValue: true });
const withSymbols = useQueryParam({ name: 'symbols', defaultValue: false }); const withNumbers = useQueryParamOrStorage({ name: 'numbers', storageName: 'token-generator:numbers', defaultValue: true });
const withSymbols = useQueryParamOrStorage({ name: 'symbols', storageName: 'token-generator:symbols', defaultValue: false });
const deniedChars = useQueryParamOrStorage({ name: 'deny', storageName: 'token-generator:deny', defaultValue: '' });
const { t } = useI18n(); const { t } = useI18n();
const [token, refreshToken] = computedRefreshable(() => const [tokens, refreshTokens] = computedRefreshable(() =>
createToken({ Array.from({ length: count.value },
length: length.value, () => createToken({
withUppercase: withUppercase.value, length: length.value,
withLowercase: withLowercase.value, withUppercase: withUppercase.value,
withNumbers: withNumbers.value, withLowercase: withLowercase.value,
withSymbols: withSymbols.value, withNumbers: withNumbers.value,
}), withSymbols: withSymbols.value,
deniedChars: deniedChars.value,
})).join('\n'),
); );
const { copy } = useCopy({ source: token, text: t('tools.token-generator.copied') }); const { copy } = useCopy({ source: tokens, text: t('tools.token-generator.copied') });
</script> </script>
<template> <template>
@ -51,25 +55,38 @@ const { copy } = useCopy({ source: token, text: t('tools.token-generator.copied'
</div> </div>
</n-form> </n-form>
<n-form-item label="Denied Characters" label-placement="left">
<c-input-text
v-model:value="deniedChars"
placeholder="Put characters to deny from token"
/>
</n-form-item>
<n-form-item :label="`${t('tools.token-generator.length')} (${length})`" label-placement="left"> <n-form-item :label="`${t('tools.token-generator.length')} (${length})`" label-placement="left">
<n-slider v-model:value="length" :step="1" :min="1" :max="512" /> <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="t('tools.token-generator.count')" label-placement="left">
<n-input-number v-model:value="count" size="small" />
</n-form-item> </n-form-item>
<c-input-text <c-input-text
v-model:value="token" v-model:value="tokens"
multiline multiline
:placeholder="t('tools.token-generator.tokenPlaceholder')" :placeholder="t('tools.token-generator.tokenPlaceholder')"
readonly readonly
rows="3" rows="3"
autosize autosize
class="token-display" class="token-display"
word-wrap
/> />
<div mt-5 flex justify-center gap-3> <div mt-5 flex justify-center gap-3>
<c-button @click="copy()"> <c-button @click="copy()">
{{ t('tools.token-generator.button.copy') }} {{ t('tools.token-generator.button.copy') }}
</c-button> </c-button>
<c-button @click="refreshToken"> <c-button @click="refreshTokens">
{{ t('tools.token-generator.button.refresh') }} {{ t('tools.token-generator.button.refresh') }}
</c-button> </c-button>
</div> </div>