@hostlink/nuxt-light 1.76.0 → 1.78.0

package/README.md

@@ -74,6 +74,14 @@ export default defineNuxtConfig({
           },
           business: {
             baseURL: 'https://business.example.com/graphql',
+            audience: 'business-api',
+          },
+          infra: {
+            baseURL: 'https://infra.example.com/graphql',
+            audience: 'infra-api',
+            healthURL: 'https://infra.example.com/health',
+            healthTimeout: 3000,
+            unavailableMessage: 'Connect to the company network or VPN.',
           },
         },
       },
@@ -94,6 +102,54 @@ clients: {
 }
 ```
 
+Clients with an `audience` obtain a short-lived audience token lazily from the
+default `auth` client. The token is cached by that client, refreshed shortly
+before expiry, and sent as a Bearer token automatically:
+
+```http
+Authorization: Bearer <audience-access-token>
+```
+
+Components and composables do not need to fetch or attach tokens themselves.
+For example, the first request made by this table automatically requests a
+`business-api` token from Auth:
+
+```vue
+<L-Table client="business" model-name="Order" />
+
+
+### Client availability and menus
+
+When a client has a `healthURL`, nuxt-light checks it on startup, when the
+browser comes back online, and when the tab becomes visible. Menu items can
+declare that they require that client:
+
+
+```yaml
+- label: Servers
+  icon: sym_o_dns
+  to: /Server
+  permission: server.list
+  requiresClient: infra
+```
+
+
+`L-Menu` keeps the authorized item visible, but disables it and shows the
+configured message while the client is checking or unavailable. Applications
+can use the same state for route guards or page notices:
+
+
+```ts
+const availability = useLightClientAvailability()
+
+if (!availability.isAvailable('infra')) {
+  // Show a company-network/VPN notice.
+}
+```
+
+Clients without a `healthURL` remain available and keep the previous behavior.
+```
+
 ### Backwards-compatible single endpoint
 
 The existing `public.apiBase` setting is still supported. When no named

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.76.0",
+  "version": "1.78.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/L/AppMain.vue

@@ -5,7 +5,7 @@ import { useQuasar, setCssVar, getCssVar } from "quasar";
 import { useI18n } from "vue-i18n";
 import { ref, computed, reactive, provide, watch, toRaw, onMounted } from "vue";
 import { useRuntimeConfig } from "nuxt/app";
-import { logout } from "@hostlink/light";
+import useLightClient from "../../composables/useLightClient";
 import { filterMenuItems } from "../../utils/filterMenuItems";
 const emits = defineEmits(["logout"]);
 defineProps({
@@ -249,7 +249,7 @@ if (route.fullPath == "/" && my.default_page) {
   router.push(my.default_page);
 }
 const onLogout = async () => {
-  await logout();
+  await useLightClient().auth.logout();
   emits("logout");
 };
 </script>

package/dist/runtime/components/L/Login.vue

@@ -2,7 +2,7 @@
 import { ref, reactive, onMounted, resolveComponent } from "vue";
 import { useQuasar } from "quasar";
 import { useHead } from "#imports";
-import { getApiClient, changeExpiredPassword, login } from "@hostlink/light";
+import { getApiClient } from "@hostlink/light";
 const api = getApiClient();
 import { useI18n } from "vue-i18n";
 const { t } = useI18n();
@@ -42,7 +42,7 @@ const passwordExpiredProcess = (username, password) => {
     persistent: true
   }).onOk(async (newPassword) => {
     try {
-      await changeExpiredPassword(username, password, newPassword);
+      await api.auth.changeExpiredPassword(username, password, newPassword);
       $q.notify({
         message: t("Your password has been changed successfully, please login again"),
         color: "positive",
@@ -81,7 +81,7 @@ const submit = async () => {
   if (await form1.value.validate()) {
     try {
       loading.value = true;
-      await login(data.username, data.password, data.code);
+      await api.auth.login(data.username, data.password, data.code);
       emits("login");
     } catch (e) {
       data.code = "";

package/dist/runtime/components/L/Menu.vue

@@ -2,8 +2,18 @@
 import { useRoute } from "vue-router";
 import { ref, computed } from "vue";
 import { useLight } from "#imports";
+import useLightClientAvailability from "../../composables/useLightClientAvailability";
 const props = defineProps(["value", "dense", "expandAll"]);
 const light = useLight();
+const availability = useLightClientAvailability();
+const requiredClient = (menu) => typeof menu?.requiresClient === "string" ? menu.requiresClient : void 0;
+const isMenuAvailable = (menu) => availability.isAvailable(requiredClient(menu));
+const availabilityMessage = (menu) => {
+  const client = requiredClient(menu);
+  if (!client) return "";
+  if (availability.isChecking(client)) return "Checking service availability\u2026";
+  return availability.message(client);
+};
 const isShowExpansionItem = (menu) => {
   if (menu.children && menu.children.length > 0) {
     return true;
@@ -48,6 +58,7 @@ const hasChildLink = () => {
         <template v-for="menu in value">
 
             <q-expansion-item :default-opened="expandAll || hasLink(menu)" :label="$t(menu.label)" :icon="menu.icon" :dense="dense"
+                :disable="!isMenuAvailable(menu)" :caption="!isMenuAvailable(menu) ? availabilityMessage(menu) : undefined"
                 v-if="isShowExpansionItem(menu)" :group="expandAll ? undefined : group">
                 <l-menu class="q-pl-md" :value="menu.children" :dense="dense" :expand-all="expandAll"></l-menu>
             </q-expansion-item>
@@ -56,20 +67,34 @@ const hasChildLink = () => {
                 <q-separator v-if="menu.type == 'separator'" :spaced="menu.spaced" />
                 <q-item-label header v-if="menu.type == 'header'">{{ menu.label }}</q-item-label>
                 <template v-if="menu.to && (menu.to.startsWith('http://') || menu.to.startsWith('https://'))">
-                    <q-item v-ripple :href="menu.to" v-if="!value.type" target="_blank">
+                    <q-item v-ripple :href="isMenuAvailable(menu) ? menu.to : undefined" v-if="!value.type" target="_blank"
+                        :disable="!isMenuAvailable(menu)">
                         <q-item-section avatar>
                             <q-icon :name="menu.icon"  />
                         </q-item-section>
-                        <q-item-section>{{ $t(menu.label) }}</q-item-section>
+                        <q-item-section>
+                            {{ $t(menu.label) }}
+                            <q-item-label v-if="!isMenuAvailable(menu)" caption>{{ availabilityMessage(menu) }}</q-item-label>
+                        </q-item-section>
+                        <q-item-section v-if="!isMenuAvailable(menu)" side>
+                            <q-icon name="sym_o_vpn_lock"><q-tooltip>{{ availabilityMessage(menu) }}</q-tooltip></q-icon>
+                        </q-item-section>
                     </q-item>
                 </template>
 
                 <template v-else>
-                    <q-item v-ripple :to="menu.to" v-if="!value.type">
+                    <q-item v-ripple :to="isMenuAvailable(menu) ? menu.to : undefined" v-if="!value.type"
+                        :disable="!isMenuAvailable(menu)">
                         <q-item-section avatar>
                             <q-icon :name="menu.icon"  />
                         </q-item-section>
-                        <q-item-section>{{ $t(menu.label) }}</q-item-section>
+                        <q-item-section>
+                            {{ $t(menu.label) }}
+                            <q-item-label v-if="!isMenuAvailable(menu)" caption>{{ availabilityMessage(menu) }}</q-item-label>
+                        </q-item-section>
+                        <q-item-section v-if="!isMenuAvailable(menu)" side>
+                            <q-icon name="sym_o_vpn_lock"><q-tooltip>{{ availabilityMessage(menu) }}</q-tooltip></q-icon>
+                        </q-item-section>
                     </q-item>
                 </template>
 

package/dist/runtime/composables/useLightClientAvailability.d.ts

@@ -0,0 +1,30 @@
+export type LightClientAvailabilityStatus = 'checking' | 'available' | 'unavailable';
+export interface LightClientAvailabilityOptions {
+    healthURL?: string;
+    healthTimeout?: number;
+    unavailableMessage?: string;
+}
+export interface LightClientAvailabilityState {
+    status: LightClientAvailabilityStatus;
+    message: string;
+    checkedAt: number | null;
+}
+export declare function registerLightClientAvailability(name: string, config?: LightClientAvailabilityOptions): void;
+export declare function clearLightClientAvailability(): void;
+export declare function checkLightClientAvailability(name: string): Promise<LightClientAvailabilityStatus>;
+export declare function checkAllLightClientAvailability(): Promise<void>;
+export default function useLightClientAvailability(): {
+    states: {
+        readonly [x: string]: {
+            readonly status: LightClientAvailabilityStatus;
+            readonly message: string;
+            readonly checkedAt: number | null;
+        };
+    };
+    status: (name?: string) => LightClientAvailabilityStatus;
+    isAvailable: (name?: string) => boolean;
+    isChecking: (name?: string) => boolean;
+    message: (name?: string) => string;
+    check: typeof checkLightClientAvailability;
+    checkAll: typeof checkAllLightClientAvailability;
+};

package/dist/runtime/composables/useLightClientAvailability.js

@@ -0,0 +1,88 @@
+import { reactive, readonly } from "vue";
+const DEFAULT_TIMEOUT = 3e3;
+const DEFAULT_MESSAGE = "This service is currently unavailable.";
+const options = /* @__PURE__ */ new Map();
+const checks = /* @__PURE__ */ new Map();
+const states = reactive({});
+export function registerLightClientAvailability(name, config = {}) {
+  options.set(name, config);
+  states[name] = {
+    status: config.healthURL ? "checking" : "available",
+    message: "",
+    checkedAt: null
+  };
+}
+export function clearLightClientAvailability() {
+  options.clear();
+  checks.clear();
+  Object.keys(states).forEach((name) => delete states[name]);
+}
+export async function checkLightClientAvailability(name) {
+  const config = options.get(name);
+  if (!config) {
+    states[name] = {
+      status: "unavailable",
+      message: `Light client "${name}" is not configured.`,
+      checkedAt: Date.now()
+    };
+    return "unavailable";
+  }
+  if (!config.healthURL) {
+    states[name] = { status: "available", message: "", checkedAt: Date.now() };
+    return "available";
+  }
+  const checkId = (checks.get(name) ?? 0) + 1;
+  checks.set(name, checkId);
+  states[name] = { ...states[name], status: "checking", message: "" };
+  const controller = new AbortController();
+  const timeout = globalThis.setTimeout(
+    () => controller.abort(),
+    Math.max(1, config.healthTimeout ?? DEFAULT_TIMEOUT)
+  );
+  try {
+    const response = await fetch(config.healthURL, {
+      method: "GET",
+      cache: "no-store",
+      credentials: "omit",
+      signal: controller.signal
+    });
+    const status = response.ok ? "available" : "unavailable";
+    if (checks.get(name) === checkId) {
+      states[name] = {
+        status,
+        message: response.ok ? "" : config.unavailableMessage ?? DEFAULT_MESSAGE,
+        checkedAt: Date.now()
+      };
+    }
+    return status;
+  } catch {
+    if (checks.get(name) === checkId) {
+      states[name] = {
+        status: "unavailable",
+        message: config.unavailableMessage ?? DEFAULT_MESSAGE,
+        checkedAt: Date.now()
+      };
+    }
+    return "unavailable";
+  } finally {
+    globalThis.clearTimeout(timeout);
+  }
+}
+export async function checkAllLightClientAvailability() {
+  await Promise.all([...options.keys()].map((name) => checkLightClientAvailability(name)));
+}
+export default function useLightClientAvailability() {
+  const status = (name) => {
+    if (!name) return "available";
+    return states[name]?.status ?? "unavailable";
+  };
+  return {
+    states: readonly(states),
+    status,
+    isAvailable: (name) => status(name) === "available",
+    isChecking: (name) => status(name) === "checking",
+    message: (name) => name ? states[name]?.message ?? `Light client "${name}" is not configured.` : "",
+    check: checkLightClientAvailability,
+    checkAll: checkAllLightClientAvailability
+  };
+}

package/dist/runtime/formkit/Form.vue

@@ -2,6 +2,7 @@
 import { useRouter, useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 import { computed, model } from "#imports";
+import { getFormClient } from "../utils/formClient";
 const route = useRoute();
 const router = useRouter();
 const $q = useQuasar();
@@ -24,6 +25,7 @@ if (props.context.attrs.onSubmitted) {
 }
 const modelName = props.context.modelName || (typeof route.name === "string" ? route.name.split("-")[0] : void 0);
 const id = props.context.modelId || route.params[typeof route.name === "string" ? route.name.split("-")[1] : "id"];
+const client = getFormClient(props.context);
 if (!props.context.onSubmit) {
   props.context.node.props.onSubmit = async function() {
     const removeUndefined = (obj) => {
@@ -51,7 +53,7 @@ if (!props.context.onSubmit) {
     const v = removeUndefined(props.context.value);
     try {
       if (id) {
-        if (await model(modelName).update(Number(id), v)) {
+        if (await model(modelName, client).update(Number(id), v)) {
           $q.notify({
             message: "Updated successfully",
             color: "positive",
@@ -62,7 +64,7 @@ if (!props.context.onSubmit) {
           }
         }
       } else {
-        if (await model(modelName).add(v)) {
+        if (await model(modelName, client).add(v)) {
           $q.notify({
             message: "Added successfully",
             color: "positive",

package/dist/runtime/formkit/index.js

@@ -117,7 +117,8 @@ export const createLightPlugin = () => {
             "layout",
             "bordered",
             "modelName",
-            "modelId"
+            "modelId",
+            "client"
           ],
           features: [forms, disablesChildren]
         });

package/dist/runtime/plugin.js

@@ -13,21 +13,50 @@ import { plugin, defaultConfig } from "@formkit/vue";
 import getApiBase from "./composables/getApiBase.js";
 import useLight from "./composables/useLight.js";
 import useLightClient, { clearLightClients, registerLightClient } from "./composables/useLightClient.js";
+import {
+  checkAllLightClientAvailability,
+  checkLightClientAvailability,
+  clearLightClientAvailability,
+  registerLightClientAvailability
+} from "./composables/useLightClientAvailability.js";
 import { zhTW } from "@formkit/i18n";
 export default defineNuxtPlugin((nuxtApp) => {
   const runtimeConfig = useRuntimeConfig();
   const lightConfig = runtimeConfig.public.light;
   const configuredClients = lightConfig?.clients ?? {};
   clearLightClients();
+  clearLightClientAvailability();
   for (const [name, config] of Object.entries(configuredClients)) {
     const baseURL = typeof config === "string" ? config : config.baseURL;
     if (!baseURL) throw new Error(`Light client "${name}" requires a baseURL`);
     registerLightClient(name, createClient(baseURL));
+    registerLightClientAvailability(name, typeof config === "string" ? {} : config);
   }
   if (!configuredClients.auth) {
     registerLightClient("auth", createClient(getApiBase()));
+    registerLightClientAvailability("auth");
+  }
+  const authClient = useLightClient();
+  setApiClient(authClient);
+  for (const [name, config] of Object.entries(configuredClients)) {
+    if (name === "auth" || typeof config === "string" || !config.audience) continue;
+    useLightClient(name).useAudience(authClient, config.audience);
+  }
+  if (import.meta.client) {
+    for (const name of Object.keys(configuredClients)) {
+      void checkLightClientAvailability(name);
+    }
+    const recheckClients = () => void checkAllLightClientAvailability();
+    const recheckVisibleClients = () => {
+      if (document.visibilityState === "visible") recheckClients();
+    };
+    window.addEventListener("online", recheckClients);
+    document.addEventListener("visibilitychange", recheckVisibleClients);
+    nuxtApp.hook("app:unmounted", () => {
+      window.removeEventListener("online", recheckClients);
+      document.removeEventListener("visibilitychange", recheckVisibleClients);
+    });
   }
-  setApiClient(useLightClient());
   defineModel("Permission", {}).setDataPath("app.listPermission");
   defineModel("SystemValue", {}).setDataPath("app.listSystemValue");
   defineModel("Config", {}).setDataPath("app.listConfig");

package/dist/runtime/utils/formClient.d.ts

@@ -0,0 +1,4 @@
+export interface FormClientContext {
+    client?: string;
+}
+export declare function getFormClient(context: FormClientContext): string;

package/dist/runtime/utils/formClient.js

@@ -0,0 +1,3 @@
+export function getFormClient(context) {
+  return context.client || "auth";
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.76.0",
+  "version": "1.78.0",
   "description": "HostLink Nuxt Light Framework",
   "repository": {
     "type": "git",
@@ -38,7 +38,7 @@
     "@formkit/inputs": "^2.1.2",
     "@formkit/validation": "^2.1.2",
     "@formkit/vue": "^2.1.2",
-    "@hostlink/light": "^3.3.1",
+    "@hostlink/light": "^3.4.0",
     "@nuxt/module-builder": "^1.0.1",
     "@quasar/extras": "^2.0.2",
     "@quasar/quasar-ui-qmarkdown": "^3.0.1",