Merge 5c9333bcf9 into b430baef40

Fix #1045

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1 @@
+blank_issues_enabled: false

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -1,5 +1,5 @@
 name: 🚀 New feature proposal
-description: Propose a new feature to be added to IT-Tools.
+description: Propose a new feature/enhancement or tool idea for IT-Tools
 labels: ['enhancement', 'triage']
 
 body:

.github/ISSUE_TEMPLATE/new-tool-request.md

@@ -1,19 +0,0 @@
----
-name: New tool request
-about: Suggest a new tool idea
-title: '[NEW TOOL]'
-labels: new tool
-assignees: CorentinTh
----
-
-**What tool do you want?**
-Example: a token generator
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Is their example of this tool in the wild?**
-Provide link to already existing tool or npm packages if any exists
-
-**Additional context**
-Add any other context about the feature request here.

.github/ISSUE_TEMPLATE/other-request.md

@@ -1,13 +0,0 @@
----
-name: Other request
-about: Any request that does not concern a tool creation, a new feature request on a tool or a bug
-title: '[OTHER] '
-labels:
-assignees: CorentinTh
----
-
-**Describe the solution you'd like**
-A clear and concise description of what you want.
-
-**Additional context**
-Add any other context about the feature request here.

.github/ISSUE_TEMPLATE/tool-improvement.md

@@ -1,13 +0,0 @@
----
-name: Tool improvement
-about: Improvement on an existing tool
-title: '[TOOL IMPROVEMENT]'
-labels: enhancement
-assignees: CorentinTh
----
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Additional context**
-Add any other context about the feature request here.

.github/workflows/codeql-analysis.yml

@@ -1,69 +0,0 @@
-# For most projects, this workflow file will not need changing; you simply need
-# to commit it to your repository.
-#
-# You may wish to alter this file to override the set of languages analyzed,
-# or to provide custom queries or build logic.
-#
-# ******** NOTE ********
-# We have attempted to detect the languages in your repository. Please check
-# the `language` matrix defined below to confirm you have the correct set of
-# supported CodeQL languages.
-#
-name: "CodeQL"
-
-on:
-  push:
-    branches: [ dev ]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [ dev ]
-
-jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
-    permissions:
-      actions: read
-      contents: read
-      security-events: write
-
-    strategy:
-      fail-fast: false
-      matrix:
-        language: [ 'javascript' ]
-        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
-        # Learn more:
-        # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
-
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac # v4
-
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
-      with:
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-        # queries: ./path/to/local/query, your-org/your-repo/queries@main
-
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
-
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
-
-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
-
-    #- run: |
-    #   make bootstrap
-    #   make release
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2

.github/workflows/docker-nightly-release.yml

@@ -32,7 +32,7 @@ jobs:
       - run: corepack enable
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
           cache: 'pnpm'
 
       - name: Install dependencies

.github/workflows/releases.yml

@@ -61,7 +61,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
           cache: 'pnpm'
 
       - name: Install dependencies

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
-## Version 2024.05.10-33e5294
+## Version 2024.05.13-a0bc346
 
 ### Features
 - **i18n**: added German translation (#1038) (2c2fb21)
@@ -33,12 +33,20 @@ All notable changes to this project will be documented in this file. See [standa
 - **i18n**: added locales per tool (#861) (95698cb)
 
 ### Chores
+- **issues**: prevent empty issues (#1078) (a0bc346)
+- **issues**: removed old issue templates (#1077) (5a7b0f9)
+- **node**: upgraded node version in CI workflows (b59942a)
+- **version**: release 2024.05.10-33e5294 (38d5687)
 - **issues**: improved issues template (2852c30)
 - **issues**: improved bug issue template (#1046) (a799234)
 
+### Documentation
+- **changelog**: update changelog for 2024.05.10-33e5294 (9dfd347)
+
 ## Version 2023.12.21-5ed3693
 
 ### Features
+
 - **i18n**: improve chinese i18n (#757) (2e56641)
 - **i18n**: add tooltip and favoriteButton i18n (#756) (a1037cf)
 - **i18n**: add Chinese translation base (#718) (8f99eb6)
@@ -46,6 +54,7 @@ All notable changes to this project will be documented in this file. See [standa
 - **new tool**: numeronym generator (#729) (e07e2ae)
 
 ### Bug fixes
+
 - **jwt-parser**: jwt claim array support (#799) (5ed3693)
 - **camera-recorder**: stop camera on navigation (#782) (80e46c9)
 - **doc**: updated create new tool command in readme (#762) (7a70dbb)
@@ -54,6 +63,7 @@ All notable changes to this project will be documented in this file. See [standa
 - **eta**: corrected example (#737) (821cbea)
 
 ### Refactoring
+
 - **about, i18n**: improved i18n dx with markdown (#753) (bd3edcb)
 - **token, i18n**: complete fr translation (#752) (de1ee69)
 - **uuid generator**: uuid version picker (#751) (38586ca)
@@ -63,6 +73,7 @@ All notable changes to this project will be documented in this file. See [standa
 - **bcrypt**: fix input label align (#721) (093ff31)
 
 ### Chores
+
 - **deps**: switched from oui to oui-data for mac address lookup (#693) (0fe9a20)
 - **deps**: update unocss monorepo to ^0.57.0 (#638) (2e396d8)
 - **docker**: added armv7 plateform for docker releases (#722) (fe1de8c)
@@ -70,19 +81,23 @@ All notable changes to this project will be documented in this file. See [standa
 ## Version 2023.11.02-7d94e11
 
 ### Features
+
 - **i18n**: language selector (#710) (e86fd96)
 
 ### Bug fixes
+
 - **dockerfile**: revert replacement of nginx image with non-privileged one (#716) (7d94e11)
 - **encryption**: alert on decryption error (#711) (02b0d0d)
 
 ### Refactoring
+
 - **math-evaluator**: improved description (e87f4b1)
 - **math-evaluator**: improved search and UX (#713) (58de897)
 
 ## Version 2023.11.01-e164afb
 
 ### Features
+
 - **command-palette**: clear prompt on palette close (#708) (d013696)
 - **command-palette**: added about page in command palette (99b1eb9)
 - **new tool**: random MAC address generator (#657) (cc3425d)
@@ -101,11 +116,13 @@ All notable changes to this project will be documented in this file. See [standa
 - **new tool**: text diff and comparator (#588) (81bfe57)
 
 ### Bug fixes
+
 - **deps**: fix issue on slugify (#593) (#673) (720201a)
 - **deps**: update dependency monaco-editor to ^0.43.0 (#620) (e371ef7)
 - **deps**: update dependency sql-formatter to v13 (#606) (c7d4562)
 
 ### Refactoring
+
 - **ui**: better ui demo preview menu (#664) (015c673)
 - **color-converter**: improved color-converter UX (#701) (abb8335)
 - **docker**: improved docker config (#700) (020e9cb)
@@ -122,6 +139,7 @@ All notable changes to this project will be documented in this file. See [standa
 - **bcrypt**: fix typo (#604) (e18bae1)
 
 ### Chores
+
 - **deps**: clean unused dependencies (#709) (e164afb)
 - **deps**: update docker/setup-qemu-action action to v3 (#627) (4365226)
 - **deps**: update docker/setup-buildx-action action to v3 (#626) (57ecda1)
@@ -136,19 +154,23 @@ All notable changes to this project will be documented in this file. See [standa
 - **deps**: update dependency typescript to ~5.2.0 (#587) (f3e14fc)
 
 ### Doc
+
 - **readme**: added contributors list (#622) (557b304)
 - **hosting**: added cloudron in the other hosting solutions section (#589) (06c3547)
 
 ## Version 2023.08.21-6f93cba
 
 ### Features
+
 - **copy**: support legacy copy to clipboard for older browser (#581) (6f93cba)
 - **new tool**: string obfuscator (#575) (c58d6e3)
 
 ### Bug fixes
+
 - **deps**: update dependency sql-formatter to v12 (#520) (2bcb77a)
 
 ### Chores
+
 - **deps**: switched to fucking typescript v5 (#501) (76b2761)
 - **deps**: update dependency @antfu/eslint-config to ^0.40.0 (#552) (6ff9a01)
 - **deps**: update dependency prettier to v3 (#564) (a2b9b15)
@@ -158,6 +180,7 @@ All notable changes to this project will be documented in this file. See [standa
 ## Version 2023.08.16-9bd4ad4
 
 ### Features
+
 - **Case Converter**: Add lowercase and uppercase (#534) (7b6232a)
 - **new tool**: emoji picker (#551) (93f7cf0)
 - **ui**: added c-select in the ui lib (#550) (dfa1ba8)
@@ -178,6 +201,7 @@ All notable changes to this project will be documented in this file. See [standa
 - **base64-string-converter**: switch to encode and decode url safe base64 strings (#392) (0b20f1c)
 
 ### Bug fixes
+
 - **deps**: update dependency uuid to v9 (#566) (5e12991)
 - **deps**: update dependency mathjs to v11 (#519) (7924456)
 - **deps**: update dependency @vueuse/router to v10 (#516) (ea0f27c)
@@ -197,6 +221,7 @@ All notable changes to this project will be documented in this file. See [standa
 - **ipv4-converter**: removed readonly on input (7aed9c5)
 
 ### Refactoring
+
 - **navbar**: consistent spacing in navbar buttons (#507) (30f88fc)
 - **ui**: remove n-text (#506) (72c98a3)
 - **ui**: replaced some n-input to c-input (#505) (05ea545)
@@ -209,6 +234,7 @@ All notable changes to this project will be documented in this file. See [standa
 - **ui**: replaced some n-input with c-input-text (f7fc779)
 
 ### Chores
+
 - **deps**: update dependency vitest to ^0.34.0 (#562) (9bd4ad4)
 - **deps**: update dependency node to v18.17.1 (#560) (65a9474)
 - **deps**: update dependency unocss to ^0.55.0 (#561) (85cc7a8)
@@ -249,47 +275,58 @@ All notable changes to this project will be documented in this file. See [standa
 - **lint**: switched to a better lint config (33c9b66)
 
 ### Refacor
+
 - **transformers**: use monospace font for JSON and SQL text areas (#476) (ba4876d)
 
 ### Documentation
+
 - **ide**: updated vscode extensions settings (#472) (847323c)
 
 ### Chors
+
 - **deps**: updated vueuse dependency version (8515c24)
 
 ## Version 2023.05.14-77f2efc
 
 ### Features
+
 - **list-converter**: a small converter who deals with column based data and do some stuff with it (#387) (83a7b3b)
 - **new tool**: phone parser and normalizer (ce3150c)
 
 ### Bug fixes
+
 - **phone-parser**: use default country code (a43c546)
 - **home**: prevent weird blue border on card (3f6c8f0)
 
 ### Refactoring
+
 - **ui**: replaced some n-input with c-input-text (77f2efc)
 
 ### Chores
+
 - **issues**: updated new tool request issue template (edae4c6)
 
 ### Ui-lib
+
 - **new-component**: added text input component in the c-lib (aad8d84)
 - **button**: size variants (401f13f)
 
 ## Version 2023.04.23-92bd835
 
 ### Features
+
 - **ui-lib**: demo pages for c-lib components (92bd835)
 - **new-tool**: diff of two json objects (362f2fa)
 - **ipv4-range-expander**: expands a given IPv4 start and end address to a valid IPv4 subnet (#366) (df989e2)
 - **date converter**: auto focus main input (6d22025)
 
 ### Bug fixes
+
 - **ts**: cleaned legacy typechecking warning (e88c1d5)
 - **mac-address-lookup**: added copy handler on button click (c311e38)
 
 ### Refactoring
+
 - **ui-lib**: prevent c-button to shrink (61ece23)
 - **ui**: replaced naive ui cards with custom ones (f080933)
 - **clean**: removed unused lodash import (bb32513)
@@ -299,48 +336,60 @@ All notable changes to this project will be documented in this file. See [standa
 ## Version 2023.04.14-dbad773
 
 ### Features
+
 - **new-tool**: http status codes (8355bd2)
 
 ### Refactoring
+
 - **uuid-generator**: prevent NaN in quantity (6fb4994)
 
 ### Chores
+
 - **release**: create a github release on new version (dbad773)
 - **version**: reset CHANGELOG content to support new format (85cb0ff)
 
 ## Version 2023.04.14-f9b77b7
 
 ### Features
+
 - **new-tool**: http status codes (8355bd2)
 
 ### Refactoring
+
 - **uuid-generator**: prevent NaN in quantity (6fb4994)
 
 ### Chores
+
 - **release**: create a github release on new version (f9b77b7)
 - **version**: reset CHANGELOG content to support new format (85cb0ff)
 
 ## Version 2023.04.14-2f0d239
 
 ### Features
+
 - **new-tool**: http status codes (8355bd2)
 
 ### Refactoring
+
 - **uuid-generator**: prevent NaN in quantity (6fb4994)
 
 ### Chores
+
 - **release**: create a github release on new version (2f0d239)
 - **version**: reset CHANGELOG content to support new format (85cb0ff)
 
 ## Version 2023.04.14-474cae4
 
 ### Features
+
 - **new-tool**: http status codes (8355bd2)
 
 ### Refactoring
+
 - **uuid-generator**: prevent NaN in quantity (6fb4994)
 
 ### Chores
+
 - **release**: create a github release on new version (474cae4)
 - **version**: reset CHANGELOG content to support new format (85cb0ff)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "it-tools",
-  "version": "2024.5.10-33e5294",
+  "version": "2024.5.13-a0bc346",
   "description": "Collection of handy online tools for developers, with great UX. ",
   "keywords": [
     "productivity",
@@ -64,6 +64,7 @@
     "highlight.js": "^11.7.0",
     "iarna-toml-esm": "^3.0.5",
     "ibantools": "^4.3.3",
+    "js-base64": "^3.7.6",
     "json5": "^2.2.3",
     "jwt-decode": "^3.1.2",
     "libphonenumber-js": "^1.10.28",

pnpm-lock.yaml

@@ -92,6 +92,9 @@ dependencies:
   ibantools:
     specifier: ^4.3.3
     version: 4.3.3
+  js-base64:
+    specifier: ^3.7.6
+    version: 3.7.7
   json5:
     specifier: ^2.2.3
     version: 2.2.3
@@ -3351,7 +3354,7 @@ packages:
     dependencies:
       '@unhead/dom': 0.5.1
       '@unhead/schema': 0.5.1
-      '@vueuse/shared': 10.7.2(vue@3.3.4)
+      '@vueuse/shared': 10.8.0(vue@3.3.4)
       unhead: 0.5.1
       vue: 3.3.4
     transitivePeerDependencies:
@@ -3993,10 +3996,10 @@ packages:
       - vue
     dev: false
 
-  /@vueuse/shared@10.7.2(vue@3.3.4):
-    resolution: {integrity: sha512-qFbXoxS44pi2FkgFjPvF4h7c9oMDutpyBdcJdMYIMg9XyXli2meFMuaKn+UMgsClo//Th6+beeCgqweT/79BVA==}
+  /@vueuse/shared@10.8.0(vue@3.3.4):
+    resolution: {integrity: sha512-dUdy6zwHhULGxmr9YUg8e+EnB39gcM4Fe2oKBSrh3cOsV30JcMPtsyuspgFCUo5xxFNaeMf/W2yyKfST7Bg8oQ==}
     dependencies:
-      vue-demi: 0.14.6(vue@3.3.4)
+      vue-demi: 0.14.7(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -6472,6 +6475,10 @@ packages:
     hasBin: true
     dev: true
 
+  /js-base64@3.7.7:
+    resolution: {integrity: sha512-7rCnleh0z2CkXhH67J8K1Ytz0b2Y+yxTPL+/KOJoa20hfnVQ/3/T6W/KflYI4bRHRagNeXeU2bkNGI3v1oS/lw==}
+    dev: false
+
   /js-beautify@1.14.6:
     resolution: {integrity: sha512-GfofQY5zDp+cuHc+gsEXKPpNw2KbPddreEo35O6jT6i0RVK6LhsoYBhq5TvK4/n74wnA0QbK8gGd+jUZwTMKJw==}
     engines: {node: '>=10'}
@@ -9151,8 +9158,8 @@ packages:
       vue: 3.3.4
     dev: false
 
-  /vue-demi@0.14.6(vue@3.3.4):
-    resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
+  /vue-demi@0.14.7(vue@3.3.4):
+    resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true

src/components/FormatTransformer.vue

@@ -48,7 +48,7 @@ const output = computed(() => transformer.value(input.value));
     monospace
   />
 
-  <div>
+  <div overflow-auto>
     <div mb-5px>
       {{ outputLabel }}
     </div>

src/composable/downloadBase64.ts

@@ -1,8 +1,13 @@
-import { extension as getExtensionFromMime } from 'mime-types';
+import { extension as getExtensionFromMimeType, extension as getMimeTypeFromExtension } from 'mime-types';
 import type { Ref } from 'vue';
 import _ from 'lodash';
 
-export { getMimeTypeFromBase64, useDownloadFileFromBase64 };
+export {
+  getMimeTypeFromBase64,
+  getMimeTypeFromExtension, getExtensionFromMimeType,
+  useDownloadFileFromBase64, useDownloadFileFromBase64Refs,
+  previewImageFromBase64,
+};
 
 const commonMimeTypesSignatures = {
   'JVBERi0': 'application/pdf',
@@ -36,30 +41,78 @@ function getFileExtensionFromMimeType({
   defaultExtension?: string
 }) {
   if (mimeType) {
-    return getExtensionFromMime(mimeType) ?? defaultExtension;
+    return getExtensionFromMimeType(mimeType) ?? defaultExtension;
   }
 
   return defaultExtension;
 }
 
-function useDownloadFileFromBase64({ source, filename }: { source: Ref<string>; filename?: string }) {
+function downloadFromBase64({ sourceValue, filename, extension, fileMimeType }:
+{ sourceValue: string; filename?: string; extension?: string; fileMimeType?: string }) {
+  if (sourceValue === '') {
+    throw new Error('Base64 string is empty');
+  }
+
+  const defaultExtension = extension ?? 'txt';
+  const { mimeType } = getMimeTypeFromBase64({ base64String: sourceValue });
+  let base64String = sourceValue;
+  if (!mimeType) {
+    const targetMimeType = fileMimeType ?? getMimeTypeFromExtension(defaultExtension);
+    base64String = `data:${targetMimeType};base64,${sourceValue}`;
+  }
+
+  const cleanExtension = extension ?? getFileExtensionFromMimeType(
+    { mimeType, defaultExtension });
+  let cleanFileName = filename ?? `file.${cleanExtension}`;
+  if (extension && !cleanFileName.endsWith(`.${extension}`)) {
+    cleanFileName = `${cleanFileName}.${cleanExtension}`;
+  }
+
+  const a = document.createElement('a');
+  a.href = base64String;
+  a.download = cleanFileName;
+  a.click();
+}
+
+function useDownloadFileFromBase64(
+  { source, filename, extension, fileMimeType }:
+  { source: Ref<string>; filename?: string; extension?: string; fileMimeType?: string }) {
   return {
     download() {
-      if (source.value === '') {
-        throw new Error('Base64 string is empty');
-      }
-
-      const { mimeType } = getMimeTypeFromBase64({ base64String: source.value });
-      const base64String = mimeType
-        ? source.value
-        : `data:text/plain;base64,${source.value}`;
-
-      const cleanFileName = filename ?? `file.${getFileExtensionFromMimeType({ mimeType })}`;
-
-      const a = document.createElement('a');
-      a.href = base64String;
-      a.download = cleanFileName;
-      a.click();
+      downloadFromBase64({ sourceValue: source.value, filename, extension, fileMimeType });
     },
   };
 }
+
+function useDownloadFileFromBase64Refs(
+  { source, filename, extension }:
+  { source: Ref<string>; filename?: Ref<string>; extension?: Ref<string> }) {
+  return {
+    download() {
+      downloadFromBase64({ sourceValue: source.value, filename: filename?.value, extension: extension?.value });
+    },
+  };
+}
+
+function previewImageFromBase64(base64String: string): HTMLImageElement {
+  if (base64String === '') {
+    throw new Error('Base64 string is empty');
+  }
+
+  const img = document.createElement('img');
+  img.src = base64String;
+
+  const container = document.createElement('div');
+  container.appendChild(img);
+
+  const previewContainer = document.getElementById('previewContainer');
+  if (previewContainer) {
+    previewContainer.innerHTML = '';
+    previewContainer.appendChild(container);
+  }
+  else {
+    throw new Error('Preview container element not found');
+  }
+
+  return img;
+}

src/tools/base64-file-converter/base64-file-converter.vue

@@ -2,12 +2,19 @@
 import { useBase64 } from '@vueuse/core';
 import type { Ref } from 'vue';
 import { useCopy } from '@/composable/copy';
-import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
+import { getExtensionFromMimeType, getMimeTypeFromBase64, previewImageFromBase64, useDownloadFileFromBase64Refs } from '@/composable/downloadBase64';
 import { useValidation } from '@/composable/validation';
 import { isValidBase64 } from '@/utils/base64';
 
+const fileName = ref('file');
+const fileExtension = ref('');
 const base64Input = ref('');
-const { download } = useDownloadFileFromBase64({ source: base64Input });
+const { download } = useDownloadFileFromBase64Refs(
+  {
+    source: base64Input,
+    filename: fileName,
+    extension: fileExtension,
+  });
 const base64InputValidation = useValidation({
   source: base64Input,
   rules: [
@@ -18,6 +25,35 @@ const base64InputValidation = useValidation({
   ],
 });
 
+watch(
+  base64Input,
+  (newValue, _) => {
+    const { mimeType } = getMimeTypeFromBase64({ base64String: newValue });
+    if (mimeType) {
+      fileExtension.value = getExtensionFromMimeType(mimeType) || fileExtension.value;
+    }
+  },
+);
+
+function previewImage() {
+  if (!base64InputValidation.isValid) {
+    return;
+  }
+  try {
+    const image = previewImageFromBase64(base64Input.value);
+    image.style.maxWidth = '100%';
+    image.style.maxHeight = '400px';
+    const previewContainer = document.getElementById('previewContainer');
+    if (previewContainer) {
+      previewContainer.innerHTML = '';
+      previewContainer.appendChild(image);
+    }
+  }
+  catch (_) {
+    //
+  }
+}
+
 function downloadFile() {
   if (!base64InputValidation.isValid) {
     return;
@@ -44,6 +80,24 @@ async function onUpload(file: File) {
 
 <template>
   <c-card title="Base64 to file">
+    <n-grid cols="3" x-gap="12">
+      <n-gi span="2">
+        <c-input-text
+          v-model:value="fileName"
+          label="File Name"
+          placeholder="Download filename"
+          mb-2
+        />
+      </n-gi>
+      <n-gi>
+        <c-input-text
+          v-model:value="fileExtension"
+          label="Extension"
+          placeholder="Extension"
+          mb-2
+        />
+      </n-gi>
+    </n-grid>
     <c-input-text
       v-model:value="base64Input"
       multiline
@@ -53,7 +107,14 @@ async function onUpload(file: File) {
       mb-2
     />
 
-    <div flex justify-center>
+    <div flex justify-center py-2>
+      <div id="previewContainer" />
+    </div>
+
+    <div flex justify-center gap-3>
+      <c-button :disabled="base64Input === '' || !base64InputValidation.isValid" @click="previewImage()">
+        Preview image
+      </c-button>
       <c-button :disabled="base64Input === '' || !base64InputValidation.isValid" @click="downloadFile()">
         Download file
       </c-button>

src/tools/index.ts

@@ -6,6 +6,7 @@ import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
 import { tool as textToUnicode } from './text-to-unicode';
 import { tool as safelinkDecoder } from './safelink-decoder';
+import { tool as option43Generator } from './option43-generator';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -152,7 +153,15 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Network',
-    components: [ipv4SubnetCalculator, ipv4AddressConverter, ipv4RangeExpander, macAddressLookup, macAddressGenerator, ipv6UlaGenerator],
+    components: [
+      ipv4SubnetCalculator,
+      ipv4AddressConverter,
+      ipv4RangeExpander,
+      macAddressLookup,
+      macAddressGenerator,
+      ipv6UlaGenerator,
+      option43Generator,
+    ],
   },
   {
     name: 'Math',

src/tools/jwt-parser/jwt-parser.vue

@@ -39,7 +39,7 @@ const validation = useValidation({
             {{ section.title }}
           </th>
           <tr v-for="{ claim, claimDescription, friendlyValue, value } in decodedJWT[section.key]" :key="claim + value">
-            <td class="claims">
+            <td class="claims" style="vertical-align: top;">
               <span font-bold>
                 {{ claim }}
               </span>
@@ -47,7 +47,7 @@ const validation = useValidation({
                 ({{ claimDescription }})
               </span>
             </td>
-            <td>
+            <td style="word-wrap: break-word;word-break: break-all;">
               <span>{{ value }}</span>
               <span v-if="friendlyValue" ml-2 op-70>
                 ({{ friendlyValue }})

src/tools/option43-generator/index.ts

@@ -0,0 +1,12 @@
+import { RouterOutlined } from '@vicons/material';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Option43 generator',
+  path: '/option43-generator',
+  description: 'Generate Option43 Wifi DHCP configuration',
+  keywords: ['option43', 'wifi', 'dhcp', 'generator'],
+  component: () => import('./option43-generator.vue'),
+  icon: RouterOutlined,
+  createdAt: new Date('2024-03-09'),
+});

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

@@ -0,0 +1,237 @@
+// from option43.org
+
+function IPToHexDigit(ip_addr: string) { // Ruckus
+  const arr1 = [];
+  // ip_addr = ip_addr.split('.').join('');
+  for (let n = 0, l = ip_addr.length; n < l; n++) {
+    const hex = Number(ip_addr.charCodeAt(n)).toString(16);
+    arr1.push(hex);
+  }
+  return arr1.join('');
+}
+
+function IPToHexNumber(ip_addr: string) {
+  const arr1 = [];
+  const ips = ip_addr.split('.');
+  for (let n = 0, l = ips.length; n < l; n++) {
+    const hex = (`0${Number(ips[n]).toString(16)}`).slice(-2);
+    arr1.push(hex);
+  }
+  return arr1.join('');
+}
+
+function IPCharCounter(ip_addr: string, ret: string) {
+  if (ret === 'hex') {
+    return (`0${ip_addr.length.toString(16)}`).slice(-2);
+  }
+  else {
+    return ip_addr.length;
+  }
+}
+
+function splitIPs(ip_addr: string) {
+  const validIPs = [];
+  const rows = ip_addr.split('\n');
+  for (let n = 0, l = rows.length; n < l; n++) {
+    if (/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(rows[n])) {
+      validIPs.push(rows[n]);
+    }
+  }
+  return validIPs;
+}
+
+function IPNumberCounter(ip_addr: string[]) {
+  return ip_addr.length;
+}
+
+function renderSettings(
+  dhcp_vendor: string,
+  option43_type: string,
+  option43_subtype: string,
+  option43_value: string,
+  option60_type: string | undefined,
+  option60_value: string | undefined,
+  vendor_link: string | undefined,
+  diff_number: number | undefined) {
+  let output;
+  switch (dhcp_vendor) {
+    case 'cisco_01':
+      // option code [instance number] {ascii string | hex string | ip-address} // no quotation marks in option 43!
+      output = '<p>Cisco CLI commands:</p><div class="cli"><p>option ';
+      if (typeof diff_number !== 'undefined') {
+        output = output + diff_number;
+      }
+      else { output = `${output}43`; }
+      output = `${output} ${option43_type}`;
+      output = `${output} ${option43_subtype}${option43_value}`;
+      if (typeof option60_value !== 'undefined') {
+        output = `${output}</p><p>option 60 ascii "${option60_value}"`;
+      }
+      output = `${output}</p></div><!--<p>More information: ${vendor_link}</p>-->`;
+      return output;
+    case 'juniper_01':
+      // https://www.juniper.net/documentation/en_US/junos/topics/topic-map/dhcp-serever-options.html#id-configure-user-defined-dhcp-options
+
+      output = '<p>Juniper EX CLI commands:</p><div class="cli"><p>set system services dhcp option  ';
+      if (typeof diff_number !== 'undefined') {
+        output = output + diff_number;
+      }
+      else { output = `${output}43`; }
+      if (option43_type === 'ascii') {
+        option43_type = 'string';
+      }
+      if (option60_type === 'ascii') {
+        option60_type = 'string';
+      }
+      output = `${output} ${option43_type}`;
+      output = `${output} ${option43_subtype}${option43_value}`;
+      if (typeof option60_value !== 'undefined') {
+        output = `${output}</p><p>set system services dhcp option 60 ascii "${option60_value}"`;
+      }
+      output = `${output}</p></div>`;
+      return output;
+    case 'juniper_02':
+      // https://www.juniper.net/documentation/en_US/junos/topics/topic-map/dhcp-serever-options.html#id-configure-user-defined-dhcp-options
+
+      output = '<p>Juniper SRX CLI commands:</p><div class="cli"><p>set access address-assignment pool <i>AP_DHCP_POOL</i> family inet dhcp-attributes option ';
+      if (typeof diff_number !== 'undefined') {
+        output = output + diff_number;
+      }
+      else { output = `${output}43`; }
+      if (option43_type === 'ascii') {
+        option43_type = 'string';
+      }
+      if (option43_type === 'hex') {
+        option43_type = 'byte-stream';
+      }
+      output = `${output} ${option43_type}`;
+      if (option43_type === 'byte-stream') {
+        output = `${output} "0x${(option43_subtype + option43_value).match(/.{1,2}/g)?.join(' 0x')}"`;
+      }
+      else {
+        output = `${output} ${option43_subtype}${option43_value}`;
+      }
+      if (option60_type === 'ascii') {
+        option60_type = 'string';
+      }
+      if (typeof option60_value !== 'undefined') {
+        output = `${output}</p><p>set access address-assignment pool <i>AP_DHCP_POOL</i> family inet dhcp-attributes option 60 ascii "${option60_value}"`;
+      }
+      output = `${output}</p></div>`;
+      return output;
+    default:
+      output = '<p>Raw values:</p><p><b>Option ';
+      if (typeof diff_number !== 'undefined') {
+        output = output + diff_number;
+      }
+      else {
+        output = `${output}43`;
+      }
+      output = `${output}</b><br />Type: "`;
+      if (option43_type === 'ascii') {
+        option43_type = 'String/ASCII';
+      }
+      if (option43_type === 'hex') {
+        option43_type = 'Hexadecimal';
+      }
+      if (option43_type === 'ip') {
+        option43_type = 'IP-Address';
+      }
+      if (option60_type === 'ascii') {
+        option60_type = 'String/ASCII';
+      }
+      output = output + option43_type;
+      output = `${output}"<br />Value: ${option43_subtype}${option43_value}`;
+      if (typeof option60_value !== 'undefined') {
+        output = `${output}</p><p><b>Option 60</b><br /> Type: "${option60_type}"<br />Value: "${option60_value}"`;
+      }
+      output = `${output}</p></div>`;
+      return output;
+  }
+}
+
+export function getOption43Infos(ip_addr: string, wifi_vendor: string, dhcp_vendor: string) {
+  const ip_addr_array = splitIPs(ip_addr);
+  const ip_addr_hexDigit = IPToHexDigit (ip_addr_array.join(',')); // Ruckus, comma separation
+  const ip_addr_hexNumber = IPToHexNumber (ip_addr_array.join('.')); // valid for Cisco, no separation
+  const ip_addr_hexNumber_first = IPToHexNumber (ip_addr_array[0]);
+
+  const num_ips = IPNumberCounter (ip_addr_array);
+  const num_ip_bytes = (`0${(num_ips * 4).toString(16)}`).slice(-2);
+
+  let option43_type = ''; // hex, ascii, ip
+  let option43_subtype = ''; // vendor prefix
+  let option43_value;
+  let diff_number;
+  let option60_type; // hex, ascii, ip
+  let option60_value;
+  let vendor_link;
+
+  switch (wifi_vendor) {
+    case 'cisco_01':
+      option43_type = 'hex';
+      option43_subtype = 'f1';
+      option43_value = num_ip_bytes + ip_addr_hexNumber;
+      return renderSettings(dhcp_vendor, option43_type, option43_subtype, option43_value, option60_type, option60_value, vendor_link, diff_number);
+    case 'ruckus_01':
+      option43_type = 'hex';
+      option43_subtype = '06';
+      option43_value = IPCharCounter (ip_addr_array.join(','), 'hex') + ip_addr_hexDigit;
+      option60_type = 'ascii';
+      option60_value = 'Ruckus CPE';
+      return renderSettings(dhcp_vendor, option43_type, option43_subtype, option43_value, option60_type, option60_value, vendor_link, diff_number);
+    case 'ruckus_02':
+      option43_type = 'hex';
+      option43_subtype = '03';
+      option43_value = IPCharCounter (ip_addr_array.join(','), 'hex') + ip_addr_hexDigit;
+      option60_type = 'ascii';
+      option60_value = 'Ruckus CPE';
+      vendor_link = 'https://docs.commscope.com/bundle/zd-10.2-userguide/page/GUID-D5CF7FE0-D73F-4B4B-95C8-08CAB5B235D5.html';
+      return renderSettings(dhcp_vendor, option43_type, option43_subtype, option43_value, option60_type, option60_value, vendor_link, diff_number);
+    case 'aruba_01':
+      option43_type = 'ip';
+      option43_value = ip_addr;
+      option60_type = 'ascii';
+      option60_value = 'ArubaAP';
+      return renderSettings(dhcp_vendor, option43_type, option43_subtype, option43_value, option60_type, option60_value, vendor_link, diff_number);
+    case 'fortinet_01':
+      option43_type = 'ip';
+      option43_value = ip_addr_array.join(' ');
+      // diff_number = 138;
+      // option60_type = "ascii";
+      // option60_value = "ArubaAP";
+      return renderSettings(dhcp_vendor, option43_type, option43_subtype, option43_value, option60_type, option60_value, vendor_link, diff_number);
+    case 'fortinet_02':
+      option43_type = 'ip';
+      option43_value = ip_addr_array.join(' ');
+      diff_number = 138;
+      // option60_type = "ascii";
+      // option60_value = "ArubaAP";
+      return renderSettings(dhcp_vendor, option43_type, option43_subtype, option43_value, option60_type, option60_value, vendor_link, diff_number);
+    case 'ubiquiti_01':
+      option43_type = 'hex';
+      option43_subtype = '01';
+      option43_value = `04${ip_addr_hexNumber_first}`;
+      // option60_type = "ascii";
+      // option60_value = "Ruckus CPE";
+      // vendor_link = "https://docs.commscope.com/bundle/zd-10.2-userguide/page/GUID-D5CF7FE0-D73F-4B4B-95C8-08CAB5B235D5.html";
+      return renderSettings(dhcp_vendor, option43_type, option43_subtype, option43_value, option60_type, option60_value, vendor_link, diff_number);
+    case 'cambium_01':
+      option43_type = 'ascii';
+      // option43_subtype = "01";
+      option43_value = `"https://${ip_addr[0]}"`;
+      // option60_type = "ascii";
+      // option60_value = "Ruckus CPE";
+      // vendor_link = "https://docs.commscope.com/bundle/zd-10.2-userguide/page/GUID-D5CF7FE0-D73F-4B4B-95C8-08CAB5B235D5.html";
+      return renderSettings(dhcp_vendor, option43_type, option43_subtype, option43_value, option60_type, option60_value, vendor_link, diff_number);
+    case 'linux_01':
+      return `Linux:<br />Option 43 (IP-address): ${ip_addr}<br /> You also <b>need</b>:<br />Option 60 (String): "ArubaAP".`;
+    case 'netgear_01':
+      option43_type = 'hex';
+      option43_subtype = '0204';
+      option43_value = ip_addr_hexNumber_first;
+      return renderSettings(dhcp_vendor, option43_type, option43_subtype, option43_value, option60_type, option60_value, vendor_link, diff_number);
+    default:
+      return 'Not implemented';
+  }
+};

src/tools/option43-generator/option43-generator.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { useStorage } from '@vueuse/core';
+import { getOption43Infos } from './option43-generator.service';
+
+const dhcpVendorOptions = [
+  { value: 'genuine', label: 'Native' },
+  { value: 'cisco_01', label: 'Cisco IOS device' },
+  { value: 'juniper_01', label: 'Juniper EX device' },
+  { value: 'juniper_02', label: 'Juniper SRX device' },
+  { value: 'linux_01', label: 'Linux DHCPD' },
+  { value: 'ruckus_01', label: 'Ruckus SmartCellGateway' },
+  { value: 'lancom_01', label: 'Lancom' },
+  { value: 'fortinet_01', label: 'Fortinet' },
+];
+const wifiVendorOptions = [
+  { value: 'cisco_01', label: 'Cisco Aironet' },
+  { value: 'aruba_01', label: 'Aruba' },
+  { value: 'ruckus_01', label: 'Ruckus SmartZone' },
+  { value: 'ruckus_02', label: 'Ruckus ZoneDirector' },
+  { value: 'ruckus_01', label: 'Ruckus SmartCellGateway' },
+  { value: 'ubiquiti_01', label: 'Ubiquiti' },
+  { value: 'fortinet_01', label: 'Fortinet (old)' },
+  { value: 'fortinet_02', label: 'Fortinet (new/CAPWAP)' },
+  { value: 'netgear_01', label: 'Netgear' },
+  { value: 'cambium_01', label: 'Cambium cnMaestro' },
+];
+
+const dhcpVendor = useStorage('option43-generator:dhcp', 'genuine');
+const wifiVendor = useStorage('option43-generator:wifi', 'cisco_01');
+const ipAdresses = ref('192.168.0.15'); // NOSONAR
+
+const option43Infos = computed(() => getOption43Infos(ipAdresses.value, wifiVendor.value, dhcpVendor.value));
+</script>
+
+<template>
+  <div style="margin: 0 auto; max-width: 600px">
+    <c-card>
+      <c-select
+        v-model:value="wifiVendor"
+        label="Wifi Vendor:"
+        label-position="left"
+        label-width="120px"
+        label-align="right"
+        mb-2
+        :options="wifiVendorOptions"
+        w-full
+        placeholder="Select a Wifi Vendor"
+      />
+
+      <c-select
+        v-model:value="dhcpVendor"
+        label="DHCP Vendor:"
+        label-position="left"
+        label-width="120px"
+        label-align="right"
+        mb-2
+        :options="dhcpVendorOptions"
+        w-full
+        placeholder="Select a DHCP Vendor"
+      />
+
+      <c-input-text
+        v-model:value="ipAdresses"
+        label="IP Address(es) (one per line):"
+        label-position="left"
+        label-width="120px"
+        label-align="right"
+        multiline mb-2
+        placeholder="Enter your IP Addresses (one per line)"
+      />
+    </c-card>
+
+    <c-card title="Option 43 Result">
+      <!-- //NOSONAR --><div v-html="option43Infos" />
+    </c-card>
+  </div>
+</template>
+
+<style lang="less">
+.highlight {
+  color: orange;
+  font-variant: small-caps;
+}
+.cli {
+  background-color: black;
+  color: #adfc03;
+  font-family: monospace;
+  padding: 10px;
+  font-size: 13px;
+}
+</style>

src/utils/base64.test.ts

@@ -38,7 +38,8 @@ describe('base64 utils', () => {
 
     it('should throw for incorrect base64 string', () => {
       expect(() => base64ToText('a')).to.throw('Incorrect base64 string');
-      expect(() => base64ToText(' ')).to.throw('Incorrect base64 string');
+      // should not really be false because trimming of space is now implied
+      // expect(() => base64ToText(' ')).to.throw('Incorrect base64 string');
       expect(() => base64ToText('é')).to.throw('Incorrect base64 string');
       // missing final '='
       expect(() => base64ToText('bG9yZW0gaXBzdW0')).to.throw('Incorrect base64 string');
@@ -56,17 +57,17 @@ describe('base64 utils', () => {
 
     it('should return false for incorrect base64 string', () => {
       expect(isValidBase64('a')).to.eql(false);
-      expect(isValidBase64(' ')).to.eql(false);
       expect(isValidBase64('é')).to.eql(false);
       expect(isValidBase64('data:text/plain;notbase64,YQ==')).to.eql(false);
       // missing final '='
       expect(isValidBase64('bG9yZW0gaXBzdW0')).to.eql(false);
     });
 
-    it('should return false for untrimmed correct base64 string', () => {
-      expect(isValidBase64('bG9yZW0gaXBzdW0= ')).to.eql(false);
-      expect(isValidBase64(' LTE=')).to.eql(false);
-      expect(isValidBase64(' YQ== ')).to.eql(false);
+    it('should return true for untrimmed correct base64 string', () => {
+      expect(isValidBase64('bG9yZW0gaXBzdW0= ')).to.eql(true);
+      expect(isValidBase64(' LTE=')).to.eql(true);
+      expect(isValidBase64(' YQ== ')).to.eql(true);
+      expect(isValidBase64(' ')).to.eql(true);
     });
   });
 

src/utils/base64.ts

@@ -1,7 +1,9 @@
+import { Base64 } from 'js-base64';
+
 export { textToBase64, base64ToText, isValidBase64, removePotentialDataAndMimePrefix };
 
 function textToBase64(str: string, { makeUrlSafe = false }: { makeUrlSafe?: boolean } = {}) {
-  const encoded = window.btoa(str);
+  const encoded = Base64.encode(str);
   return makeUrlSafe ? makeUriSafe(encoded) : encoded;
 }
 
@@ -16,7 +18,7 @@ function base64ToText(str: string, { makeUrlSafe = false }: { makeUrlSafe?: bool
   }
 
   try {
-    return window.atob(cleanStr);
+    return Base64.decode(cleanStr);
   }
   catch (_) {
     throw new Error('Incorrect base64 string');
@@ -34,10 +36,11 @@ function isValidBase64(str: string, { makeUrlSafe = false }: { makeUrlSafe?: boo
   }
 
   try {
+    const reEncodedBase64 = Base64.fromUint8Array(Base64.toUint8Array(cleanStr));
     if (makeUrlSafe) {
-      return removePotentialPadding(window.btoa(window.atob(cleanStr))) === cleanStr;
+      return removePotentialPadding(reEncodedBase64) === cleanStr;
     }
-    return window.btoa(window.atob(cleanStr)) === cleanStr;
+    return reEncodedBase64 === cleanStr.replace(/\s/g, '');
   }
   catch (err) {
     return false;