feat: show token expiration

- Added missing token expiration to token table partly related to #84
JeffBeltran · Mar 7, 2024 · 8227e15 · 8227e15
1 parent 1cf8891
commit 8227e15
Show file tree

Hide file tree

Showing 3 changed files with 9,917 additions and 1 deletion.
diff --git a/dist/js/tool.js b/dist/js/tool.js
diff --git a/resources/js/components/SanctumTokens.vue b/resources/js/components/SanctumTokens.vue
@@ -38,6 +38,11 @@
               >
                 <span>{{ __("Last Used") }}</span>
               </th>
+              <th
+                class="text-left px-2 whitespace-nowrap uppercase text-gray-500 text-xxs tracking-wide py-2"
+              >
+                <span>{{ __("Expires") }}</span>
+              </th>
 
               <!-- View, Edit, and Delete -->
               <th class="uppercase text-xxs tracking-wide px-2 py-2">

diff --git a/resources/js/components/TokenRow.vue b/resources/js/components/TokenRow.vue
@@ -30,6 +30,18 @@
         <span class="whitespace-no-wrap">{{ lastUsed }}</span>
       </div>
     </td>
+    <td
+      class="px-2 py-2 border-t border-gray-100 dark:border-gray-700 whitespace-nowrap dark:bg-gray-800"
+    >
+      <div
+        class="text-left text-left"
+        via-resource="users"
+        via-resource-id="1"
+        :title="expiresTooltip"
+      >
+        <span class="whitespace-no-wrap">{{ expires }}</span>
+      </div>
+    </td>
     <td
       class="py-2 border-t border-gray-100 dark:border-gray-700 px-2 td-fit text-right align-middle dark:bg-gray-800"
     >
@@ -103,6 +115,20 @@ export default {
         return "—";
       }
     },
+    expires() {
+      if (this.token.expires_at) {
+        return DateTime.fromISO(this.token.expires_at).toRelativeCalendar();
+      } else {
+        return "N/A";
+      }
+    },
+    expiresTooltip() {
+      if (this.token.expires_at) {
+        return DateTime.fromISO(this.token.expires_at).toFormat("f ZZZZ");
+      } else {
+        return "N/A";
+      }
+    },
   },
   methods: {
     revokeToken() {