feat(new-tool): jwt parser (#262)

* npm install jwt-decode

* added base tool structure

* added function to decode JWT and display header and payload

* use a table to display the data

* show human readable values

* added switch to toggle display of parsed values

* lint

* replaced basic package-lock.json with pnpm-lock.json

* change the icon of the tool

* simplify return

* use camelCase

* added description of the tool

* always parse the values

* use camelCase...

1 files changed, 29 insertions, 0 deletions

diff --git a/src/tools/jwt-parser/claim.vue b/src/tools/jwt-parser/claim.vue
new file mode 100644
index 0000000..3f298a2
--- /dev/null
+++ b/src/tools/jwt-parser/claim.vue
@@ -0,0 +1,29 @@
+<template>
+  <n-space>
+    <em>{{ claim }}</em>
+    <span v-if="label.label !== claim">
+      <n-popover placement="right" trigger="hover">
+        <template #trigger>
+          <n-icon :component="InfoCircle" trigger />
+        </template>
+        {{ label.label }}
+        <template v-if="label.ref !== ''" #footer> {{ label.ref }} </template>
+      </n-popover>
+    </span>
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { InfoCircle } from '@vicons/tabler';
+import { getClaimLabel } from './jwt-parser.service';
+
+const props = defineProps({
+  claim: {
+    type: String,
+    default: '',
+  },
+});
+
+const label = computed(() => getClaimLabel(props.claim ? props.claim : ''));
+</script>