feat(frontend): list tokens, use formatted dates

frontend/src/routes/settings/+layout.svelte

@@ -46,7 +46,7 @@
           active={$page.url.pathname === "/settings/tokens"}
           href="/settings/tokens"
         >
-          API tokens
+          Tokens
         </ListGroupItem>
         <ListGroupItem
           tag="a"

frontend/src/routes/settings/+page.svelte

@@ -5,16 +5,7 @@
   import ErrorAlert from "$lib/components/ErrorAlert.svelte";
   import FallbackImage from "$lib/components/FallbackImage.svelte";
   import { userStore } from "$lib/store";
-  import {
-    Alert,
-    Button,
-    Icon,
-    Modal,
-    ModalBody,
-    ModalFooter,
-    ModalHeader,
-    Table,
-  } from "sveltestrap";
+  import { Button, Icon, Modal, ModalBody, ModalFooter, ModalHeader, Table } from "sveltestrap";
   import type { PageData } from "./$types";
 
   export let data: PageData;

frontend/src/routes/settings/export/+page.ts

@@ -15,5 +15,5 @@ export const load = async () => {
 
 interface ExportResponse {
   path: string;
-  created_at: Date;
+  created_at: string;
 }

frontend/src/routes/settings/invites/+page.svelte

@@ -2,7 +2,8 @@
   import type { APIError, Invite } from "$lib/api/entities";
   import { apiFetchClient } from "$lib/api/fetch";
   import ErrorAlert from "$lib/components/ErrorAlert.svelte";
-  import { Alert, Button, Modal, Table } from "sveltestrap";
+  import { DateTime } from "luxon";
+  import { Button, Modal, Table } from "sveltestrap";
   import type { PageData } from "./$types";
 
   export let data: PageData;
@@ -43,7 +44,11 @@
         {#each data.invites as invite}
           <tr>
             <td><code>{invite.code}</code></td>
-            <td>{invite.created}</td>
+            <td
+              >{DateTime.fromISO(invite.created)
+                .toLocal()
+                .toLocaleString(DateTime.DATETIME_MED)}</td
+            >
             <td>{invite.used ? "yes" : "no"}</td>
           </tr>
         {/each}

frontend/src/routes/settings/tokens/+page.svelte

@@ -1,3 +1,36 @@
-<h1>API tokens</h1>
+<script lang="ts">
+  import { DateTime } from "luxon";
+  import { Icon, Table } from "sveltestrap";
+  import type { PageData } from "./$types";
 
-<p>This page is a work in progress, sorry!</p>
+  export let data: PageData;
+
+  import * as jose from "jose";
+  const claims = jose.decodeJwt(localStorage.getItem("pronouns-token")!);
+</script>
+
+<h1>Tokens ({data.tokens.length})</h1>
+
+<Table bordered striped hover>
+  <thead>
+    <th>ID</th>
+    <th>Created at</th>
+    <th>Expires at</th>
+    <th>Current?</th>
+  </thead>
+  <tbody>
+    {#each data.tokens as token}
+      <tr>
+        <td><code>{token.id}</code></td>
+        <td>{DateTime.fromISO(token.created).toLocal().toLocaleString(DateTime.DATETIME_MED)}</td>
+        <td>{DateTime.fromISO(token.expires).toLocal().toLocaleString(DateTime.DATETIME_MED)}</td>
+        <td
+          >{#if claims["jti"] === token.id}<Icon name="check-lg" alt="Current token" />{:else}<Icon
+              name="x-lg"
+              alt="Not current token"
+            />{/if}</td
+        >
+      </tr>
+    {/each}
+  </tbody>
+</Table>

frontend/src/routes/settings/tokens/+page.ts

@@ -0,0 +1,12 @@
+import { apiFetchClient } from "$lib/api/fetch";
+
+export const load = async () => {
+  const tokens = await apiFetchClient<Token[]>("/auth/tokens");
+  return { tokens };
+};
+
+interface Token {
+  id: string;
+  created: string;
+  expires: string;
+}