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

public/js/admin.js

@@ -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,
             },
           },
         });

public/js/kiosk.js

@@ -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;