@7365admin1/layer-common 3.2.6 → 3.2.8-staging.200

package/components/HidCameraCaptureDialog.vue

@@ -0,0 +1,216 @@
+<template>
+  <v-dialog
+    :model-value="modelValue"
+    max-width="520"
+    persistent
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <!-- `rounded="lg"` is dropped, not replaced. Measured on the glass, the card
+         read 16px BEFORE and after: the `.rounded-lg` utility it compiled to was
+         already being overridden, so the prop stated a radius the card never
+         had. `.screen-modal` states the same 16px as `--r-modal`, on purpose. -->
+    <v-card class="camera-dialog screen-modal">
+      <v-card-title class="d-flex align-center justify-space-between">
+        <span>Take Facial Photo</span>
+        <v-btn
+          icon="mdi-close"
+          variant="text"
+          class="screen-modal__close"
+          aria-label="Close camera"
+          @click="close"
+        />
+      </v-card-title>
+
+      <v-card-text class="screen-modal__body">
+        <div class="camera-viewport">
+          <video
+            ref="videoElement"
+            class="camera-preview"
+            autoplay
+            muted
+            playsinline
+          />
+
+          <div v-if="starting" class="camera-state">
+            <v-progress-circular indeterminate color="primary" />
+            <span class="mt-3">Starting camera...</span>
+          </div>
+
+          <div v-else-if="cameraError" class="camera-state px-6 text-center">
+            <v-icon icon="mdi-camera-off-outline" size="42" color="error" />
+            <span class="mt-3 text-error">{{ cameraError }}</span>
+          </div>
+        </div>
+
+        <canvas ref="canvasElement" class="d-none" />
+
+        <div class="camera-dialog__hint text-center">
+          Keep your face centered and make sure the area is well lit.
+        </div>
+      </v-card-text>
+
+      <!-- `color="primary"` on a `v-btn` is the design's FOREGROUND token - the
+           link ink - not a fill, so the capture button was accent-on-accent.
+           `.screen-btn-primary` states the fill the design does draw. -->
+      <div class="screen-modal__footer">
+        <v-btn class="text-none screen-btn-ghost" variant="flat" @click="close">
+          Cancel
+        </v-btn>
+        <v-btn
+          class="text-none screen-btn-primary"
+          variant="flat"
+          prepend-icon="mdi-camera"
+          :disabled="starting || !!cameraError || !stream"
+          @click="capture"
+        >
+          Take Photo
+        </v-btn>
+      </div>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ modelValue: boolean }>();
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+  capture: [dataUrl: string];
+}>();
+
+const videoElement = ref<HTMLVideoElement | null>(null);
+const canvasElement = ref<HTMLCanvasElement | null>(null);
+const stream = shallowRef<MediaStream | null>(null);
+const starting = ref(false);
+const cameraError = ref("");
+
+function stopCamera() {
+  stream.value?.getTracks().forEach((track) => track.stop());
+  stream.value = null;
+  if (videoElement.value) videoElement.value.srcObject = null;
+}
+
+function getCameraErrorMessage(caught: unknown) {
+  if (caught instanceof DOMException) {
+    if (caught.name === "NotAllowedError") {
+      return "Camera permission was denied. Allow camera access and try again.";
+    }
+    if (caught.name === "NotFoundError") {
+      return "No camera was found on this device.";
+    }
+    if (caught.name === "NotReadableError") {
+      return "The camera is currently being used by another application.";
+    }
+  }
+  return "Unable to open the camera. Use HTTPS or check the browser camera permission.";
+}
+
+async function startCamera() {
+  stopCamera();
+  cameraError.value = "";
+  starting.value = true;
+
+  try {
+    if (!navigator.mediaDevices?.getUserMedia) {
+      throw new Error("Camera API is unavailable");
+    }
+
+    stream.value = await navigator.mediaDevices.getUserMedia({
+      audio: false,
+      video: {
+        facingMode: "user",
+        width: { ideal: 1280 },
+        height: { ideal: 960 },
+      },
+    });
+
+    await nextTick();
+    if (!videoElement.value) throw new Error("Camera preview is unavailable");
+    videoElement.value.srcObject = stream.value;
+    await videoElement.value.play();
+  } catch (caught: unknown) {
+    stopCamera();
+    cameraError.value = getCameraErrorMessage(caught);
+  } finally {
+    starting.value = false;
+  }
+}
+
+function capture() {
+  const video = videoElement.value;
+  const canvas = canvasElement.value;
+  if (!video || !canvas || !video.videoWidth || !video.videoHeight) return;
+
+  canvas.width = video.videoWidth;
+  canvas.height = video.videoHeight;
+  const context = canvas.getContext("2d");
+  if (!context) return;
+
+  context.translate(canvas.width, 0);
+  context.scale(-1, 1);
+  context.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+  emit("capture", canvas.toDataURL("image/jpeg", 0.9));
+  close();
+}
+
+function close() {
+  stopCamera();
+  emit("update:modelValue", false);
+}
+
+watch(
+  () => props.modelValue,
+  (isOpen) => {
+    if (isOpen) void startCamera();
+    else stopCamera();
+  }
+);
+
+onBeforeUnmount(stopCamera);
+</script>
+
+<style scoped>
+.camera-dialog {
+  overflow: hidden;
+}
+
+.camera-viewport {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  aspect-ratio: 3 / 4;
+  border-radius: var(--r-inner);
+  /* Deliberately NOT a theme surface: this is the stage a video sits on, and it
+     stays dark in both themes so the preview does not flash white on light.
+     Its own `#ffffff` text below is paired with it, not with the theme. */
+  background: #111722;
+}
+
+/* The design's small helper line, not Vuetify's `text-caption` /
+   `text-medium-emphasis` pair. */
+.camera-dialog__hint {
+  margin-top: 12px;
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  font-weight: 500;
+  color: var(--muted);
+}
+
+.camera-preview {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transform: scaleX(-1);
+}
+
+.camera-state {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: #111722;
+  color: #ffffff;
+}
+</style>

package/components/HidEnabledGate.vue

@@ -1,14 +1,31 @@
+<!--
+  The gate that stands in for a whole screen when HID is not enabled for a site.
+
+  What it was: a raw `v-alert type="info" variant="tonal"` — Vuetify's own tonal
+  slab, at Vuetify's 4px radius, in Vuetify's font, on a Vuetify blue the theme
+  does not control. It is a full-screen state, not an inline warning.
+
+  DESIGN GAP, STATED: the handoff draws no "service not enabled" page. So this
+  is assembled from the established primitive rather than invented, exactly as
+  `PlaceholderComponent` was — `.screen-empty` (`assets/css/screens.css:149`) is
+  the design's centred, muted, 52px-padded block for "there is nothing to show
+  here", and the heading takes the `--fs-card-title` / `--fw-card-title` type
+  the design uses for every panel heading.
+
+  `.tone-info` sets `--tone-bg`; the icon's soft disc is the only thing that
+  paints with it, so the block keeps the informational colour without becoming
+  a coloured slab. Icons are translated centrally — no hand-mapping here.
+-->
 <template>
   <slot v-if="hidEnabled" />
 
-  <v-alert
-    v-else
-    type="info"
-    variant="tonal"
-    class="mt-6"
-    title="HID service is not enabled"
-    :text="message"
-  />
+  <div v-else class="screen-empty hid-gate">
+    <span class="hid-gate__icon tone-info">
+      <v-icon icon="mdi-information-outline" size="24" />
+    </span>
+    <h2 class="hid-gate__title">HID service is not enabled</h2>
+    <p class="hid-gate__body">{{ message }}</p>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -28,7 +45,11 @@ const props = withDefaults(
 const { getSiteById } = useSiteSettings();
 const { getHidServiceEnabled } = useOptionalServices();
 
-const { data: siteData } = await useLazyAsyncData(
+// Do not await this request during route setup. Every HID page uses this gate;
+// awaiting it makes Nuxt Suspense keep rendering the previous page until the
+// site request finishes, so the URL changes while the visible module appears
+// frozen. The lazy request updates `siteData` reactively after navigation.
+const { data: siteData } = useLazyAsyncData(
   "hid-enabled-gate-site-" + props.site,
   () => getSiteById(props.site),
   {
@@ -49,3 +70,40 @@ watchEffect(() => {
   );
 });
 </script>
+
+<style scoped>
+/* It replaces a screen's whole body, so it holds the viewport rather than
+   collapsing to the height of three lines. Same reason as PlaceholderComponent. */
+.hid-gate {
+  min-height: 40vh;
+}
+
+.hid-gate__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: var(--tone-bg);
+}
+
+/* `.screen-empty .v-icon` paints `--muted`; inside the tone scope the icon is
+   the informational colour, so it has to win that one-class rule. */
+.hid-gate .hid-gate__icon .v-icon {
+  color: var(--info);
+}
+
+.hid-gate__title {
+  margin: 0;
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
+  color: var(--text);
+}
+
+.hid-gate__body {
+  max-width: 46ch;
+  margin: 0;
+  font-weight: var(--fw-cell);
+}
+</style>