@frigear-nu/account 0.0.6 → 0.0.8

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
 
@@ -69,3 +69,17 @@ await updateProfileDetails({ name: 'Ada Lovelace' })
 await changeEmailAddress({ email: 'ada@example.com' })
 await changePassword({ currentPassword: 'old', newPassword: 'new-password', confirmNewPassword: 'new-password' })
 ```
+
+## Translations
+
+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).
+
+## Frigear ID (QR code)
+
+`settings.pages.idCode` (`true` or a path, default `/account/id`) adds a page with a QR code (`urn:frigear:id:<jwt>`)
+that refreshes every 60 seconds, plus an account menu tile. `GET /api/account/id-code` returns the RS256-signed JWT
+(60s lifetime, `sub` = user id). It signs with `runtimeConfig.account.idCode.privateKey`
+(`NUXT_ACCOUNT_ID_CODE_PRIVATE_KEY`) or, when unset, the `@frigear-nu/oauth-server` key (`runtimeConfig.oauthServer`),
+so scanners can verify it against `/.well-known/jwks.json`. Without a key the endpoint responds `501`.
+`AccountIdentificationCodeDialog` wraps the same content in a modal.

package/dist/module.d.mts

@@ -1,11 +1,29 @@
 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;
+        idCode?: string;
+        apiTokens?: string;
     };
+    documents: AccountDocument[];
 };
 type ModuleOptions = {
     settings?: {
@@ -13,7 +31,11 @@ type ModuleOptions = {
             index?: string | boolean;
             profile?: string | boolean;
             security?: string | boolean;
+            documents?: string | boolean;
+            idCode?: string | boolean;
+            apiTokens?: string | boolean;
         };
+        documents?: AccountDocument[];
     };
 };
 
@@ -21,6 +43,15 @@ declare module 'nuxt/schema' {
     interface NuxtConfig {
         account?: ModuleOptions;
     }
+    interface RuntimeConfig {
+        account?: {
+            idCode?: {
+                privateKey?: string;
+                keyId?: string;
+                issuer?: string;
+            };
+        };
+    }
     interface PublicRuntimeConfig {
         account?: PublicModuleOptions;
     }

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@frigear-nu/account",
   "configKey": "account",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "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 { 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,59 +26,67 @@ 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")
+      route: "/api/account/id-code",
+      method: "get",
+      handler: resolver.resolve("./runtime/server/routes/account/id-code.get")
     });
+    const existingAccount = nuxt.options.runtimeConfig.account;
+    nuxt.options.runtimeConfig.account = {
+      idCode: { privateKey: "", keyId: "", issuer: "", ...existingAccount?.idCode }
+    };
     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 idCodePath = resolvePagePath(settings.pages?.idCode, "/account/id");
+    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, idCode: idCodePath, apiTokens: apiTokensPath },
+      documents: settings.documents ?? []
     };
-    if (indexPath || profilePath || securityPath) {
+    if (indexPath || profilePath || securityPath || documentsPath || idCodePath || 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(idCodePath, "account-id-code", "./runtime/app/pages/id-code.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, idCodePath, 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}`
-    });
   }
 });
 

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,59 @@
+<script setup>
+const t = useModuleT("account");
+const route = useRoute();
+const { user } = useUserSession();
+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>
+        <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 class="mt-1 flex justify-end">
+            <UBadge variant="soft">
+              Frigear ID: <code>{{ user.id }}</code>
+            </UBadge>
+          </div>
+        </div>
+      </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/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/components/Account/IdentificationCode.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/IdentificationCode.vue

@@ -0,0 +1,82 @@
+<script setup>
+import { renderSVG } from "uqr";
+import { useIntervalFn } from "@vueuse/core";
+const t = useModuleT("account.identificationCode");
+const { user } = useUserSession();
+const { data, refresh, status, error } = useFetch("/api/account/id-code", { server: false });
+const remaining = ref(0);
+watch(data, (value) => {
+  remaining.value = value?.expiresIn ?? 0;
+}, { immediate: true });
+const refreshing = computed(() => status.value === "pending");
+useIntervalFn(() => {
+  if (!data.value || refreshing.value) return;
+  if (remaining.value <= 1) {
+    remaining.value = 0;
+    refresh();
+    return;
+  }
+  remaining.value -= 1;
+}, 1e3);
+const svg = computed(() => data.value ? renderSVG(data.value.payload, { ecc: "L", border: 1 }) : "");
+const role = computed(() => user.value?.role);
+const membership = computed(() => user.value?.membership);
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-3">
+    <UAlert
+      v-if="error"
+      color="error"
+      variant="subtle"
+      icon="i-lucide-triangle-alert"
+      :title="t('error', 'Could not create your Frigear ID.')"
+    />
+    <template v-else-if="svg">
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div
+        class="size-60 rounded-md bg-white p-2 [&>svg]:size-full"
+        v-html="svg"
+      />
+      <UBadge
+        color="warning"
+        class="text-xl font-bold"
+      >
+        {{ t("expiresIn", "Refreshes in {time}s").replace("{time}", String(remaining)) }}
+      </UBadge>
+      <div class="flex flex-wrap justify-center gap-2">
+        <UBadge
+          v-if="user"
+          size="lg"
+        >
+          Frigear ID: {{ user.id }}
+        </UBadge>
+        <UBadge
+          v-if="membership"
+          size="lg"
+        >
+          {{ membership }}
+        </UBadge>
+        <UBadge
+          v-if="role"
+          size="lg"
+          color="success"
+        >
+          {{ t("role", "Role") }}: {{ role }}
+        </UBadge>
+      </div>
+    </template>
+    <UIcon
+      v-else
+      name="i-lucide-refresh-cw"
+      class="size-6 animate-spin"
+    />
+    <UButton
+      icon="i-lucide-refresh-cw"
+      variant="subtle"
+      :loading="refreshing"
+      :label="t('refresh', 'Refresh')"
+      @click="refresh()"
+    />
+  </div>
+</template>

package/dist/runtime/app/components/Account/IdentificationCode.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/IdentificationCodeDialog.d.vue.ts

@@ -0,0 +1,20 @@
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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/IdentificationCodeDialog.vue

@@ -0,0 +1,16 @@
+<script setup>
+const t = useModuleT("account.identificationCode");
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+</script>
+
+<template>
+  <UModal
+    v-model:open="open"
+    :title="t('title', 'Frigear ID')"
+  >
+    <slot />
+    <template #body>
+      <AccountIdentificationCode v-if="open" />
+    </template>
+  </UModal>
+</template>

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

@@ -0,0 +1,20 @@
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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/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;