2 files changed, 42 insertions, 32 deletions
diff --git a/src/tools/jwt-parser/jwt-parser.service.ts b/src/tools/jwt-parser/jwt-parser.service.ts
index f5eb04e..19edc5f 100644
--- a/src/tools/jwt-parser/jwt-parser.service.ts
+++ b/src/tools/jwt-parser/jwt-parser.service.ts
@@ -38,9 +38,11 @@ function getFriendlyValue({ claim, value }: { claim: string; value: unknown }) {
     .otherwise(() => undefined);
 }
 
-const dateFormatter = (value: unknown) => {
-  if (_.isNil(value)) return undefined;
+function dateFormatter(value: unknown) {
+  if (_.isNil(value)) {
+    return undefined;
+  }
 
   const date = new Date(Number(value) * 1000);
   return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
-};
+}
diff --git a/src/tools/jwt-parser/jwt-parser.vue b/src/tools/jwt-parser/jwt-parser.vue
index 7a987b6..f3a460a 100644
--- a/src/tools/jwt-parser/jwt-parser.vue
+++ b/src/tools/jwt-parser/jwt-parser.vue
@@ -1,35 +1,9 @@
-<template>
-  <c-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 v-if="validation.isValid">
-      <tbody>
-        <template v-for="section of sections" :key="section.key">
-          <th colspan="2" class="table-header">{{ section.title }}</th>
-          <tr v-for="{ claim, claimDescription, friendlyValue, value } in decodedJWT[section.key]" :key="claim + value">
-            <td class="claims">
-              <n-text strong>{{ claim }}</n-text>
-              <n-text v-if="claimDescription" depth="3" ml-2>({{ claimDescription }})</n-text>
-            </td>
-            <td>
-              <n-text>{{ value }}</n-text>
-              <n-text v-if="friendlyValue" ml-2 depth="3">({{ friendlyValue }})</n-text>
-            </td>
-          </tr>
-        </template>
-      </tbody>
-    </n-table>
-  </c-card>
-</template>
-
 <script setup lang="ts">
+import { computed, ref } from 'vue';
+import { decodeJwt } from './jwt-parser.service';
 import { useValidation } from '@/composable/validation';
 import { isNotThrowing } from '@/utils/boolean';
 import { withDefaultOnError } from '@/utils/defaults';
-import { computed, ref } from 'vue';
-import { decodeJwt } from './jwt-parser.service';
 
 const rawJwt = ref(
   'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c',
@@ -48,13 +22,47 @@ const validation = useValidation({
   source: rawJwt,
   rules: [
     {
-      validator: (value) => value.length > 0 && isNotThrowing(() => decodeJwt({ jwt: rawJwt.value })),
+      validator: value => value.length > 0 && isNotThrowing(() => decodeJwt({ jwt: rawJwt.value })),
       message: 'Invalid JWT',
     },
   ],
 });
 </script>
 
+<template>
+  <c-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 v-if="validation.isValid">
+      <tbody>
+        <template v-for="section of sections" :key="section.key">
+          <th colspan="2" class="table-header">
+            {{ section.title }}
+          </th>
+          <tr v-for="{ claim, claimDescription, friendlyValue, value } in decodedJWT[section.key]" :key="claim + value">
+            <td class="claims">
+              <n-text strong>
+                {{ claim }}
+              </n-text>
+              <n-text v-if="claimDescription" depth="3" ml-2>
+                ({{ claimDescription }})
+              </n-text>
+            </td>
+            <td>
+              <n-text>{{ value }}</n-text>
+              <n-text v-if="friendlyValue" ml-2 depth="3">
+                ({{ friendlyValue }})
+              </n-text>
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </n-table>
+  </c-card>
+</template>
+
 <style lang="less" scoped>
 .table-header {
   text-align: center;