Visitor sign in kiosk: multi-site, badge printing, WWCC expiry warnings, admin accounts with 2FA

public/css/admin.css

@@ -11,6 +11,10 @@
 
 * { box-sizing: border-box; }
 
+/* Author display rules beat the browser's [hidden] { display: none }, and several
+   elements here are toggled with that attribute. */
+[hidden] { display: none !important; }
+
 body {
   margin: 0;
   background: var(--paper);
@@ -301,8 +305,9 @@ tr.row-bad td { background: #fdf0f2; }
 
 .photo-frame {
   position: relative;
-  width: 148px;
-  aspect-ratio: 4 / 3;
+  width: 152px;
+  /* Square, to match the kiosk camera and the frame printed on the badge. */
+  aspect-ratio: 1 / 1;
   margin-bottom: 12px;
   background: #eef1f4;
   border: 1px solid var(--rule);
@@ -317,8 +322,8 @@ tr.row-bad td { background: #fdf0f2; }
   height: 100%;
   object-fit: cover;
   display: block;
-  transform: scaleX(-1);
 }
+.photo-frame video { transform: scaleX(-1); }
 .photo-empty { margin: 0; padding: 0 10px; color: var(--muted); font-size: 13px; text-align: center; }
 
 .photo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

public/css/kiosk.css

@@ -14,6 +14,11 @@
 
 * { box-sizing: border-box; }
 
+/* The rules below set display on elements that are toggled with the hidden
+   attribute, and an author rule beats the browser's [hidden] { display: none }.
+   Without this the captured still renders underneath the live camera feed. */
+[hidden] { display: none !important; }
+
 html, body {
   margin: 0;
   min-height: 100%;
@@ -48,8 +53,9 @@ body {
 
 .foot {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   gap: 16px;
+  min-height: 20px;
   padding: 14px 22px 20px;
   font-size: 12.5px;
   color: var(--muted);
@@ -215,19 +221,25 @@ a:focus-visible {
 
 .camera {
   position: relative;
-  aspect-ratio: 4 / 3;
+  /* Square, matching the crop that is saved and the frame printed on the badge,
+     so the visitor sees exactly what ends up on their pass. */
+  aspect-ratio: 1 / 1;
+  width: 100%;
+  max-width: 380px;
+  margin: 0 auto 18px;
   background: #0f1720;
   border-radius: 3px;
   overflow: hidden;
-  margin-bottom: 18px;
 }
 .camera video, .camera img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
-  transform: scaleX(-1);
 }
+/* The live feed is mirrored because that is how people expect to see themselves.
+   The captured still is not: it shows what will actually print. */
+.camera video { transform: scaleX(-1); }
 .camera-error {
   margin: -8px 0 18px;
   padding: 14px;
@@ -250,7 +262,7 @@ a:focus-visible {
 }
 .review dt { color: var(--muted); }
 .review dd { margin: 0; }
-.review img { width: 78px; border-radius: 3px; display: block; }
+.review img { width: 78px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 3px; display: block; }
 
 /* ------------------------------------------------------------- done */
 
@@ -325,7 +337,7 @@ a:focus-visible {
 .foot-link {
   border: none;
   background: none;
-  padding: 0 12px 0 0;
+  padding: 0;
   color: var(--muted);
   font: inherit;
   font-size: 12.5px;

public/css/login.css

@@ -10,6 +10,10 @@
 
 * { box-sizing: border-box; }
 
+/* Author display rules beat the browser's [hidden] { display: none }, and the
+   sign in screens are toggled with that attribute. */
+[hidden] { display: none !important; }
+
 body {
   margin: 0;
   min-height: 100vh;

public/index.html

@@ -223,7 +223,6 @@
 <p class="alert" id="alert" role="alert" hidden></p>
 
 <footer class="foot">
-  <span>Created by: Jess Rogerson (yelling commands at Claude.AI)</span>
   <button class="foot-link" id="change-site" hidden></button>
 </footer>
 

public/js/admin.js

@@ -396,11 +396,15 @@ function wirePhotoEditor() {
   });
 
   $('#photo-shoot').addEventListener('click', () => {
+    // Square, cropped from the centre, to match the kiosk camera and the badge.
+    const side = Math.min(video.videoWidth, video.videoHeight);
+    if (!side) return toast('The camera is not ready yet. Try again in a moment.', true);
     const canvas = document.createElement('canvas');
-    const width = 720;
-    canvas.width = width;
-    canvas.height = Math.round((video.videoHeight / video.videoWidth) * width) || 540;
-    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
+    canvas.width = 640;
+    canvas.height = 640;
+    canvas
+      .getContext('2d')
+      .drawImage(video, (video.videoWidth - side) / 2, (video.videoHeight - side) / 2, side, side, 0, 0, 640, 640);
     photoEditor.dataUrl = canvas.toDataURL('image/jpeg', 0.72);
     photoEditor.remove = false;
     stopPhotoCamera();

public/js/kiosk.js

@@ -258,15 +258,24 @@ function stopCamera() {
   $('#cam-video').srcObject = null;
 }
 
+const PHOTO_SIZE = 640;
+
+/**
+ * Takes a square photo, cropped from the centre of whatever shape the camera
+ * gives us. The preview frame, the saved file and the space on the badge are all
+ * square, so nothing is stretched and what the visitor sees is what prints.
+ */
 function capture() {
   const video = $('#cam-video');
   const canvas = $('#cam-canvas');
-  const width = 720;
-  const height = Math.round((video.videoHeight / video.videoWidth) * width) || 540;
-  canvas.width = width;
-  canvas.height = height;
-  const ctx = canvas.getContext('2d');
-  ctx.drawImage(video, 0, 0, width, height);
+  const side = Math.min(video.videoWidth, video.videoHeight);
+  if (!side) return say('The camera is not ready yet. Try again in a moment.');
+
+  const sx = (video.videoWidth - side) / 2;
+  const sy = (video.videoHeight - side) / 2;
+  canvas.width = PHOTO_SIZE;
+  canvas.height = PHOTO_SIZE;
+  canvas.getContext('2d').drawImage(video, sx, sy, side, side, 0, 0, PHOTO_SIZE, PHOTO_SIZE);
   state.photo = canvas.toDataURL('image/jpeg', 0.72);
 
   const shot = $('#cam-shot');