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

public/js/kiosk.js

@@ -435,11 +435,49 @@ async function chooseSite() {
   show('site', { push: false });
 }
 
+/**
+ * Applies the site's colours as CSS variables. Only three are chosen by an admin;
+ * 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) {
+  if (theme) {
+    const root = document.documentElement.style;
+    root.setProperty('--deep', theme.brand);
+    root.setProperty('--deep-dark', theme.brandDark);
+    root.setProperty('--on-brand', theme.onBrand);
+    root.setProperty('--exit', theme.signout);
+    root.setProperty('--exit-dark', theme.signoutDark);
+    root.setProperty('--on-exit', theme.onSignout);
+    root.setProperty('--paper', theme.page);
+    root.setProperty('--card', theme.card);
+    root.setProperty('--ink', theme.ink);
+    root.setProperty('--rule', theme.rule);
+    root.setProperty('--focus', theme.brand);
+    document.querySelector('meta[name="theme-color"]')?.setAttribute('content', theme.brand);
+  }
+
+  const img = $('#banner');
+  if (banner?.url) {
+    img.src = banner.url;
+    img.style.maxHeight = `${banner.height}px`;
+    img.hidden = false;
+    // The banner carries the branding, so the name beside it would just repeat it.
+    $('#siteName').hidden = true;
+  } else {
+    img.hidden = true;
+    img.removeAttribute('src');
+    $('#siteName').hidden = false;
+  }
+}
+
 async function loadSiteContext() {
   siteConfig = await api('/api/config');
   const name = siteConfig.site ? siteConfig.site.name : siteConfig.siteName;
   document.title = name;
   $('#siteName').textContent = name;
+  $('#banner').alt = name;
+  applyTheme(siteConfig.theme, siteConfig.banner);
 
   const change = $('#change-site');
   change.hidden = !siteConfig.multiSite;