From ff57fda388a6bcd34aaf8f1b379444ed3862b4a2 Mon Sep 17 00:00:00 2001 From: sharevb Date: Sun, 3 Mar 2024 09:44:53 +0100 Subject: [PATCH 1/8] fix(Token Generator): multi token, last settings, length input, denied chars Fix #777, #822 , #797, #466, #806, #1065 --- locales/en.yml | 347 ++++++++++-------- src/composable/queryParams.ts | 31 +- .../token-generator.service.test.ts | 14 + .../token-generator.service.ts | 4 +- .../token-generator/token-generator.tool.vue | 53 ++- 5 files changed, 270 insertions(+), 179 deletions(-) diff --git a/locales/en.yml b/locales/en.yml index 50d48af9..e719fc95 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -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: categories: newestTools: Newest tools - favoriteTools: 'Your favorite tools' - allTools: 'All the tools' - subtitle: 'Handy tools for developers' - toggleMenu: 'Toggle menu' + favoriteTools: Your favorite tools + allTools: All the tools + subtitle: Handy tools for developers + toggleMenu: Toggle menu home: Home - uiLib: 'UI Lib' - support: 'Support IT Tools development' - buyMeACoffee: 'Buy me a coffee' + uiLib: UI Lib + support: Support IT Tools development + buyMeACoffee: Buy me a coffee follow: - title: 'You like it-tools?' - p1: 'Give us a star on' - githubRepository: 'IT-Tools GitHub repository' - p2: 'or follow us on' - twitterAccount: 'IT-Tools Twitter account' - thankYou: 'Thank you !' + title: You like it-tools? + p1: Give us a star on + githubRepository: IT-Tools GitHub repository + p2: or follow us on + twitterAccount: IT-Tools Twitter account + thankYou: Thank you ! nav: - github: 'GitHub repository' - githubRepository: 'IT-Tools GitHub repository' - twitter: 'Twitter account' - twitterAccount: 'IT Tools Twitter account' - about: 'About IT-Tools' - aboutLabel: 'About' - darkMode: 'Dark mode' - lightMode: 'Light mode' - mode: 'Toggle dark/light mode' + github: GitHub repository + githubRepository: IT-Tools GitHub repository + twitter: Twitter account + twitterAccount: IT Tools Twitter account + about: About IT-Tools + aboutLabel: About + darkMode: Dark mode + lightMode: Light mode + mode: Toggle dark/light mode about: content: > # 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 - 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? - 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. - -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' + 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. favoriteButton: - remove: 'Remove from favorites' - add: 'Add to favorites' + remove: Remove from favorites + add: Add to favorites toolCard: new: New search: label: Search tools: categories: - favorite-tools: 'Your favorite tools' + favorite-tools: Your favorite tools crypto: Crypto converter: Converter web: Web - images and videos: 'Images & Videos' + images and videos: Images & Videos development: Development network: Network math: Math measurement: Measurement text: Text data: Data - 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: 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: 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...) lowercase: Lowercase (abc...) numbers: Numbers (123...) symbols: Symbols (!-;...) length: Length - tokenPlaceholder: 'The token...' + tokenPlaceholder: The token... copied: Token copied to the clipboard button: copy: Copy refresh: Refresh + count: Tokens to generate 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: title: SVG placeholder generator description: Generate svg images to use as placeholder in your applications. - json-to-csv: title: JSON to CSV description: Convert JSON to CSV with automatic header detection. - camera-recorder: title: Camera recorder description: Take a picture or record a video from your webcam or camera. - 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: 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: title: Color converter description: Convert color between the different formats (hex, rgb, hsl and css name) - 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: 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: title: HTTP status codes description: The list of all HTTP status codes their name and their meaning. - sql-prettify: 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: 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: 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: title: Slugify string description: Make a string url, filename and id safe. - encryption: 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: 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: title: YAML prettify and format description: Prettify your YAML string to a human friendly readable format. - 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: title: Roman numeral converter description: Convert Roman numerals to numbers and convert numbers to Roman numerals. - 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: 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: title: Base64 file converter description: Convert string, files or images into a it\'s base64 representation. - 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: title: Base64 string encoder/decoder description: Simply encode and decode string into a their base64 representation. - toml-to-yaml: title: TOML to YAML description: Parse and convert TOML to YAML. - 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: title: JSON to YAML converter description: Simply convert JSON to YAML with this live online converter. - 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: 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: 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: 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: title: Case converter description: Change the case of a string and chose between different formats - 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: title: JSON prettify and format description: Prettify your JSON string to a human friendly readable format. - docker-run-to-docker-compose-converter: title: Docker run to Docker compose converter description: Turns docker run commands into docker-compose files! - mac-address-lookup: title: MAC address lookup description: Find the vendor and manufacturer of a device by its MAC address. - mime-types: title: Mime types description: Convert mime types to extensions and vice-versa. - toml-to-json: title: TOML to JSON description: Parse and convert TOML to JSON. - 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: 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: title: WiFi QR Code generator description: Generate and download QR-codes for quick connections to WiFi networks. - xml-formatter: title: XML formatter description: Prettify your XML string to a human friendly readable format. - 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: 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: title: RSA key pair generator description: Generate new random RSA private and public key pem certificates. - 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: title: YAML to TOML description: Parse and convert YAML to TOML. - 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: title: JSON diff description: Compare two JSON objects and get the differences between them. - jwt-parser: title: JWT parser description: Parse and decode your JSON Web Token (jwt) and display its content. - date-converter: title: Date-time converter description: Convert date and time into the various different formats - 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: 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: title: Open graph meta generator description: Generate open-graph and socials html meta tags for your website. - 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: 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: title: JSON to TOML description: Parse and convert JSON to TOML. - 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: 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: title: JSON minify description: Minify and compress your JSON by removing unnecessary white spaces. - 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: 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: 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: title: YAML to JSON converter description: Simply convert YAML to JSON with this live online converter. - uuid-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: title: Ipv4 address converter description: Convert an ip address into decimal, binary, hexadecimal or event in ipv6 - 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: title: Text to NATO alphabet description: Transform text into NATO phonetic alphabet for oral transmission. - basic-auth-generator: title: Basic auth generator description: Generate a base64 basic auth header from an username and a password. - text-to-unicode: title: Text to Unicode description: Parse and convert text to unicode and vice-versa - 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: title: Text diff description: Compare two texts and see the differences between them. - otp-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: 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: title: Text to ASCII binary description: Convert text to its ASCII binary representation and vice versa. diff --git a/src/composable/queryParams.ts b/src/composable/queryParams.ts index 9699abbc..9e184610 100644 --- a/src/composable/queryParams.ts +++ b/src/composable/queryParams.ts @@ -1,7 +1,8 @@ import { useRouteQuery } from '@vueuse/router'; import { computed } from 'vue'; +import { useStorage } from '@vueuse/core'; -export { useQueryParam }; +export { useQueryParam, useQueryParamOrStorage }; const transformers = { number: { @@ -33,3 +34,31 @@ function useQueryParam({ name, defaultValue }: { name: string; defaultValue: }, }); } + +function useQueryParamOrStorage({ 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({ + 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; +} diff --git a/src/tools/token-generator/token-generator.service.test.ts b/src/tools/token-generator/token-generator.service.test.ts index 604f5a89..d1b545e9 100644 --- a/src/tools/token-generator/token-generator.service.test.ts +++ b/src/tools/token-generator/token-generator.service.test.ts @@ -94,5 +94,19 @@ describe('token-generator', () => { expect(token).toHaveLength(256); 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]+$/); + }); }); }); diff --git a/src/tools/token-generator/token-generator.service.ts b/src/tools/token-generator/token-generator.service.ts index 3733a884..ca10d0a8 100644 --- a/src/tools/token-generator/token-generator.service.ts +++ b/src/tools/token-generator/token-generator.service.ts @@ -5,6 +5,7 @@ export function createToken({ withLowercase = true, withNumbers = true, withSymbols = false, + deniedChars = '', length = 64, alphabet, }: { @@ -12,6 +13,7 @@ export function createToken({ withLowercase?: boolean withNumbers?: boolean withSymbols?: boolean + deniedChars?: string length?: number alphabet?: string }) { @@ -20,7 +22,7 @@ export function createToken({ withLowercase ? 'abcdefghijklmopqrstuvwxyz' : '', withNumbers ? '0123456789' : '', withSymbols ? '.,;:!?./-"\'#{([-|\\@)]=}*+' : '', - ].join(''); ; + ].filter(c => !(deniedChars?.includes(c))).join(''); ; return shuffleString(allAlphabet.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 fe53edcd..0068b43b 100644 --- a/src/tools/token-generator/token-generator.tool.vue +++ b/src/tools/token-generator/token-generator.tool.vue @@ -1,27 +1,31 @@