feat(frontend): list tokens, use formatted dates

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;
+}