diff options
| author |  bastantoine <bastien.antoine69+github@gmail.com>
| 2022-11-19 11:21:32 +0100 |
|---|---|---|
| committer | bastantoine <bastien.antoine69+github@gmail.com>
| 2022-11-19 11:22:06 +0100 |
| commit | 9f2874b23da778b49ef9deddb47329168e917164 (patch) | |
| tree | b9941c5de06ba52b696002aedbd0ad97a0a8fa61 | |
| parent | b0d9fbbbaf1213086b149459c59cd1661f27c115 (diff) | |
| download | it-tools-9f2874b23da778b49ef9deddb47329168e917164.tar.gz it-tools-9f2874b23da778b49ef9deddb47329168e917164.tar.zst it-tools-9f2874b23da778b49ef9deddb47329168e917164.zip | |
added switch to toggle display of parsed values
| -rw-r--r-- | src/tools/jwt-parser/jwt-parser.vue | 23 |
1 files changed, 19 insertions, 4 deletions
diff --git a/src/tools/jwt-parser/jwt-parser.vue b/src/tools/jwt-parser/jwt-parser.vue index b445598..80c9738 100644 --- a/src/tools/jwt-parser/jwt-parser.vue +++ b/src/tools/jwt-parser/jwt-parser.vue @@ -3,18 +3,27 @@ <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-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> <tbody> <td colspan="2" class="table-header"><b>Header</b></td> <tr v-for="[key, value] in Object.entries(decodedJWT.header)" :key="key"> - <td><claim-vue :claim="key" /></td> - <td><value-vue :claim="key" :value="value" /></td> + <td class="claims"><claim-vue :claim="key" /></td> + <td> + <span v-if="!showParsedValues">{{ value }}</span> + <value-vue v-else :claim="key" :value="value" /> + </td> </tr> <td colspan="2" class="table-header"><b>Payload</b></td> <tr v-for="[key, value] in Object.entries(decodedJWT.payload)" :key="key"> - <td><claim-vue :claim="key" /></td> - <td><value-vue :claim="key" :value="value" /></td> + <td class="claims"><claim-vue :claim="key" /></td> + <td> + <span v-if="!showParsedValues">{{ value }}</span> + <value-vue v-else :claim="key" :value="value" /> + </td> </tr> </tbody> </n-table> @@ -33,6 +42,8 @@ import valueVue from './value.vue'; const raw_jwt = ref( 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c', ); +const showParsedValues = ref(true); + const decodedJWT = computed(() => { return safe_jwt_decode(raw_jwt.value); }); @@ -51,4 +62,8 @@ const validation = useValidation({ .table-header { text-align: center; } + +.claims { + width: 20%; +} </style> |