feat(new tool): JWT Generator

Fix #1309

.eslintrc-auto-import.json

@@ -286,6 +286,9 @@
     "watchTriggerable": true,
     "watchWithFilter": true,
     "whenever": true,
-    "toValue": true
+    "toValue": true,
+    "injectLocal": true,
+    "provideLocal": true,
+    "useClipboardItems": true
   }
 }

auto-imports.d.ts

@@ -36,6 +36,7 @@ declare global {
   const h: typeof import('vue')['h']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
+  const injectLocal: typeof import('@vueuse/core')['injectLocal']
   const isDefined: typeof import('@vueuse/core')['isDefined']
   const isProxy: typeof import('vue')['isProxy']
   const isReactive: typeof import('vue')['isReactive']
@@ -65,6 +66,7 @@ declare global {
   const onUpdated: typeof import('vue')['onUpdated']
   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
   const provide: typeof import('vue')['provide']
+  const provideLocal: typeof import('@vueuse/core')['provideLocal']
   const reactify: typeof import('@vueuse/core')['reactify']
   const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
   const reactive: typeof import('vue')['reactive']
@@ -128,6 +130,7 @@ declare global {
   const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
   const useCached: typeof import('@vueuse/core')['useCached']
   const useClipboard: typeof import('@vueuse/core')['useClipboard']
+  const useClipboardItems: typeof import('@vueuse/core')['useClipboardItems']
   const useCloned: typeof import('@vueuse/core')['useCloned']
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
@@ -326,6 +329,7 @@ declare module 'vue' {
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
+    readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
     readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
     readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
@@ -355,6 +359,7 @@ declare module 'vue' {
     readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
     readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
     readonly provide: UnwrapRef<typeof import('vue')['provide']>
+    readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
     readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
     readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
     readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
@@ -418,6 +423,7 @@ declare module 'vue' {
     readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']>
     readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']>
     readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
+    readonly useClipboardItems: UnwrapRef<typeof import('@vueuse/core')['useClipboardItems']>
     readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
     readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
@@ -610,6 +616,7 @@ declare module '@vue/runtime-core' {
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
+    readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
     readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
     readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
@@ -639,6 +646,7 @@ declare module '@vue/runtime-core' {
     readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
     readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
     readonly provide: UnwrapRef<typeof import('vue')['provide']>
+    readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
     readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
     readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
     readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
@@ -702,6 +710,7 @@ declare module '@vue/runtime-core' {
     readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']>
     readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']>
     readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
+    readonly useClipboardItems: UnwrapRef<typeof import('@vueuse/core')['useClipboardItems']>
     readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
     readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>

components.d.ts

@@ -114,6 +114,7 @@ declare module '@vue/runtime-core' {
     JsonToXml: typeof import('./src/tools/json-to-xml/json-to-xml.vue')['default']
     JsonToYaml: typeof import('./src/tools/json-to-yaml-converter/json-to-yaml.vue')['default']
     JsonViewer: typeof import('./src/tools/json-viewer/json-viewer.vue')['default']
+    JwtGenerator: typeof import('./src/tools/jwt-generator/jwt-generator.vue')['default']
     JwtParser: typeof import('./src/tools/jwt-parser/jwt-parser.vue')['default']
     KeycodeInfo: typeof import('./src/tools/keycode-info/keycode-info.vue')['default']
     ListConverter: typeof import('./src/tools/list-converter/list-converter.vue')['default']
@@ -129,19 +130,23 @@ declare module '@vue/runtime-core' {
     MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']
     MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
     MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
+    NAlert: typeof import('naive-ui')['NAlert']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
-    NCheckbox: typeof import('naive-ui')['NCheckbox']
+    NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDivider: typeof import('naive-ui')['NDivider']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
+    NForm: typeof import('naive-ui')['NForm']
+    NFormItem: typeof import('naive-ui')['NFormItem']
     NH1: typeof import('naive-ui')['NH1']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
+    NInputNumber: typeof import('naive-ui')['NInputNumber']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
-    NSpace: typeof import('naive-ui')['NSpace']
+    NScrollbar: typeof import('naive-ui')['NScrollbar']
     NTable: typeof import('naive-ui')['NTable']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']

package.json

@@ -70,6 +70,7 @@
     "highlight.js": "^11.7.0",
     "iarna-toml-esm": "^3.0.5",
     "ibantools": "^4.3.3",
+    "jose": "^5.9.6",
     "js-base64": "^3.7.6",
     "json5": "^2.2.3",
     "jwt-decode": "^3.1.2",

src/components/TextareaCopyable.vue

@@ -7,8 +7,15 @@ import sqlHljs from 'highlight.js/lib/languages/sql';
 import xmlHljs from 'highlight.js/lib/languages/xml';
 import yamlHljs from 'highlight.js/lib/languages/yaml';
 import iniHljs from 'highlight.js/lib/languages/ini';
+import bashHljs from 'highlight.js/lib/languages/bash';
 import markdownHljs from 'highlight.js/lib/languages/markdown';
+import jsHljs from 'highlight.js/lib/languages/javascript';
+import cssHljs from 'highlight.js/lib/languages/css';
+import goHljs from 'highlight.js/lib/languages/go';
+import csharpHljs from 'highlight.js/lib/languages/csharp';
+import { Base64 } from 'js-base64';
 import { useCopy } from '@/composable/copy';
+import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
 
 const props = withDefaults(
   defineProps<{
@@ -17,12 +24,17 @@ const props = withDefaults(
     language?: string
     copyPlacement?: 'top-right' | 'bottom-right' | 'outside' | 'none'
     copyMessage?: string
+    wordWrap?: boolean
+    downloadFileName?: string
+    downloadButtonText?: string
   }>(),
   {
     followHeightOf: null,
     language: 'txt',
     copyPlacement: 'top-right',
     copyMessage: 'Copy to clipboard',
+    downloadFileName: '',
+    downloadButtonText: 'Download',
   },
 );
 hljs.registerLanguage('sql', sqlHljs);
@@ -31,13 +43,25 @@ hljs.registerLanguage('html', xmlHljs);
 hljs.registerLanguage('xml', xmlHljs);
 hljs.registerLanguage('yaml', yamlHljs);
 hljs.registerLanguage('toml', iniHljs);
+hljs.registerLanguage('bash', bashHljs);
 hljs.registerLanguage('markdown', markdownHljs);
+hljs.registerLanguage('css', cssHljs);
+hljs.registerLanguage('javascript', jsHljs);
+hljs.registerLanguage('go', goHljs);
+hljs.registerLanguage('csharp', csharpHljs);
 
-const { value, language, followHeightOf, copyPlacement, copyMessage } = toRefs(props);
+const { value, language, followHeightOf, copyPlacement, copyMessage, downloadFileName, downloadButtonText } = toRefs(props);
 const { height } = followHeightOf.value ? useElementSize(followHeightOf) : { height: ref(null) };
 
 const { copy, isJustCopied } = useCopy({ source: value, createToast: false });
 const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.value);
+
+const valueBase64 = computed(() => Base64.encode(value.value));
+const { download } = useDownloadFileFromBase64(
+  {
+    source: valueBase64,
+    filename: downloadFileName,
+  });
 </script>
 
 <template>
@@ -49,11 +73,16 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.
         :style="height ? `min-height: ${height - 40 /* card padding */ + 10 /* negative margin compensation */}px` : ''"
       >
         <n-config-provider :hljs="hljs">
-          <n-code :code="value" :language="language" :trim="false" data-test-id="area-content" />
+          <n-code :code="value" :language="language" :word-wrap="wordWrap" :trim="false" data-test-id="area-content" />
         </n-config-provider>
       </n-scrollbar>
-      <div absolute right-10px top-10px>
+      <div
-        <c-tooltip v-if="value" :tooltip="tooltipText" position="left">
+        v-if="value && copyPlacement !== 'none'"
+        absolute right-10px
+        :top-10px="copyPlacement === 'top-right' ? '' : 'no'"
+        :bottom-10px="copyPlacement === 'bottom-right' ? '' : 'no'"
+      >
+        <c-tooltip v-if="value && copyPlacement !== 'outside'" :tooltip="tooltipText" position="left">
           <c-button circle important:h-10 important:w-10 @click="copy()">
             <n-icon size="22" :component="Copy" />
           </c-button>
@@ -65,6 +94,11 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.
         {{ tooltipText }}
       </c-button>
     </div>
+    <div v-if="downloadFileName !== '' && value !== ''" mt-5 flex justify-center>
+      <c-button secondary @click="download">
+        {{ downloadButtonText }}
+      </c-button>
+    </div>
   </div>
 </template>
 

src/composable/downloadBase64.ts

@@ -1,6 +1,7 @@
 import { extension as getExtensionFromMimeType, extension as getMimeTypeFromExtension } from 'mime-types';
-import type { Ref } from 'vue';
+import type { MaybeRef, Ref } from 'vue';
 import _ from 'lodash';
+import { get } from '@vueuse/core';
 
 export {
   getMimeTypeFromBase64,
@@ -75,21 +76,11 @@ function downloadFromBase64({ sourceValue, filename, extension, fileMimeType }:
 }
 
 function useDownloadFileFromBase64(
-  { source, filename, extension, fileMimeType }:
-  { source: Ref<string>; filename?: string; extension?: string; fileMimeType?: string }) {
-  return {
-    download() {
-      downloadFromBase64({ sourceValue: source.value, filename, extension, fileMimeType });
-    },
-  };
-}
-
-function useDownloadFileFromBase64Refs(
   { source, filename, extension }:
-  { source: Ref<string>; filename?: Ref<string>; extension?: Ref<string> }) {
+  { source: MaybeRef<string>; filename?: MaybeRef<string>; extension?: MaybeRef<string> }) {
   return {
     download() {
-      downloadFromBase64({ sourceValue: source.value, filename: filename?.value, extension: extension?.value });
+      downloadFromBase64({ sourceValue: get(source), filename: get(filename), extension: get(extension) });
     },
   };
 }
@@ -116,3 +107,13 @@ function previewImageFromBase64(base64String: string): HTMLImageElement {
 
   return img;
 }
+
+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 });
+    },
+  };
+}

src/modules/command-palette/command-palette.vue

@@ -128,7 +128,7 @@ function activateOption(option: PaletteOption) {
       <c-input-text ref="inputRef" v-model:value="searchPrompt" raw-text placeholder="Type to search a tool or a command..." autofocus clearable />
 
       <div v-for="(options, category) in filteredSearchResult" :key="category">
-        <div ml-3 mt-3 text-sm font-bold text-primary op-60>
+        <div ml-3 mt-3 text-sm text-primary font-bold op-60>
           {{ category }}
         </div>
         <command-palette-option v-for="option in options" :key="option.name" :option="option" :selected="selectedOptionIndex === getOptionIndex(option)" @activated="activateOption" />

src/tools/index.ts

@@ -2,6 +2,7 @@ import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
 import { tool as emailNormalizer } from './email-normalizer';
+import { tool as jwtGenerator } from './jwt-generator';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
@@ -130,6 +131,7 @@ export const toolsByCategory: ToolCategory[] = [
       otpCodeGeneratorAndValidator,
       mimeTypes,
       jwtParser,
+      jwtGenerator,
       keycodeInfo,
       slugifyString,
       htmlWysiwygEditor,

src/tools/jwt-generator/index.ts

@@ -0,0 +1,29 @@
+import { Key } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'JWT Generator',
+  path: '/jwt-generator',
+  description: 'JWT Token generator and editor',
+  keywords: [
+    'jwt',
+    'generator',
+    'editor',
+    'encode',
+    'typ',
+    'alg',
+    'iss',
+    'sub',
+    'aud',
+    'exp',
+    'nbf',
+    'iat',
+    'jti',
+    'json',
+    'web',
+    'token',
+  ],
+  component: () => import('./jwt-generator.vue'),
+  icon: Key,
+  createdAt: new Date('2024-08-15'),
+});

src/tools/jwt-generator/jwt-generator.constants.ts

@@ -0,0 +1,15 @@
+export const jwsAlgorithms = [
+  { alg: 'HS256', keyDesc: '256 bit (32 byte) secret', key: 'secret', verify: 'HMAC-SHA256' },
+  { alg: 'HS384', keyDesc: '384 bit (48 byte) secret', key: 'secret', verify: 'HMAC-SHA384' },
+  { alg: 'HS512', keyDesc: '512 bit (64 byte) secret', key: 'secret', verify: 'HMAC-SHA512' },
+  { alg: 'ES256', keyDesc: 'NIST P-256 elliptic curve key', key: 'keyspair', verify: 'ECDSA-SHA256' },
+  { alg: 'ES256K', keyDesc: 'secp256k1 elliptic curve key', key: 'keyspair', verify: 'ECDSA-SHA256(secp256k1)' },
+  { alg: 'ES384', keyDesc: 'NIST P-384 elliptic curve key', key: 'keyspair', verify: 'ECDSA-SHA384' },
+  { alg: 'ES512', keyDesc: 'NIST P-521 elliptic curve key', key: 'keyspair', verify: 'ECDSA-SHA512' },
+  { alg: 'PS256', keyDesc: 'RSA key of at least 2048 bit modulus length', key: 'keyspair', verify: 'RSA-PSS-SHA256' },
+  { alg: 'PS384', keyDesc: 'RSA key of at least 2048 bit modulus length', key: 'keyspair', verify: 'RSA-PSS-SHA384' },
+  { alg: 'PS512', keyDesc: 'RSA key of at least 2048 bit modulus length', key: 'keyspair', verify: 'RSA-PSS-SHA512' },
+  { alg: 'RS256', keyDesc: 'RSA key of at least 2048 bit modulus length', key: 'keyspair', verify: 'RSA-SHA256' },
+  { alg: 'RS384', keyDesc: 'RSA key of at least 2048 bit modulus length', key: 'keyspair', verify: 'RSA-SHA384' },
+  { alg: 'RS512', keyDesc: 'RSA key of at least 2048 bit modulus length', key: 'keyspair', verify: 'RSA-SHA512' },
+];

src/tools/jwt-generator/jwt-generator.vue

@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import * as jose from 'jose';
+import { type KeyLike } from 'jose';
+import JSON5 from 'json5';
+import { jwsAlgorithms } from './jwt-generator.constants';
+import { useValidation } from '@/composable/validation';
+import { useQueryParamOrStorage } from '@/composable/queryParams';
+
+const payload = ref(`{
+  "sub": "1234567890",
+  "name": "John Doe",
+  "iat": 1516239022
+}`);
+
+const alg = useQueryParamOrStorage({ name: 'alg', storageName: 'jwt-gen:alg', defaultValue: 'HS512' });
+const algInfo = computed(() => jwsAlgorithms.find(a => a.alg === alg.value) || { alg: 'UNK', keyDesc: '', key: 'secret', verify: '' });
+const isSecret = computed(() => algInfo.value.key === 'secret');
+
+const secret = ref('');
+
+const publicKeyPEM = ref('');
+const publicKeyJWK = ref('');
+const privateKeyJWK = ref('');
+const privateKeyPEM = ref('');
+
+watch(publicKeyPEM, async (newValue) => {
+  try {
+    publicKeyJWK.value = JSON.stringify(await jose.exportJWK(await jose.importSPKI(newValue, alg.value, { extractable: true })), null, 2);
+  }
+  catch {
+  }
+}, { immediate: true });
+watch(privateKeyPEM, async (newValue) => {
+  try {
+    privateKeyJWK.value = JSON.stringify(await jose.exportJWK(await jose.importPKCS8(newValue, alg.value, { extractable: true })), null, 2);
+  }
+  catch {
+  }
+}, { immediate: true });
+watch(publicKeyJWK, async (newValue) => {
+  try {
+    publicKeyPEM.value = await jose.exportSPKI(await jose.importJWK({ ...JSON.parse(newValue), ...{ ext: true } }, alg.value) as KeyLike);
+  }
+  catch {
+  }
+}, { immediate: true });
+watch(privateKeyJWK, async (newValue) => {
+  try {
+    privateKeyPEM.value = await jose.exportPKCS8(await jose.importJWK({ ...JSON.parse(newValue), ...{ ext: true } }, alg.value) as KeyLike);
+  }
+  catch {
+  }
+}, { immediate: true });
+
+watchEffect(async () => {
+  if (isSecret.value) {
+    secret.value = 'your-secret';
+    privateKeyJWK.value = '';
+    publicKeyJWK.value = '';
+    privateKeyPEM.value = '';
+    publicKeyPEM.value = '';
+  }
+  else {
+    const { publicKey, privateKey } = await jose.generateKeyPair(alg.value, { extractable: true });
+    privateKeyJWK.value = JSON.stringify(await jose.exportJWK(privateKey), null, 2);
+    publicKeyJWK.value = JSON.stringify(await jose.exportJWK(publicKey), null, 2);
+    privateKeyPEM.value = await jose.exportPKCS8(privateKey);
+    publicKeyPEM.value = await jose.exportSPKI(publicKey);
+  }
+});
+
+const header = computed(() => JSON.stringify({ alg: alg.value, typ: 'JWT' }, null, 2));
+const encodedJWT = computedAsync(async () => {
+  const isSecretValue = isSecret.value;
+  const secretValue = secret.value;
+  const privateKeyValue = privateKeyJWK.value;
+  const algValue = alg.value;
+  const payloadValue = payload.value;
+  try {
+    let privateKeyOrSecret;
+    if (isSecretValue) {
+      privateKeyOrSecret = new TextEncoder().encode(secretValue);
+    }
+    else {
+      privateKeyOrSecret = await jose.importJWK(JSON.parse(privateKeyValue), algValue);
+    }
+    return {
+      token: await (new jose.SignJWT(JSON5.parse(payloadValue))
+        .setProtectedHeader({ alg: algValue })
+        .sign(privateKeyOrSecret)),
+      error: '',
+    };
+  }
+  catch (e: any) {
+    return { error: e.toString(), token: '' };
+  }
+});
+
+const jsonInputValidation = useValidation({
+  source: payload,
+  rules: [
+    {
+      message: 'Invalid JSON string',
+      validator: value => JSON5.parse(value),
+    },
+  ],
+});
+</script>
+
+<template>
+  <div>
+    <c-select
+      v-model:value="alg"
+      :options="jwsAlgorithms.map(a => ({ value: a.alg, label: `${a.alg}: ${a.verify}` }))"
+      placeholder="Algorithms"
+      mb-2
+    />
+    <n-form-item label="Description:" label-placement="left" mb-2>
+      {{ algInfo.alg }}: {{ algInfo.keyDesc }} (verify with {{ algInfo.verify }})
+    </n-form-item>
+
+    <c-card title="Token Content" mb-2>
+      <n-form-item label="Header:">
+        <textarea-copyable :value="header" language="json" />
+      </n-form-item>
+
+      <c-input-text
+        v-model:value="payload"
+        label="Payload:"
+        multiline
+        rows="5"
+        autosize
+        placeholder="JSON payload"
+        :validation="jsonInputValidation"
+      />
+    </c-card>
+
+    <c-card :title="isSecret ? 'Token Secret' : 'Token Keys'" mb-2>
+      <c-input-text v-if="isSecret" v-model:value="secret" />
+
+      <div v-if="!isSecret">
+        <n-form-item label="Public Key (PEM):">
+          <c-input-text
+            v-model:value="publicKeyPEM"
+            multiline
+            rows="5"
+            autosize
+          />
+        </n-form-item>
+        <n-form-item label="Private Key (PEM):">
+          <c-input-text
+            v-model:value="privateKeyPEM"
+            multiline
+            rows="5"
+            autosize
+          />
+        </n-form-item>
+
+        <n-divider />
+
+        <n-form-item label="Public Key (JWK):">
+          <c-input-text
+            v-model:value="publicKeyJWK"
+            multiline
+            rows="5"
+            autosize
+          />
+        </n-form-item>
+        <n-form-item label="Private Key (JWK):">
+          <c-input-text
+            v-model:value="privateKeyJWK"
+            multiline
+            rows="5"
+            autosize
+          />
+        </n-form-item>
+      </div>
+    </c-card>
+
+    <c-card v-if="encodedJWT" title="Generated JWT Token:" mb-2>
+      <textarea-copyable v-if="encodedJWT.token" :value="encodedJWT.token" word-wrap />
+      <c-alert v-if="encodedJWT.error">
+        {{ encodedJWT.error }}
+      </c-alert>
+    </c-card>
+  </div>
+</template>

src/tools/jwt-parser/index.ts

@@ -1,11 +1,10 @@
 import { Key } from '@vicons/tabler';
 import { defineTool } from '../tool';
-import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: translate('tools.jwt-parser.title'),
+  name: 'JWT parser',
   path: '/jwt-parser',
-  description: translate('tools.jwt-parser.description'),
+  description: 'Parse and decode your JSON Web Token (jwt) and display its content.',
   keywords: [
     'jwt',
     'parser',

src/tools/jwt-parser/jwt-parser.service.ts

@@ -2,7 +2,11 @@ import jwtDecode, { type JwtHeader, type JwtPayload } from 'jwt-decode';
 import _ from 'lodash';
 import { ALGORITHM_DESCRIPTIONS, CLAIM_DESCRIPTIONS } from './jwt-parser.constants';
 
-export { decodeJwt };
+export { decodeJwt, getJwtAlgorithm };
+
+function getJwtAlgorithm({ jwt }: { jwt: string }) {
+  return jwtDecode<JwtHeader>(jwt, { header: true }).alg;
+}
 
 function decodeJwt({ jwt }: { jwt: string }) {
   const rawHeader = jwtDecode<JwtHeader>(jwt, { header: true });
@@ -19,7 +23,7 @@ function decodeJwt({ jwt }: { jwt: string }) {
 
 function parseClaims({ claim, value }: { claim: string; value: unknown }) {
   const claimDescription = CLAIM_DESCRIPTIONS[claim];
-  const formattedValue = _.isPlainObject(value) || _.isArray(value) ? JSON.stringify(value, null, 3) : _.toString(value);
+  const formattedValue = _.isPlainObject(value) ? JSON.stringify(value, null, 3) : _.toString(value);
   const friendlyValue = getFriendlyValue({ claim, value });
 
   return {

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

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { decodeJwt } from './jwt-parser.service';
+import * as jose from 'jose';
+import JSON5 from 'json5';
+import { decodeJwt, getJwtAlgorithm } from './jwt-parser.service';
 import { useValidation } from '@/composable/validation';
 import { isNotThrowing } from '@/utils/boolean';
 import { withDefaultOnError } from '@/utils/defaults';
@@ -26,6 +28,41 @@ const validation = useValidation({
     },
   ],
 });
+
+const secretOrPublicKey = ref('');
+const signatureVerification = computedAsync(async () => {
+  const secretOrPublicKeyValue = secretOrPublicKey.value?.trim();
+  if (!secretOrPublicKeyValue) {
+    return { error: 'No secret or key provided' };
+  }
+  const jwt = rawJwt.value?.trim();
+  if (!jwt) {
+    return { error: 'No JWT token provided' };
+  }
+  try {
+    const alg = getJwtAlgorithm({ jwt }) || 'unk';
+
+    if (secretOrPublicKeyValue.startsWith('{')) {
+      const jwk = JSON5.parse(secretOrPublicKeyValue);
+      const publicKey = await jose.importJWK(jwk, alg);
+
+      await jose.jwtVerify(jwt, publicKey);
+    }
+    else if (secretOrPublicKeyValue.includes('-----BEGIN PUBLIC KEY-----')) {
+      const publicKey = await jose.importSPKI(secretOrPublicKeyValue, alg);
+      await jose.jwtVerify(jwt, publicKey);
+    }
+    else {
+      const secret = new TextEncoder().encode(secretOrPublicKeyValue);
+      await jose.jwtVerify(jwt, secret);
+    }
+
+    return { error: '' };
+  }
+  catch (e: any) {
+    return { error: `Key or secret or verification error: ${e.toString()}` };
+  }
+});
 </script>
 
 <template>
@@ -39,7 +76,7 @@ const validation = useValidation({
             {{ section.title }}
           </th>
           <tr v-for="{ claim, claimDescription, friendlyValue, value } in decodedJWT[section.key]" :key="claim + value">
-            <td class="claims" style="vertical-align: top;">
+            <td class="claims">
               <span font-bold>
                 {{ claim }}
               </span>
@@ -47,7 +84,7 @@ const validation = useValidation({
                 ({{ claimDescription }})
               </span>
             </td>
-            <td style="word-wrap: break-word;word-break: break-all;">
+            <td>
               <span>{{ value }}</span>
               <span v-if="friendlyValue" ml-2 op-70>
                 ({{ friendlyValue }})
@@ -57,6 +94,21 @@ const validation = useValidation({
         </template>
       </tbody>
     </n-table>
+
+    <c-card title="Signature Validation">
+      <c-input-text
+        v-model:value="secretOrPublicKey" label="Secret or Public Key (SPKI or JWK)"
+        placeholder="Put your secret or Public key here..." rows="5" multiline raw-text autofocus mb-3
+      />
+
+      <c-alert v-if="signatureVerification?.error">
+        {{ signatureVerification.error }}
+      </c-alert>
+
+      <n-alert v-if="!signatureVerification?.error" type="success">
+        Signature verified
+      </n-alert>
+    </c-card>
   </c-card>
 </template>
 

src/ui/c-select/c-select.vue

@@ -151,7 +151,7 @@ function onSearchInput() {
       >
         <div flex-1 truncate>
           <slot name="displayed-value">
-            <input v-if="searchable && isOpen" ref="searchInputRef" v-model="searchQuery" type="text" placeholder="Search..." class="search-input" w-full lh-normal color-current @input="onSearchInput">
+            <input v-if="searchable && isOpen" ref="searchInputRef" v-model="searchQuery" type="text" placeholder="Search..." class="search-input" w-full color-current lh-normal @input="onSearchInput">
             <span v-else-if="selectedOption" lh-normal>
               {{ selectedOption.label }}
             </span>

src/ui/c-table/c-table.vue

@@ -39,7 +39,7 @@ const headers = computed(() => {
 <template>
   <div class="relative overflow-x-auto rounded">
     <table class="w-full border-collapse text-left text-sm text-gray-500 dark:text-gray-400" role="table" :aria-label="description">
-      <thead v-if="!hideHeaders" class="bg-#ffffff uppercase text-gray-700 dark:bg-#333333 dark:text-gray-400" border-b="1px solid dark:transparent #efeff5">
+      <thead v-if="!hideHeaders" class="bg-#ffffff text-gray-700 uppercase dark:bg-#333333 dark:text-gray-400" border-b="1px solid dark:transparent #efeff5">
         <tr>
           <th v-for="header in headers" :key="header.key" scope="col" class="px-6 py-3 text-xs">
             {{ header.label }}