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

2026-09-02 16:21:42 +10:00
parent 74792b2764
commit ff9f51eaf9
10 changed files with 52 additions and 13 deletions
@@ -41,20 +41,27 @@ body {
 /* ------------------------------------------------------------- chrome */

 .bar {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
+  /* Three tracks, so the banner can sit centred on the page rather than centred
+     in the space the clock happens to leave over. */
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
  gap: 16px;
  padding: 14px 22px;
  background: var(--deep);
  color: var(--on-brand);
 }
+.bar .clock { grid-column: 3; justify-self: end; }
+.bar.align-left .banner,
+.bar.align-left .site { grid-column: 1; justify-self: start; }
+.bar.align-center .banner,
+.bar.align-center .site { grid-column: 2; justify-self: center; }

 /* An uploaded banner sits in the bar in place of the site name. Transparent PNGs
   are the point, so nothing is painted behind it. */
 .banner {
  max-height: 64px;
-  max-width: min(70%, 460px);
+  max-width: min(60vw, 460px);
  width: auto;
  object-fit: contain;
  display: block;
@@ -10,7 +10,7 @@
 </head>
 <body>

-<header class="bar">
+<header class="bar align-left" id="bar">
  <img class="banner" id="banner" alt="" hidden>
  <p class="site" id="siteName">Visitor sign in</p>
  <p class="clock" id="clock"></p>
@@ -681,7 +681,7 @@ async function loadSites() {
          ${s.badge.note ? `<dt>Badge note</dt><dd>${esc(s.badge.note)}</dd>` : ''}
          <dt>Kiosk branding</dt>
          <dd>
-            ${s.branding.hasBanner ? 'Banner set' : 'No banner'} ·
+            ${s.branding.hasBanner ? `Banner set, ${s.branding.bannerAlign === 'center' ? 'centred' : 'left'}` : 'No banner'} ·
            <span class="swatch" style="background:${esc(s.branding.theme.brand)}"></span>
            <span class="swatch" style="background:${esc(s.branding.theme.signout)}"></span>
            <span class="swatch" style="background:${esc(s.branding.theme.page)}"></span>
@@ -763,7 +763,14 @@ function openSiteModal(site) {
       </div>
       <p class="hint">A PNG with a transparent background works best — it sits straight on the
       bar colour with nothing painted behind it. Up to 2 MB.</p>
-       ${field('Banner height on screen (px)', 'bannerHeight', site.branding.bannerHeight, 'number')}
+       <div class="modal-row">
+         ${field('Height on screen (px)', 'bannerHeight', site.branding.bannerHeight, 'number')}
+         <label class="modal-field"><span>Position in the bar</span>
+           <select name="bannerAlign">
+             <option value="left" ${site.branding.bannerAlign !== 'center' ? 'selected' : ''}>Left</option>
+             <option value="center" ${site.branding.bannerAlign === 'center' ? 'selected' : ''}>Centred</option>
+           </select></label>
+       </div>
     </div>
     <div class="modal-row modal-row-3">
       ${colourField('Bar and buttons', 'brand', site.branding.brand, '#0b4f4a')}
@@ -794,6 +801,7 @@ function openSiteModal(site) {
              signout: data.signout || null,
              page: data.page || null,
              bannerHeight: Number(data.bannerHeight) || 64,
+              bannerAlign: data.bannerAlign,
            },
          },
        });
@@ -440,7 +440,7 @@ async function chooseSite() {
 * the shades and the text colours that sit on them are derived server-side so a
 * dark logo colour cannot end up with dark text on it.
 */
-function applyTheme(theme, banner) {
+function applyTheme(theme, banner, align = 'left') {
  if (theme) {
    const root = document.documentElement.style;
    root.setProperty('--deep', theme.brand);
@@ -458,6 +458,10 @@ function applyTheme(theme, banner) {
  }

  const img = $('#banner');
+  const bar = $('#bar');
+  bar.classList.toggle('align-center', align === 'center');
+  bar.classList.toggle('align-left', align !== 'center');
+
  if (banner?.url) {
    img.src = banner.url;
    img.style.maxHeight = `${banner.height}px`;
@@ -477,7 +481,7 @@ async function loadSiteContext() {
  document.title = name;
  $('#siteName').textContent = name;
  $('#banner').alt = name;
-  applyTheme(siteConfig.theme, siteConfig.banner);
+  applyTheme(siteConfig.theme, siteConfig.banner, siteConfig.headerAlign);

  const change = $('#change-site');
  change.hidden = !siteConfig.multiSite;