@7365admin1/layer-common 3.1.4-staging.55 → 3.1.4-staging.56

package/.changeset/camera-wall-gated-endpoint.md

@@ -0,0 +1,47 @@
+---
+"@7365admin1/layer-common": patch
+---
+
+Draw the camera wall from the gated wall endpoint, and show the server's own
+reason on a tile.
+
+`CameraWall` fetched its cameras from `GET /api/site-cameras` - the Settings
+panel's paginated CRUD list, which took its site from an optional query
+parameter and checked nothing about the caller. Any signed-in user from any
+organisation could read every camera in the estate through it, `host` and
+`username` included.
+
+It now calls `GET /api/site-cameras/site/:siteId/wall`, which already exists,
+which the React Native monitoring app was built against, and which is
+authorised server-side: the caller must be a member of the site, of its owning
+organisation, or work for an organisation actively engaged to serve it. That
+endpoint also returns `type: "ip"` cameras only and each camera's capability
+descriptor, so a wall cannot be handed an ANPR unit and a tile can explain
+itself.
+
+Two consequences worth stating:
+
+- **The pager is gone.** The wall endpoint returns the site's cameras in one
+  answer. Paging a video wall was an artefact of borrowing the CRUD list.
+- **A tile now prefers the server's `unavailableReason`** over the reason it
+  used to work out itself. The server knows things the browser cannot - chiefly
+  "No recorder is configured for this camera's relay", which is the true answer
+  for every camera in the estate until the API host is configured, and which the
+  wall used to replace with its own guess. Offline still beats everything, since
+  it explains every tile at once.
+
+No permission gate was invented here. Each application still gates its own menu
+entry; this component draws what it is given, and the server decides.
+
+Two smaller things in the same area:
+
+- **A refused wall now says so.** The catch-all message told every failure to
+  "check your connection", which sends somebody who simply may not see that
+  site off to debug their wifi. A 401/403/404 now reads "You do not have access
+  to this site's cameras." The server answers "not yours" and "does not exist"
+  identically, so this wording does not distinguish them either.
+- **`middleware/member.ts` is removed.** It read a cookie into an unused
+  variable and did nothing else - a file named like a membership gate that was
+  not one. No page in any of the eleven web apps referenced it. The real check
+  is `plugins/secure-member.client.ts`, driven by `memberOnly` page meta, which
+  is untouched.

package/components/CameraWall.vue

@@ -40,16 +40,6 @@
 
       <div class="vms__spacer" />
 
-      <div v-if="pages > 1" class="vms__pager">
-        <button type="button" class="vms__tool" :disabled="page === 1" @click="page--">
-          Prev
-        </button>
-        <span class="vms__range">{{ pageRange || `Page ${page} of ${pages}` }}</span>
-        <button type="button" class="vms__tool" :disabled="page >= pages" @click="page++">
-          Next
-        </button>
-      </div>
-
       <button
         type="button"
         class="vms__tool"
@@ -225,12 +215,9 @@ const props = defineProps<{ site: string }>();
 
 /* ---------------------------------------------------------------- the data */
 
-const { getAllSiteCameras } = useSiteSettings();
+const { getSiteWall } = useSiteSettings();
 
 const cameras = ref<TWallCamera[]>([]);
-const page = ref(1);
-const pages = ref(0);
-const pageRange = ref("");
 const loading = ref(true);
 const failed = ref("");
 
@@ -238,32 +225,32 @@ async function load() {
   loading.value = true;
   failed.value = "";
   try {
-    const res = await getAllSiteCameras({
-      site: props.site,
-      // The server is asked for IP cameras only, and `wallCameras` filters
-      // again on the way in: an ANPR unit belongs to visitor and vehicle
-      // management and must never appear on a monitoring wall.
-      type: "ip",
-      page: page.value,
-    });
-    cameras.value = wallCameras(res?.items);
-    pages.value = Number(res?.pages) || 0;
-    pageRange.value = String(res?.pageRange || "");
-  } catch {
-    // The reason an API call failed is rarely something an operator can act on,
-    // and the raw message is often a stack trace. Say what is true and offer
-    // the one useful action.
+    // The site's wall, from the endpoint built for it. `wallCameras` still
+    // filters on the way in — the server already returns `type: "ip"` only, and
+    // an ANPR unit must never reach a monitoring wall even if that ever changes.
+    const res = await getSiteWall(props.site);
+    cameras.value = wallCameras(res?.cameras);
+  } catch (error: any) {
+    // The raw message is often a stack trace and rarely something an operator
+    // can act on — but "you may not see this site" and "your connection
+    // dropped" are genuinely different problems with different next steps, and
+    // telling a refused caller to check their connection sends them off to
+    // debug their wifi. The server answers a site that is not the caller's the
+    // same way as a site that does not exist, on purpose, so this wording does
+    // not distinguish them either.
     cameras.value = [];
-    failed.value = "The list of cameras did not load. Check your connection and try again.";
+    const status = Number(error?.statusCode ?? error?.response?.status ?? 0);
+    failed.value =
+      status === 401 || status === 403 || status === 404
+        ? "You do not have access to this site's cameras."
+        : "The list of cameras did not load. Check your connection and try again.";
   } finally {
     loading.value = false;
   }
 }
 
 onMounted(load);
-watch(page, load);
 watch(() => props.site, () => {
-  page.value = 1;
   selectedIds.value = [];
   load();
 });
@@ -433,18 +420,6 @@ async function toggleFullscreen() {
   color: var(--vms-text-dim);
 }
 
-.vms__pager {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.vms__range {
-  font-size: 12px;
-  color: var(--vms-text-dim);
-  white-space: nowrap;
-}
-
 .vms__body {
   display: flex;
   min-height: 0;

package/composables/useSiteSettings.ts

@@ -99,6 +99,33 @@ export default function () {
     });
   }
 
+  /**
+   * The monitoring wall for one site.
+   *
+   * A different endpoint from `getAllSiteCameras`, and the difference is the
+   * point. That one is the Settings panel's paginated CRUD list; this one is
+   * purpose-built for a wall and is what the React Native app already uses:
+   *
+   * - it is **site-scoped and authorised server-side** — the caller must be a
+   *   member of the site, of its owning organisation, or work for an
+   *   organisation engaged to serve it;
+   * - it returns `type: "ip"` cameras only, so an ANPR unit can never land on a
+   *   monitoring wall;
+   * - it returns each camera's **capability descriptor** and the server's own
+   *   `unavailableReason`, so a tile explains itself instead of showing a black
+   *   rectangle;
+   * - it never returns a credential, and it contacts no device.
+   *
+   * Unpaginated by design: a wall shows a site's cameras, and paging them was
+   * an artefact of borrowing the CRUD list.
+   */
+  async function getSiteWall(siteId: string) {
+    return await useNuxtApp().$api<Record<string, any>>(
+      `/api/site-cameras/site/${siteId}/wall`,
+      { method: "GET" }
+    );
+  }
+
   async function updateSiteInformation(
     siteId: string,
     payload: { bgImage: string; description: string; docs: { id: string; name: string }[] }
@@ -175,6 +202,7 @@ export default function () {
     updateSite,
     addCamera,
     getAllSiteCameras,
+    getSiteWall,
     setSiteGuardPosts,
     updateSiteCamera,
     deleteSiteCameraById,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.1.4-staging.55",
+  "version": "3.1.4-staging.56",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {

package/utils/camera-wall.test.ts

@@ -119,3 +119,31 @@ test("a server that says live video is unsupported is believed", () => {
   assert.equal(v.showPlayer, false);
   assert.equal(v.detail, "This camera is not active.");
 });
+
+/* ------------------------------------------- the server's reason wins */
+
+test("the server's own refusal is shown verbatim, not replaced with a guess", () => {
+  // The one that matters: the browser cannot know this, and until the API host
+  // is configured it is the true answer for every camera in the estate.
+  const noRecorder = "No recorder is configured for this camera's relay.";
+  const view = tileView(ip({ unavailableReason: noRecorder }));
+  assert.equal(view.detail, noRecorder);
+  assert.equal(view.state, "unavailable");
+  assert.equal(view.showPlayer, false);
+});
+
+test("the server's reason beats the reasons the wall could work out itself", () => {
+  const reason = "This camera has no address configured.";
+  assert.equal(tileView(ip({ status: "inactive", unavailableReason: reason })).detail, reason);
+});
+
+test("an absent or blank reason changes nothing", () => {
+  assert.equal(tileView(ip({ unavailableReason: null })).state, "connecting");
+  assert.equal(tileView(ip({ unavailableReason: "   " })).state, "connecting");
+  assert.equal(tileView(ip()).state, "connecting");
+});
+
+test("being offline still explains every tile at once, ahead of the server's reason", () => {
+  const view = tileView(ip({ unavailableReason: "Something server-side." }), { online: false });
+  assert.equal(view.state, "offline");
+});

package/utils/camera-wall.ts

@@ -51,6 +51,17 @@ export type TWallCamera = {
   type?: string;
   status?: string;
   capabilities?: Record<string, TWallCapability>;
+  /**
+   * The server's own sentence for why this camera cannot show a picture, or
+   * `null`/absent when it can. Answered from the record before anything is
+   * requested, so it costs no device traffic.
+   *
+   * **Preferred over anything worked out here.** The server knows things the
+   * browser cannot — that no recorder is configured for this camera's relay, for
+   * instance, which is the true answer for every camera until the API host is
+   * configured. Replacing it with our own wording hides that.
+   */
+  unavailableReason?: string | null;
 };
 
 /* -------------------------------------------------------------------------- */
@@ -251,6 +262,13 @@ export function tileView(
   if (!camera) return dead("unavailable", "No camera in this position.");
   if (!online)
     return dead("offline", "This browser has no internet connection.");
+  // The server's refusal wins over anything reconstructed here. It covers the
+  // same two cases below AND the ones only it can know — chiefly "no recorder is
+  // configured for this camera's relay", which is the honest answer for every
+  // camera until the API host is configured, and which used to be replaced by
+  // our own guess.
+  const reason = camera.unavailableReason?.trim();
+  if (reason) return dead("unavailable", reason);
   if (camera.status && camera.status !== "active")
     return dead("unavailable", "This camera is not active.");
   if (!camera.host) return dead("unavailable", "This camera has no address configured.");

package/middleware/member.ts

@@ -1,4 +0,0 @@
-export default defineNuxtRouteMiddleware(() => {
-  if (import.meta.server) return;
-  const adminMember = useCookie("admin-member").value ?? "";
-});