aboutsummaryrefslogtreecommitdiff
path: root/src/tools/jwt-parser/jwt-parser.vue
diff options
context:
space:
mode:
authorGravatar bastantoine <bastien.antoine69+github@gmail.com> 2022-12-27 09:38:35 +0100
committerGravatar GitHub <noreply@github.com> 2022-12-27 09:38:35 +0100
commitacc7f0a586c64500c5f720e70cdbccf9bffe76d9 (patch)
tree0d1303641ec9d10821f108010e2cec4c9a8f50f9 /src/tools/jwt-parser/jwt-parser.vue
parentebb7301a98cf4ad29334393853428f097c1b1ed3 (diff)
downloadit-tools-acc7f0a586c64500c5f720e70cdbccf9bffe76d9.tar.gz
it-tools-acc7f0a586c64500c5f720e70cdbccf9bffe76d9.tar.zst
it-tools-acc7f0a586c64500c5f720e70cdbccf9bffe76d9.zip
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...
Diffstat (limited to 'src/tools/jwt-parser/jwt-parser.vue')
-rw-r--r--src/tools/jwt-parser/jwt-parser.vue63
1 files changed, 63 insertions, 0 deletions
diff --git a/src/tools/jwt-parser/jwt-parser.vue b/src/tools/jwt-parser/jwt-parser.vue
new file mode 100644
index 0000000..e0b5389
--- /dev/null
+++ b/src/tools/jwt-parser/jwt-parser.vue
@@ -0,0 +1,63 @@
+<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>
+ <tbody>
+ <td colspan="2" class="table-header"><strong>Header</strong></td>
+ <tr v-for="[key, value] in Object.entries(decodedJWT.header)" :key="key">
+ <td class="claims"><claim-vue :claim="key" /></td>
+ <td>
+ <value-vue :claim="key" :value="value" />
+ </td>
+ </tr>
+ <td colspan="2" class="table-header"><strong>Payload</strong></td>
+ <tr v-for="[key, value] in Object.entries(decodedJWT.payload)" :key="key">
+ <td class="claims"><claim-vue :claim="key" /></td>
+ <td>
+ <value-vue :claim="key" :value="value" />
+ </td>
+ </tr>
+ </tbody>
+ </n-table>
+ </n-card>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import jwt_decode from 'jwt-decode';
+import { useValidation } from '@/composable/validation';
+import { isNotThrowing } from '@/utils/boolean';
+import { safeJwtDecode } from './jwt-parser.service';
+import claimVue from './claim.vue';
+import valueVue from './value.vue';
+
+const rawJwt = ref(
+ 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c',
+);
+
+const decodedJWT = computed(() => {
+ return safeJwtDecode(rawJwt.value);
+});
+const validation = useValidation({
+ source: rawJwt,
+ rules: [
+ {
+ validator: (value) => value.length > 0 && isNotThrowing(() => jwt_decode(value, { header: true })),
+ message: 'Invalid JWT',
+ },
+ ],
+});
+</script>
+
+<style lang="less" scoped>
+.table-header {
+ text-align: center;
+}
+
+.claims {
+ width: 20%;
+}
+</style>