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

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/components/HidIntercomManagement.vue

@@ -386,54 +386,28 @@
         <v-card-text class="web-phone-body">
           <div class="web-phone-settings">
             <div class="web-phone-section-title">SIP Account</div>
-            <div class="call-label">WebSocket Server <span>*</span></div>
-            <v-text-field
-              v-model="webPhoneForm.webSocketServer"
-              placeholder="wss://sip.example.com/ws"
-              variant="outlined"
-              density="compact"
-              hide-details="auto"
-              class="call-input"
-              :disabled="webPhone.isRegistered.value"
-            />
-            <div class="call-label">SIP Address <span>*</span></div>
-            <v-text-field
-              v-model="webPhoneForm.aor"
-              placeholder="operator@example.com"
-              variant="outlined"
-              density="compact"
-              hide-details="auto"
-              class="call-input"
-              :disabled="webPhone.isRegistered.value"
-            />
-            <div class="form-two-col">
+            <div v-if="sipAccountLoading" class="sip-account-state">
+              <v-progress-circular indeterminate color="primary" size="30" width="3" />
+              <span>Preparing your private SIP account...</span>
+            </div>
+            <div v-else-if="sipAccountError" class="sip-account-state is-error">
+              <v-icon icon="mdi-alert-circle-outline" size="28" />
+              <span>{{ sipAccountError }}</span>
+              <v-btn
+                class="text-none sip-account-retry"
+                variant="outlined"
+                prepend-icon="mdi-refresh"
+                @click="loadSipAccount"
+              >
+                Retry
+              </v-btn>
+            </div>
+            <div v-else-if="sipAccount" class="sip-account-summary">
               <div>
-                <div class="call-label">Username <span>*</span></div>
-                <v-text-field
-                  v-model="webPhoneForm.username"
-                  placeholder="Username"
-                  variant="outlined"
-                  density="compact"
-                  hide-details="auto"
-                  class="call-input"
-                  :disabled="webPhone.isRegistered.value"
-                />
-              </div>
-              <div>
-                <div class="call-label">Password <span>*</span></div>
-                <v-text-field
-                  v-model="webPhoneForm.password"
-                  placeholder="Password"
-                  :type="showWebPhonePassword ? 'text' : 'password'"
-                  :append-inner-icon="showWebPhonePassword ? 'mdi-eye-off' : 'mdi-eye'"
-                  variant="outlined"
-                  density="compact"
-                  hide-details="auto"
-                  class="call-input"
-                  :disabled="webPhone.isRegistered.value"
-                  @click:append-inner="showWebPhonePassword = !showWebPhonePassword"
-                />
+                <span class="sip-account-label">Assigned extension</span>
+                <strong class="sip-account-extension">{{ sipAccount.extension }}</strong>
               </div>
+              <span class="sip-account-address">{{ sipAccount.sipAddress }}</span>
             </div>
             <div class="call-toggle-row web-video-toggle">
               <span>Enable video</span>
@@ -452,6 +426,7 @@
               variant="flat"
               prepend-icon="mdi-lan-connect"
               :loading="webPhoneConnecting"
+              :disabled="!sipAccount || sipAccountLoading"
               @click="connectWebPhone"
             >
               Connect Web Phone
@@ -613,6 +588,10 @@
 
 <script setup lang="ts">
 const props = defineProps({
+  org: {
+    type: String,
+    required: true,
+  },
   site: {
     type: String,
     required: true,
@@ -631,6 +610,19 @@ type ContactRow = {
   dialCode: string;
 };
 
+type SipAccount = {
+  orgId: string;
+  site: string;
+  userId: string;
+  extension: string;
+  username: string;
+  password: string;
+  sipAddress: string;
+  websocketUrl: string;
+  status: "active";
+  provisionedAt: string;
+};
+
 type DetailItem = {
   label: string;
   value?: string | number | boolean;
@@ -678,6 +670,7 @@ const {
   getIntercomStatus,
   makeIntercomCall,
   finalizeIntercomCall,
+  ensureSipAccount,
 } = useHidAmico();
 
 const activeTab = ref<IntercomTab>("intercom");
@@ -696,9 +689,11 @@ const limit = 20;
 const selectedRow = ref<IntercomRow | null>(null);
 const selectedContact = ref<ContactRow | null>(null);
 const showSipPassword = ref(false);
-const showWebPhonePassword = ref(false);
 const webPhoneConnecting = ref(false);
 const webPhoneActionLoading = ref(false);
+const sipAccount = ref<SipAccount | null>(null);
+const sipAccountLoading = ref(false);
+const sipAccountError = ref("");
 const localVideoEl = ref<HTMLVideoElement | null>(null);
 const remoteVideoEl = ref<HTMLVideoElement | null>(null);
 const remoteAudioEl = ref<HTMLAudioElement | null>(null);
@@ -787,10 +782,6 @@ const makeCallForm = reactive({
 });
 
 const webPhoneForm = reactive({
-  webSocketServer: "",
-  aor: "",
-  username: "",
-  password: "",
   destination: "",
   video: false,
 });
@@ -926,8 +917,14 @@ const webPhoneCallIcon = computed(() => {
 });
 
 watch(
-  () => props.site,
-  () => reload(),
+  [() => props.org, () => props.site],
+  () => {
+    if (webPhone.isRegistered.value) void webPhone.disconnect();
+    sipAccount.value = null;
+    sipAccountError.value = "";
+    webPhoneForm.destination = "";
+    void reload();
+  },
   { immediate: true },
 );
 
@@ -1178,16 +1175,42 @@ function openWebPhoneDialog(row?: IntercomRow) {
     }
   }
   webPhoneDialog.value = true;
+  if (!sipAccount.value && !sipAccountLoading.value) void loadSipAccount();
+}
+
+async function loadSipAccount() {
+  if (!props.org || !props.site) return;
+
+  sipAccountLoading.value = true;
+  sipAccountError.value = "";
+  try {
+    const response = await ensureSipAccount(props.site, props.org);
+    sipAccount.value = normalizeSipAccount(response);
+  } catch (error: unknown) {
+    sipAccount.value = null;
+    sipAccountError.value = getErrorMessage(error);
+  } finally {
+    sipAccountLoading.value = false;
+  }
 }
 
 async function connectWebPhone() {
+  const account = sipAccount.value;
+  if (!account) {
+    await loadSipAccount();
+    if (!sipAccount.value) return;
+  }
+
+  const activeAccount = sipAccount.value;
+  if (!activeAccount) return;
+
   webPhoneConnecting.value = true;
   try {
     await webPhone.connect({
-      webSocketServer: webPhoneForm.webSocketServer,
-      aor: webPhoneForm.aor,
-      authorizationUsername: webPhoneForm.username,
-      authorizationPassword: webPhoneForm.password,
+      webSocketServer: activeAccount.websocketUrl,
+      aor: activeAccount.sipAddress,
+      authorizationUsername: activeAccount.username,
+      authorizationPassword: activeAccount.password,
       displayName: "iService365 Web",
       video: webPhoneForm.video,
     }, {
@@ -1196,7 +1219,7 @@ async function connectWebPhone() {
       remoteAudio: remoteAudioEl.value,
     });
     showMessage("Web phone connected and ready to receive calls.", "success");
-  } catch (error: any) {
+  } catch (error: unknown) {
     showMessage(getErrorMessage(error), "error");
   } finally {
     webPhoneConnecting.value = false;
@@ -1492,8 +1515,42 @@ function showMessage(text: string, type: MessageType = "info") {
   message.type = type;
 }
 
-function getErrorMessage(error: any) {
-  return error?.data?.message || error?.response?._data?.message || error?.message || "HID intercom request failed.";
+function normalizeSipAccount(response: unknown): SipAccount {
+  const responseRecord = toRecord(response);
+  const payload = toRecord(responseRecord.data || responseRecord);
+  const requiredFields = ["extension", "username", "password", "sipAddress", "websocketUrl"] as const;
+
+  if (requiredFields.some((field) => !toText(payload[field]))) {
+    throw new Error("The SIP account response is incomplete. Please try again.");
+  }
+
+  return {
+    orgId: toText(payload.orgId, props.org),
+    site: toText(payload.site, props.site),
+    userId: toText(payload.userId),
+    extension: toText(payload.extension),
+    username: toText(payload.username),
+    password: toText(payload.password),
+    sipAddress: toText(payload.sipAddress),
+    websocketUrl: toText(payload.websocketUrl),
+    status: "active",
+    provisionedAt: toText(payload.provisionedAt),
+  };
+}
+
+function getErrorMessage(error: unknown) {
+  const errorRecord = toRecord(error);
+  const data = toRecord(errorRecord.data);
+  const response = toRecord(errorRecord.response);
+  const responseData = toRecord(response._data);
+  return toText(data.message)
+    || toText(responseData.message)
+    || toText(errorRecord.message)
+    || "HID intercom request failed.";
+}
+
+function toRecord(value: unknown): Record<string, unknown> {
+  return typeof value === "object" && value !== null ? value as Record<string, unknown> : {};
 }
 
 function toText(value: unknown, fallback = "") {
@@ -2226,6 +2283,73 @@ export default {
   font-weight: 700;
 }
 
+.sip-account-state {
+  display: flex;
+  min-height: 126px;
+  align-items: center;
+  justify-content: center;
+  padding: 18px;
+  border: 1px solid #dce2e8;
+  border-radius: 6px;
+  color: #5d6673;
+  flex-direction: column;
+  font-size: 12px;
+  gap: 12px;
+  text-align: center;
+}
+
+.sip-account-state.is-error {
+  border-color: #f0c7c7;
+  background: #fff8f8;
+  color: #a92222;
+}
+
+.sip-account-retry {
+  min-width: 104px;
+  border-color: #aeb8c2;
+  color: #344054;
+}
+
+.sip-account-summary {
+  display: grid;
+  min-height: 96px;
+  align-items: center;
+  padding: 16px;
+  border: 1px solid #dce2e8;
+  border-radius: 6px;
+  background: #f8fafc;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 18px;
+}
+
+.sip-account-summary > div {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.sip-account-label {
+  color: #667085;
+  font-size: 11px;
+}
+
+.sip-account-extension {
+  color: #0d1720;
+  font-size: 24px;
+  line-height: 1.1;
+}
+
+.sip-account-address {
+  max-width: 170px;
+  overflow: hidden;
+  color: #536273;
+  font-size: 11px;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .web-video-toggle {
   margin-top: 12px;
 }