@frigear-nu/account 0.1.1 → 0.1.3

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 useFetch("/api/auth/tokens", { key: "account-api-tokens", default: () => [] });
-const { data: scopes } = await useFetch("/api/auth/scopes", { key: "account-api-token-scopes", default: () => [] });
+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>

package/dist/runtime/app/pages/documents.vue

@@ -10,26 +10,41 @@ const documents = computed(() => visibleDocuments(useRuntimeConfig().public.acco
 
 <template>
   <div class="flex flex-col gap-4">
-    <SectionCard>
-      <UPageGrid v-if="documents.length">
-        <UPageCard
+    <AccountHeader />
+
+    <SectionCard flush>
+      <ul
+        v-if="documents.length"
+        class="divide-y divide-default"
+      >
+        <li
           v-for="document in documents"
           :key="document.id"
-          :title="documentLabel(document, locale)"
-          :icon="document.icon ?? 'i-lucide-file'"
+          class="flex items-center gap-3 px-4 py-3"
         >
+          <UIcon
+            :name="document.icon ?? 'i-lucide-file'"
+            class="size-5 shrink-0 text-muted"
+          />
+          <p class="min-w-0 flex-1 truncate text-sm font-medium text-highlighted">
+            {{ documentLabel(document, locale) }}
+          </p>
           <UButton
             download
             external
             :to="document.path"
+            color="neutral"
+            variant="outline"
             icon="i-lucide-download"
             :label="t('download', 'Download')"
+            :aria-label="t('downloadNamed', 'Download {name}', { name: documentLabel(document, locale) })"
           />
-        </UPageCard>
-      </UPageGrid>
+        </li>
+      </ul>
       <UEmpty
         v-else
         variant="naked"
+        icon="i-lucide-files"
         :title="t('empty', 'No documents for you yet.')"
       />
     </SectionCard>

package/dist/runtime/app/pages/index.vue

@@ -1,6 +1,5 @@
 <script setup>
 defineOptions({ name: "AccountIndexPage" });
-definePageMeta({ heading: false });
 const t = useModuleT("account");
 const { user } = useUserSession();
 const { localize } = useLocaleLink();
@@ -18,10 +17,7 @@ const profile = computed(() => {
 
 <template>
   <div class="flex flex-col gap-4">
-    <PageHeading
-      :title="t('overview.title', 'Account')"
-      :description="t('overview.description', 'Your details and everything that belongs to your account.')"
-    />
+    <AccountHeader />
 
     <SectionCard>
       <div class="flex flex-wrap items-center justify-between gap-4">
@@ -32,7 +28,7 @@ const profile = computed(() => {
           size="lg"
           :ui="{ name: 'truncate', description: 'truncate' }"
         />
-        <AccountHeaderRight />
+        <AccountIdentity />
       </div>
     </SectionCard>
 
@@ -41,6 +37,7 @@ const profile = computed(() => {
       v-if="widgetArea"
       name="account.overview"
       :context="{ user }"
+      grid-class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"
     />
 
     <ListCard

package/dist/runtime/app/pages/profile.vue

@@ -1,14 +1,19 @@
 <script setup>
 import { z } from "zod";
+import AccountChangeEmailSlideover from "../components/Account/AccountChangeEmailSlideover.vue";
 defineOptions({ name: "AccountProfilePage" });
 const t = useModuleT("account.profile");
 const toast = useToast();
 const route = useRoute();
 const { user } = useUserSession();
-const { updateProfileDetails, changeEmailAddress } = useAccount();
+const { updateProfileDetails } = useAccount();
 const schema = z.object({
   name: z.string().trim().min(1, t("name.required", "Please enter your name.")),
-  avatar: z.union([z.literal(""), z.url(t("avatar.invalid", "Enter a valid URL."))]).optional()
+  // The server's rule: an http(s) URL of at most 2048 characters (empty clears the avatar).
+  avatar: z.union([
+    z.literal(""),
+    z.url({ protocol: /^https?$/, message: t("avatar.invalid", "Enter a valid URL.") }).max(2048, t("avatar.invalid", "Enter a valid URL."))
+  ]).optional()
 });
 const state = reactive({
   name: user.value?.name ?? "",
@@ -28,32 +33,32 @@ const dirty = computed(() => state.name !== saved.value.name || state.avatar !==
 const profileAction = useAction();
 function onSubmitProfile(event) {
   return profileAction.run(
-    () => updateProfileDetails({ name: event.data.name, avatar: event.data.avatar || void 0 }),
+    () => updateProfileDetails({ name: event.data.name, avatar: event.data.avatar || null }),
     { success: t("saved", "Profile updated"), error: t("saveFailed", "Could not update your profile.") }
   );
 }
-const emailModalOpen = ref(false);
-const newEmail = ref("");
 const emailVerificationSent = ref(false);
 const emailChanged = computed(() => route.query["email-changed"] === "1");
 const emailChangeFailed = computed(() => route.query.error === "email-change");
-const emailSchema = z.object({ email: z.email(t("email.invalid", "Enter a valid email address.")) });
-const emailAction = useAction();
-async function onSubmitEmail() {
-  const result = await emailAction.run(
-    () => changeEmailAddress({ email: newEmail.value }),
-    { error: t("email.change.error", "Could not change your email address.") }
-  );
+const overlay = useOverlay();
+const emailSlideover = overlay.create(AccountChangeEmailSlideover, { destroyOnClose: true });
+async function onChangeEmail() {
+  const result = await emailSlideover.open({ email: user.value?.email ?? void 0 });
   if (!result) return;
-  emailVerificationSent.value = result.verificationRequired === true;
-  emailModalOpen.value = false;
-  newEmail.value = "";
-  toast.add({ title: result.verificationRequired ? t("email.change.sent.title", "Check your inbox") : t("email.change.done", "Your email address was changed."), color: "success" });
+  emailVerificationSent.value = result.verificationRequired;
+  toast.add({
+    title: result.verificationRequired ? t("email.change.sent.title", "Check your inbox") : t("email.change.done", "Your email address was changed."),
+    description: result.verificationRequired ? void 0 : user.value?.email ?? void 0,
+    color: "success",
+    icon: "i-lucide-check"
+  });
 }
 </script>
 
 <template>
   <div class="flex flex-col gap-4">
+    <AccountHeader />
+
     <UAlert
       v-if="emailChanged"
       color="success"
@@ -74,52 +79,51 @@ async function onSubmitEmail() {
     />
 
     <SectionCard
-      :title="t('title', 'Profile')"
-      :description="t('description', 'Change your information.')"
+      :title="t('details.title', 'Name and avatar')"
+      :description="t('details.description', 'How you appear to others.')"
     >
       <UForm
         id="account-profile"
         :schema="schema"
         :state="state"
-        class="flex flex-col gap-4"
+        class="flex flex-col divide-y divide-default"
         @submit="onSubmitProfile"
       >
-        <UFormField
+        <FormRow
           name="name"
           :label="t('name.label', 'Name')"
           :description="t('name.description', 'Your full name.')"
           required
-          class="flex items-start justify-between gap-4 max-sm:flex-col"
         >
           <UInput
             v-model="state.name"
             autocomplete="name"
+            class="w-full sm:max-w-sm"
           />
-        </UFormField>
-        <USeparator />
-        <UFormField
+        </FormRow>
+        <FormRow
           name="avatar"
           :label="t('avatar.label', 'Avatar')"
           :description="t('avatar.description', 'Link to a square image.')"
-          class="flex items-start justify-between gap-4 max-sm:flex-col"
         >
-          <div class="flex items-center gap-3">
+          <div class="flex items-center gap-3 sm:max-w-sm">
             <UAvatar
               :src="state.avatar || void 0"
               :alt="state.name"
-              size="xl"
+              size="lg"
             />
             <UInput
               v-model="state.avatar"
               type="url"
               placeholder="https://"
               :aria-label="t('avatar.url', 'Avatar URL')"
+              class="min-w-0 flex-1"
             />
           </div>
-        </UFormField>
+        </FormRow>
       </UForm>
       <template #footer>
-        <div class="flex justify-end">
+        <div class="flex justify-end gap-2">
           <UButton
             type="submit"
             form="account-profile"
@@ -131,71 +135,28 @@ async function onSubmitEmail() {
       </template>
     </SectionCard>
 
-    <SectionCard
-      :title="t('email.label', 'Email')"
-      :description="t('email.description', 'Your email address.')"
-    >
-      <template #actions>
-        <UButton
-          color="neutral"
-          variant="outline"
-          icon="i-lucide-pencil"
-          :label="t('email.change.title', 'Change email')"
-          @click="emailModalOpen = true"
-        />
-      </template>
-      <UInput
-        :model-value="user?.email ?? ''"
-        type="email"
-        readonly
-        disabled
-        class="w-full sm:max-w-xs"
-        :aria-label="t('email.label', 'Email')"
-      />
-    </SectionCard>
-
-    <UModal
-      v-model:open="emailModalOpen"
-      :title="t('email.change.title', 'Change email')"
-    >
-      <template #body>
-        <UForm
-          id="account-change-email"
-          :schema="emailSchema"
-          :state="{ email: newEmail }"
-          class="flex flex-col gap-4"
-          @submit="onSubmitEmail"
-        >
-          <UFormField
-            name="email"
-            :label="t('email.change.label', 'New e-mail')"
-            required
-          >
-            <UInput
-              v-model="newEmail"
-              type="email"
-              autocomplete="email"
-              class="w-full"
-            />
-          </UFormField>
-        </UForm>
-      </template>
-      <template #footer>
-        <div class="flex w-full justify-end gap-2">
+    <SectionCard :title="t('email.label', 'Email')">
+      <FormRow
+        :label="t('email.address', 'Address')"
+        :description="t('email.description', 'Where we send messages and how you sign in.')"
+      >
+        <div class="flex flex-wrap items-center gap-2 sm:max-w-lg">
+          <UInput
+            :model-value="user?.email ?? ''"
+            type="email"
+            readonly
+            disabled
+            class="min-w-48 flex-1"
+          />
           <UButton
             color="neutral"
             variant="outline"
-            :label="t('cancel', 'Cancel')"
-            @click="emailModalOpen = false"
-          />
-          <UButton
-            type="submit"
-            form="account-change-email"
-            :loading="emailAction.busy.value"
+            icon="i-lucide-pencil"
             :label="t('email.change.title', 'Change email')"
+            @click="onChangeEmail"
           />
         </div>
-      </template>
-    </UModal>
+      </FormRow>
+    </SectionCard>
   </div>
 </template>

package/dist/runtime/app/pages/security.vue

@@ -1,5 +1,7 @@
 <script setup>
 import { z } from "zod";
+import { authApi } from "@frigear-nu/auth/api";
+import AccountPasskeySlideover from "../components/Account/AccountPasskeySlideover.vue";
 defineOptions({ name: "AccountSecurityPage" });
 const t = useModuleT("account.security");
 const toast = useToast();
@@ -33,35 +35,25 @@ async function onSubmitPassword(event) {
   passwordState.newPassword = "";
   passwordState.confirmNewPassword = "";
 }
-const passkeyList = ref([]);
-const passkeyName = ref("");
-const passkeyPending = ref(false);
-const passkeysLoading = ref(false);
-async function loadPasskeys() {
-  if (!passkeys) return;
-  passkeysLoading.value = true;
-  try {
-    passkeyList.value = await passkeys.listPasskeys();
-  } catch (e) {
-    showError(e, t("passkeys.loadError", "Could not load your passkeys."));
-  } finally {
-    passkeysLoading.value = false;
-  }
-}
-async function onRegisterPasskey() {
-  passkeyPending.value = true;
-  try {
-    await passkeys?.registerPasskey(user.value?.email ?? "", passkeyName.value);
-    passkeyName.value = "";
-    toast.add({ title: t("passkeys.registered", "Passkey added."), color: "success", icon: "i-lucide-check" });
-    await loadPasskeys();
-  } catch (e) {
-    if (e?.name !== "NotAllowedError") {
-      showError(e, t("passkeys.registerError", "Could not register the passkey."));
-    }
-  } finally {
-    passkeyPending.value = false;
-  }
+const {
+  data: passkeyData,
+  error: passkeysError,
+  loading: passkeysLoading,
+  refresh: loadPasskeys
+} = await useCachedFetch(authApi.me.passkeys, {
+  key: () => `account:passkeys:${user.value?.id ?? "anonymous"}`,
+  ttl: 0,
+  immediate: webAuthnEnabled,
+  watch: false
+});
+const passkeyList = computed(() => passkeyData.value ?? []);
+const overlay = useOverlay();
+const passkeySlideover = overlay.create(AccountPasskeySlideover, { destroyOnClose: true });
+async function onAddPasskey() {
+  const added = await passkeySlideover.open({ userName: user.value?.email ?? "" });
+  if (!added) return;
+  toast.add({ title: t("passkeys.registered", "Passkey added."), color: "success", icon: "i-lucide-check" });
+  await loadPasskeys();
 }
 const passkeyLabel = (passkey) => passkey.name || t("passkeys.unnamed", "Passkey");
 async function onRemovePasskey(passkey) {
@@ -83,11 +75,12 @@ async function onRemovePasskey(passkey) {
 const passkeyMenu = (passkey) => [[
   { label: t("passkeys.remove", "Remove passkey"), icon: "i-lucide-trash-2", color: "error", onSelect: () => onRemovePasskey(passkey) }
 ]];
-onMounted(loadPasskeys);
 </script>
 
 <template>
   <div class="flex flex-col gap-4">
+    <AccountHeader />
+
     <SectionCard
       :title="t('password.title', 'Password')"
       :description="t('password.description', 'Change your password.')"
@@ -96,10 +89,10 @@ onMounted(loadPasskeys);
         id="account-change-password"
         :schema="passwordSchema"
         :state="passwordState"
-        class="flex flex-col gap-4"
+        class="flex flex-col divide-y divide-default"
         @submit="onSubmitPassword"
       >
-        <UFormField
+        <FormRow
           :label="t('changePassword.current.label', 'Current password')"
           name="currentPassword"
           required
@@ -110,8 +103,8 @@ onMounted(loadPasskeys);
             autocomplete="current-password"
             class="w-full sm:max-w-sm"
           />
-        </UFormField>
-        <UFormField
+        </FormRow>
+        <FormRow
           :label="t('changePassword.new.label', 'New password')"
           name="newPassword"
           required
@@ -122,8 +115,8 @@ onMounted(loadPasskeys);
             autocomplete="new-password"
             class="w-full sm:max-w-sm"
           />
-        </UFormField>
-        <UFormField
+        </FormRow>
+        <FormRow
           :label="t('changePassword.confirm.label', 'Confirm new password')"
           name="confirmNewPassword"
           required
@@ -134,10 +127,10 @@ onMounted(loadPasskeys);
             autocomplete="new-password"
             class="w-full sm:max-w-sm"
           />
-        </UFormField>
+        </FormRow>
       </UForm>
       <template #footer>
-        <div class="flex justify-end">
+        <div class="flex justify-end gap-2">
           <UButton
             type="submit"
             form="account-change-password"
@@ -152,9 +145,16 @@ onMounted(loadPasskeys);
       v-if="passkeys?.isEnabled.value"
       :title="t('passkeys.title', 'Passkeys')"
       :description="t('passkeys.description', 'Sign in with your fingerprint, face or device PIN instead of a password.')"
-      :loading="passkeysLoading && !passkeyList.length"
+      :loading="passkeysLoading"
       flush
     >
+      <template #actions>
+        <UButton
+          icon="i-lucide-plus"
+          :label="t('passkeys.add', 'Add passkey')"
+          @click="onAddPasskey"
+        />
+      </template>
       <ul
         v-if="passkeyList.length"
         class="divide-y divide-default"
@@ -162,21 +162,19 @@ onMounted(loadPasskeys);
         <li
           v-for="passkey in passkeyList"
           :key="passkey.id"
-          class="flex items-center justify-between gap-3 px-4 py-3"
+          class="flex items-center gap-3 px-4 py-3"
         >
-          <div class="flex min-w-0 items-center gap-3">
-            <UIcon
-              name="i-lucide-key-round"
-              class="size-5 shrink-0 text-muted"
-            />
-            <div class="min-w-0">
-              <p class="truncate text-sm font-medium text-highlighted">
-                {{ passkeyLabel(passkey) }}
-              </p>
-              <p class="text-sm text-muted">
-                {{ t("passkeys.created", "Added {date}", { date: format.date(passkey.createdAt) }) }}
-              </p>
-            </div>
+          <UIcon
+            name="i-lucide-key-round"
+            class="size-5 shrink-0 text-muted"
+          />
+          <div class="min-w-0 flex-1">
+            <p class="truncate text-sm font-medium text-highlighted">
+              {{ passkeyLabel(passkey) }}
+            </p>
+            <p class="text-sm text-muted">
+              {{ t("passkeys.created", "Added {date}", { date: format.date(passkey.createdAt) }) }}
+            </p>
           </div>
           <RowMenu
             :items="passkeyMenu(passkey)"
@@ -184,33 +182,21 @@ onMounted(loadPasskeys);
           />
         </li>
       </ul>
+      <UEmpty
+        v-else-if="passkeysError"
+        variant="naked"
+        icon="i-lucide-circle-alert"
+        :title="t('passkeys.loadError', 'Could not load your passkeys.')"
+        :description="errorMessage(passkeysError, '')"
+        :actions="[{ label: t('passkeys.tryAgain', 'Try again'), icon: 'i-lucide-rotate-ccw', color: 'neutral', variant: 'outline', onClick: () => loadPasskeys() }]"
+      />
       <UEmpty
         v-else
         variant="naked"
         icon="i-lucide-key-round"
         :title="t('passkeys.empty', 'You have not added any passkeys yet.')"
+        :actions="[{ label: t('passkeys.add', 'Add passkey'), icon: 'i-lucide-plus', onClick: onAddPasskey }]"
       />
-
-      <template #footer>
-        <form
-          class="flex flex-col gap-2 sm:flex-row sm:justify-end"
-          @submit.prevent="onRegisterPasskey"
-        >
-          <UInput
-            v-model="passkeyName"
-            :placeholder="t('passkeys.name.placeholder', 'Name, e.g. MacBook')"
-            :aria-label="t('passkeys.name.label', 'Passkey name')"
-            maxlength="100"
-            class="w-full sm:max-w-xs"
-          />
-          <UButton
-            type="submit"
-            icon="i-lucide-plus"
-            :loading="passkeyPending"
-            :label="t('passkeys.register', 'Register a passkey')"
-          />
-        </form>
-      </template>
     </SectionCard>
   </div>
 </template>

package/dist/runtime/app/plugins/bootstrap.client.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/app/plugins/bootstrap.client.js

@@ -0,0 +1,4 @@
+export default defineNuxtPlugin(() => {
+  const { user } = useUserSession();
+  watch(() => user.value?.id ?? null, () => resetBootstrap("account"));
+});

package/dist/runtime/app/utils/api-tokens.d.ts

@@ -1,19 +1,8 @@
-export interface ApiToken {
-    id: string;
-    name: string;
-    prefix: string;
-    last4: string;
-    scopes: string[];
-    expiresAt: string | null;
-    lastUsedAt: string | null;
-    createdAt: string;
-    status: 'ok' | 'revoked' | 'expired';
-}
+import type { AuthCreatedTokenDto, AuthTokenDto } from '@frigear-nu/auth/utils';
+export type ApiToken = AuthTokenDto;
 export interface ApiTokenScope {
     name: string;
     description?: string;
 }
 /** The response to creating a token: the only time its plaintext `token` exists. */
-export type CreatedApiToken = ApiToken & {
-    token: string;
-};
+export type CreatedApiToken = AuthCreatedTokenDto;