pgkiln 0.85.0 → 0.87.0

package/src/runtime/engine.ts

@@ -301,9 +301,10 @@ export async function validate(ctx: PageContext) {
     };
     try {
       const outcome = await validationPasses(ctx, v, value);
-      if (outcome !== true) report(typeof outcome === 'string' ? outcome : v.message);
+      // (166) &ITEM. in the message, as in APEX (plain text: the message is escaped where it is shown)
+      if (outcome !== true) report(typeof outcome === 'string' ? outcome : substitute(v.message, ctx, (x) => x));
     } catch (e) {
-      report(`${v.message} (${await publicError(ctx, e, `validation ${v.name}`)})`);
+      report(`${substitute(v.message, ctx, (x) => x)} (${await publicError(ctx, e, `validation ${v.name}`)})`);
     }
   }
 
@@ -683,7 +684,9 @@ export async function runProcesses(ctx: PageContext, point: 'submit' | 'load') {
       continue;
     }
     const msg = await runOne(ctx, p, names, 0);
-    if (msg) messages.push(msg);
+    // (166) &ITEM. in a success message, with the values after the process (a new row's key, say), as in APEX;
+    // once here, so a chain's messages (joined by runOne) are filled in once
+    if (msg) messages.push(substitute(msg, ctx, (x) => x));
   }
   return messages;
 }

package/src/runtime/grid.ts

@@ -1,13 +1,13 @@
 import { componentSetting } from './component-settings.ts';
 import pg from 'pg';
-import { literal } from '../binds.ts';
+import { applyBinds, literal } from '../binds.ts';
 import { savepoint, type Client } from '../db.ts';
 import { html, raw, type Raw } from '../html.ts';
 import { icon } from '../icons.ts';
 import type { Button, Process, Region } from '../metadata.ts';
 import { checksumValid, urlChecksum } from '../security.ts';
 import { isAuthorized, pageAllowed } from './authz.ts';
-import { publicError, toState, type PageContext } from './context.ts';
+import { bindValues, publicError, stripSemicolon, substitute, toState, type PageContext } from './context.ts';
 import { arrange, cleanLayout, currentLayout, defaultLayout, layoutJson, layoutParam, MAX_FROZEN, MAX_WIDTH, MIN_WIDTH, parseLayout, type GridLayout, type Placed } from './grid-layout.ts';
 import { appDateMask, dateField, lovContains, lovOptions, type LovOption } from './items.ts';
 import { parseDateMask } from './format.ts';
@@ -22,7 +22,8 @@ import { GRID_VIEWS, renderView, type View } from './report-views.ts';
 //
 //   config: {"page_size": 25,
 //            "allow": {"insert": true, "update": true, "delete": true},
-//            "columns": {"deptno": {"lov": "LOV:DEPARTMENTS"}, "sal": {"required": true}},
+//            "columns": {"deptno": {"lov": "LOV:DEPARTMENTS"}, "sal": {"required": true},
+//                        "hiredate": {"default_sql": "select current_date"}, "job": {"default": "&P3_JOB."}},
 //            "readonly": ["hiredate"],
 //            "aggregates": {"sal": ["sum", "avg"], "empno": "count"},
 //            "layout": {"order": ["ename", "sal"], "hidden": ["comm"], "widths": {"ename": 180}, "frozen": 1},
@@ -240,6 +241,14 @@ export async function renderGrid(ctx: PageContext, r: Region): Promise<Raw> {
   const insertable = savable && allow(r, 'insert') && cols.some((x) => writable.has(x.name));
   const deletable = savable && allow(r, 'delete');
   const g = `g${r.id}`;
+  // (167) the values a new row starts with (APEX: a column's Default)
+  let defaults: Record<number, string> = {};
+  if (insertable)
+    try {
+      defaults = await newRowDefaults(ctx, r, cols, writable);
+    } catch (e) {
+      return html`<div class="alert alert-error" role="alert">${await publicError(ctx, e, `grid "${r.title ?? r.id}" column defaults`)}</div>`;
+    }
   const posted = ctx.body && Object.keys(ctx.body).some((k) => k.startsWith(`${g}_`)) ? ctx.body : null;
   const postedByPk = new Map<string, number>();
   if (posted) for (const k of Object.keys(posted)) {
@@ -360,7 +369,10 @@ export async function renderGrid(ctx: PageContext, r: Region): Promise<Raw> {
   });
 
   // New rows: re-show posted ones after a failed save, a duplicated row, plus a blank template.
-  const newRow = (j: number, values: Record<number, string> = {}) =>
+  // a new row posts the values it started with (_def): one left at them is blank, as an empty one (gridDml)
+  const defInput = (name: string, from: Record<number, string>) =>
+    Object.keys(from).length ? html`<input type="hidden" name="${name}" value="${JSON.stringify(from)}">` : '';
+  const newRow = (j: number, values: Record<number, string> = defaults, started: Record<number, string> = defaults) =>
     html`<tr class="grid-new" data-new-row="${j}">
       ${leads.map((k) => html`<td class="${leadCls(k)}" data-label="${k === 'sel' ? t('grid.new') : ''}">${k === 'sel' ? html`<span class="badge-pill">${t('grid.new')}</span>` : ''}</td>`)}
       ${placed.map((p, pIdx) => {
@@ -371,6 +383,7 @@ export async function renderGrid(ctx: PageContext, r: Region): Promise<Raw> {
           ? html`<td class="${colCls(p, pIdx)}" data-col="${col.ci}" data-label="${lbl}"${hiddenAttr(p)}>${control(ctx, { ...col, editable: true }, `${g}_n${j}_c${col.ci}`, values[col.ci] ?? '', `${lbl}, new row`)}</td>`
           : html`<td class="${colCls(p, pIdx)}" data-col="${col.ci}" data-label="${lbl}"${hiddenAttr(p)}></td>`;
       })}
+      ${Object.keys(started).length ? html`<td hidden>${defInput(`${g}_n${j}_def`, started)}</td>` : ''}
     </tr>`;
   const postedNew: Raw[] = [];
   const usedNew = posted ? newRowIndexes(posted, g) : [];
@@ -378,7 +391,8 @@ export async function renderGrid(ctx: PageContext, r: Region): Promise<Raw> {
     for (const j of usedNew) {
       const values: Record<number, string> = {};
       cols.forEach((col) => (values[col.ci] = pv(`${g}_n${j}_c${col.ci}`) ?? ''));
-      if (Object.values(values).some((v) => v !== '' && v !== 'false')) postedNew.push(newRow(j, values));
+      const started = postedDefaults(pv(`${g}_n${j}_def`));
+      if (!blankRow(values, started)) postedNew.push(newRow(j, values, started));
     }
   let nextNew = usedNew.length ? Math.max(...usedNew) + 1 : 0;
   // Duplicate without JavaScript (r<id>_dup=<key>): a row of this page as a new row
@@ -387,7 +401,7 @@ export async function renderGrid(ctx: PageContext, r: Region): Promise<Raw> {
   if (dupRow) {
     const values: Record<number, string> = {};
     for (const col of cols) if (writable.has(col.name)) values[col.ci] = toState(dupRow[col.idx]) ?? '';
-    postedNew.push(newRow(nextNew++, values));
+    postedNew.push(newRow(nextNew++, values, {}));
   }
 
   // The single row view: one row as a form, with the grid's field names (row 0, or new row 0)
@@ -440,9 +454,10 @@ export async function renderGrid(ctx: PageContext, r: Region): Promise<Raw> {
       const col = p.col;
       if (masterCol && col.name === masterCol) return [field(p, masterValue, false)];
       if (!writable.has(col.name)) return [];
-      return [field(p, control(ctx, { ...col, editable: true }, `${g}_n0_c${col.ci}`, pv(`${g}_n0_c${col.ci}`) ?? '', label(col.name)), true)];
+      return [field(p, control(ctx, { ...col, editable: true }, `${g}_n0_c${col.ci}`, pv(`${g}_n0_c${col.ci}`) ?? defaults[col.ci] ?? '', label(col.name)), true)];
     });
-    return html`<div class="grid-record grid-new" data-new-row="0"><div class="form-grid">${fieldsHtml}</div></div>
+    const started = pv(`${g}_n0_def`) !== undefined ? postedDefaults(pv(`${g}_n0_def`)) : defaults;
+    return html`<div class="grid-record grid-new" data-new-row="0"><div class="form-grid">${fieldsHtml}</div>${defInput(`${g}_n0_def`, started)}</div>
     ${recordNav()}`;
   };
 
@@ -681,6 +696,48 @@ export function layoutFromForm(b: Record<string, string | undefined>): GridLayou
   });
 }
 
+/**
+ * (167) The values a new row starts with, by column position: config.columns.<col>.default (text with &ITEM.
+ * substitutions, e.g. "&P3_DEPTNO.") or .default_sql (a SELECT: its first column of the first row, with :BINDS),
+ * for the columns a new row may set.
+ */
+async function newRowDefaults(ctx: PageContext, r: Region, cols: { name: string; ci: number }[], writable: Set<string>) {
+  const cfg = (r.config.columns ?? {}) as Record<string, { default?: unknown; default_sql?: unknown }>;
+  const out: Record<number, string> = {};
+  for (const col of cols) {
+    const c = cfg[col.name];
+    if (!c || !writable.has(col.name)) continue;
+    if (typeof c.default_sql === 'string' && c.default_sql.trim()) {
+      const sql = stripSemicolon(applyBinds(c.default_sql, bindValues(ctx)));
+      const client = ctx.client!;
+      const res = await savepoint(client, () => client.query({ text: sql, rowMode: 'array' }));
+      const v = toState(res.rows[0]?.[0]);
+      if (v !== null && v !== '') out[col.ci] = v;
+    } else if (typeof c.default === 'string' || typeof c.default === 'number' || typeof c.default === 'boolean') {
+      const v = substitute(String(c.default), ctx, (x) => x);
+      if (v !== '') out[col.ci] = v;
+    }
+  }
+  return out;
+}
+
+/** A new row's posted _def field: the values it started with (only short strings by column position are kept). */
+function postedDefaults(raw: string | undefined): Record<number, string> {
+  if (!raw || raw.length > 20000) return {};
+  try {
+    const v = JSON.parse(raw) as unknown;
+    if (!v || typeof v !== 'object' || Array.isArray(v)) return {};
+    return Object.fromEntries(Object.entries(v).filter(([k, x]) => /^\d+$/.test(k) && typeof x === 'string'));
+  } catch {
+    return {};
+  }
+}
+
+/** A new row nobody filled in: every value empty (or an unticked checkbox) or still the value it started with. */
+function blankRow(values: Record<number, string>, started: Record<number, string>) {
+  return Object.entries(values).every(([ci, v]) => v === '' || v === 'false' || (started[Number(ci)] !== undefined && v === started[Number(ci)]));
+}
+
 function newRowIndexes(body: Record<string, unknown>, g: string) {
   const out = new Set<number>();
   for (const k of Object.keys(body)) {
@@ -797,12 +854,15 @@ export async function gridDml(ctx: PageContext, p: Process): Promise<string | nu
   if (allow(r, 'insert'))
     for (const j of newRowIndexes(body, g)) {
       const values: [string, string][] = [];
+      const posted: Record<number, string> = {};
       cols.forEach((col, ci) => {
         if (!writable.has(col.name)) return;
         const v = norm(ci, one(`${g}_n${j}_c${ci}`));
+        posted[ci] = v;
         if (v !== '' && !(col.dataTypeID === 16 && v === 'false')) values.push([col.name, v]);
       });
-      if (!values.length) continue; // blank template row
+      // a blank template row, or one left at its default values (167)
+      if (!values.length || blankRow(posted, postedDefaults(one(`${g}_n${j}_def`)))) continue;
       const notOffered = [];
       for (const [n, v] of values) if (!(await offered(n, v))) notOffered.push(n);
       if (notOffered.length) {

package/src/runtime/items.ts

@@ -260,8 +260,16 @@ function displayMap(ctx: PageContext, item: Item, value: string): Raw {
   </figure>`;
 }
 
+/** (167) A hidden item the browser may set ({"value_protected": false}): a hidden input, its posted value taken like a field's. */
+export const unprotectedHidden = (i: { type: string; config?: Record<string, any> | null }) => i.type === 'hidden' && i.config?.value_protected === false;
+
 export async function renderItem(ctx: PageContext, item: Item, hiddenByDa = false): Promise<Raw | ''> {
-  if (item.type === 'hidden' || !ctx.vis!.items.has(item.name)) return '';
+  if (!ctx.vis!.items.has(item.name)) return '';
+  if (item.type === 'hidden') {
+    // (167) protected (the default): the value stays on the server; {"value_protected": false}: a hidden input
+    if (!unprotectedHidden(item)) return '';
+    return html`<input type="hidden" id="${item.name}" name="${item.name}" value="${ctx.session.state[item.name] ?? item.default_value ?? ''}" data-item="${item.name}">`;
+  }
   const value = ctx.session.state[item.name] ?? item.default_value ?? '';
   const id = item.name;
   const error = ctx.errors.items[item.name];

package/src/runtime/lists.ts

@@ -231,9 +231,9 @@ export function navbarMarkup(nodes: ListNode[], label: string, live?: string): R
   if (!nodes.length) return raw('');
   return html`<nav class="t-navbar" aria-label="${label}"><ul>${nodes.map((n) =>
     n.children.length
-      ? html`<li><details class="menu"><summary${hasIcon(n) ? html` class="nb-icon" aria-label="${n.label}"` : ''}>${icon(n.icon)}<span>${n.label}</span>${badge(n, live)}</summary><div class="menu-panel align-right"><ul class="t-navbar-menu">${
+      ? html`<li><details class="menu"><summary${hasIcon(n) ? html` class="nb-icon"` : ''}>${icon(n.icon)}<span>${n.label}</span>${badge(n, live)}</summary><div class="menu-panel align-right"><ul class="t-navbar-menu">${
           [...(n.href ? [n] : []), ...n.children].map((c) => html`<li><a ${linkAttrs(c)}>${icon(c.icon)}<span>${c.label}</span>${badge(c, live)}</a></li>`)}</ul></div></details></li>`
-      : html`<li><a ${linkAttrs(n, hasIcon(n) ? 'nb-icon' : undefined)}${hasIcon(n) ? html` aria-label="${n.label}"` : ''}>${icon(n.icon)}<span>${n.label}</span>${badge(n, live)}</a></li>`)}</ul></nav>`;
+      : html`<li><a ${linkAttrs(n, hasIcon(n) ? 'nb-icon' : undefined)}>${icon(n.icon)}<span>${n.label}</span>${badge(n, live)}</a></li>`)}</ul></nav>`;
 }
 
 function linksMarkup(nodes: ListNode[]): Raw {

package/src/runtime/push.ts

@@ -12,6 +12,8 @@ import { loadContext, type Req } from './routes.ts';
 // action push_subscribe: both after a click, as browsers require) and posts
 // it here. The application's public key reaches the page as data-push.
 
+let pushKeyWarned = false;
+
 /** Whether the app offers notifications. */
 export const pushOn = (a: Pick<App, 'pwa' | 'pwa_push'>) => a.pwa && a.pwa_push;
 
@@ -22,7 +24,11 @@ export async function pushBody(a: Pick<App, 'id' | 'pwa' | 'pwa_push'>, username
     return { 'data-push': await appPublicKey(a.id), 'data-push-user': username.toLowerCase() };
   } catch (e) {
     // no key yet and no PGKILN_SECRET_KEY to store one: the page works, without notifications
-    console.error('push notifications:', (e as Error).message);
+    // (166) said once per server, not on every page
+    if (!pushKeyWarned) {
+      pushKeyWarned = true;
+      console.error('push notifications:', (e as Error).message);
+    }
     return {};
   }
 }

package/src/runtime/regions.ts

@@ -104,9 +104,11 @@ export async function renderButton(ctx: PageContext, b: Button) {
   return html`<button type="submit" class="${cls}" name="__request" value="${b.name}" data-button="${b.name}"${confirm}>${b.label}${badge}</button>`;
 }
 
-export async function buttonsFor(ctx: PageContext, regionId: number | null, only: (b: Button) => boolean = () => true) {
+export async function buttonsFor(ctx: PageContext, regionId: number | null, only: (b: Button) => boolean = () => true, rank: (b: Button) => number = () => 0) {
   const out = [];
-  for (const b of ctx.vis!.buttons.values()) if (b.region_id === regionId && b.id > 0 && only(b)) out.push(await renderButton(ctx, b));
+  // in sequence, within their rank (a stable sort: the buttons come in sequence order)
+  const shown = [...ctx.vis!.buttons.values()].filter((b) => b.region_id === regionId && b.id > 0 && only(b)).sort((a, b) => rank(a) - rank(b));
+  for (const b of shown) out.push(await renderButton(ctx, b));
   return out.some(Boolean) ? html`<div class="buttons">${out}</div>` : '';
 }
 
@@ -314,6 +316,9 @@ async function renderRegionNow(ctx: PageContext, r: Region, hidden: Set<string>)
   return regionShell(ctx, r, hidden, body);
 }
 
+/** Region types that place their items themselves (and login, whose fields post to a form of their own). */
+const ITEMS_IN_BODY = new Set(['report', 'classic_report', 'form', 'static', 'login']);
+
 /** The region's content (what the region's type renders), without its frame and buttons. */
 async function renderBody(ctx: PageContext, r: Region, hidden: Set<string>): Promise<Raw> {
   const items = ctx.page.items.filter((i) => i.region_id === r.id);
@@ -407,7 +412,7 @@ async function renderBody(ctx: PageContext, r: Region, hidden: Set<string>): Pro
       body = await renderSearch(ctx, r);
       break;
     case 'login':
-      body = await renderLoginRegion(ctx);
+      body = await renderLoginRegion(ctx, r.config ?? {});
       break;
     case 'dynamic':
       // A SELECT returning HTML (like APEX "PL/SQL Dynamic Content"). The
@@ -425,6 +430,12 @@ async function renderBody(ctx: PageContext, r: Region, hidden: Set<string>): Pro
       break;
     }
   }
+  // (167) items placed in any other region (a tree, chart, map, cards …) are shown under its content, as in APEX;
+  // a login region's fields belong to a form of their own, so its items stay out
+  if (items.length && !ITEMS_IN_BODY.has(r.type) && !restFailed) {
+    const itemsHtml = await renderItems(ctx, items, hidden);
+    if (itemsHtml.length) body = html`${body!}<div class="form-grid region-items">${itemsHtml}</div>`;
+  }
   return body!;
 }
 
@@ -481,9 +492,12 @@ async function regionShell(ctx: PageContext, r: Region, hidden: Set<string>, bod
     </dialog>`;
 
   const header = html`<h2 id="${titleId}">${r.title}</h2>${buttonsOnTop ? buttons : ''}`;
+  // (166) the header buttons sit beside the summary, not in it: a summary is the toggle, and a button inside it is
+  // nested interactive content (axe); they come first so they are reached before the region's body
   if (r.template === 'collapsible')
-    return html`<section class="${cls}" id="R${r.id}"${staticAttr}${hiddenAttr} aria-labelledby="${titleId}">
-      <details open><summary class="region-header">${header}</summary>
+    return html`<section class="${cls}${buttonsOnTop && buttons ? ' has-header-buttons' : ''}" id="R${r.id}"${staticAttr}${hiddenAttr} aria-labelledby="${titleId}">
+      ${buttonsOnTop && buttons ? html`<div class="region-header-buttons">${buttons}</div>` : ''}
+      <details open><summary class="region-header"><h2 id="${titleId}">${r.title}</h2></summary>
         <div class="region-body"${scrollable(r)}>${body}</div>
         ${!buttonsOnTop && buttons ? html`<footer class="region-footer">${buttons}</footer>` : ''}
       </details></section>`;
@@ -508,7 +522,8 @@ async function slottedShell(ctx: PageContext, r: Region, hidden: Set<string>, bo
   const plain = (b: Button) => !b.slot || b.slot === 'region';
   const top = await buttonsFor(ctx, r.id, (b) => TOP_SLOTS.has(b.slot ?? '') || (onTop && plain(b)));
   const left = await buttonsFor(ctx, r.id, (b) => LEFT_SLOTS.has(b.slot ?? ''));
-  const right = await buttonsFor(ctx, r.id, (b) => b.slot === 'next' || (!onTop && plain(b)));
+  // (167) Next is the last button of the bar, as in APEX: the region's own buttons come before it
+  const right = await buttonsFor(ctx, r.id, (b) => b.slot === 'next' || (!onTop && plain(b)), (b) => (b.slot === 'next' ? 1 : 0));
   const cls = `region region-${r.type} region-${r.template} col-${r.columns}${templateClasses('region', r.template_options)}`;
   const hiddenAttr = hidden.has(`R${r.id}`) ? raw(' hidden') : '';
   const staticAttr = r.static_id ? raw(` data-static-id="${esc(r.static_id)}"`) : '';
@@ -518,9 +533,11 @@ async function slottedShell(ctx: PageContext, r: Region, hidden: Set<string>, bo
     return html`<section class="${cls}" id="R${r.id}"${staticAttr}${hiddenAttr} aria-label="${r.title}">
       ${top ? html`<div class="region-toolbar">${top}</div>` : ''}${body}${footer}</section>`;
   const header = html`<h2 id="${titleId}">${r.title}</h2>${top}`;
+  // (166) as above: the header buttons beside the summary, not in it
   if (r.template === 'collapsible')
-    return html`<section class="${cls}" id="R${r.id}"${staticAttr}${hiddenAttr} aria-labelledby="${titleId}">
-      <details open><summary class="region-header">${header}</summary><div class="region-body"${scrollable(r)}>${body}</div>${footer}</details></section>`;
+    return html`<section class="${cls}${top ? ' has-header-buttons' : ''}" id="R${r.id}"${staticAttr}${hiddenAttr} aria-labelledby="${titleId}">
+      ${top ? html`<div class="region-header-buttons">${top}</div>` : ''}
+      <details open><summary class="region-header"><h2 id="${titleId}">${r.title}</h2></summary><div class="region-body"${scrollable(r)}>${body}</div>${footer}</details></section>`;
   return html`<section class="${cls}" id="R${r.id}"${staticAttr}${hiddenAttr}${r.title ? raw(` aria-labelledby="${titleId}"`) : ''}>
     ${r.title || top ? html`<header class="region-header">${header}</header>` : ''}
     <div class="region-body"${scrollable(r)}>${body}</div>${footer}

package/src/runtime/signin.ts

@@ -34,7 +34,7 @@ export const LOGIN_USER = '__LOGIN_USER';
 
 export async function signInForm(
   app: App, locale: Locale, session: Session, next: string,
-  o: { error?: string; username?: string; formId?: string } = {},
+  o: { error?: string; username?: string; formId?: string; autofocus?: boolean } = {},
 ): Promise<Raw> {
   const t = locale.t;
   // database accounts and custom authentication: the user name and password form only
@@ -48,7 +48,7 @@ export async function signInForm(
   const fields = html`<input type="hidden" name="__csrf" value="${session.csrf_token}"${fa}>
     <input type="hidden" name="next" value="${next}"${fa}>
     ${app.time_zone_auto ? html`<input type="hidden" name="__tz" value=""${fa}>` : ''}
-    <div class="field"><label class="label" for="username">${t('login.username')}</label><input id="username" name="username" value="${o.username ?? ''}" autocomplete="username" autofocus required maxlength="100"${fa}></div>
+    <div class="field"><label class="label" for="username">${t('login.username')}</label><input id="username" name="username" value="${o.username ?? ''}" autocomplete="username"${o.autofocus === false ? '' : raw(' autofocus')} required maxlength="100"${fa}></div>
     <div class="field"><label class="label" for="password">${t('login.password')}</label><input id="password" name="password" type="password" autocomplete="current-password" required maxlength="200"${fa}></div>
     ${remember ? html`<label class="check"><input type="checkbox" name="remember" value="true"${fa}> ${t('login.remember', { days: remember })}</label>` : ''}
     <button class="btn btn-hot"${fa}>${t('login.submit')}</button>
@@ -65,8 +65,8 @@ export async function signInForm(
       : providers.length ? '' : html`<p>${t('login.none')}</p>`}`;
 }
 
-/** The "login" region of an application's own login page. */
-export async function renderLoginRegion(ctx: PageContext): Promise<Raw> {
+/** The "login" region of an application's own login page; (167) {"autofocus": false} leaves the focus where the page puts it. */
+export async function renderLoginRegion(ctx: PageContext, config: { autofocus?: unknown } = {}): Promise<Raw> {
   const s = ctx.session.state;
   const error = s[LOGIN_ERROR] ?? undefined;
   const username = s[LOGIN_USER] ?? undefined;
@@ -76,6 +76,6 @@ export async function renderLoginRegion(ctx: PageContext): Promise<Raw> {
   ctx.detached.push(html`<form id="${formId}" method="post" action="/a/${ctx.app.alias}/login"></form>`);
   const next = safeNext(ctx.app, ctx.params.get('next') ?? undefined);
   const here = `${ctx.base}/${ctx.page.page_no}${ctx.params.get('next') ? `?next=${encodeURIComponent(next)}` : ''}`;
-  return html`<div class="login-region">${await signInForm(ctx.app, ctx.locale, ctx.session, next, { error, username, formId })}
+  return html`<div class="login-region">${await signInForm(ctx.app, ctx.locale, ctx.session, next, { error, username, formId, autofocus: config.autofocus !== false })}
     ${languagePicker(ctx.app, ctx.locale, here)}</div>`;
 }