pgkiln 0.58.0 → 0.60.0

package/src/builder/routes.ts

@@ -19,6 +19,7 @@ import { appOr404 } from './forms.ts';
 import { docToFiles, filesToZip } from '../appfiles.ts';
 import { homeRoutes, rememberApp } from './home.ts';
 import { currentWorkspace, placeApp, workshopDb, workspaceRoutes } from './workspaces.ts';
+import { securityRoutes } from './security.ts';
 import { instanceRoutes } from './instance.ts';
 import { saveTimeZoneSettings, timeZoneSettings } from './globalization.ts';
 import { WIZARD_KINDS, wizardRoutes, wizardTables } from './wizards.ts';
@@ -26,6 +27,7 @@ import { appFromFileRoutes } from './appfromfile.ts';
 import { clearDevbar } from '../runtime/devbar.ts';
 import { EMAIL } from './find-workspace.ts';
 import { cookieLanguage, LANG_COOKIE, tr, translatorFor, validBuilderLanguage } from './i18n.ts';
+import { checkSecondFactor, codesLeft, hasFactor, leavesTooFewAdmins } from '../mfa.ts';
 import { chooseLanguage, langCookieOptions, languageRoutes, signInLanguageLinks } from './language.ts';
 
 // Builder pages: sign-in, workspace and app home, settings, activity and
@@ -148,27 +150,124 @@ export async function builderRoutes(app: FastifyInstance) {
       flash(s, tx(workspace ? 'signin.invalid_ws' : 'signin.invalid'), 'error');
       return back(reply, s, again);
     }
+    // (sprint 126, SEC-2) a developer with a second factor: the password was right, the session comes after the code
+    if (await hasFactor(dev.username)) {
+      s.state.__MFA = JSON.stringify({ u: dev.username, ws: ws ? String(ws.id) : null, w: workspace, next, remember: req.body?.remember === '1', weak: password === 'admin' || password === dev.username, at: Date.now() });
+      await saveState(s);
+      return reply.redirect(`${BASE}/login/2fa`, 303);
+    }
+    return finishSignIn(req, reply, s, { username: dev.username, language: dev.language }, { ws: ws ? String(ws.id) : null, workspace, next, remember: req.body?.remember === '1', weak: password === 'admin' || password === dev.username, picked, detail: 'builder' });
+  });
+
+  /** The session after a successful sign-in (password, and the second factor when the developer has one). */
+  async function finishSignIn(req: Req, reply: Parameters<typeof back>[0], s: Awaited<ReturnType<typeof getSession>>, dev: { username: string; language: string | null },
+    o: { ws: string | null; workspace: string; next: string; remember: boolean; weak: boolean; picked: ReturnType<typeof validBuilderLanguage>; detail: string }) {
+    const ip = clientIp(req);
+    const { picked, next, workspace } = o;
     await destroySession(reply, s, BASE);
     const ns = await createSession(reply, null, BASE, dev.username);
     // the builder theme chosen earlier on this device
     const theme = validTheme(req.cookies?.[THEME_COOKIE]);
     if (theme) ns.state.__BTHEME = theme;
-    if (ws) ns.state.__WS = String(ws.id);
+    if (o.ws) ns.state.__WS = o.ws;
     // (sprint 121) the builder language: a link chosen on the sign-in page is stored for the developer; else theirs
     if (picked) await chooseLanguage(reply, ns, picked);
     else {
       ns.state.__BLANG = validBuilderLanguage(dev.language) ?? 'en';
       if (dev.language && ns.state.__BLANG !== 'en') reply.setCookie(LANG_COOKIE, ns.state.__BLANG, langCookieOptions());
     }
-    if (password === 'admin' || password === dev.username) ns.state.__WEAK = '1';
+    if (o.weak) ns.state.__WEAK = '1';
     await saveState(ns);
-    if (req.body?.remember === '1')
+    if (o.remember)
       reply.setCookie(REMEMBER_COOKIE, Buffer.from(JSON.stringify({ w: workspace, u: dev.username })).toString('base64url'), {
         path: BASE, httpOnly: true, sameSite: 'lax', maxAge: 365 * 24 * 3600, secure: process.env.COOKIE_SECURE === 'true',
       });
     else reply.clearCookie(REMEMBER_COOKIE, { path: BASE });
-    logActivity({ username: dev.username, event: 'login', ip, detail: 'builder' });
+    logActivity({ username: dev.username, event: 'login', ip, detail: o.detail });
     return reply.redirect(next, 303);
+  }
+
+  // (sprint 126, SEC-2) the second step: a code from the authenticator app, or a recovery code
+  const MFA_SECONDS = 300;
+  const pendingMfa = (s: { state: Record<string, any> }) => {
+    try {
+      const p = JSON.parse(String(s.state.__MFA ?? ''));
+      return p && typeof p.u === 'string' && Date.now() - Number(p.at) < MFA_SECONDS * 1000 ? p as { u: string; ws: string | null; w: string; next: string; remember: boolean; weak: boolean } : null;
+    } catch {
+      return null;
+    }
+  };
+  app.get(`${BASE}/login/2fa`, async (req: Req, reply) => {
+    const s = await getSession(req, reply, null, BASE);
+    if (s.username) return reply.redirect(`${BASE}/home`);
+    const p = pendingMfa(s);
+    const tx = translatorFor(validBuilderLanguage(s.state.__BLANG) ?? cookieLanguage(req));
+    if (!p) {
+      delete s.state.__MFA;
+      flash(s, tx('mfa.expired'), 'error');
+      return back(reply, s, `${BASE}/login`);
+    }
+    const error = takeFlash(s, '__ERROR');
+    await saveState(s);
+    return reply.type('text/html').send(documentShell(
+      `${tx('mfa.step_title')} · ${tx('shell.builder')}`,
+      html`<main class="signin">
+        <section class="signin-hero" aria-label="pgkiln">
+          <span class="signin-logo" aria-hidden="true">${brandMark()}</span>
+          <h1 class="signin-title">pgkiln</h1>
+          <p class="signin-tagline">${tx('signin.tagline')}</p>
+        </section>
+        <section class="signin-panel">
+          <form method="post" class="signin-form">
+            <h2>${tx('mfa.step_title')}</h2>
+            <p class="muted u-mt0">${tx('mfa.step_intro', { user: p.u })}</p>
+            ${error ? html`<div class="alert alert-error" role="alert">${error}</div>` : ''}
+            ${csrf(s)}
+            <div class="field signin-field"><label class="label" for="f_code">${tx('mfa.code')}</label>
+              <div class="signin-input">${icon('key')}<input id="f_code" name="code" required autocomplete="one-time-code" autofocus maxlength="20" spellcheck="false" autocapitalize="off"></div>
+              <small class="help">${tx('mfa.code_help')}</small></div>
+            <button class="btn btn-hot signin-submit">${tx('mfa.verify')}</button>
+            <p class="muted small signin-hint"><a href="${BASE}/login">${tx('mfa.cancel')}</a> · ${tx('mfa.locked_out')}</p>
+          </form>
+        </section>
+      </main>`,
+      'login-body ide-login signin-body', {}, builderHead(),
+      { theme: validTheme(req.cookies?.[THEME_COOKIE]) ?? 'dark', lang: tx.lang },
+    ));
+  });
+  app.post(`${BASE}/login/2fa`, async (req: Req, reply) => {
+    const s = await getSession(req, reply, null, BASE);
+    const ip = clientIp(req);
+    const picked = validBuilderLanguage(s.state.__BLANG);
+    const tx = translatorFor(picked ?? cookieLanguage(req));
+    const p = pendingMfa(s);
+    if (req.body?.__csrf !== s.csrf_token || !p) {
+      delete s.state.__MFA;
+      flash(s, tx(p ? 'signin.expired' : 'mfa.expired'), 'error');
+      return back(reply, s, `${BASE}/login`);
+    }
+    if (await loginThrottled(null, p.u, ip)) {
+      logActivity({ username: p.u, event: 'login_locked', ip, detail: 'builder 2fa' });
+      delete s.state.__MFA;
+      flash(s, tx('signin.throttled'), 'error');
+      return back(reply, s, `${BASE}/login`);
+    }
+    const ok = await checkSecondFactor(p.u, String(req.body?.code ?? '').slice(0, 40));
+    if (!ok) {
+      // counts with the failed passwords (lockout after the same number of attempts)
+      await logActivity({ username: p.u, event: 'login_failed', ip, detail: 'builder 2fa' });
+      flash(s, tx('mfa.wrong'), 'error');
+      return back(reply, s, `${BASE}/login/2fa`);
+    }
+    const dev = await owner.one<{ username: string; language: string | null }>('select username, language from meta.developer where username = $1', [p.u]);
+    if (!dev) return back(reply, s, `${BASE}/login`);
+    if (ok.kind === 'recovery') {
+      const left = await codesLeft(p.u);
+      await logActivity({ username: p.u, event: '2fa_recovery_used', ip, detail: `${left} left` });
+      // to the Security page: one code fewer, maybe time for new ones
+      return finishSignIn(req, reply, s, dev, { ws: p.ws, workspace: p.w, next: `${BASE}/security`, remember: p.remember, weak: p.weak, picked, detail: 'builder 2fa (recovery code)' });
+    }
+    return finishSignIn(req, reply, s, dev, { ws: p.ws, workspace: p.w, next: p.next, remember: p.remember, weak: p.weak, picked, detail: 'builder 2fa' });
   });
 
   app.post(`${BASE}/logout`, async (req: Req, reply) => {
@@ -205,6 +304,7 @@ export async function builderRoutes(app: FastifyInstance) {
   await languageRoutes(app);
   await workspaceRoutes(app);
   await instanceRoutes(app);
+  await securityRoutes(app);
   await wizardRoutes(app);
   await appFromFileRoutes(app);
 
@@ -686,40 +786,45 @@ export async function builderRoutes(app: FastifyInstance) {
   app.get(`${BASE}/developers`, async (req: Req, reply) => {
     const s = await developer(req, reply);
     if (!s) return;
-    const devs = (await owner.query('select username, is_admin, email from meta.developer order by 1')).rows;
+    const devs = (await owner.query(`select username, is_admin, email, exists (select 1 from meta.developer_factor f where f.username = d.username) as mfa
+                                       from meta.developer d order by 1`)).rows;
     const admin = devs.some((d) => d.username === s.username && d.is_admin);
     const me = devs.find((d) => d.username === s.username);
-    const main = html`<h1 class="u-mb1">Developers</h1>
+    const tx = tr(s);
+    const main = html`<h1 class="u-mb1">${tx('dev.title')}</h1>
       <div class="columns">
-        ${region('Change your password', html`<form method="post" action="${BASE}/developers/password">${csrf(s)}
+        ${region(tx('dev.change_pw'), html`<form method="post" action="${BASE}/developers/password">${csrf(s)}
           <div class="form-grid">
-            ${input('current', 'Current password', '', { type: 'password', required: true, auto: 'current-password' })}
-            ${input('password', 'New password', '', { type: 'password', required: true, auto: 'new-password', help: 'At least 8 characters.' })}
+            ${input('current', tx('dev.current'), '', { type: 'password', required: true, auto: 'current-password' })}
+            ${input('password', tx('dev.new'), '', { type: 'password', required: true, auto: 'new-password', help: tx('dev.min8') })}
           </div>
-          <div class="buttons"><button class="btn btn-hot">Change password</button></div></form>`)}
-        ${region('Your e-mail address', html`<form method="post" action="${BASE}/developers/email">${csrf(s)}<input type="hidden" name="username" value="${s.username}">
-          <div class="form-grid">${input('email', 'E-mail address', me?.email ?? '', { type: 'email', auto: 'email', help: '"Find my workspace" on the sign-in page sends your workspaces to it. Empty: none.' })}</div>
-          <div class="buttons"><button class="btn">Save</button></div></form>`)}
-        ${region('Developer accounts', html`
-          <p class="muted u-mt0">Administrators add and remove developers and can break other developers' page and application locks.</p>
-          <div class="table-wrap"><table class="report report-reflow"><thead><tr><th>Username</th><th>Role</th><th>E-mail</th><th></th></tr></thead><tbody>
-            ${devs.map((d) => html`<tr><td data-label="Username">${d.username}${d.username === s.username ? ' (you)' : ''}</td><td data-label="Role">${d.is_admin ? 'Administrator' : 'Developer'}</td>
-              <td data-label="E-mail">${admin && d.username !== s.username
-                ? html`<form method="post" action="${BASE}/developers/email" class="search u-m0 u-mwnone">${csrf(s)}<input type="hidden" name="username" value="${d.username}"><input name="email" type="email" value="${d.email ?? ''}" aria-label="E-mail address of ${d.username}" placeholder="none"><button class="btn">Save</button></form>`
-                : html`<span class="wrap-anywhere">${d.email ?? ''}</span>`}</td><td>${d.username === s.username || !admin ? '' : html`
-              <form method="post" action="${BASE}/developers/admin" class="u-inline">${csrf(s)}<input type="hidden" name="username" value="${d.username}"><input type="hidden" name="is_admin" value="${d.is_admin ? 'false' : 'true'}"><button class="link-button">${d.is_admin ? 'Make developer' : 'Make administrator'}</button></form>
-              · <form method="post" action="${BASE}/developers/delete" class="u-inline">${csrf(s)}<input type="hidden" name="username" value="${d.username}"><button class="link-button" data-confirm="Remove developer ${d.username}?">Remove</button></form>`}</td></tr>`)}
+          <div class="buttons"><button class="btn btn-hot">${tx('dev.change_btn')}</button></div></form>`)}
+        ${region(tx('dev.your_email'), html`<form method="post" action="${BASE}/developers/email">${csrf(s)}<input type="hidden" name="username" value="${s.username}">
+          <div class="form-grid">${input('email', tx('dev.email'), me?.email ?? '', { type: 'email', auto: 'email', help: tx('dev.email_help') })}</div>
+          <div class="buttons"><button class="btn">${tx('dev.save')}</button></div></form>`)}
+        ${region(tx('dev.accounts'), html`
+          <p class="muted u-mt0">${tx('dev.accounts_help')}</p>
+          <div class="table-wrap"><table class="report report-reflow"><thead><tr><th>${tx('dev.username')}</th><th>${tx('dev.role')}</th><th>${tx('dev.email_col')}</th><th>${tx('mfa.column')}</th><th></th></tr></thead><tbody>
+            ${devs.map((d) => html`<tr><td data-label="${tx('dev.username')}">${d.username}${d.username === s.username ? ` ${tx('dev.you')}` : ''}</td><td data-label="${tx('dev.role')}">${d.is_admin ? tx('dev.administrator') : tx('dev.developer')}</td>
+              <td data-label="${tx('dev.email_col')}">${admin && d.username !== s.username
+                ? html`<form method="post" action="${BASE}/developers/email" class="search u-m0 u-mwnone">${csrf(s)}<input type="hidden" name="username" value="${d.username}"><input name="email" type="email" value="${d.email ?? ''}" aria-label="${tx('dev.email_of', { user: d.username })}" placeholder="${tx('dev.none')}"><button class="btn">${tx('dev.save')}</button></form>`
+                : html`<span class="wrap-anywhere">${d.email ?? ''}</span>`}</td>
+              <td data-label="${tx('mfa.column')}">${d.mfa ? html`${icon('lock')} ${tx('mfa.on')}${admin && d.username !== s.username ? html` <details class="menu u-inline"><summary class="link-button">${tx('mfa.reset')}</summary><div class="menu-panel"><form method="post" action="${BASE}/developers/reset-2fa" class="menu-section">${csrf(s)}<input type="hidden" name="username" value="${d.username}">
+                  ${input(`reason_${d.username}`.replace(/[^\w]/g, '_'), tx('mfa.reason'), '', { required: true, help: tx('mfa.reset_help', { user: d.username }) })}
+                  <button class="btn btn-sm btn-danger">${tx('mfa.reset_btn')}</button></form></div></details>` : ''}` : html`<span class="muted">${tx('mfa.off')}</span>`}</td><td>${d.username === s.username || !admin ? '' : html`
+              <form method="post" action="${BASE}/developers/admin" class="u-inline">${csrf(s)}<input type="hidden" name="username" value="${d.username}"><input type="hidden" name="is_admin" value="${d.is_admin ? 'false' : 'true'}"><button class="link-button">${d.is_admin ? tx('dev.make_dev') : tx('dev.make_admin')}</button></form>
+              · <form method="post" action="${BASE}/developers/delete" class="u-inline">${csrf(s)}<input type="hidden" name="username" value="${d.username}"><button class="link-button" data-confirm="${tx('dev.remove_confirm', { user: d.username })}">${tx('dev.remove')}</button></form>`}</td></tr>`)}
           </tbody></table></div>
           ${admin
-            ? html`<h3>Add developer</h3>
+            ? html`<h3>${tx('dev.add')}</h3>
               <form method="post" action="${BASE}/developers">${csrf(s)}
-                <div class="form-grid">${input('username', 'Username', '', { required: true })}${input('password', 'Password', '', { type: 'password', required: true, auto: 'new-password' })}${input('email', 'E-mail address', '', { type: 'email', help: 'Optional: for "Find my workspace".' })}</div>
-                <div class="field"><label class="check"><input type="checkbox" name="is_admin" value="true"> Administrator</label></div>
-                <div class="buttons"><button class="btn btn-hot">Add developer</button></div>
+                <div class="form-grid">${input('username', tx('dev.username'), '', { required: true })}${input('password', tx('dev.password'), '', { type: 'password', required: true, auto: 'new-password' })}${input('email', tx('dev.email'), '', { type: 'email', help: tx('dev.optional_email') })}</div>
+                <div class="field"><label class="check"><input type="checkbox" name="is_admin" value="true"> ${tx('dev.administrator')}</label></div>
+                <div class="buttons"><button class="btn btn-hot">${tx('dev.add')}</button></div>
               </form>`
-            : html`<p class="muted">Only administrators add and remove developers.</p>`}`)}
+            : html`<p class="muted">${tx('dev.admins_only')}</p>`}`)}
       </div>`;
-    return send(reply, s, shell(s, 'Developers', [['Developers']], main, 'developers'));
+    return send(reply, s, shell(s, tx('dev.title'), [['Developers']], main, 'developers'));
   });
 
   app.post(`${BASE}/developers`, async (req: Req, reply) => {
@@ -732,7 +837,7 @@ export async function builderRoutes(app: FastifyInstance) {
       const ws = currentWorkspace(s);
       await owner.tx(async (c) => {
         const email = String(req.body?.email ?? '').trim();
-        if (email && !EMAIL.test(email)) throw new Error('The e-mail address is not valid.');
+        if (email && !EMAIL.test(email)) throw new Error(tr(s)('dev.err.email'));
         await c.query('insert into meta.developer (username, password_hash, is_admin, email) values ($1, meta.hash_password($2), $3, $4)', [req.body?.username?.trim(), req.body?.password, req.body?.is_admin === 'true', email || null]);
         // (064) a new developer works in the current workspace; more on Workspace utilities → Workspaces
         // (the insert trigger put them in Default)
@@ -741,7 +846,7 @@ export async function builderRoutes(app: FastifyInstance) {
           await c.query('insert into meta.workspace_member (workspace_id, username) values ($1, $2)', [ws, req.body?.username?.trim()]);
         }
       });
-      flash(s, ws > 0 ? `Developer added to workspace ${s.workspace!.name}.` : 'Developer added.');
+      flash(s, ws > 0 ? tr(s)('dev.added_ws', { name: s.workspace!.name }) : tr(s)('dev.added'));
     } catch (e) {
       flash(s, (e as Error).message, 'error');
     }
@@ -759,11 +864,11 @@ export async function builderRoutes(app: FastifyInstance) {
           where username = $1 and password_hash = crypt($2, password_hash)`,
         [s.username, req.body?.current ?? '', req.body?.password],
       );
-      if (r.rowCount !== 1) throw new Error('The current password is not correct.');
+      if (r.rowCount !== 1) throw new Error(tr(s)('dev.err.current'));
       // End all other builder sessions of this developer.
       await owner.query('delete from meta.session where app_id is null and username = $1 and id <> $2', [s.username, s.id]);
       delete s.state.__WEAK;
-      flash(s, 'Password changed.');
+      flash(s, tr(s)('dev.pw_changed'));
     } catch (e) {
       flash(s, (e as Error).message, 'error');
     }
@@ -777,10 +882,10 @@ export async function builderRoutes(app: FastifyInstance) {
     const who = String(req.body?.username ?? s.username);
     if (who !== s.username && !(await isAdmin(s.username))) return reply.code(403).send('Only administrators change other developers\' addresses.');
     const email = String(req.body?.email ?? '').trim();
-    if (email && (!EMAIL.test(email) || email.length > 254)) flash(s, 'The e-mail address is not valid.', 'error');
+    if (email && (!EMAIL.test(email) || email.length > 254)) flash(s, tr(s)('dev.err.email'), 'error');
     else {
       const r = await owner.query('update meta.developer set email = $2 where username = $1', [who, email || null]);
-      flash(s, r.rowCount ? 'E-mail address saved.' : 'Not found.', r.rowCount ? 'ok' : 'error');
+      flash(s, tr(s)(r.rowCount ? 'dev.email_saved' : 'dev.not_found'), r.rowCount ? 'ok' : 'error');
     }
     return back(reply, s, `${BASE}/developers`);
   });
@@ -790,8 +895,12 @@ export async function builderRoutes(app: FastifyInstance) {
     if (!s) return;
     if (!(await isAdmin(s.username))) return reply.code(403).send('Only administrators change roles.');
     if (req.body?.username && req.body.username !== s.username) {
+      if (req.body.is_admin !== 'true' && (await leavesTooFewAdmins(req.body.username))) {
+        flash(s, tr(s)('mfa.keep_admins'), 'error');
+        return back(reply, s, `${BASE}/developers`);
+      }
       await owner.query('update meta.developer set is_admin = $2 where username = $1', [req.body.username, req.body.is_admin === 'true']);
-      flash(s, 'Role changed.');
+      flash(s, tr(s)('dev.role_changed'));
     }
     return back(reply, s, `${BASE}/developers`);
   });
@@ -801,9 +910,13 @@ export async function builderRoutes(app: FastifyInstance) {
     if (!s) return;
     if (!(await isAdmin(s.username))) return reply.code(403).send('Only administrators remove developers.');
     if (req.body?.username && req.body.username !== s.username) {
+      if (await leavesTooFewAdmins(req.body.username)) {
+        flash(s, tr(s)('mfa.keep_admins'), 'error');
+        return back(reply, s, `${BASE}/developers`);
+      }
       await owner.query('delete from meta.developer where username = $1', [req.body.username]);
       await owner.query('delete from meta.session where app_id is null and username = $1', [req.body.username]);
-      flash(s, 'Developer removed.');
+      flash(s, tr(s)('dev.removed'));
     }
     return back(reply, s, `${BASE}/developers`);
   });

package/src/builder/security.ts

@@ -0,0 +1,261 @@
+import type { FastifyInstance } from 'fastify';
+import { owner } from '../db.ts';
+import { html, raw, type Raw } from '../html.ts';
+import { icon } from '../icons.ts';
+import {
+  addTotp, adminEmails, adminFactors, codesLeft, confirmRecoveryCodes, factorsOf, hasFactor, matchTotp, MFA_POLICIES, mfaPolicy, newRecoveryCodes, newTotpSecret,
+  notifyMfa, otpauthUri, policyProblem, requiredFor, resetFactors, setPolicy, unbase32, type MfaPolicy,
+} from '../mfa.ts';
+import { qrSvg } from '../qrcode.ts';
+import { secretKeyConfigured } from '../secrets.ts';
+import { clientIp, logActivity, type Session } from '../session.ts';
+import { tr } from './i18n.ts';
+import { isAdmin } from './locks.ts';
+import { back, BASE, csrf, developer, flash, input, region, send, shell, type Req } from './ui.ts';
+
+// (sprint 126, SEC-2 and SEC-6) Developer › Security: a developer's second factors (authenticator apps, TOTP)
+// and recovery codes; the instance's policy (Instance settings); an administrator's reset of another
+// developer's factors (Developers). Adding an app: a new secret is kept in the session until a code from the
+// app confirms it, then stored encrypted with the instance key. Recovery codes are shown once; they count
+// only after "I saved them". Removing a factor asks for the password, and is refused when it would leave a
+// developer the policy covers without one, or the instance without enough administrators who have one.
+
+const SECRET_MINUTES = 10;
+
+async function verifyPassword(username: string, password: string) {
+  return !!(await owner.one('select 1 as ok from meta.developer where username = $1 and crypt($2, password_hash) = password_hash', [username, password]));
+}
+
+export async function securityRoutes(app: FastifyInstance) {
+  app.get(`${BASE}/security`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const tx = tr(s);
+    const me = s.username!;
+    const [factors, left, pol, admin] = await Promise.all([factorsOf(me), codesLeft(me), mfaPolicy(), isAdmin(me)]);
+    const required = requiredFor(pol.policy, admin);
+    const pending = (() => {
+      try {
+        const p = JSON.parse(String(s.state.__TOTP_NEW ?? ''));
+        return p && Date.now() - p.at < SECRET_MINUTES * 60_000 ? (p as { secret: string; at: number }) : null;
+      } catch {
+        return null;
+      }
+    })();
+    const shownCodes: string[] | null = (() => {
+      try {
+        const c = JSON.parse(String(s.state.__CODES_NEW ?? ''));
+        return Array.isArray(c) ? c : null;
+      } catch {
+        return null;
+      }
+    })();
+    delete s.state.__MFA_DUE; // the page says it itself
+    const when = (v: string | null) => (v ? String(v).slice(0, 16).replace('T', ' ') : '—');
+    const setup = pending
+      ? html`<form method="post" action="${BASE}/security/totp/confirm">${csrf(s)}
+          <ol class="mfa-steps">
+            <li>${tx('mfa.scan')}</li>
+            <li>${tx('mfa.or_enter')} <code class="mfa-secret">${pending.secret.replace(/(.{4})/g, '$1 ').trim()}</code></li>
+            <li>${tx('mfa.enter_code')}</li>
+          </ol>
+          <div class="mfa-qr">${raw(qrSvg(otpauthUri(pending.secret, me), { label: tx('mfa.qr_label'), px: 4 }) ?? '')}</div>
+          <div class="form-grid">
+            ${input('name', tx('mfa.app_name'), tx('mfa.app_default'), { required: true })}
+            <div class="field"><label class="label" for="f_code">${tx('mfa.code')}</label><input id="f_code" name="code" required inputmode="numeric" pattern="[0-9 ]{6,7}" autocomplete="one-time-code" maxlength="7"></div>
+          </div>
+          <div class="buttons"><button class="btn btn-hot">${tx('mfa.confirm_app')}</button></div></form>
+        <form method="post" action="${BASE}/security/totp/cancel">${csrf(s)}<button class="link-button">${tx('mfa.cancel_setup')}</button></form>`
+      : html`<form method="post" action="${BASE}/security/totp/start">${csrf(s)}
+          <div class="buttons"><button class="btn${factors.length ? '' : ' btn-hot'}"${secretKeyConfigured() ? '' : raw(' disabled')}>${icon('plus')} ${tx('mfa.add_app')}</button></div>
+          ${secretKeyConfigured() ? '' : html`<p class="alert alert-error" role="alert">${tx('mfa.no_key')}</p>`}</form>`;
+    const main = html`<h1 class="u-mb1">${tx('mfa.title')}</h1>
+      <p class="muted u-mt0">${tx('mfa.intro')}</p>
+      ${required && !factors.length ? html`<div class="alert alert-warning" role="alert">${tx('mfa.required_you')}</div>` : ''}
+      ${shownCodes
+        ? region(tx('mfa.codes_title'), html`<p>${tx('mfa.codes_once')}</p>
+            <ol class="mfa-codes">${shownCodes.map((c) => html`<li><code>${c}</code></li>`)}</ol>
+            <form method="post" action="${BASE}/security/codes/confirm">${csrf(s)}
+              <label class="check"><input type="checkbox" name="saved" value="1" required> ${tx('mfa.codes_saved')}</label>
+              <div class="buttons"><button class="btn btn-hot">${tx('mfa.codes_done')}</button></div></form>`, '', 'codes')
+        : ''}
+      <div class="columns">
+        ${region(tx('mfa.apps'), html`${factors.length
+          ? html`<div class="table-wrap"><table class="report report-reflow"><thead><tr><th>${tx('mfa.app_name')}</th><th>${tx('mfa.added')}</th><th>${tx('mfa.last_used')}</th><th></th></tr></thead><tbody>
+              ${factors.map((f) => html`<tr><td data-label="${tx('mfa.app_name')}">${icon('key')} ${f.name}</td><td data-label="${tx('mfa.added')}">${when(f.created_at)}</td><td data-label="${tx('mfa.last_used')}">${when(f.last_used_at)}</td>
+                <td><details class="menu"><summary class="btn btn-sm">${tx('mfa.remove')}</summary><div class="menu-panel"><form method="post" action="${BASE}/security/factor/${f.id}/delete" class="menu-section">${csrf(s)}
+                  ${input(`password_${f.id}`, tx('mfa.your_password'), '', { type: 'password', required: true, auto: 'current-password' })}
+                  <button class="btn btn-sm btn-danger">${tx('mfa.remove_app')}</button></form></div></details></td></tr>`)}
+              </tbody></table></div>`
+          : html`<p class="muted">${tx('mfa.no_apps')}</p>`}
+          ${setup}`)}
+        ${region(tx('mfa.codes_title'), html`<p class="u-mt0">${factors.length || left ? tx('mfa.codes_left', { n: left }) : tx('mfa.codes_after')}</p>
+          ${factors.length && left < 3 ? html`<p class="alert alert-warning" role="status">${tx('mfa.codes_low')}</p>` : ''}
+          ${factors.length ? html`<form method="post" action="${BASE}/security/codes">${csrf(s)}<button class="btn" data-confirm="${tx('mfa.codes_new_confirm')}">${tx('mfa.codes_new')}</button></form>` : ''}`)}
+      </div>`;
+    return send(reply, s, shell(s, tx('mfa.title'), [[tx('mfa.title')]], main, 'developers'));
+  });
+
+  app.post(`${BASE}/security/totp/start`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    if (!secretKeyConfigured()) return back(reply, s, `${BASE}/security`);
+    s.state.__TOTP_NEW = JSON.stringify({ secret: newTotpSecret(), at: Date.now() });
+    return back(reply, s, `${BASE}/security`);
+  });
+
+  app.post(`${BASE}/security/totp/cancel`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    delete s.state.__TOTP_NEW;
+    return back(reply, s, `${BASE}/security`);
+  });
+
+  app.post(`${BASE}/security/totp/confirm`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const tx = tr(s);
+    let pending: { secret: string; at: number } | null = null;
+    try {
+      pending = JSON.parse(String(s.state.__TOTP_NEW ?? ''));
+    } catch {
+      pending = null;
+    }
+    if (!pending || Date.now() - pending.at > SECRET_MINUTES * 60_000) {
+      delete s.state.__TOTP_NEW;
+      flash(s, tx('mfa.setup_expired'), 'error');
+      return back(reply, s, `${BASE}/security`);
+    }
+    const step = matchTotp(unbase32(pending.secret), String(req.body?.code ?? '').replace(/\s/g, ''), null);
+    if (step === null) {
+      flash(s, tx('mfa.wrong_setup'), 'error');
+      return back(reply, s, `${BASE}/security`);
+    }
+    const first = !(await hasFactor(s.username!));
+    await addTotp(s.username!, String(req.body?.name ?? ''), pending.secret, step);
+    delete s.state.__TOTP_NEW;
+    delete s.state.__MFA_DUE;
+    await logActivity({ username: s.username, event: '2fa_enrolled', ip: clientIp(req), detail: 'authenticator app' });
+    // the first app: recovery codes at once (they count only once the developer saved them)
+    if (first || !(await codesLeft(s.username!))) s.state.__CODES_NEW = JSON.stringify(await newRecoveryCodes(s.username!));
+    flash(s, tx('mfa.app_added'));
+    return back(reply, s, `${BASE}/security#codes`);
+  });
+
+  app.post(`${BASE}/security/codes`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    if (!(await hasFactor(s.username!))) return back(reply, s, `${BASE}/security`);
+    s.state.__CODES_NEW = JSON.stringify(await newRecoveryCodes(s.username!));
+    await logActivity({ username: s.username, event: '2fa_codes', ip: clientIp(req), detail: 'new recovery codes' });
+    return back(reply, s, `${BASE}/security#codes`);
+  });
+
+  app.post(`${BASE}/security/codes/confirm`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    if (req.body?.saved !== '1') return back(reply, s, `${BASE}/security#codes`);
+    await confirmRecoveryCodes(s.username!);
+    delete s.state.__CODES_NEW;
+    flash(s, tr(s)('mfa.codes_kept'));
+    return back(reply, s, `${BASE}/security`);
+  });
+
+  app.post(`${BASE}/security/factor/:id(^\\d{1,9}$)/delete`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const tx = tr(s);
+    const me = s.username!;
+    const id = Number(req.params.id);
+    const f = await owner.one('select id from meta.developer_factor where id = $1 and username = $2', [id, me]);
+    if (!f) return reply.code(404).send('Not found');
+    if (!(await verifyPassword(me, String(req.body?.[`password_${id}`] ?? '')))) {
+      await logActivity({ username: me, event: 'login_failed', ip: clientIp(req), detail: 'builder (removing a second factor)' });
+      flash(s, tx('mfa.wrong_password'), 'error');
+      return back(reply, s, `${BASE}/security`);
+    }
+    const last = (await factorsOf(me)).length === 1;
+    if (last) {
+      const pol = await mfaPolicy();
+      const admin = await isAdmin(me);
+      if (requiredFor(pol.policy, admin)) {
+        flash(s, tx('mfa.cannot_remove_required'), 'error');
+        return back(reply, s, `${BASE}/security`);
+      }
+      // (SEC-6) never fewer administrators with a factor than the policy needs
+      if (admin && pol.policy !== 'off') {
+        const { admins, enrolled } = await adminFactors();
+        if (enrolled - 1 < Math.min(2, admins)) {
+          flash(s, tx('mfa.cannot_remove_admin'), 'error');
+          return back(reply, s, `${BASE}/security`);
+        }
+      }
+    }
+    await owner.query('delete from meta.developer_factor where id = $1 and username = $2', [id, me]);
+    if (last) await owner.query('delete from meta.developer_recovery_code where username = $1', [me]);
+    await logActivity({ username: me, event: '2fa_removed', ip: clientIp(req), detail: last ? 'the last authenticator app (recovery codes removed)' : 'an authenticator app' });
+    flash(s, tx('mfa.removed'));
+    return back(reply, s, `${BASE}/security`);
+  });
+
+  // (SEC-6) an administrator resets another developer's second factors: logged, the developer and the administrators told
+  app.post(`${BASE}/developers/reset-2fa`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const tx = tr(s);
+    if (!(await isAdmin(s.username))) return reply.code(403).send('Only administrators reset second factors.');
+    const who = String(req.body?.username ?? '');
+    const reason = String(req.body?.[`reason_${who.replace(/[^\w]/g, '_')}`] ?? req.body?.reason ?? '').trim().slice(0, 200);
+    if (who === s.username) return reply.code(400).send('Use your own Security page.');
+    if (!reason) {
+      flash(s, tx('mfa.reason_needed'), 'error');
+      return back(reply, s, `${BASE}/developers`);
+    }
+    if (!(await resetFactors(who))) return reply.code(404).send('Not found');
+    await logActivity({ username: s.username, event: '2fa_reset', ip: clientIp(req), detail: `${who}: ${reason}` });
+    const dev = await owner.one<{ email: string | null }>('select email from meta.developer where username = $1', [who]);
+    await notifyMfa([dev?.email ?? '', ...(await adminEmails())], `pgkiln: two-factor sign-in of ${who} reset`,
+      `${s.username} removed the second factors of developer ${who} (reason: ${reason}). ${who} signs in with the password only until they set up an authenticator app again.`);
+    flash(s, tx('mfa.reset_done', { user: who }));
+    return back(reply, s, `${BASE}/developers`);
+  });
+
+  // (SEC-2, SEC-6) the instance's policy: off, administrators or all developers, with a grace period
+  app.post(`${BASE}/instance/mfa`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const tx = tr(s);
+    if (!(await isAdmin(s.username))) return reply.code(403).send('Only administrators change the policy.');
+    const policy = MFA_POLICIES.includes(req.body?.policy as MfaPolicy) ? (req.body!.policy as MfaPolicy) : null;
+    const grace = Number(req.body?.grace_days);
+    if (!policy || !Number.isInteger(grace) || grace < 0 || grace > 90) return reply.code(400).send('policy is off, admins or all; grace_days 0 to 90');
+    if (await policyProblem(policy)) {
+      flash(s, tx('mfa.policy_needs_admins'), 'error');
+      return back(reply, s, `${BASE}/instance#mfa`);
+    }
+    await setPolicy(policy, grace);
+    await logActivity({ username: s.username, event: '2fa_policy', ip: clientIp(req), detail: `${policy}, grace ${grace} days` });
+    await notifyMfa(await adminEmails(), `pgkiln: two-factor sign-in policy is now ${policy}`, `${s.username} set the two-factor policy to ${policy} (grace period ${grace} days).`);
+    flash(s, tx('mfa.policy_saved'));
+    return back(reply, s, `${BASE}/instance#mfa`);
+  });
+}
+
+/** The Instance settings region for the policy (administrators). */
+export async function policyRegion(s: Session): Promise<Raw> {
+  const tx = tr(s);
+  const [pol, af, without] = await Promise.all([
+    mfaPolicy(), adminFactors(),
+    owner.query<{ username: string; is_admin: boolean }>('select username, is_admin from meta.developer d where not exists (select 1 from meta.developer_factor f where f.username = d.username) order by username'),
+  ]);
+  const opt = (v: MfaPolicy) => html`<option value="${v}"${pol.policy === v ? raw(' selected') : ''}>${tx(({ off: 'mfa.policy_off', admins: 'mfa.policy_admins', all: 'mfa.policy_all' } as const)[v])}</option>`;
+  return region(tx('mfa.policy_title'), html`<form method="post" action="${BASE}/instance/mfa">${csrf(s)}
+      <div class="form-grid">
+        <div class="field"><label class="label" for="f_policy">${tx('mfa.policy_label')}</label><select id="f_policy" name="policy">${MFA_POLICIES.map(opt)}</select></div>
+        ${input('grace_days', tx('mfa.grace'), pol.graceDays, { type: 'number', help: tx('mfa.grace_help') })}
+      </div>
+      <p class="muted small">${tx('mfa.policy_help', { enrolled: af.enrolled, admins: af.admins })}</p>
+      <div class="buttons"><button class="btn btn-hot">${tx('mfa.policy_save')}</button></div></form>
+    ${without.rows.length ? html`<p class="small">${tx('mfa.without', { list: without.rows.map((d) => `${d.username}${d.is_admin ? ' (admin)' : ''}`).join(', ') })}</p>` : ''}
+    <p class="muted small">${tx('mfa.cli_note')}</p>`, '', 'mfa');
+}

package/src/builder/shared.ts

@@ -253,7 +253,7 @@ export async function sharedRoutes(app: FastifyInstance) {
                 <td data-label="${tx('sc.account')}"><a href="${BASE}/users/${u.id}">${u.username}</a>${u.display_name ? html` <span class="muted">${u.display_name}</span>` : ''}${u.active ? '' : html` <b>${tx('sc.inactive')}</b>`}</td>
                 <td data-label="${tx('sc.roles')}"><form method="post" action="${BASE}/apps/${a.id}/access/${u.id}" class="search roles-form u-m0 u-mwnone">${csrf(s)}
                   <input name="roles" value="${u.roles.join(', ')}" aria-label="${tx('sc.roles_of', { user: u.username })}" placeholder="${tx('sc.no_roles')}"><button class="btn">${tx('sc.save')}</button>
-                  ${roleHintsHtml(appHints, 'Add')}</form></td>
+                  ${roleHintsHtml(appHints, tx('us.hints_add'), tx)}</form></td>
                 <td data-label="${tx('sc.last_signin')}">${u.last_login_at ? String(u.last_login_at).slice(0, 16) : '—'}</td>
                 <td data-label=""><form method="post" action="${BASE}/apps/${a.id}/access/${u.id}/revoke">${csrf(s)}<button class="link-button" data-confirm="${tx('sc.revoke_confirm', { user: u.username, app: a.name })}">${tx('sc.revoke')}</button></form></td>
               </tr>`)
@@ -269,7 +269,7 @@ export async function sharedRoutes(app: FastifyInstance) {
               <small class="help">${tx('sc.existing')} <a href="${BASE}/users">${tx('sc.create_in_users')}</a></small></div>
             <div class="field"><label class="label" for="f_roles">${tx('sc.roles')}</label>
               <input id="f_roles" name="roles" placeholder="${tx('sc.roles_ph')}">
-              ${roleHintsHtml(appHints)}</div>
+              ${roleHintsHtml(appHints, undefined, tx)}</div>
           </div>
           <div class="buttons"><button class="btn btn-hot">${tx('sc.grant')}</button></div>
         </form>`);