@7365admin1/layer-common 4.35.1-staging.385 → 4.37.0

package/components/HidQrCodeConfiguration.vue

@@ -21,6 +21,33 @@
     <div class="config-body">
       <div class="section-label config-body__title">HID Configuration</div>
 
+      <div class="form-section identification-section">
+        <div class="section-label">Enable/disable reader identification method</div>
+        <p class="section-description">
+          Toggles multi-factor access methods, allowing users to authenticate via biometric, physical card, or credential inputs.
+        </p>
+        <div class="methods-grid">
+          <div
+            v-for="method in identificationMethodOptions"
+            :key="method.key"
+            class="method-control"
+          >
+            <span>{{ method.label }}</span>
+            <v-switch
+              v-model="form.identificationMethods[method.key]"
+              class="app-switch"
+              hide-details
+              density="compact"
+              :loading="savingSection === `method-${method.key}`"
+              :disabled="Boolean(savingSection) || !form.readerId"
+              @update:model-value="saveIdentificationMethod(method.key)"
+            />
+          </div>
+        </div>
+      </div>
+
+      <v-divider />
+
       <div class="form-section">
         <div class="section-label">Printer Setup</div>
         <div class="printer-grid">
@@ -197,11 +224,14 @@
 
 
 <script setup lang="ts">
+type HidIdentificationMethod = keyof NonNullable<THidQrCodePassConfig["identificationMethods"]>;
+
 type HidQrConfig = Omit<
   THidQrCodePassConfig,
   "identificationMethods" | "onlineMode" | "updatedAt" | "qrGatePermissions"
 > & {
   onlineMode: boolean;
+  identificationMethods: Record<HidIdentificationMethod, boolean>;
   qrGatePermissions: {
     resident: string[];
     propertyManagement: string[];
@@ -235,7 +265,11 @@ const runtimeConfig = useRuntimeConfig();
 const isPermissionManager = computed(() => runtimeConfig.public.APP === "security_agency");
 
 const { getSiteById, updateSitebyId } = useSiteSettings();
-const { getReaders } = useHidAmico();
+const {
+  getReaders,
+  getReaderConfiguration,
+  setReaderConfiguration,
+} = useHidAmico();
 const {
   requestDevice: requestPrinterDevice,
   testConnection: testPrinterConnection,
@@ -250,6 +284,14 @@ const defaultConfig: HidQrConfig = {
     propertyManagement: [],
   },
   qrFormat: "0",
+  identificationMethods: {
+    facial: true,
+    card: true,
+    qrCode: false,
+    idPassword: true,
+    pin: false,
+    bluetooth: false,
+  },
   printer: {
     vendorId: "",
     productId: "",
@@ -279,6 +321,16 @@ const visitorQrGateOptions = computed(() => readers.value
     title: String(reader.name || reader.deviceId || reader._id) + " - " + String(reader.portalName || "Portal"),
     value: reader._id,
   })));
+const identificationMethodOptions: Array<{
+  key: HidIdentificationMethod;
+  label: string;
+}> = [
+  { key: "facial", label: "Facial" },
+  { key: "card", label: "Card" },
+  { key: "qrCode", label: "QR Code" },
+  { key: "idPassword", label: "ID Password" },
+  { key: "pin", label: "PIN" },
+];
 const siteName = computed(() => siteData.value?.name || "Site");
 const siteLabel = computed(() => siteData.value?.code || siteData.value?.block || props.site);
 const primaryQrGateReaderId = computed(() => (
@@ -319,6 +371,7 @@ async function loadConfig() {
   const readerList = readerResponse as HidReaderListResponse;
   readers.value = readerList.items ?? readerList.data?.items ?? readerList.data?.readers ?? [];
   const config = siteData.value?.metadata?.hidQrCodePass || {};
+  const configuredMethods = config.identificationMethods;
   Object.assign(form, {
     enabled: Boolean(config.enabled),
     // Visitor QR is reader-local. Do not restore a legacy Online Mode value
@@ -339,6 +392,14 @@ async function loadConfig() {
       || "",
     ),
     qrFormat: "0",
+    identificationMethods: {
+      facial: configuredMethods?.facial ?? true,
+      card: configuredMethods?.card ?? true,
+      qrCode: configuredMethods?.qrCode ?? Boolean(config.enabled),
+      idPassword: configuredMethods?.idPassword ?? true,
+      pin: configuredMethods?.pin ?? false,
+      bluetooth: false,
+    },
     printer: {
       vendorId: String(config.printer?.vendorId || ""),
       productId: String(config.printer?.productId || ""),
@@ -349,25 +410,57 @@ async function loadConfig() {
     },
     validityMinutes: config.validityMinutes ? Number(config.validityMinutes) : null,
   });
+
+  await loadReaderConfiguration();
+}
+
+function isUnknownRecord(value: unknown): value is Record<string, unknown> {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+
+function getConfigurationData(response: unknown) {
+  if (!isUnknownRecord(response)) return {};
+  return isUnknownRecord(response.data) ? response.data : response;
+}
+
+function isEnabledConfiguration(value: unknown) {
+  return value === true || value === 1 || value === "1";
+}
+
+async function loadReaderConfiguration() {
+  if (!form.readerId) return;
+
+  try {
+    const response = await getReaderConfiguration(form.readerId, {
+      identifier: [
+        "card_identification_enabled",
+        "pin_identification_enabled",
+        "multi_factor_authentication",
+      ],
+    });
+    const configuration = getConfigurationData(response);
+    const identifier = isUnknownRecord(configuration.identifier) ? configuration.identifier : {};
+
+    if (identifier.pin_identification_enabled !== undefined) {
+      const pinEnabled = isEnabledConfiguration(identifier.pin_identification_enabled);
+      form.identificationMethods.pin = pinEnabled;
+      form.identificationMethods.idPassword = !pinEnabled;
+    }
+    if (identifier.card_identification_enabled !== undefined) {
+      form.identificationMethods.card = isEnabledConfiguration(
+        identifier.card_identification_enabled,
+      );
+    }
+  } catch (error: unknown) {
+    console.warn("Unable to load HID reader configuration:", errorConverter(error));
+  }
 }
 
 function buildPayload() {
-  /*
-   * `enabled` and `identificationMethods` are passed through from what was
-   * loaded, never recomputed.
-   *
-   * Which credentials a reader accepts now lives on the READER record and is
-   * set from HID Readers > Identification Methods, because the device is what
-   * holds them. The toggles that used to derive these two values are gone from
-   * this screen, so deriving them again from a form that no longer has them
-   * would erase the stored copy and flip `enabled` every time somebody saved
-   * the printer settings.
-   */
-  const storedQrPass = siteData.value?.metadata?.hidQrCodePass || {};
   const metadata = {
     ...(siteData.value?.metadata || {}),
     hidQrCodePass: {
-      enabled: Boolean(storedQrPass.enabled),
+      enabled: form.identificationMethods.qrCode,
       onlineMode: false,
       // Kept only for old background/mobile flows. Gate permissions, not this
       // compatibility value, decide where a new Visitor QR may be scanned.
@@ -378,9 +471,7 @@ function buildPayload() {
       },
       // Visitor QR passes always use Amico alphanumeric qrcodes.
       qrFormat: "0",
-      ...(storedQrPass.identificationMethods
-        ? { identificationMethods: storedQrPass.identificationMethods }
-        : {}),
+      identificationMethods: { ...form.identificationMethods },
       printer: {
         vendorId: form.printer.vendorId.trim(),
         productId: form.printer.productId.trim(),
@@ -416,6 +507,43 @@ async function saveSection(section: string) {
   }
 }
 
+async function saveIdentificationMethod(method: HidIdentificationMethod) {
+  if (!props.site) return;
+
+  form.enabled = form.identificationMethods.qrCode;
+
+  savingSection.value = `method-${method}`;
+  try {
+    if (method === "card") {
+      await setReaderConfiguration(form.readerId, {
+        identifier: {
+          card_identification_enabled: form.identificationMethods.card ? "1" : "0",
+        },
+      });
+    } else if (method === "pin" || method === "idPassword") {
+      if (method === "pin" && form.identificationMethods.pin) {
+        form.identificationMethods.idPassword = false;
+      } else if (method === "idPassword" && form.identificationMethods.idPassword) {
+        form.identificationMethods.pin = false;
+      }
+      await setReaderConfiguration(form.readerId, {
+        identifier: {
+          pin_identification_enabled: form.identificationMethods.pin ? "1" : "0",
+          // Mode 1: PIN is an alternative credential, never a second factor.
+          multi_factor_authentication: "0",
+        },
+      });
+    }
+    await updateSitebyId(props.site, buildPayload());
+    showMessage(`${identificationMethodOptions.find((item) => item.key === method)?.label || "Identification method"} updated.`, "success");
+  } catch (error: unknown) {
+    await loadConfig();
+    showMessage(errorConverter(error), "error");
+  } finally {
+    savingSection.value = "";
+  }
+}
+
 async function scanPrinter() {
   if (!("usb" in navigator)) {
     showMessage("USB printer scan is not available in this browser.", "error");
@@ -523,6 +651,51 @@ function showMessage(text: string, color: string) {
   padding: 16px 0;
 }
 
+.identification-section {
+  padding-bottom: 20px;
+}
+
+.methods-grid {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(120px, 1fr));
+  gap: 18px;
+  margin-top: 16px;
+}
+
+.method-control {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+  min-height: 42px;
+  padding: 0 10px 0 14px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  color: var(--text2);
+  font-family: var(--font-sans);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.method-control span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.method-control--disabled {
+  background-color: var(--hover);
+  color: var(--muted);
+}
+
+.method-control :deep(.v-switch) {
+  flex: 0 0 auto;
+}
+
+.method-control :deep(.v-selection-control) {
+  min-height: 32px;
+}
+
 /* The three `.hid-config-switch` rules are gone: `.app-switch` in
    primitives.css is the handoff's toggle, and it is shared with the other two
    HID panels that have one. */
@@ -694,6 +867,10 @@ function showMessage(text: string, color: string) {
 }
 
 @media (max-width: 1100px) {
+  .methods-grid {
+    grid-template-columns: repeat(3, minmax(140px, 1fr));
+  }
+
   .printer-grid,
   .reader-grid,
   .template-grid,
@@ -714,6 +891,7 @@ function showMessage(text: string, color: string) {
   .reader-grid,
   .template-grid,
   .validity-grid,
+  .methods-grid,
   .permission-location,
   .permission-row,
   .permission-actions {