From 9f2874b23da778b49ef9deddb47329168e917164 Mon Sep 17 00:00:00 2001
From: bastantoine <bastien.antoine69+github@gmail.com>
Date: Sat, 19 Nov 2022 11:21:32 +0100
Subject: [PATCH] added switch to toggle display of parsed values

---
 src/tools/jwt-parser/jwt-parser.vue | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/tools/jwt-parser/jwt-parser.vue b/src/tools/jwt-parser/jwt-parser.vue
index b4455981..80c9738c 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>