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

public/js/kiosk.js

@@ -186,12 +186,12 @@ tickClock();
 /* --------------------------------------------------------------- hosts */
 
 /**
- * Two ways to say who you are visiting, because neither suits everyone: a dropdown
- * for someone who wants to browse a short list, and a filter box for someone who
- * knows the name and would rather type it. The filter narrows both, so the two
- * never disagree about what is on offer.
+ * Who you are here to see: type to narrow, then choose from the dropdown. The
+ * dropdown is a native select, so a tablet gives it a proper full-screen picker
+ * with its own scrolling, which handles a long staff list better than a page of
+ * buttons ever did.
  */
-function renderHosts(listEl, searchValue, onPick, selectEl = null) {
+function renderHosts(selectEl, searchValue, onPick, emptyEl = null) {
   const term = String(searchValue || '').trim().toLowerCase();
   const matches = term
     ? hosts.filter(
@@ -199,49 +199,48 @@ function renderHosts(listEl, searchValue, onPick, selectEl = null) {
       )
     : hosts;
 
-  const choose = (id, name) => {
-    state.hostId = Number(id);
-    state.hostName = name;
+  const label = !hosts.length
+    ? 'Nobody has been added yet'
+    : matches.length === hosts.length
+      ? `Choose one of ${hosts.length}`
+      : `${matches.length} ${matches.length === 1 ? 'match' : 'matches'} — choose one`;
+
+  selectEl.innerHTML =
+    `<option value="">${escapeHtml(label)}</option>` +
+    matches
+      .map(
+        (h) =>
+          `<option value="${h.id}">${escapeHtml(h.name)}${h.area ? ` — ${escapeHtml(h.area)}` : ''}</option>`
+      )
+      .join('');
+  selectEl.disabled = matches.length === 0;
+
+  selectEl.onchange = () => {
+    const picked = hosts.find((h) => h.id === Number(selectEl.value));
+    if (!picked) return;
+    state.hostId = picked.id;
+    state.hostName = picked.name;
     onPick();
   };
 
-  if (selectEl) {
-    const placeholder =
-      matches.length === hosts.length
-        ? `${hosts.length} ${hosts.length === 1 ? 'person' : 'people'} — choose a name`
-        : `${matches.length} ${matches.length === 1 ? 'match' : 'matches'}`;
-    selectEl.innerHTML =
-      `<option value="">${escapeHtml(placeholder)}</option>` +
-      matches
-        .map(
-          (h) =>
-            `<option value="${h.id}">${escapeHtml(h.name)}${h.area ? ` — ${escapeHtml(h.area)}` : ''}</option>`
-        )
-        .join('');
-    selectEl.disabled = matches.length === 0;
-    selectEl.onchange = () => {
-      const picked = hosts.find((h) => h.id === Number(selectEl.value));
-      if (picked) choose(picked.id, picked.name);
-    };
+  if (emptyEl) {
+    emptyEl.hidden = matches.length > 0;
+    emptyEl.textContent = hosts.length
+      ? 'No one matches that. Check the spelling, or ask the front desk.'
+      : 'No one has been added for this site yet. Please see the front desk.';
   }
 
-  if (!matches.length) {
-    listEl.innerHTML = `<p class="host-empty">No one matches that. Check the spelling, or ask the front desk.</p>`;
-    return;
-  }
+  // Typing a name and pressing enter should just work when only one person is left.
+  selectEl.dataset.only = matches.length === 1 ? String(matches[0].id) : '';
+}
 
-  listEl.innerHTML = matches
-    .slice(0, 60)
-    .map(
-      (h) =>
-        `<button class="host-option" data-host-id="${h.id}" data-host-name="${escapeHtml(h.name)}">
-           ${escapeHtml(h.name)}${h.area ? `<small>${escapeHtml(h.area)}</small>` : ''}
-         </button>`
-    )
-    .join('');
-  listEl.querySelectorAll('[data-host-id]').forEach((btn) => {
-    btn.addEventListener('click', () => choose(btn.dataset.hostId, btn.dataset.hostName));
-  });
+/** Enter in the filter box picks the person when the filter leaves exactly one. */
+function pickOnlyMatch(selectEl) {
+  const only = selectEl.dataset.only;
+  if (!only) return false;
+  selectEl.value = only;
+  selectEl.dispatchEvent(new Event('change'));
+  return true;
 }
 
 function escapeHtml(value) {
@@ -447,7 +446,7 @@ async function loadSiteContext() {
   change.textContent = siteConfig.site ? `Site: ${siteConfig.site.name} — change` : 'Choose site';
 
   hosts = await api('/api/hosts');
-  renderHosts($('#host-list'), '', () => show('guest-contact'), $('#host-select'));
+  renderHosts($('#host-select'), '', () => show('guest-contact'), $('#host-empty'));
 }
 
 $('#change-site').addEventListener('click', chooseSite);
@@ -482,8 +481,14 @@ $('[data-next="guest-name"]').addEventListener('click', () => {
 });
 
 $('#in-host-search').addEventListener('input', (e) =>
-  renderHosts($('#host-list'), e.target.value, () => show('guest-contact'), $('#host-select'))
+  renderHosts($('#host-select'), e.target.value, () => show('guest-contact'), $('#host-empty'))
 );
+$('#in-host-search').addEventListener('keydown', (event) => {
+  if (event.key === 'Enter') {
+    event.preventDefault();
+    pickOnlyMatch($('#host-select'));
+  }
+});
 
 $('[data-next="guest-contact"]').addEventListener('click', () => {
   const phone = $('#in-phone').value.trim();
@@ -557,10 +562,10 @@ $('#do-freq-auth').addEventListener('click', async () => {
     $('#freq-greeting').textContent = `Hi ${person.firstName}. Who are you here to see?`;
     $('#in-freq-host-search').value = '';
     renderHosts(
-      $('#freq-host-list'),
+      $('#freq-host-select'),
       '',
       () => (state.hasStoredPhoto ? submitSignIn() : show('photo')),
-      $('#freq-host-select')
+      $('#freq-host-empty')
     );
     show('freq-host');
   } catch (err) {
@@ -573,12 +578,18 @@ $('#do-freq-auth').addEventListener('click', async () => {
 
 $('#in-freq-host-search').addEventListener('input', (e) =>
   renderHosts(
-    $('#freq-host-list'),
+    $('#freq-host-select'),
     e.target.value,
     () => (state.hasStoredPhoto ? submitSignIn() : show('photo')),
-    $('#freq-host-select')
+    $('#freq-host-empty')
   )
 );
+$('#in-freq-host-search').addEventListener('keydown', (event) => {
+  if (event.key === 'Enter') {
+    event.preventDefault();
+    pickOnlyMatch($('#freq-host-select'));
+  }
+});
 
 /* sign out */