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