public-repos/it-tools
5
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

added switch to toggle display of parsed values

Browse Source
This commit is contained in:
bastantoine 2022-11-19 11:21:32 +01:00
parent b0d9fbbbaf
commit 9f2874b23d
1 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/tools/jwt-parser/jwt-parser.vue
View File

@ -3,18 +3,27 @@
<n-form-item label="JWT to decode" :feedback="validation.message" :validation-status="validation.status"> <n-form-item label="JWT to decode" :feedback="validation.message" :validation-status="validation.status">
<n-input v-model:value="raw_jwt" type="textarea" placeholder="Put your token here..." rows="5" /> <n-input v-model:value="raw_jwt" type="textarea" placeholder="Put your token here..." rows="5" />
</n-form-item> </n-form-item>
<n-form-item label="Display parsed value?" label-placement="left" :show-feedback="false">
<n-switch v-model:value="showParsedValues" />
</n-form-item>
<n-table> <n-table>
<tbody> <tbody>
<td colspan="2" class="table-header"><b>Header</b></td> <td colspan="2" class="table-header"><b>Header</b></td>
<tr v-for="[key, value] in Object.entries(decodedJWT.header)" :key="key"> <tr v-for="[key, value] in Object.entries(decodedJWT.header)" :key="key">
<td><claim-vue :claim="key" /></td> <td class="claims"><claim-vue :claim="key" /></td>
<td><value-vue :claim="key" :value="value" /></td> <td>
<span v-if="!showParsedValues">{{ value }}</span>
<value-vue v-else :claim="key" :value="value" />
</td>
</tr> </tr>
<td colspan="2" class="table-header"><b>Payload</b></td> <td colspan="2" class="table-header"><b>Payload</b></td>
<tr v-for="[key, value] in Object.entries(decodedJWT.payload)" :key="key"> <tr v-for="[key, value] in Object.entries(decodedJWT.payload)" :key="key">
<td><claim-vue :claim="key" /></td> <td class="claims"><claim-vue :claim="key" /></td>
<td><value-vue :claim="key" :value="value" /></td> <td>
<span v-if="!showParsedValues">{{ value }}</span>
<value-vue v-else :claim="key" :value="value" />
</td>
</tr> </tr>
</tbody> </tbody>
</n-table> </n-table>
@ -33,6 +42,8 @@ import valueVue from './value.vue';
const raw_jwt = ref( const raw_jwt = ref(
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c',
); );
const showParsedValues = ref(true);
const decodedJWT = computed(() => { const decodedJWT = computed(() => {
return safe_jwt_decode(raw_jwt.value); return safe_jwt_decode(raw_jwt.value);
}); });
@ -51,4 +62,8 @@ const validation = useValidation({
.table-header { .table-header {
text-align: center; text-align: center;
} }
.claims {
width: 20%;
}
</style> </style>