@frigear-nu/account 0.1.2 → 0.1.3

package/README.md

@@ -10,9 +10,10 @@ A module for the account area (profile, security, documents, API tokens pages) i
 - 🔒 Change your password.
 - 🔑 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)).
-- 🗂️ An `account` layout (inside the site layout) with a left account navigation built from the `account` menu
-  of `@frigear-nu/menu` (when installed), an overview page listing the same entries, and an `account.overview` widget
-  area (when `@frigear-nu/widget` is installed).
+- 🗂️ An `account` layout: a settings page inside the public site (the site header and footer stay), with a centred
+  `max-w-5xl` content column. Wide screens get a left section list with the signed-in user, narrow screens a
+  `PageSectionSwitcher`, both built from the `account` menu of `@frigear-nu/menu` (when installed). Plus an overview
+  page listing the same entries, and an `account.overview` widget area (when `@frigear-nu/widget` is installed).
 
 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`.
@@ -55,9 +56,11 @@ export default defineNuxtConfig({
 
 ## API routes
 
-- `POST /api/account/profile` - updates `name`/`avatar`.
-- `POST /api/account/change-email` - updates `email` (rejects if already taken by another user).
-- `POST /api/account/change-password` - verifies `currentPassword` and updates to `newPassword`.
+These routes belong to `@frigear-nu/users`; the account pages call them:
+
+- `PATCH /api/users/me` - updates `name`/`avatar`.
+- `PUT /api/users/me/email` - updates `email` (rejects if already taken by another user).
+- `PUT /api/users/me/password` - verifies `currentPassword` and updates to `newPassword`.
 
 All three require an authenticated session and re-map the updated user into it.
 
@@ -79,6 +82,15 @@ Strings live under the `account.*` namespace in `da`/`en` locale files and can b
 ## 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 actions block of the account page heading (and of the overview's summary card);
-override it to show other details. Set `account.layout: false` to opt out of the account layout and render the
-pages in your own.
+`AccountIdentity` is shown next to the user in the overview's summary card (by default a role badge for anyone who is
+not a plain `user`); override it to show other details, such as a member or ID badge. To replace the whole layout,
+define `app/layouts/account.vue` in your app: it wins over the module's, and the account pages still render in it. Set
+`account.settings.layout: false` to remove the layout entirely and render the pages in whatever layout the app picks.
+
+## Page headings
+
+The layout renders no heading: every page renders its own, as the first child of its root
+`<div class="flex flex-col gap-4">`. The module's pages use `AccountHeader`, a `PageHeading` whose title is the page's
+`title` meta, else the label of the `account` menu item the route belongs to; the description comes from the same
+item, and `#actions` is passed through (the API tokens page puts "Create API token" there). Pages other modules add
+under `/account` render a `PageHeading` with the same i18n keys as their menu item.

package/dist/module.d.mts

@@ -28,7 +28,9 @@ type ModuleOptions = {
     settings?: {
         /**
          * Renders `/account`, `/account/**` and the configured page paths in the `account` layout (the site layout with
-         * a left account navigation). `false` leaves the layout to the host. Defaults to `true`.
+         * a left account navigation). An `account` layout of the app (`app/layouts/account.vue`) or a layer replaces the
+         * module's and the area still renders in it. `false` registers no layout and sets no layout rule: the pages render
+         * in whatever layout the app picks. Defaults to `true`.
          */
         layout?: boolean;
         pages?: {

package/dist/module.json

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

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, hasNuxtModule, addImports, addLayout, addTypeTemplate, addRouteMiddleware, addPlugin, addComponentsDir } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, hasNuxtModule, addImports, addTypeTemplate, addRouteMiddleware, addPlugin, addComponentsDir } from '@nuxt/kit';
 import { registerModule, registerTailwindSource, registerLocales, resolvePagePath, addModulePages, defineVirtualRegistry, getBootstrapProviders, addOptionalMenuSource } from '@frigear-nu/module-kit/utils';
 
 const module$1 = defineNuxtModule({
@@ -68,7 +68,9 @@ const module$1 = defineNuxtModule({
     const outside = [indexPath, profilePath, securityPath, documentsPath, apiTokensPath].filter((path) => !!path && path !== "/account" && !path.startsWith("/account/"));
     const areaPatterns = prefixes.flatMap((prefix) => [`${prefix}/account`, `${prefix}/account/**`, ...outside.map((path) => `${prefix}${path}`)]);
     if (settings.layout !== false) {
-      addLayout({ src: resolver.resolve("./runtime/app/layouts/account.vue"), filename: "account.vue" }, "account");
+      nuxt.hook("app:resolve", (app) => {
+        app.layouts.account ||= { name: "account", file: resolver.resolve("./runtime/app/layouts/account.vue") };
+      });
       const rules = nuxt.options.routeRules ||= {};
       for (const pattern of areaPatterns) {
         rules[pattern] = { appLayout: "account", ...rules[pattern] };

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

@@ -1,11 +1,11 @@
-import type { ApiTokenScope, CreatedApiToken } from '../../utils/api-tokens.js';
+import type { ApiTokenScope } from '../../utils/api-tokens.js';
 type __VLS_Props = {
     scopes: ApiTokenScope[];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: (created: false | CreatedApiToken) => any;
+    close: (created: false | import("@frigear-nu/auth").AuthCreatedTokenDto) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClose?: ((created: false | CreatedApiToken) => any) | undefined;
+    onClose?: ((created: false | import("@frigear-nu/auth").AuthCreatedTokenDto) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,5 +1,6 @@
 <script setup>
 import { z } from "zod";
+import { authApi } from "@frigear-nu/auth/api";
 const props = defineProps({
   scopes: { type: Array, required: true }
 });
@@ -25,7 +26,7 @@ const schema = z.object({
 const state = reactive({ name: "", scopes: [], expiresInDays: 90 });
 async function onSubmit(event) {
   const created = await run(
-    () => $fetch("/api/auth/tokens", {
+    () => $fetch(authApi.me.tokens, {
       method: "POST",
       body: { name: event.data.name, scopes: event.data.scopes, expiresInDays: event.data.expiresInDays || null }
     }),

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

@@ -1,11 +1,11 @@
-import type { ApiTokenScope, CreatedApiToken } from '../../utils/api-tokens.js';
+import type { ApiTokenScope } from '../../utils/api-tokens.js';
 type __VLS_Props = {
     scopes: ApiTokenScope[];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: (created: false | CreatedApiToken) => any;
+    close: (created: false | import("@frigear-nu/auth").AuthCreatedTokenDto) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClose?: ((created: false | CreatedApiToken) => any) | undefined;
+    onClose?: ((created: false | import("@frigear-nu/auth").AuthCreatedTokenDto) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    email?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (result: false | {
+        verificationRequired: boolean;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((result: false | {
+        verificationRequired: boolean;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,54 @@
+<script setup>
+import { z } from "zod";
+const props = defineProps({
+  email: { type: String, required: false }
+});
+const emit = defineEmits(["close"]);
+const t = useModuleT("account.profile");
+const { changeEmailAddress } = useAccount();
+const { busy, run } = useAction();
+const schema = z.object({
+  email: z.email(t("email.invalid", "Enter a valid email address."))
+});
+const state = reactive({ email: "" });
+async function onSubmit(event) {
+  const result = await run(
+    () => changeEmailAddress({ email: event.data.email }),
+    { error: t("email.change.error", "Could not change your email address.") }
+  );
+  if (!result) return;
+  emit("close", { verificationRequired: result.verificationRequired === true });
+}
+</script>
+
+<template>
+  <FormSlideover
+    form-id="account-change-email"
+    :title="t('email.change.title', 'Change email')"
+    :description="props.email ? t('email.change.current', 'Your address is now {email}.', { email: props.email }) : void 0"
+    :submit-label="t('email.change.title', 'Change email')"
+    :loading="busy"
+    @close="emit('close', false)"
+  >
+    <UForm
+      id="account-change-email"
+      :schema="schema"
+      :state="state"
+      class="flex flex-col gap-4"
+      @submit="onSubmit"
+    >
+      <UFormField
+        name="email"
+        :label="t('email.change.label', 'New email')"
+        required
+      >
+        <UInput
+          v-model="state.email"
+          type="email"
+          autocomplete="email"
+          class="w-full"
+        />
+      </UFormField>
+    </UForm>
+  </FormSlideover>
+</template>

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

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    email?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (result: false | {
+        verificationRequired: boolean;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((result: false | {
+        verificationRequired: boolean;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,3 +1,12 @@
-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>;
+type __VLS_Slots = {
+    actions?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,4 +1,5 @@
 <script setup>
+defineSlots();
 const t = useModuleT("account");
 const route = useRoute();
 const { current } = await useAccountNav();
@@ -12,12 +13,14 @@ useHead({ title });
 
 <template>
   <PageHeading
-    v-if="route.meta.heading !== false"
     :title="title"
     :description="description"
   >
-    <template #actions>
-      <AccountHeaderRight />
+    <template
+      v-if="$slots.actions"
+      #actions
+    >
+      <slot name="actions" />
     </template>
   </PageHeading>
 </template>

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

@@ -1,3 +1,12 @@
-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>;
+type __VLS_Slots = {
+    actions?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,13 @@
+<script setup>
+const { user } = useUserSession();
+const role = computed(() => user.value?.role || void 0);
+const roleLabel = computed(() => role.value && role.value !== "user" ? role.value.charAt(0).toUpperCase() + role.value.slice(1) : void 0);
+</script>
+
+<template>
+  <UBadge
+    v-if="roleLabel"
+    variant="subtle"
+    :label="roleLabel"
+  />
+</template>

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

@@ -8,6 +8,7 @@ const { user } = useUserSession();
 const route = useRoute();
 const colorMode = useColorMode();
 const { localize, strip } = useLocaleLink();
+const showError = useErrorToast();
 const dropdown = typeof useMenu === "function" ? useMenu("account.dropdown").data : ref([]);
 const sessionUser = computed(() => user.value);
 const displayName = computed(() => sessionUser.value?.name || sessionUser.value?.email || String(sessionUser.value?.id ?? t("title", "Account")));
@@ -19,13 +20,22 @@ const isHere = (to) => {
   const current = strip(route.path);
   return current === target || target !== "/" && current.startsWith(`${target}/`);
 };
-const toItem = (item) => ({
+const runAction = async (item) => {
+  try {
+    await $fetch(item.to, { method: "POST" });
+  } catch (error) {
+    showError(error);
+    return;
+  }
+  await navigateTo(localize("/"), { external: true, replace: true });
+};
+const toItem = (item) => item.method && item.to ? { label: item.label, icon: item.icon, onSelect: () => runAction(item) } : {
   label: item.label,
   icon: item.icon,
   to: item.to && !item.external ? localize(item.to) : item.to,
   external: item.external,
   replace: item.external
-});
+};
 const appearance = (label, value, icon) => ({
   label,
   icon,
@@ -39,7 +49,7 @@ const items = computed(() => {
   const visible = (dropdown.value ?? []).filter((item) => {
     const roles = item.meta?.roles;
     if (roles?.length && !(role.value && roles.includes(role.value))) return false;
-    return !item.to || item.external || !isHere(item.to);
+    return !item.to || item.external || item.method || !isHere(item.to);
   });
   const last = (item) => (item.order ?? 0) >= 99;
   return [

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

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    userName: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (added: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((added: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,60 @@
+<script setup>
+import { z } from "zod";
+const props = defineProps({
+  userName: { type: String, required: true }
+});
+const emit = defineEmits(["close"]);
+const t = useModuleT("account.security.passkeys");
+const showError = useErrorToast();
+const passkeys = usePasskeys();
+const busy = ref(false);
+const schema = z.object({
+  name: z.string().trim().max(100)
+});
+const state = reactive({ name: "" });
+async function onSubmit(event) {
+  busy.value = true;
+  try {
+    await passkeys.registerPasskey(props.userName, event.data.name);
+    emit("close", true);
+  } catch (e) {
+    if (e?.name !== "NotAllowedError") {
+      showError(e, t("registerError", "Could not register the passkey."));
+    }
+  } finally {
+    busy.value = false;
+  }
+}
+</script>
+
+<template>
+  <FormSlideover
+    form-id="account-passkey"
+    :title="t('add', 'Add passkey')"
+    :description="t('description', 'Sign in with your fingerprint, face or device PIN instead of a password.')"
+    :submit-label="t('add', 'Add passkey')"
+    :loading="busy"
+    @close="emit('close', false)"
+  >
+    <UForm
+      id="account-passkey"
+      :schema="schema"
+      :state="state"
+      class="flex flex-col gap-4"
+      @submit="onSubmit"
+    >
+      <UFormField
+        name="name"
+        :label="t('name.label', 'Passkey name')"
+        :description="t('name.description', 'Optional. Helps you tell your passkeys apart.')"
+      >
+        <UInput
+          v-model="state.name"
+          :placeholder="t('name.placeholder', 'Name, e.g. MacBook')"
+          maxlength="100"
+          class="w-full"
+        />
+      </UFormField>
+    </UForm>
+  </FormSlideover>
+</template>

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

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    userName: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (added: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((added: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/composables/useAccount.d.ts

@@ -1,7 +1,7 @@
 export declare const useAccount: () => {
     updateProfileDetails: (payload: {
-        name: string;
-        avatar?: string;
+        name?: string;
+        avatar?: string | null;
     }) => Promise<unknown>;
     changeEmailAddress: (payload: {
         email: string;

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

@@ -1,3 +1,4 @@
+import { usersApi } from "@frigear-nu/users/api";
 export const useAccount = () => {
   const pending = ref(false);
   const error = ref(null);
@@ -17,19 +18,19 @@ export const useAccount = () => {
   }
   function updateProfileDetails(payload) {
     return withRequest(
-      () => $fetch("/api/users/me/profile", { method: "POST", body: payload }),
+      () => $fetch(usersApi.me.profile, { method: "PATCH", body: payload }),
       "Failed to update your profile."
     );
   }
   function changeEmailAddress(payload) {
     return withRequest(
-      () => $fetch("/api/users/me/change-email", { method: "POST", body: payload }),
+      () => $fetch(usersApi.me.email, { method: "PUT", body: payload }),
       "Failed to change your email address."
     );
   }
   function changePassword(payload) {
     return withRequest(
-      () => $fetch("/api/users/me/change-password", { method: "POST", body: payload }),
+      () => $fetch(usersApi.me.password, { method: "PUT", body: payload }),
       "Failed to change your password."
     );
   }

package/dist/runtime/app/layouts/account.d.vue.ts

@@ -1,6 +1,6 @@
-declare var __VLS_47: {};
+declare var __VLS_29: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_47) => any;
+    default?: (props: typeof __VLS_29) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/app/layouts/account.vue

@@ -3,7 +3,7 @@ defineOptions({ name: "AccountLayout" });
 const siteLayout = "default";
 const t = useModuleT("account");
 const { user } = useUserSession();
-const { links } = await useAccountNav();
+const { links, current } = await useAccountNav();
 const profile = computed(() => {
   const value = user.value;
   const name = value?.name || value?.email || t("title", "Account");
@@ -13,20 +13,22 @@ const profile = computed(() => {
     avatar: { src: value?.avatar || void 0, alt: name }
   };
 });
+useHead({ title: () => current.value?.label ?? t("title", "Account") }, { tagPriority: "low" });
 </script>
 
 <template>
   <NuxtLayout :name="siteLayout">
     <UContainer>
-      <UPage>
-        <template #left>
-          <UPageAside>
+      <div class="mx-auto w-full max-w-5xl py-8 lg:grid lg:grid-cols-[14rem_minmax(0,1fr)] lg:gap-10 lg:py-10">
+        <aside class="hidden lg:block">
+          <div class="sticky top-[calc(var(--ui-header-height,4rem)+2.5rem)] flex flex-col gap-4">
             <UUser
               v-if="user"
               :name="profile.name"
               :description="profile.email"
               :avatar="profile.avatar"
-              class="mb-4 px-2.5"
+              size="sm"
+              class="px-2.5"
               :ui="{ name: 'truncate', description: 'truncate' }"
             />
             <UNavigationMenu
@@ -35,20 +37,20 @@ const profile = computed(() => {
               highlight
               :aria-label="t('nav.label', 'Account navigation')"
             />
-          </UPageAside>
-        </template>
+          </div>
+        </aside>
 
-        <div class="flex min-w-0 flex-col gap-6 py-8">
+        <!-- `self-start`: a stretched grid item has a definite height, which `h-full` cards inside a page would fill. -->
+        <div class="flex min-w-0 flex-col gap-4 lg:self-start">
           <PageSectionSwitcher
             v-if="links.length"
-            class="lg:hidden"
+            class="mb-2 lg:hidden"
             :items="links"
             :label="t('nav.label', 'Account navigation')"
           />
-          <AccountHeader />
           <slot />
         </div>
-      </UPage>
+      </div>
     </UContainer>
   </NuxtLayout>
 </template>

package/dist/runtime/app/layouts/account.vue.d.ts

@@ -1,6 +1,6 @@
-declare var __VLS_47: {};
+declare var __VLS_29: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_47) => any;
+    default?: (props: typeof __VLS_29) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,4 +1,5 @@
 <script setup>
+import { authApi } from "@frigear-nu/auth/api";
 import AccountApiTokenSlideover from "../components/Account/AccountApiTokenSlideover.vue";
 defineOptions({ name: "AccountApiTokensPage" });
 const t = useModuleT("account.apiTokens");
@@ -9,8 +10,8 @@ const format = useFormat();
 const { copy } = useCopyToClipboard();
 const overlay = useOverlay();
 const createSlideover = overlay.create(AccountApiTokenSlideover, { destroyOnClose: true });
-const { data: tokens, refresh, status } = await useCachedFetch("/api/auth/tokens", { key: "account-api-tokens", ttl: 6e4 });
-const { data: scopes } = await useCachedFetch("/api/auth/scopes", { key: "account-api-token-scopes" });
+const { data: tokens, refresh, status } = await useCachedFetch(authApi.me.tokens, { key: "account-api-tokens", ttl: 6e4 });
+const { data: scopes } = await useCachedFetch(authApi.scopes, { key: "account-api-token-scopes" });
 const revealed = ref(null);
 async function onCreate() {
   const created = await createSlideover.open({ scopes: scopes.value ?? [] });
@@ -29,7 +30,7 @@ async function onRevoke(token) {
   });
   if (!confirmed) return;
   try {
-    await $fetch(`/api/auth/tokens/${token.id}`, { method: "DELETE" });
+    await $fetch(authApi.me.token(token.id), { method: "DELETE" });
     toast.add({ title: t("revoked", "Token revoked."), description: token.name, color: "success", icon: "i-lucide-check" });
     await refresh();
   } catch (e) {
@@ -45,9 +46,7 @@ const columns = computed(() => [
   { accessorKey: "expiresAt", header: t("list.expiresColumn", "Expires") },
   { id: "actions", meta: { class: { td: "w-px text-right" } } }
 ]);
-function tokenStatusColor(status2) {
-  return statusColor(status2, { ok: "success", expired: "warning" });
-}
+const tokenStatusColors = { ok: "success", expired: "warning" };
 const mcpEnabled = useRuntimeConfig().public.users?.mcp === true;
 const activeConnect = ref("claude");
 const mcpUrl = `${useRequestURL().origin}/mcp`;
@@ -76,6 +75,16 @@ const activeTab = computed(() => connectTabs.value.find((tab) => tab.value === a
 
 <template>
   <div class="flex flex-col gap-4">
+    <AccountHeader>
+      <template #actions>
+        <UButton
+          icon="i-lucide-plus"
+          :label="t('create.submit', 'Create API token')"
+          @click="onCreate"
+        />
+      </template>
+    </AccountHeader>
+
     <UAlert
       v-if="revealed"
       color="success"
@@ -107,25 +116,11 @@ const activeTab = computed(() => connectTabs.value.find((tab) => tab.value === a
     </UAlert>
 
     <TableCard
-      :loading="status === 'pending' && !tokens?.length"
-      :refreshing="status === 'pending' && !!tokens?.length"
+      :title="t('list.title', 'Your tokens')"
+      :description="t('list.description', 'Tokens let scripts and tools such as MCP clients act as you. Revoke one to stop it working immediately.')"
+      :loading="status === 'pending' && !tokens"
+      :refreshing="status === 'pending' && !!tokens"
     >
-      <template #header>
-        <div class="min-w-0">
-          <h2 class="text-sm font-semibold text-highlighted">
-            {{ t("list.title", "Your tokens") }}
-          </h2>
-          <p class="text-sm text-muted">
-            {{ t("list.description", "Tokens let scripts and tools such as MCP clients act as you. Revoke one to stop it working immediately.") }}
-          </p>
-        </div>
-        <UButton
-          icon="i-lucide-plus"
-          :label="t('create.submit', 'Create API token')"
-          @click="onCreate"
-        />
-      </template>
-
       <UTable
         :data="tokens ?? []"
         :columns="columns"
@@ -137,11 +132,11 @@ const activeTab = computed(() => connectTabs.value.find((tab) => tab.value === a
             :description="`${row.original.prefix}\u2026${row.original.last4}`"
           >
             <template #badges>
-              <UBadge
-                :color="tokenStatusColor(row.original.status)"
-                variant="subtle"
-                size="sm"
+              <StatusBadge
+                :status="row.original.status"
                 :label="t(`status.${row.original.status}`, row.original.status)"
+                :colors="tokenStatusColors"
+                size="sm"
               />
             </template>
           </TableIdentity>