@merkaly/nuxt 0.9.1 → 0.9.3

package/README.md

@@ -22,6 +22,19 @@ A Nuxt module that provides Auth0 authentication integration and API utilities f
 
 Install the module to your Nuxt application:
 
+## Authentication and tenant boot
+
+Every surface can sign in; `auth0.requiresAuth` only decides whether pages require a login (globally, or per page with `definePageMeta({ requiresAuth: true })`). `auth0.requiresTenant` decides whether API calls require a tenant (`global: true` adapters bypass it).
+
+On boot the module restores an existing session (user and token) and then runs the app hooks in order, `merkaly:tenant` then `merkaly:auth`, with that user (or none). `MKApp` shows its `loading` slot until both finish; if a hook throws, it shows the `error` slot instead. The auth callback page renders right away so it can complete the login.
+
+| Surface | Login | Tenant | Boot |
+|---|---|---|---|
+| admin | required | required | `merkaly:tenant` creates the session and sets the tenant; without a session the auth middleware redirects to login. |
+| dashboard | required | not used | `merkaly:auth` loads the session; without a session it redirects to login. |
+| store | optional | required | `merkaly:tenant` resolves the store from the host (public); a signed-in buyer is restored too; protected pages (account, checkout) ask for login. |
+| www | optional | not used | No hooks; anonymous or signed-in. |
+
 ## Money formatting
 
 Money in Merkaly is stored as **integer cents**. `MKFormatMoney`, `MKInputMoney`,

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.14.0"
   },
-  "version": "0.9.1",
+  "version": "0.9.3",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/input/InputAddress.d.vue.ts

@@ -81,8 +81,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>, {
     mode: PlaceTypes;
     disabled: boolean;
-    placeholder: string;
     countries: string[];
+    placeholder: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/input/InputAddress.vue.d.ts

@@ -81,8 +81,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>, {
     mode: PlaceTypes;
     disabled: boolean;
-    placeholder: string;
     countries: string[];
+    placeholder: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/input/InputDateRange.vue

@@ -1,18 +1,20 @@
 <script setup>
 import { computed, onBeforeMount, ref } from "vue";
+import { useI18n } from "vue-i18n";
 import FormatIcon from "../format/FormatIcon.vue";
 const props = defineProps({
   disabled: { type: Boolean, default: false },
   preset: { type: String, default: () => "today" }
 });
 const model = defineModel({ type: Object });
+const { locale, t } = useI18n({ useScope: "local" });
 const presets = [
-  { key: "today", label: "Today", icon: "calendar-day" },
-  { key: "yesterday", label: "Yesterday", icon: "calendar-minus" },
-  { key: "last7days", label: "Last 7 days", icon: "calendar-week" },
-  { key: "last30days", label: "Last 30 days", icon: "calendar" },
-  { key: "thisMonth", label: "This month", icon: "calendar-check" },
-  { key: "lastMonth", label: "Last month", icon: "calendar-xmark" }
+  { key: "today", icon: "calendar-day" },
+  { key: "yesterday", icon: "calendar-minus" },
+  { key: "last7days", icon: "calendar-week" },
+  { key: "last30days", icon: "calendar" },
+  { key: "thisMonth", icon: "calendar-check" },
+  { key: "lastMonth", icon: "calendar-xmark" }
 ];
 const selectedPreset = ref(model.value?.preset || props.preset);
 const getDateRange = (key) => {
@@ -50,16 +52,17 @@ const getDateRange = (key) => {
   }
 };
 const currentPresetLabel = computed(() => {
-  return presets.find((p) => p.key === selectedPreset.value)?.label || "Select";
+  const preset = presets.find((p) => p.key === selectedPreset.value);
+  return preset ? t(preset.key) : t("select");
 });
 const formatDateRange = computed(() => {
   const range = getDateRange(selectedPreset.value);
   const options = { day: "numeric", month: "short" };
   if (range.start.getTime() === range.end.getTime()) {
-    return range.start.toLocaleDateString("en", { ...options, year: "numeric" });
+    return range.start.toLocaleDateString(locale.value, { ...options, year: "numeric" });
   }
-  const startStr = range.start.toLocaleDateString("en", options);
-  const endStr = range.end.toLocaleDateString("en", { ...options, year: "numeric" });
+  const startStr = range.start.toLocaleDateString(locale.value, options);
+  const endStr = range.end.toLocaleDateString(locale.value, { ...options, year: "numeric" });
   return `${startStr} - ${endStr}`;
 });
 const selectPreset = (preset) => {
@@ -78,14 +81,14 @@ onBeforeMount(() => selectPreset(props.preset));
     </template>
 
     <div class="px-3 py-2 border-bottom">
-      <span class="fs-7 fw-bold text-gray-800">Date Range</span>
+      <span class="fs-7 fw-bold text-gray-800" v-text="t('title')" />
     </div>
 
     <template v-for="item in presets" :key="item.key">
       <BDropdownItem :active="selectedPreset === item.key" @click="selectPreset(item.key)">
         <div class="d-flex align-items-center gap-2">
           <FormatIcon :name="item.icon" class="text-gray-500" />
-          <span v-text="item.label" />
+          <span v-text="t(item.key)" />
         </div>
       </BDropdownItem>
     </template>
@@ -95,8 +98,35 @@ onBeforeMount(() => selectPreset(props.preset));
     <BDropdownItem disabled>
       <div class="d-flex align-items-center gap-2 text-muted">
         <FormatIcon name="calendar-plus" />
-        <span>Custom range (coming soon)</span>
+        <span v-text="t('custom')" />
       </div>
     </BDropdownItem>
   </BDropdown>
 </template>
+
+<i18n lang="json">
+{
+  "en": {
+    "title": "Date range",
+    "select": "Select",
+    "today": "Today",
+    "yesterday": "Yesterday",
+    "last7days": "Last 7 days",
+    "last30days": "Last 30 days",
+    "thisMonth": "This month",
+    "lastMonth": "Last month",
+    "custom": "Custom range (coming soon)"
+  },
+  "pt": {
+    "title": "Período",
+    "select": "Selecionar",
+    "today": "Hoje",
+    "yesterday": "Ontem",
+    "last7days": "Últimos 7 dias",
+    "last30days": "Últimos 30 dias",
+    "thisMonth": "Este mês",
+    "lastMonth": "Mês passado",
+    "custom": "Período personalizado (em breve)"
+  }
+}
+</i18n>

package/dist/runtime/composables/useAuth.js

@@ -10,8 +10,13 @@ export const useAuth = () => {
   const clear = () => error.value = void 0;
   const logout = () => nuxtApp.$auth0.logout();
   const retry = async () => {
+    isLoading.value = true;
     clear();
-    await nuxtApp.callHook("merkaly:auth:retry");
+    try {
+      await nuxtApp.callHook("merkaly:auth:retry");
+    } finally {
+      isLoading.value = false;
+    }
   };
   const fail = async (reason) => {
     error.value = reason;

package/dist/runtime/middleware/auth.js

@@ -1,10 +1,11 @@
-import { defineNuxtRouteMiddleware, navigateTo, useRuntimeConfig } from "#app";
+import { defineNuxtRouteMiddleware, navigateTo, useRuntimeConfig, useState } from "#app";
 import { useAuth } from "../composables/useAuth.js";
 export default defineNuxtRouteMiddleware((to) => {
   const { isLoading, isAuthenticated } = useAuth();
+  const isStarting = useState("auth:starting", () => false);
   const { public: { merkaly } } = useRuntimeConfig();
   const callbackPath = URL.canParse(merkaly.auth0.callbackUrl) ? new URL(merkaly.auth0.callbackUrl).pathname : merkaly.auth0.callbackUrl;
-  if (isLoading.value) {
+  if (isLoading.value && !isStarting.value) {
     return;
   }
   if (to.path === callbackPath) {

package/dist/runtime/plugins/auth0.client.js

@@ -1,5 +1,5 @@
 import { createAuth0Client } from "@auth0/auth0-spa-js";
-import { defineNuxtPlugin, useRuntimeConfig, useNuxtApp } from "#imports";
+import { defineNuxtPlugin, useRuntimeConfig, useNuxtApp, useState } from "#imports";
 import { navigateTo } from "#app";
 import { defu } from "defu";
 import { useAuth } from "../composables/useAuth.js";
@@ -13,7 +13,8 @@ export default defineNuxtPlugin(async ({ callHook, hook }) => {
     domain: $config.merkaly.auth0.domain,
     useRefreshTokens: true
   });
-  const { isLoading, user, token, fail } = useAuth();
+  const { error, isLoading, user, token, fail } = useAuth();
+  const isStarting = useState("auth:starting", () => false);
   const self0 = Object.assign(Object.create(Object.getPrototypeOf(auth0)), auth0);
   let tokenError;
   auth0.getUser = () => self0.getUser().then((result) => user.value = result).catch((reason) => console.error("[Auth0] getUser failed", reason));
@@ -26,8 +27,14 @@ export default defineNuxtPlugin(async ({ callHook, hook }) => {
   });
   const resolveIdentity = () => Promise.allSettled([auth0.getUser(), auth0.getTokenSilently()]);
   const initTenantContext = async () => {
-    await callHook("merkaly:tenant", user.value);
-    await callHook("merkaly:auth", user.value);
+    try {
+      await callHook("merkaly:tenant", user.value);
+      await callHook("merkaly:auth", user.value);
+    } catch (reason) {
+      if (!error.value) {
+        await fail({ message: reason?.message || String(reason), stage: "tenant" });
+      }
+    }
   };
   const startSession = async () => {
     if (user.value && !token.value && tokenError && !NO_SESSION_ERRORS.includes(tokenError.error)) {
@@ -81,10 +88,19 @@ export default defineNuxtPlugin(async ({ callHook, hook }) => {
     return await $api("/identities", { body, global: true, method: "POST" });
   };
   const isAuthCallback = window.location.pathname === callbackPath;
-  if (!isAuthCallback) {
-    await resolveIdentity();
-    hook("app:created", startSession);
+  if (isAuthCallback) {
+    isLoading.value = false;
+    return { provide: { auth0 } };
   }
-  isLoading.value = false;
+  await resolveIdentity();
+  isStarting.value = true;
+  hook("app:created", async () => {
+    try {
+      await startSession();
+    } finally {
+      isStarting.value = false;
+      isLoading.value = false;
+    }
+  });
   return { provide: { auth0 } };
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@merkaly/nuxt",
-  "version": "0.9.1",
+  "version": "0.9.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/merkaly-io/nuxt.git"
@@ -54,7 +54,7 @@
     "filesize": "^11.0.17",
     "gsap": "^3.15.0",
     "notivue": "^2.4.5",
-    "nuxt": "^4.6.2",
+    "nuxt": "^4.6.3",
     "reflect-metadata": "^0.2.2",
     "sass": "^1.106.1",
     "typescript": "~5.9.3",