chore(release): 2.19.0

Co-authored-by: Corentin THOMASSET <corentin.thomasset74@gmail.com>

CHANGELOG.md

@@ -2,6 +2,38 @@
 
 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.
 
+## [2.19.0](https://github.com/CorentinTh/it-tools/compare/v2.18.0...v2.19.0) (2023-02-06)
+
+
+### Features
+
+* **new-tool:** keycode info ([c934c4e](https://github.com/CorentinTh/it-tools/commit/c934c4e50ca1a129b80b786a5d9a7dbc33ad9ba3))
+
+## [2.18.0](https://github.com/CorentinTh/it-tools/compare/v2.17.0...v2.18.0) (2023-02-04)
+
+
+### Features
+
+* **new-tool:** json minify ([#265](https://github.com/CorentinTh/it-tools/issues/265)) ([f708f50](https://github.com/CorentinTh/it-tools/commit/f708f5091e2182fc88e7cf3e7d23b3d05edc04da))
+
+
+### Refactors
+
+* **tools:** config in query params ([db817a2](https://github.com/CorentinTh/it-tools/commit/db817a2459e23bd096274a7f91815d613d5f7ff4))
+
+## [2.17.0](https://github.com/CorentinTh/it-tools/compare/v2.16.0...v2.17.0) (2023-01-13)
+
+
+### Features
+
+* **new-tool:** jwt parser ([#262](https://github.com/CorentinTh/it-tools/issues/262)) ([acc7f0a](https://github.com/CorentinTh/it-tools/commit/acc7f0a586c64500c5f720e70cdbccf9bffe76d9))
+* **new-tool:** temperature converter ([4607837](https://github.com/CorentinTh/it-tools/commit/4607837f9a398440e0098f2ba862e8d7422ce94f))
+
+
+### Refactors
+
+* **jwt-parser:** simplified code ([f52f7a8](https://github.com/CorentinTh/it-tools/commit/f52f7a845c34ce7da57b11c17d261733be89554f))
+
 ## [2.16.0](https://github.com/CorentinTh/it-tools/compare/v2.15.0...v2.16.0) (2022-12-21)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "it-tools",
-  "version": "2.16.0",
+  "version": "2.19.0",
   "description": "Collection of handy online tools for developers, with great UX. ",
   "keywords": [
     "productivity",
@@ -37,6 +37,7 @@
     "@vicons/tabler": "^0.12.0",
     "@vueuse/core": "^8.9.4",
     "@vueuse/head": "^0.7.13",
+    "@vueuse/router": "^9.11.0",
     "bcryptjs": "^2.4.3",
     "change-case": "^4.1.2",
     "colord": "^2.9.3",
@@ -48,6 +49,7 @@
     "fuse.js": "^6.6.2",
     "highlight.js": "^11.6.0",
     "json5": "^2.2.1",
+    "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "mathjs": "^10.6.4",
     "mime-types": "^2.1.35",
@@ -57,6 +59,7 @@
     "qrcode": "^1.5.1",
     "randombytes": "^2.1.0",
     "sql-formatter": "^8.2.0",
+    "ts-pattern": "^4.1.3",
     "uuid": "^8.3.2",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6"

pnpm-lock.yaml

@@ -24,6 +24,7 @@ specifiers:
   '@vue/tsconfig': ^0.1.3
   '@vueuse/core': ^8.9.4
   '@vueuse/head': ^0.7.13
+  '@vueuse/router': ^9.11.0
   bcryptjs: ^2.4.3
   c8: ^7.12.0
   change-case: ^4.1.2
@@ -42,6 +43,7 @@ specifiers:
   highlight.js: ^11.6.0
   jsdom: ^19.0.0
   json5: ^2.2.1
+  jwt-decode: ^3.1.2
   less: ^4.1.3
   lodash: ^4.17.21
   mathjs: ^10.6.4
@@ -55,6 +57,7 @@ specifiers:
   sql-formatter: ^8.2.0
   standard-version: ^9.5.0
   start-server-and-test: ^1.14.0
+  ts-pattern: ^4.1.3
   typescript: ~4.5.5
   uuid: ^8.3.2
   vite: ^2.9.15
@@ -74,6 +77,7 @@ dependencies:
   '@vicons/tabler': 0.12.0
   '@vueuse/core': 8.9.4_vue@3.2.45
   '@vueuse/head': 0.7.13_vue@3.2.45
+  '@vueuse/router': 9.11.0_xsxatmlnmmg5bcuv3xdnj6fj7y
   bcryptjs: 2.4.3
   change-case: 4.1.2
   colord: 2.9.3
@@ -85,6 +89,7 @@ dependencies:
   fuse.js: 6.6.2
   highlight.js: 11.6.0
   json5: 2.2.1
+  jwt-decode: 3.1.2
   lodash: 4.17.21
   mathjs: 10.6.4
   mime-types: 2.1.35
@@ -94,6 +99,7 @@ dependencies:
   qrcode: 1.5.1
   randombytes: 2.1.0
   sql-formatter: 8.2.0
+  ts-pattern: 4.1.3
   uuid: 8.3.2
   vue: 3.2.45
   vue-router: 4.1.6_vue@3.2.45
@@ -2170,6 +2176,19 @@ packages:
     resolution: {integrity: sha512-IwSfzH80bnJMzqhaapqJl9JRIiyQU0zsRGEgnxN6jhq7992cPUJIRfV+JHRIZXjYqbwt07E1gTEp0R0zPJ1aqw==}
     dev: false
 
+  /@vueuse/router/9.11.0_xsxatmlnmmg5bcuv3xdnj6fj7y:
+    resolution: {integrity: sha512-AlaQzbUy3XeqeoIapQxLvJjPzbdiO/Dt1thQhebP4iFUjc61a7WrboULxNBY+jEH0XipwK/T/b9mBnmn/jEStA==}
+    peerDependencies:
+      vue-router: '>=4.0.0-rc.1'
+    dependencies:
+      '@vueuse/shared': 9.11.0_vue@3.2.45
+      vue-demi: 0.13.11_vue@3.2.45
+      vue-router: 4.1.6_vue@3.2.45
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /@vueuse/shared/8.9.4_vue@3.2.45:
     resolution: {integrity: sha512-wt+T30c4K6dGRMVqPddexEVLa28YwxW5OFIPmzUHICjphfAuBFTTdDoyqREZNDOFJZ44ARH1WWQNCUK8koJ+Ag==}
     peerDependencies:
@@ -2185,6 +2204,15 @@ packages:
       vue-demi: 0.13.11_vue@3.2.45
     dev: false
 
+  /@vueuse/shared/9.11.0_vue@3.2.45:
+    resolution: {integrity: sha512-8lO7wD5abYxupKy2KynH1pSgP715ky6iCrWYb8aX2AuAVi9uHXj7qE1dw6BnmArSaLHci4x9iuzWPCpAzUkC/A==}
+    dependencies:
+      vue-demi: 0.13.11_vue@3.2.45
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /@vueuse/shared/9.5.0_vue@3.2.45:
     resolution: {integrity: sha512-HnnCWU1Vg9CVWRCcI8ohDKDRB2Sc4bTgT1XAIaoLSfVHHn+TKbrox6pd3klCSw4UDxkhDfOk8cAdcK+Z5KleCA==}
     dependencies:
@@ -4838,6 +4866,10 @@ packages:
       promise: 7.3.1
     dev: true
 
+  /jwt-decode/3.1.2:
+    resolution: {integrity: sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==}
+    dev: false
+
   /kind-of/6.0.3:
     resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
     engines: {node: '>=0.10.0'}
@@ -6489,6 +6521,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /ts-pattern/4.1.3:
+    resolution: {integrity: sha512-8beXMWTGEv1JfDjSxfNhe4uT5jKYdhmEUKzt4gZW9dmHlquq3b+IbEyA7vX9LjBfzHmvKnM4HiomAUCyaW2Pew==}
+    dev: false
+
   /tsconfig-paths/3.14.1:
     resolution: {integrity: sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==}
     dependencies:

src/composable/queryParams.ts

@@ -0,0 +1,35 @@
+import { useRouteQuery } from '@vueuse/router';
+import { computed } from 'vue';
+
+export { useQueryParam };
+
+const transformers = {
+  number: {
+    fromQuery: (value: string) => Number(value),
+    toQuery: (value: number) => String(value),
+  },
+  string: {
+    fromQuery: (value: string) => value,
+    toQuery: (value: string) => value,
+  },
+  boolean: {
+    fromQuery: (value: string) => value.toLowerCase() === 'true',
+    toQuery: (value: boolean) => (value ? 'true' : 'false'),
+  },
+};
+
+function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue: T }) {
+  const type = typeof defaultValue;
+  const transformer = transformers[type as keyof typeof transformers] ?? transformers.string;
+
+  const proxy = useRouteQuery(name, transformer.toQuery(defaultValue as never));
+
+  return computed<T>({
+    get() {
+      return transformer.fromQuery(proxy.value) as T;
+    },
+    set(value) {
+      proxy.value = transformer.toQuery(value as never);
+    },
+  });
+}

src/plugins/naive.plugin.ts

@@ -53,6 +53,7 @@ import {
   NTooltip,
   NUpload,
   NUploadDragger,
+  NPopover,
   NCheckbox,
 } from 'naive-ui';
 
@@ -111,6 +112,7 @@ const components = [
   NIcon,
   NSwitch,
   NCollapseTransition,
+  NPopover,
 ];
 
 export const naive = create({ components });

src/tools/hash-text/hash-text.vue

@@ -40,6 +40,7 @@
 </template>
 
 <script setup lang="ts">
+import { useQueryParam } from '@/composable/queryParams';
 import { enc, lib, MD5, RIPEMD160, SHA1, SHA224, SHA256, SHA3, SHA384, SHA512 } from 'crypto-js';
 import { ref } from 'vue';
 import InputCopyable from '../../components/InputCopyable.vue';
@@ -59,7 +60,7 @@ const algos = {
 type AlgoNames = keyof typeof algos;
 type Encoding = keyof typeof enc | 'Bin';
 const algoNames = Object.keys(algos) as AlgoNames[];
-const encoding = ref<Encoding>('Hex');
+const encoding = useQueryParam<Encoding>({ defaultValue: 'Hex', name: 'encoding' });
 const clearText = ref('');
 
 function formatWithEncoding(words: lib.WordArray, encoding: Encoding) {

src/tools/index.ts

@@ -1,12 +1,12 @@
-import { tool as chmodCalculator } from './chmod-calculator';
-import { tool as mimeTypes } from './mime-types';
-import { tool as otpCodeGeneratorAndValidator } from './otp-code-generator-and-validator';
 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 keycodeInfo } from './keycode-info';
+import { tool as jsonMinify } from './json-minify';
 import { tool as bcrypt } from './bcrypt';
 import { tool as bip39 } from './bip39-generator';
 import { tool as caseConverter } from './case-converter';
+import { tool as chmodCalculator } from './chmod-calculator';
 import { tool as chronometer } from './chronometer';
 import { tool as colorConverter } from './color-converter';
 import { tool as crontabGenerator } from './crontab-generator';
@@ -20,20 +20,24 @@ import { tool as hmacGenerator } from './hmac-generator';
 import { tool as htmlEntities } from './html-entities';
 import { tool as baseConverter } from './integer-base-converter';
 import { tool as jsonViewer } from './json-viewer';
+import { tool as jwtParser } from './jwt-parser';
 import { tool as loremIpsumGenerator } from './lorem-ipsum-generator';
 import { tool as mathEvaluator } from './math-evaluator';
 import { tool as metaTagGenerator } from './meta-tag-generator';
+import { tool as mimeTypes } from './mime-types';
+import { tool as otpCodeGeneratorAndValidator } from './otp-code-generator-and-validator';
 import { tool as qrCodeGenerator } from './qr-code-generator';
 import { tool as randomPortGenerator } from './random-port-generator';
 import { tool as romanNumeralConverter } from './roman-numeral-converter';
 import { tool as sqlPrettify } from './sql-prettify';
 import { tool as svgPlaceholderGenerator } from './svg-placeholder-generator';
+import { tool as temperatureConverter } from './temperature-converter';
 import { tool as textStatistics } from './text-statistics';
 import { tool as tokenGenerator } from './token-generator';
+import type { ToolCategory } from './tools.types';
 import { tool as urlEncoder } from './url-encoder';
 import { tool as urlParser } from './url-parser';
 import { tool as uuidGenerator } from './uuid-generator';
-import type { ToolCategory } from './tools.types';
 
 export const toolsByCategory: ToolCategory[] = [
   {
@@ -63,6 +67,8 @@ export const toolsByCategory: ToolCategory[] = [
       metaTagGenerator,
       otpCodeGeneratorAndValidator,
       mimeTypes,
+      jwtParser,
+      keycodeInfo,
     ],
   },
   {
@@ -71,7 +77,7 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Development',
-    components: [gitMemo, randomPortGenerator, crontabGenerator, jsonViewer, sqlPrettify, chmodCalculator],
+    components: [gitMemo, randomPortGenerator, crontabGenerator, jsonViewer, jsonMinify, sqlPrettify, chmodCalculator],
   },
   {
     name: 'Math',
@@ -79,7 +85,7 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Measurement',
-    components: [chronometer],
+    components: [chronometer, temperatureConverter],
   },
   {
     name: 'Text',

src/tools/json-minify/index.ts

@@ -0,0 +1,11 @@
+import { Braces } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'JSON minify',
+  path: '/json-minify',
+  description: 'Minify and compress your JSON by removing unnecessary white spaces.',
+  keywords: ['json', 'minify', 'format'],
+  component: () => import('./json-minify.vue'),
+  icon: Braces,
+});

src/tools/json-minify/json-minify.vue

@@ -0,0 +1,57 @@
+<template>
+  <n-form-item
+    label="Your raw json"
+    :feedback="rawJsonValidation.message"
+    :validation-status="rawJsonValidation.status"
+  >
+    <n-input
+      ref="inputElement"
+      v-model:value="rawJson"
+      placeholder="Paste your raw json here..."
+      type="textarea"
+      rows="20"
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+    />
+  </n-form-item>
+  <n-form-item label="Minify version of your JSON">
+    <textarea-copyable :value="cleanJson" language="json" :follow-height-of="inputElement" />
+  </n-form-item>
+</template>
+
+<script setup lang="ts">
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+import { useValidation } from '@/composable/validation';
+import { withDefaultOnError } from '@/utils/defaults';
+import JSON5 from 'json5';
+import { computed, ref } from 'vue';
+
+const inputElement = ref<HTMLElement>();
+
+const rawJson = ref('{\n\t"hello": [\n\t\t"world"\n\t]\n}');
+const cleanJson = computed(() => withDefaultOnError(() => JSON.stringify(JSON5.parse(rawJson.value), null, 0), ''));
+
+const rawJsonValidation = useValidation({
+  source: rawJson,
+  rules: [
+    {
+      validator: (v) => v === '' || JSON5.parse(v),
+      message: 'Provided JSON is not valid.',
+    },
+  ],
+});
+</script>
+
+<style lang="less" scoped>
+.result-card {
+  position: relative;
+
+  .copy-button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+}
+</style>

src/tools/jwt-parser/index.ts

@@ -0,0 +1,27 @@
+import { Key } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'JWT parser',
+  path: '/jwt-parser',
+  description: 'Parse and decode your JSON Web Token (jwt) and display its content.',
+  keywords: [
+    'jwt',
+    'parser',
+    'decode',
+    'typ',
+    'alg',
+    'iss',
+    'sub',
+    'aud',
+    'exp',
+    'nbf',
+    'iat',
+    'jti',
+    'json',
+    'web',
+    'token',
+  ],
+  component: () => import('./jwt-parser.vue'),
+  icon: Key,
+});

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

@@ -0,0 +1,92 @@
+// From https://datatracker.ietf.org/doc/html/rfc7518#section-3.1
+export const ALGORITHM_DESCRIPTIONS: { [k: string]: string } = {
+  HS256: 'HMAC using SHA-256',
+  HS384: 'HMAC using SHA-384',
+  HS512: 'HMAC using SHA-512',
+  RS256: 'RSASSA-PKCS1-v1_5 using SHA-256',
+  RS384: 'RSASSA-PKCS1-v1_5 using SHA-384',
+  RS512: 'RSASSA-PKCS1-v1_5 using SHA-512',
+  ES256: 'ECDSA using P-256 and SHA-256',
+  ES384: 'ECDSA using P-384 and SHA-384',
+  ES512: 'ECDSA using P-521 and SHA-512',
+  PS256: 'RSASSA-PSS using SHA-256 and MGF1 with SHA-256',
+  PS384: 'RSASSA-PSS using SHA-384 and MGF1 with SHA-384',
+  PS512: 'RSASSA-PSS using SHA-512 and MGF1 with SHA-512',
+  none: 'No digital signature or MAC performed',
+};
+
+// List extracted from IANA: https://www.iana.org/assignments/jwt/jwt.xhtml
+export const CLAIM_DESCRIPTIONS: Record<string, string> = {
+  typ: 'Type',
+  alg: 'Algorithm',
+  iss: 'Issuer',
+  sub: 'Subject',
+  aud: 'Audience',
+  exp: 'Expiration Time',
+  nbf: 'Not Before',
+  iat: 'Issued At',
+  jti: 'JWT ID',
+  name: 'Full name',
+  given_name: 'Given name(s) or first name(s)',
+  family_name: 'Surname(s) or last name(s)',
+  middle_name: 'Middle name(s)',
+  nickname: 'Casual name',
+  preferred_username: 'Shorthand name by which the End-User wishes to be referred to',
+  profile: 'Profile page URL',
+  picture: 'Profile picture URL',
+  website: 'Web page or blog URL',
+  email: 'Preferred e-mail address',
+  email_verified: 'True if the e-mail address has been verified; otherwise false',
+  gender: 'Gender',
+  birthdate: 'Birthday',
+  zoneinfo: 'Time zone',
+  locale: 'Locale',
+  phone_number: 'Preferred telephone number',
+  phone_number_verified: 'True if the phone number has been verified; otherwise false',
+  address: 'Preferred postal address',
+  updated_at: 'Time the information was last updated',
+  azp: 'Authorized party - the party to which the ID Token was issued',
+  nonce: 'Value used to associate a Client session with an ID Token',
+  auth_time: 'Time when the authentication occurred',
+  at_hash: 'Access Token hash value',
+  c_hash: 'Code hash value',
+  acr: 'Authentication Context Class Reference',
+  amr: 'Authentication Methods References',
+  sub_jwk: 'Public key used to check the signature of an ID Token',
+  cnf: 'Confirmation',
+  sip_from_tag: 'SIP From tag header field parameter value',
+  sip_date: 'SIP Date header field value',
+  sip_callid: 'SIP Call-Id header field value',
+  sip_cseq_num: 'SIP CSeq numeric header field parameter value',
+  sip_via_branch: 'SIP Via branch header field parameter value',
+  orig: 'Originating Identity String',
+  dest: 'Destination Identity String',
+  mky: 'Media Key Fingerprint String',
+  events: 'Security Events',
+  toe: 'Time of Event',
+  txn: 'Transaction Identifier',
+  rph: 'Resource Priority Header Authorization',
+  sid: 'Session ID',
+  vot: 'Vector of Trust value',
+  vtm: 'Vector of Trust trustmark URL',
+  attest: 'Attestation level as defined in SHAKEN framework',
+  origid: 'Originating Identifier as defined in SHAKEN framework',
+  act: 'Actor',
+  scope: 'Scope Values',
+  client_id: 'Client Identifier',
+  may_act: 'Authorized Actor - the party that is authorized to become the actor',
+  jcard: 'jCard data',
+  at_use_nbr: 'Number of API requests for which the access token can be used',
+  div: 'Diverted Target of a Call',
+  opt: 'Original PASSporT (in Full Form)',
+  vc: 'Verifiable Credential as specified in the W3C Recommendation',
+  vp: 'Verifiable Presentation as specified in the W3C Recommendation',
+  sph: 'SIP Priority header field',
+  ace_profile: 'ACE profile a token is supposed to be used with.',
+  cnonce: 'Client nonce',
+  exi: 'Expires in',
+  roles: 'Roles',
+  groups: 'Groups',
+  entitlements: 'Entitlements',
+  token_introspection: 'Token introspection response',
+};

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

@@ -0,0 +1,46 @@
+import jwtDecode, { type JwtHeader, type JwtPayload } from 'jwt-decode';
+import _ from 'lodash';
+import { match } from 'ts-pattern';
+import { ALGORITHM_DESCRIPTIONS, CLAIM_DESCRIPTIONS } from './jwt-parser.constants';
+
+export { decodeJwt };
+
+function decodeJwt({ jwt }: { jwt: string }) {
+  const rawHeader = jwtDecode<JwtHeader>(jwt, { header: true });
+  const rawPayload = jwtDecode<JwtPayload>(jwt);
+
+  const header = _.map(rawHeader, (value, claim) => parseClaims({ claim, value }));
+  const payload = _.map(rawPayload, (value, claim) => parseClaims({ claim, value }));
+
+  return {
+    header,
+    payload,
+  };
+}
+
+function parseClaims({ claim, value }: { claim: string; value: unknown }) {
+  const claimDescription = CLAIM_DESCRIPTIONS[claim];
+  const formattedValue = _.toString(value);
+  const friendlyValue = getFriendlyValue({ claim, value });
+
+  return {
+    value: formattedValue,
+    friendlyValue,
+    claim,
+    claimDescription,
+  };
+}
+
+function getFriendlyValue({ claim, value }: { claim: string; value: unknown }) {
+  return match(claim)
+    .with('exp', 'nbf', 'iat', () => dateFormatter(value))
+    .with('alg', () => (_.isString(value) ? ALGORITHM_DESCRIPTIONS[value] : undefined))
+    .otherwise(() => undefined);
+}
+
+const dateFormatter = (value: unknown) => {
+  if (_.isNil(value)) return undefined;
+
+  const date = new Date(Number(value) * 1000);
+  return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+};

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

@@ -0,0 +1,70 @@
+<template>
+  <n-card>
+    <n-form-item label="JWT to decode" :feedback="validation.message" :validation-status="validation.status">
+      <n-input v-model:value="rawJwt" type="textarea" placeholder="Put your token here..." rows="5" />
+    </n-form-item>
+
+    <n-table v-if="validation.isValid">
+      <tbody>
+        <template v-for="section of sections" :key="section.key">
+          <th colspan="2" class="table-header">{{ section.title }}</th>
+          <tr v-for="{ claim, claimDescription, friendlyValue, value } in decodedJWT[section.key]" :key="claim + value">
+            <td class="claims">
+              <n-space>
+                <n-text strong>{{ claim }}</n-text>
+                <template v-if="claimDescription">
+                  <n-text depth="3">({{ claimDescription }})</n-text>
+                </template>
+              </n-space>
+            </td>
+            <td>
+              <n-space>
+                <n-text>{{ value }}</n-text>
+                <template v-if="friendlyValue">
+                  <n-text depth="3">({{ friendlyValue }})</n-text>
+                </template>
+              </n-space>
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </n-table>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { useValidation } from '@/composable/validation';
+import { isNotThrowing } from '@/utils/boolean';
+import { withDefaultOnError } from '@/utils/defaults';
+import { computed, ref } from 'vue';
+import { decodeJwt } from './jwt-parser.service';
+
+const rawJwt = ref(
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c',
+);
+
+const decodedJWT = computed(() =>
+  withDefaultOnError(() => decodeJwt({ jwt: rawJwt.value }), { header: [], payload: [] }),
+);
+
+const sections = [
+  { key: 'header', title: 'Header' },
+  { key: 'payload', title: 'Payload' },
+] as const;
+
+const validation = useValidation({
+  source: rawJwt,
+  rules: [
+    {
+      validator: (value) => value.length > 0 && isNotThrowing(() => decodeJwt({ jwt: rawJwt.value })),
+      message: 'Invalid JWT',
+    },
+  ],
+});
+</script>
+
+<style lang="less" scoped>
+.table-header {
+  text-align: center;
+}
+</style>

src/tools/keycode-info/index.ts

@@ -0,0 +1,26 @@
+import { Keyboard } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Keycode info',
+  path: '/keycode-info',
+  description: 'Find the javascript keycode, code, location and modifiers of any pressed key.',
+  keywords: [
+    'keycode',
+    'info',
+    'code',
+    'javascript',
+    'event',
+    'keycodes',
+    'which',
+    'keyboard',
+    'press',
+    'modifier',
+    'alt',
+    'ctrl',
+    'meta',
+    'shift',
+  ],
+  component: () => import('./keycode-info.vue'),
+  icon: Keyboard,
+});

src/tools/keycode-info/keycode-info.vue

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <n-card style="text-align: center; padding: 40px 0; margin-bottom: 26px">
+      <n-h2 v-if="event">{{ event.key }}</n-h2>
+      <n-text strong depth="3">Press the key on your keyboard you want to now stuff</n-text>
+    </n-card>
+
+    <n-input-group v-for="({ label, value, placeholder }, i) of fields" :key="i" style="margin-bottom: 5px">
+      <n-input-group-label style="flex: 0 0 150px"> {{ label }} </n-input-group-label>
+      <input-copyable :value="value" readonly :placeholder="placeholder" />
+    </n-input-group>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useEventListener } from '@vueuse/core';
+import { computed, ref } from 'vue';
+import InputCopyable from '../../components/InputCopyable.vue';
+
+const event = ref<KeyboardEvent>();
+
+useEventListener(document, 'keydown', (e) => {
+  event.value = e;
+});
+
+const fields = computed(() => {
+  if (!event.value) return [];
+
+  return [
+    {
+      label: 'Key :',
+      value: event.value.key,
+      placeholder: 'Key name...',
+    },
+    {
+      label: 'Keycode :',
+      value: String(event.value.keyCode),
+      placeholder: 'Keycode...',
+    },
+    {
+      label: 'Code :',
+      value: event.value.code,
+      placeholder: 'Code...',
+    },
+    {
+      label: 'Location :',
+      value: String(event.value.location),
+      placeholder: 'Code...',
+    },
+
+    {
+      label: 'Modifiers :',
+      value: [
+        event.value.metaKey && 'Meta',
+        event.value.shiftKey && 'Shift',
+        event.value.ctrlKey && 'Ctrl',
+        event.value.altKey && 'Alt',
+      ]
+        .filter(Boolean)
+        .join(' + '),
+      placeholder: 'None',
+    },
+  ];
+});
+</script>
+
+<style lang="less" scoped></style>

src/tools/temperature-converter/index.ts

@@ -0,0 +1,24 @@
+import { Temperature } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Temperature converter',
+  path: '/temperature-converter',
+  description:
+    'Temperature degrees conversions for Kelvin, Celsius, Fahrenheit, Rankine, Delisle, Newton, Réaumur and Rømer.',
+  keywords: [
+    'temperature',
+    'converter',
+    'degree',
+    'Kelvin',
+    'Celsius',
+    'Fahrenheit',
+    'Rankine',
+    'Delisle',
+    'Newton',
+    'Réaumur',
+    'Rømer',
+  ],
+  component: () => import('./temperature-converter.vue'),
+  icon: Temperature,
+});

src/tools/temperature-converter/temperature-converter.models.ts

@@ -0,0 +1,20 @@
+export const convertCelsiusToKelvin = (temperature: number) => temperature + 273.15;
+export const convertKelvinToCelsius = (temperature: number) => temperature - 273.15;
+
+export const convertFahrenheitToKelvin = (temperature: number) => (temperature + 459.67) * (5 / 9);
+export const convertKelvinToFahrenheit = (temperature: number) => temperature * (9 / 5) - 459.67;
+
+export const convertRankineToKelvin = (temperature: number) => temperature * (5 / 9);
+export const convertKelvinToRankine = (temperature: number) => temperature * (9 / 5);
+
+export const convertDelisleToKelvin = (temperature: number) => 373.15 - (2 / 3) * temperature;
+export const convertKelvinToDelisle = (temperature: number) => (3 / 2) * (373.15 - temperature);
+
+export const convertNewtonToKelvin = (temperature: number) => temperature * (100 / 33) + 273.15;
+export const convertKelvinToNewton = (temperature: number) => (temperature - 273.15) * (33 / 100);
+
+export const convertReaumurToKelvin = (temperature: number) => temperature * (5 / 4) + 273.15;
+export const convertKelvinToReaumur = (temperature: number) => (temperature - 273.15) * (4 / 5);
+
+export const convertRomerToKelvin = (temperature: number) => (temperature - 7.5) * (40 / 21) + 273.15;
+export const convertKelvinToRomer = (temperature: number) => (temperature - 273.15) * (21 / 40) + 7.5;

src/tools/temperature-converter/temperature-converter.vue

@@ -0,0 +1,127 @@
+<template>
+  <div>
+    <n-input-group
+      v-for="[key, { title, unit }] in Object.entries(units)"
+      :key="key"
+      style="width: 100%; margin-bottom: 15px"
+    >
+      <n-input-group-label style="width: 100px">
+        {{ title }}
+      </n-input-group-label>
+
+      <n-input-number
+        v-model:value="units[key].ref"
+        style="flex: 1"
+        @update:value="() => update(key as TemperatureScale)"
+      />
+
+      <n-input-group-label style="width: 50px">
+        {{ unit }}
+      </n-input-group-label>
+    </n-input-group>
+  </div>
+</template>
+
+<script setup lang="ts">
+import _ from 'lodash';
+import { reactive } from 'vue';
+import {
+  convertCelsiusToKelvin,
+  convertDelisleToKelvin,
+  convertFahrenheitToKelvin,
+  convertKelvinToCelsius,
+  convertKelvinToDelisle,
+  convertKelvinToFahrenheit,
+  convertKelvinToNewton,
+  convertKelvinToRankine,
+  convertKelvinToReaumur,
+  convertKelvinToRomer,
+  convertNewtonToKelvin,
+  convertRankineToKelvin,
+  convertReaumurToKelvin,
+  convertRomerToKelvin,
+} from './temperature-converter.models';
+
+type TemperatureScale = 'kelvin' | 'celsius' | 'fahrenheit' | 'rankine' | 'delisle' | 'newton' | 'reaumur' | 'romer';
+
+const units = reactive<
+  Record<
+    string | TemperatureScale,
+    { title: string; unit: string; ref: number; toKelvin: (v: number) => number; fromKelvin: (v: number) => number }
+  >
+>({
+  kelvin: {
+    title: 'Kelvin',
+    unit: 'K',
+    ref: 0,
+    toKelvin: _.identity,
+    fromKelvin: _.identity,
+  },
+  celsius: {
+    title: 'Celsius',
+    unit: '°C',
+    ref: 0,
+    toKelvin: convertCelsiusToKelvin,
+    fromKelvin: convertKelvinToCelsius,
+  },
+  fahrenheit: {
+    title: 'Fahrenheit',
+    unit: '°F',
+    ref: 0,
+    toKelvin: convertFahrenheitToKelvin,
+    fromKelvin: convertKelvinToFahrenheit,
+  },
+  rankine: {
+    title: 'Rankine',
+    unit: '°R',
+    ref: 0,
+    toKelvin: convertRankineToKelvin,
+    fromKelvin: convertKelvinToRankine,
+  },
+  delisle: {
+    title: 'Delisle',
+    unit: '°De',
+    ref: 0,
+    toKelvin: convertDelisleToKelvin,
+    fromKelvin: convertKelvinToDelisle,
+  },
+  newton: {
+    title: 'Newton',
+    unit: '°N',
+    ref: 0,
+    toKelvin: convertNewtonToKelvin,
+    fromKelvin: convertKelvinToNewton,
+  },
+  reaumur: {
+    title: 'Réaumur',
+    unit: '°Ré',
+    ref: 0,
+    toKelvin: convertReaumurToKelvin,
+    fromKelvin: convertKelvinToReaumur,
+  },
+  romer: {
+    title: 'Rømer',
+    unit: '°Rø',
+    ref: 0,
+    toKelvin: convertRomerToKelvin,
+    fromKelvin: convertKelvinToRomer,
+  },
+});
+
+function update(key: TemperatureScale) {
+  const { ref: value, toKelvin } = units[key];
+
+  const kelvins = toKelvin(value) ?? 0;
+
+  _.chain(units)
+    .omit(key)
+    .forEach(({ fromKelvin }, index) => {
+      units[index].ref = Math.floor((fromKelvin(kelvins) ?? 0) * 100) / 100;
+    })
+    .value();
+}
+
+update('kelvin');
+</script>
+
+<style lang="less" scoped></style>

src/tools/token-generator/token-generator.tool.vue

@@ -54,18 +54,19 @@
 <script setup lang="ts">
 import { useCopy } from '@/composable/copy';
 import { ref, watch } from 'vue';
+import { useQueryParam } from '@/composable/queryParams';
 import { createToken } from './token-generator.service';
 
 const token = ref('');
-const length = ref(64);
+const length = useQueryParam({ name: 'length', defaultValue: 64 });
 const { copy } = useCopy({ source: token, text: 'Token copied to the clipboard' });
 
-const withUppercase = ref(true);
-const withLowercase = ref(true);
-const withNumbers = ref(true);
-const withSymbols = ref(false);
+const withUppercase = useQueryParam({ name: 'uppercase', defaultValue: true });
+const withLowercase = useQueryParam({ name: 'lowercase', defaultValue: true });
+const withNumbers = useQueryParam({ name: 'numbers', defaultValue: true });
+const withSymbols = useQueryParam({ name: 'symbols', defaultValue: false });
 
-watch([withUppercase, withLowercase, withNumbers, withSymbols, length], refreshToken);
+watch([withUppercase, withLowercase, withNumbers, withSymbols, length], refreshToken, { immediate: true });
 
 function refreshToken() {
   token.value = createToken({
@@ -76,6 +77,4 @@ function refreshToken() {
     withSymbols: withSymbols.value,
   });
 }
-
-refreshToken();
 </script>

src/tools/uuid-generator/uuid-generator.vue

@@ -32,8 +32,9 @@
 import { useCopy } from '@/composable/copy';
 import { ref, watch } from 'vue';
 import { v4 as generateUUID } from 'uuid';
+import { useQueryParam } from '@/composable/queryParams';
 
-const count = ref(1);
+const count = useQueryParam({ defaultValue: 1, name: 'count' });
 
 const uuids = ref('');