@frigear-nu/account 0.0.7 → 0.0.9

package/README.md

@@ -1,6 +1,6 @@
 # @frigear-nu/account
 
-A module for the account area (profile, email, password, security) in the main frigear app. Migrated from
+A module for the account area (profile, security, documents, API tokens pages) in the main frigear app. Migrated from
 [`nuxt-frigear-nu`](https://github.com/Frigear-nu/nuxt-frigear-nu)'s `app/pages/account/**`.
 
 ## Features
@@ -8,13 +8,13 @@ A module for the account area (profile, email, password, security) in the main f
 - 👤 Update your profile details (name, avatar).
 - ✉️ Change your email address.
 - 🔒 Change your password.
-- 🔑 Manage passkeys (via `@frigear-nu/users`' `useUserPasskeys`, when WebAuthn is enabled there).
+- 🔑 Manage passkeys (via `@frigear-nu/auth`'s `usePasskeys`, when WebAuthn is enabled there).
 - 🧩 Overridable composable (`useAccount`) and opt-in profile/security pages (built with [`@nuxt/ui`](https://ui.nuxt.com)).
 - 🗂️ Contributes "Profile"/"Security" tiles to `@frigear-nu/menu` (when installed), and an opt-in dashboard page
   listing them.
 
-This module reuses `@frigear-nu/users`' session/password utilities instead of registering its own `users` database
-table or duplicating auth logic - it only adds the account-management routes that didn't already exist there.
+This module is a UI shell: it owns no tables and no mutation routes. The forms call the self-service routes of
+`@frigear-nu/users` (`/api/users/me/*`) and the token routes of `@frigear-nu/auth`.
 
 ## Quick Setup
 
@@ -24,8 +24,8 @@ Install the module to your Nuxt application with one command:
 npx nuxt module add @frigear-nu/account
 ```
 
-This module requires [`@frigear-nu/users`](../users) to be installed in the host app, since it updates the same
-`users` database table and reuses its session helpers (`mapUserToSession`, `hashPassword`/`verifyPassword`).
+This module requires [`@frigear-nu/users`](../users) to be installed in the host app, since its forms call the
+self-service routes there.
 
 ## Configuration
 
@@ -74,3 +74,8 @@ await changePassword({ currentPassword: 'old', newPassword: 'new-password', conf
 
 Strings live under the `account.*` namespace in `da`/`en` locale files and can be overridden in your app's
 `i18n/locales/<code>.json`. See the [documentation](https://docs.frigear.dev/modules/account#translations).
+
+## Overriding parts
+
+Any `Account*` component can be replaced by a same-named component in your app (the module's have a lower priority).
+`AccountHeaderRight` is the block at the right of the account header; override it to show other details.

package/dist/module.d.mts

@@ -1,11 +1,28 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
+/** A downloadable file listed on the documents page. */
+type AccountDocument = {
+    id: string;
+    /** A string, or a map of locale -> string (falls back to `en`, then the first value). */
+    label: string | Record<string, string>;
+    /** Where the file is served from, e.g. `/assets/files/handbook.pdf`. */
+    path: string;
+    icon?: string;
+    /**
+     * Only shown to users with one of these roles (the `role` of the session user). Omit to show to every signed-in
+     * user. This only decides what is *listed*: a file in `public/` can still be fetched by anyone who knows its URL.
+     */
+    roles?: string[];
+};
 type PublicModuleOptions = {
     pages: {
         index?: string;
         profile?: string;
         security?: string;
+        documents?: string;
+        apiTokens?: string;
     };
+    documents: AccountDocument[];
 };
 type ModuleOptions = {
     settings?: {
@@ -13,7 +30,10 @@ type ModuleOptions = {
             index?: string | boolean;
             profile?: string | boolean;
             security?: string | boolean;
+            documents?: string | boolean;
+            apiTokens?: string | boolean;
         };
+        documents?: AccountDocument[];
     };
 };
 

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@frigear-nu/account",
   "configKey": "account",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -1,11 +1,6 @@
-import { defineNuxtModule, createResolver, hasNuxtModule, addServerHandler, addImports, extendPages, addComponentsDir } from '@nuxt/kit';
-import { registerModule, registerLocales, extendDatabaseTable } from '@frigear-nu/module-kit/utils';
+import { defineNuxtModule, createResolver, hasNuxtModule, addImports, extendPages, addComponentsDir } from '@nuxt/kit';
+import { registerModule, registerTailwindSource, registerLocales, resolvePagePath, addOptionalMenuSource } from '@frigear-nu/module-kit/utils';
 
-function resolvePagePath(setting, defaultPath) {
-  if (typeof setting === "string") return setting;
-  if (setting === true) return defaultPath;
-  return void 0;
-}
 const module$1 = defineNuxtModule({
   meta: { name: "@frigear-nu/account", configKey: "account" },
   defaults: {
@@ -18,6 +13,8 @@ const module$1 = defineNuxtModule({
     "@frigear-nu/module-kit": {
       version: ">=0.0.1"
     },
+    "@frigear-nu/auth": { version: ">=0.0.1" },
+    // The profile, email and password forms call its self-service routes.
     "@frigear-nu/users": {
       version: ">=0.0.1"
     },
@@ -29,58 +26,56 @@ const module$1 = defineNuxtModule({
   async setup(options, nuxt) {
     registerModule("@frigear-nu/account", nuxt);
     const resolver = createResolver(import.meta.url);
+    registerTailwindSource(nuxt, resolver.resolve("./runtime/app"));
     registerLocales(nuxt, resolver.resolve("./runtime/i18n/lang"));
     const settings = options.settings ?? {};
     const withMenus = hasNuxtModule("@frigear-nu/menu");
-    addServerHandler({
-      route: "/api/account/profile",
-      method: "post",
-      handler: resolver.resolve("./runtime/server/routes/account/profile.post")
-    });
-    addServerHandler({
-      route: "/api/account/change-email",
-      method: "post",
-      handler: resolver.resolve("./runtime/server/routes/account/change-email.post")
-    });
-    addServerHandler({
-      route: "/api/account/change-password",
-      method: "post",
-      handler: resolver.resolve("./runtime/server/routes/account/change-password.post")
-    });
     addImports([{ name: "useAccount", from: resolver.resolve("./runtime/app/composables/useAccount") }]);
     const profilePath = resolvePagePath(settings.pages?.profile, "/account/profile");
     const securityPath = resolvePagePath(settings.pages?.security, "/account/security");
+    const documentsPath = resolvePagePath(settings.pages?.documents, "/account/documents");
+    const apiTokensPath = resolvePagePath(settings.pages?.apiTokens, "/account/api-tokens");
     const indexPath = withMenus ? resolvePagePath(settings.pages?.index, "/account") : void 0;
     if (!withMenus && settings.pages?.index) {
       console.warn("[@frigear-nu/account] `settings.pages.index` was set, but `@frigear-nu/menu` is not installed - skipping the dashboard page.");
     }
     nuxt.options.runtimeConfig.public.account = {
-      pages: { index: indexPath, profile: profilePath, security: securityPath }
+      pages: { index: indexPath, profile: profilePath, security: securityPath, documents: documentsPath, apiTokens: apiTokensPath },
+      documents: settings.documents ?? []
     };
-    if (indexPath || profilePath || securityPath) {
+    if (indexPath || profilePath || securityPath || documentsPath || apiTokensPath) {
       extendPages((pages) => {
         const existingPaths = new Set(pages.map((page) => page.path));
-        if (indexPath && !existingPaths.has(indexPath)) {
-          pages.push({ name: "account-index", path: indexPath, file: resolver.resolve("./runtime/app/pages/index.vue") });
-        }
-        if (profilePath && !existingPaths.has(profilePath)) {
-          pages.push({ name: "account-profile", path: profilePath, file: resolver.resolve("./runtime/app/pages/profile.vue") });
-        }
-        if (securityPath && !existingPaths.has(securityPath)) {
-          pages.push({ name: "account-security", path: securityPath, file: resolver.resolve("./runtime/app/pages/security.vue") });
+        const children = [];
+        const add = (path, name, file) => {
+          if (path && !existingPaths.has(path)) children.push({ name, path, file: resolver.resolve(file) });
+        };
+        add(indexPath, "account-index", "./runtime/app/pages/index.vue");
+        add(profilePath, "account-profile", "./runtime/app/pages/profile.vue");
+        add(documentsPath, "account-documents", "./runtime/app/pages/documents.vue");
+        add(securityPath, "account-security", "./runtime/app/pages/security.vue");
+        add(apiTokensPath, "account-api-tokens", "./runtime/app/pages/api-tokens.vue");
+        if (children.length) {
+          pages.push({ name: "account-layout", path: "/__account", file: resolver.resolve("./runtime/app/pages/layout.vue"), children });
         }
       });
     }
-    if (withMenus) {
-      const { registerMenuSource } = await import('@frigear-nu/menu/utils');
-      registerMenuSource(nuxt, { file: resolver.resolve("./runtime/menus"), menu: "dashboard.account" });
+    if (hasNuxtModule("@frigear-nu/authorization")) {
+      const prefixes = ["", ...(nuxt.options.i18n?.locales ?? []).map((locale) => typeof locale === "string" ? locale : locale.code).map((code) => `/${code}`)];
+      const rules = nuxt.options.routeRules ||= {};
+      const guarded = [indexPath, profilePath, securityPath, documentsPath, apiTokensPath].filter((path) => !!path && !path.startsWith("/account"));
+      for (const prefix of prefixes) {
+        for (const pattern of [`${prefix}/account`, `${prefix}/account/**`, ...guarded.map((path) => `${prefix}${path}`)]) {
+          rules[pattern] = { authenticated: true, ...rules[pattern] };
+        }
+      }
+    } else {
+      console.warn("[@frigear-nu/account] @frigear-nu/authorization is not installed: the account pages are not guarded. Install it and guard `/account/**` yourself.");
     }
+    addOptionalMenuSource(nuxt, { file: resolver.resolve("./runtime/menus"), menu: "dashboard.account" });
     addComponentsDir({
-      path: resolver.resolve("./runtime/app/components")
-    });
-    extendDatabaseTable(nuxt, {
-      resolver,
-      file: (dialect) => `./runtime/server/db/schema.${dialect}`
+      path: resolver.resolve("./runtime/app/components"),
+      priority: -1
     });
   }
 });

package/dist/runtime/app/components/Account/AccountHeader.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/Account/AccountHeader.vue

@@ -0,0 +1,43 @@
+<script setup>
+const t = useModuleT("account");
+const route = useRoute();
+const pages = useRuntimeConfig().public.account?.pages;
+const nuxtApp = useNuxtApp();
+const items = typeof useMenu === "function" ? useMenu("account").data : ref([]);
+const trimSlash = (path) => path.length > 1 ? path.replace(/\/+$/, "") : path;
+const stripLocale = (path) => {
+  const trimmed = trimSlash(path);
+  const first = trimmed.split("/")[1];
+  const codes = (nuxtApp.$i18n?.locales?.value ?? []).map((locale) => typeof locale === "string" ? locale : locale.code);
+  return first && codes.includes(first) ? trimmed.slice(first.length + 1) || "/" : trimmed;
+};
+const current = computed(() => {
+  const path = stripLocale(route.path);
+  return (items.value ?? []).find((item) => item.to && !item.external && stripLocale(item.to) === path);
+});
+const title = computed(() => current.value?.label ?? t("title", "Account"));
+const description = computed(() => current.value?.description);
+</script>
+
+<template>
+  <UContainer>
+    <UPageHeader
+      :title="title"
+      :description="description"
+      :ui="{ wrapper: 'flex-row items-center justify-between gap-4', description: 'mt-2' }"
+    >
+      <UButton
+        v-if="current && pages?.index"
+        variant="link"
+        icon="i-lucide-arrow-left"
+        :to="pages.index"
+        :label="t('backTo', 'Back to account')"
+        class="-ml-3 mt-2"
+      />
+
+      <template #links>
+        <AccountHeaderRight />
+      </template>
+    </UPageHeader>
+  </UContainer>
+</template>

package/dist/runtime/app/components/Account/AccountHeader.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/Account/AccountHeaderRight.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/Account/AccountHeaderRight.vue

@@ -0,0 +1,18 @@
+<script setup>
+const t = useModuleT("account");
+const { user } = useUserSession();
+</script>
+
+<template>
+  <div
+    v-if="user"
+    class="flex flex-col"
+  >
+    <div class="text-sm text-muted">
+      {{ t("signedInAs", "Signed in as") }}
+    </div>
+    <div class="text-primary">
+      {{ user.email }}
+    </div>
+  </div>
+</template>

package/dist/runtime/app/components/Account/AccountHeaderRight.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/Account/AccountMenu.vue

@@ -19,13 +19,18 @@ const items = computedAsync(async () => {
       }
     ]);
   }
-  items2.push(dropdownItems.value?.map((item) => ({
+  const role = user.value?.role;
+  const visible = (dropdownItems.value ?? []).filter((item) => {
+    const roles = item.meta?.roles;
+    return !roles?.length || !!role && roles.includes(role);
+  });
+  items2.push(visible.map((item) => ({
     label: item.label,
     to: item.to,
     icon: item.icon,
     external: item.external,
     replace: item.external
-  })) || []);
+  })));
   return items2;
 });
 </script>

package/dist/runtime/app/composables/useAccount.js

@@ -17,19 +17,19 @@ export const useAccount = () => {
   }
   function updateProfileDetails(payload) {
     return withRequest(
-      () => $fetch("/api/account/profile", { method: "POST", body: payload }),
+      () => $fetch("/api/users/me/profile", { method: "POST", body: payload }),
       "Failed to update your profile."
     );
   }
   function changeEmailAddress(payload) {
     return withRequest(
-      () => $fetch("/api/account/change-email", { method: "POST", body: payload }),
+      () => $fetch("/api/users/me/change-email", { method: "POST", body: payload }),
       "Failed to change your email address."
     );
   }
   function changePassword(payload) {
     return withRequest(
-      () => $fetch("/api/account/change-password", { method: "POST", body: payload }),
+      () => $fetch("/api/users/me/change-password", { method: "POST", body: payload }),
       "Failed to change your password."
     );
   }

package/dist/runtime/app/pages/api-tokens.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/pages/api-tokens.vue

@@ -0,0 +1,308 @@
+<script setup>
+import { z } from "zod";
+defineOptions({ name: "AccountApiTokensPage" });
+const t = useModuleT("account.apiTokens");
+const toast = useToast();
+const { data: tokens, refresh } = await useFetch("/api/auth/tokens", { key: "account-api-tokens", default: () => [] });
+const { data: scopes } = await useFetch("/api/auth/scopes", { key: "account-api-token-scopes", default: () => [] });
+const scopeItems = computed(() => (scopes.value ?? []).map((scope) => ({
+  label: scope.name === "*" ? t("allScopes", "Full access") : scope.name,
+  description: scope.description,
+  value: scope.name
+})));
+const expiryItems = computed(() => [
+  { label: t("expiry.30", "30 days"), value: 30 },
+  { label: t("expiry.90", "90 days"), value: 90 },
+  { label: t("expiry.365", "1 year"), value: 365 },
+  { label: t("expiry.never", "No expiry"), value: 0 }
+]);
+const schema = z.object({
+  name: z.string().trim().min(1, t("name.required", "Give the token a name.")).max(80),
+  scopes: z.array(z.string()).min(1, t("scopes.required", "Pick at least one scope.")),
+  expiresInDays: z.number()
+});
+const state = reactive({ name: "", scopes: [], expiresInDays: 90 });
+const creating = ref(false);
+const revokingId = ref(null);
+const revealed = ref(null);
+function errorMessage(e, fallback) {
+  const err = e;
+  return err?.data?.statusMessage ?? err?.statusMessage ?? fallback;
+}
+async function onCreate(event) {
+  creating.value = true;
+  try {
+    const created = await $fetch("/api/auth/tokens", {
+      method: "POST",
+      body: { name: event.data.name, scopes: event.data.scopes, expiresInDays: event.data.expiresInDays || null }
+    });
+    revealed.value = { name: created.name, token: created.token };
+    state.name = "";
+    state.scopes = [];
+    await refresh();
+  } catch (e) {
+    toast.add({ title: errorMessage(e, t("createError", "Could not create the token.")), color: "error" });
+  } finally {
+    creating.value = false;
+  }
+}
+async function copyText(text, success) {
+  try {
+    await navigator.clipboard.writeText(text);
+    toast.add({ title: success, color: "success" });
+  } catch {
+    toast.add({ title: t("copyError", "Could not copy. Select the token and copy it manually."), color: "warning" });
+  }
+}
+const copyToken = () => revealed.value && copyText(revealed.value.token, t("copied", "Token copied."));
+async function onRevoke(token) {
+  revokingId.value = token.id;
+  try {
+    await $fetch(`/api/auth/tokens/${token.id}`, { method: "DELETE" });
+    toast.add({ title: t("revoked", "Token revoked."), color: "success" });
+    await refresh();
+  } catch (e) {
+    toast.add({ title: errorMessage(e, t("revokeError", "Could not revoke the token.")), color: "error" });
+  } finally {
+    revokingId.value = null;
+  }
+}
+const mcpEnabled = useRuntimeConfig().public.users?.mcp === true;
+const activeConnect = ref("claude");
+const mcpUrl = `${useRequestURL().origin}/mcp`;
+const tokenPlaceholder = "<your-api-token>";
+const shownToken = computed(() => revealed.value?.token ?? tokenPlaceholder);
+const connectTabs = computed(() => [
+  {
+    label: "Claude",
+    value: "claude",
+    steps: t("connect.claude.steps", "Claude.ai and Claude Desktop: open Settings \u2192 Connectors \u2192 Add custom connector, paste the URL below and sign in when asked. No token needed."),
+    code: mcpUrl,
+    extraSteps: t("connect.claude.cli", "Claude Code (uses an API token):"),
+    extraCode: `claude mcp add --transport http frigear ${mcpUrl} --header "Authorization: Bearer ${shownToken.value}"`
+  },
+  {
+    label: "ChatGPT",
+    value: "chatgpt",
+    steps: t("connect.chatgpt.steps", "ChatGPT: open Settings \u2192 Connectors \u2192 Advanced, turn on Developer mode, then create a connector with the URL below. Choose OAuth and sign in when asked. No token needed."),
+    code: mcpUrl
+  }
+]);
+const dateFormatter = new Intl.DateTimeFormat(void 0, { dateStyle: "medium" });
+function formatDate(value) {
+  if (!value) return "";
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? "" : dateFormatter.format(date);
+}
+function statusColor(status) {
+  return status === "ok" ? "success" : status === "expired" ? "warning" : "neutral";
+}
+</script>
+
+<template>
+  <UContainer>
+    <UPage>
+      <UPageBody>
+        <UPageCard
+          :title="t('create.title', 'Create an API token')"
+          :description="t('create.description', 'Tokens let scripts and tools such as MCP clients act as you. Give each one only the scopes it needs.')"
+          variant="subtle"
+        >
+          <UAlert
+            v-if="revealed"
+            color="success"
+            variant="subtle"
+            icon="i-lucide-key-round"
+            :title="t('reveal.title', 'Copy your new token now')"
+            :description="t('reveal.description', 'This is the only time it is shown. If you lose it, create a new one.')"
+          >
+            <template #actions>
+              <UInput
+                :model-value="revealed.token"
+                readonly
+                class="w-full sm:w-96"
+                :aria-label="t('reveal.label', 'New token')"
+                @focus="$event.target.select()"
+              />
+              <UButton
+                icon="i-lucide-copy"
+                :label="t('copy', 'Copy')"
+                @click="copyToken"
+              />
+              <UButton
+                color="neutral"
+                variant="ghost"
+                :label="t('reveal.done', 'Done')"
+                @click="revealed = null"
+              />
+            </template>
+          </UAlert>
+
+          <UForm
+            :schema="schema"
+            :state="state"
+            class="space-y-4"
+            @submit="onCreate"
+          >
+            <UFormField
+              :label="t('name.label', 'Name')"
+              name="name"
+              required
+            >
+              <UInput
+                v-model="state.name"
+                :placeholder="t('name.placeholder', 'e.g. My MCP client')"
+                maxlength="80"
+                class="w-full"
+              />
+            </UFormField>
+            <UFormField
+              :label="t('scopes.label', 'Scopes')"
+              name="scopes"
+              required
+            >
+              <USelectMenu
+                v-model="state.scopes"
+                :items="scopeItems"
+                value-key="value"
+                multiple
+                :placeholder="t('scopes.placeholder', 'Choose what the token may do')"
+                class="w-full"
+              />
+            </UFormField>
+            <UFormField
+              :label="t('expiry.label', 'Expires')"
+              name="expiresInDays"
+            >
+              <USelect
+                v-model="state.expiresInDays"
+                :items="expiryItems"
+                value-key="value"
+                class="w-full sm:max-w-xs"
+              />
+            </UFormField>
+            <UButton
+              type="submit"
+              :loading="creating"
+              :label="t('create.submit', 'Create token')"
+            />
+          </UForm>
+        </UPageCard>
+
+        <UPageCard
+          v-if="mcpEnabled"
+          :title="t('connect.title', 'Connect to MCP')"
+          :description="t('connect.description', 'Use your account from an AI assistant. Your API token is only filled into the commands right after you create it.')"
+          variant="subtle"
+        >
+          <UTabs
+            v-model="activeConnect"
+            :items="connectTabs"
+            :content="false"
+            class="w-full"
+          />
+          <template
+            v-for="tab in connectTabs"
+            :key="tab.value"
+          >
+            <div
+              v-if="tab.value === activeConnect"
+              class="min-w-0 max-w-full space-y-3"
+            >
+              <p class="text-sm text-muted">
+                {{ tab.steps }}
+              </p>
+              <div class="relative min-w-0">
+                <pre class="max-w-full whitespace-pre-wrap break-all rounded-md bg-elevated p-3 pr-12 text-sm"><code>{{ tab.code }}</code></pre>
+                <UButton
+                  class="absolute right-2 top-2"
+                  color="neutral"
+                  variant="ghost"
+                  size="xs"
+                  icon="i-lucide-copy"
+                  :aria-label="t('copy', 'Copy')"
+                  @click="copyText(tab.code, t('copiedSnippet', 'Copied.'))"
+                />
+              </div>
+              <template v-if="tab.extraCode">
+                <p class="text-sm text-muted">
+                  {{ tab.extraSteps }}
+                </p>
+                <div class="relative min-w-0">
+                  <pre class="max-w-full whitespace-pre-wrap break-all rounded-md bg-elevated p-3 pr-12 text-sm"><code>{{ tab.extraCode }}</code></pre>
+                  <UButton
+                    class="absolute right-2 top-2"
+                    color="neutral"
+                    variant="ghost"
+                    size="xs"
+                    icon="i-lucide-copy"
+                    :aria-label="t('copy', 'Copy')"
+                    @click="copyText(tab.extraCode ?? '', t('copiedSnippet', 'Copied.'))"
+                  />
+                </div>
+              </template>
+            </div>
+          </template>
+        </UPageCard>
+
+        <UPageCard
+          :title="t('list.title', 'Your tokens')"
+          :description="t('list.description', 'Revoke a token to stop it working immediately.')"
+          variant="subtle"
+        >
+          <ul
+            v-if="tokens?.length"
+            class="divide-y divide-default"
+          >
+            <li
+              v-for="token in tokens"
+              :key="token.id"
+              class="flex items-center justify-between gap-3 py-3"
+            >
+              <div class="min-w-0">
+                <p class="flex items-center gap-2 truncate font-medium text-highlighted">
+                  {{ token.name }}
+                  <UBadge
+                    :color="statusColor(token.status)"
+                    variant="subtle"
+                    :label="t(`status.${token.status}`, token.status)"
+                  />
+                </p>
+                <p class="font-mono text-sm text-muted">
+                  {{ token.prefix }}…{{ token.last4 }}
+                </p>
+                <p class="text-sm text-muted">
+                  {{ token.scopes.join(", ") }}
+                </p>
+                <p class="text-sm text-muted">
+                  {{ t("list.created", "Created {date}", { date: formatDate(token.createdAt) }) }}
+                  <template v-if="token.lastUsedAt">
+                    · {{ t("list.lastUsed", "Last used {date}", { date: formatDate(token.lastUsedAt) }) }}
+                  </template>
+                  <template v-if="token.expiresAt">
+                    · {{ t("list.expires", "Expires {date}", { date: formatDate(token.expiresAt) }) }}
+                  </template>
+                </p>
+              </div>
+              <UButton
+                v-if="token.status !== 'revoked'"
+                color="error"
+                variant="ghost"
+                icon="i-lucide-trash-2"
+                :loading="revokingId === token.id"
+                :aria-label="t('revoke', 'Revoke token')"
+                @click="onRevoke(token)"
+              />
+            </li>
+          </ul>
+          <p
+            v-else
+            class="text-sm text-muted"
+          >
+            {{ t("list.empty", "You have not created any tokens yet.") }}
+          </p>
+        </UPageCard>
+      </UPageBody>
+    </UPage>
+  </UContainer>
+</template>

package/dist/runtime/app/pages/api-tokens.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;