@wilm-ai/wilma-cli 2.3.2 → 2.4.0

package/dist/login-server.js

@@ -2,20 +2,29 @@ import { createServer } from "node:http";
 import { randomBytes } from "node:crypto";
 import { spawn } from "node:child_process";
 import { AuthenticationError } from "@wilm-ai/wilma-client";
-import { getConfigPath, loadConfig } from "./config.js";
-import { adoptSession } from "./agent-data.js";
+import { getConfigPath, loadConfig, saveConfig } from "./config.js";
+import { adoptSession, roleOf } from "./agent-data.js";
+import { removeLogin, setHiddenChildren } from "./access.js";
 import { saveLogin, TotpSecretInvalidError, TotpSecretRequiredError, verifyLoginSession } from "./credentials.js";
 import { normalizeTenantUrl, searchTenants } from "./tenant-search.js";
 const MAX_ATTEMPTS = 10;
 const MAX_BODY_BYTES = 16 * 1024;
 const IDLE_TIMEOUT_MS = 15 * 60 * 1000;
-/** The children per connected Wilma, for the page's "You're connected" list. */
+/** Each saved login, as the page shows it: its Wilma, username, whose it is, and its children (unticked ones hidden). */
 function accountsSummary(profiles) {
-    return profiles.map((p) => ({
-        wilma: p.tenantName ?? p.tenantUrl,
-        students: (p.students ?? []).map((s) => s.name),
-    }));
+    return profiles.map((p) => {
+        const role = roleOf(p.students ?? []);
+        return {
+            id: p.id,
+            wilma: p.tenantName ?? p.tenantUrl,
+            url: p.tenantUrl,
+            username: p.username,
+            ...(role ? { role } : {}),
+            children: (p.students ?? []).map((s) => ({ number: s.studentNumber, name: s.name, ...(p.hidden?.includes(s.studentNumber) ? { hidden: true } : {}) })),
+        };
+    });
 }
+const savedLogins = async () => accountsSummary((await loadConfig()).profiles);
 /** A plain app name from the name an MCP client reports, or undefined if unknown. */
 export function appName(client) {
     const raw = `${client?.title ?? ""} ${client?.name ?? ""}`.toLowerCase();
@@ -76,7 +85,9 @@ export async function startLoginServer(opts = {}) {
                     "base-uri 'none'",
                 ].join("; "),
             });
-            res.end(renderLoginPage({ nonce, apiBase: `${base}/api`, configPath: getConfigPath(), openedBy: opts.openedBy }));
+            // The logins already saved, so adding another Wilma (or logging in again) starts from what's there.
+            const accounts = await savedLogins().catch(() => []);
+            res.end(renderLoginPage({ nonce, apiBase: `${base}/api`, configPath: getConfigPath(), openedBy: opts.openedBy, accounts }));
             return;
         }
         if (url.pathname === `${base}/api/tenants` && req.method === "GET") {
@@ -93,6 +104,29 @@ export async function startLoginServer(opts = {}) {
             setTimeout(() => close(), 300).unref();
             return;
         }
+        // Remove a saved login (its Wilma session ends), or untick children: the page's own buttons.
+        if ((url.pathname === `${base}/api/remove` || url.pathname === `${base}/api/children`) && req.method === "POST") {
+            if (!fromOwnPage(req)) {
+                sendJson(res, 403, { status: "error", message: "Forbidden" });
+                return;
+            }
+            const body = (await readJson(req));
+            if (typeof body.id !== "string") {
+                sendJson(res, 400, { status: "error", code: "missing_fields" });
+                return;
+            }
+            resetIdle();
+            if (url.pathname.endsWith("/remove")) {
+                await removeLogin(body.id);
+                saved.splice(0, saved.length, ...saved.filter((p) => p.id !== body.id));
+            }
+            else {
+                const hidden = Array.isArray(body.hidden) ? body.hidden.filter((x) => typeof x === "string") : [];
+                await setHiddenChildren(body.id, hidden);
+            }
+            sendJson(res, 200, { status: "ok", accounts: await savedLogins() });
+            return;
+        }
         if (url.pathname === `${base}/api/login` && req.method === "POST") {
             if (!fromOwnPage(req)) {
                 sendJson(res, 403, { status: "error", message: "Forbidden" });
@@ -114,26 +148,35 @@ export async function startLoginServer(opts = {}) {
                 sendJson(res, 400, { status: "error", code: "missing_fields" });
                 return;
             }
+            // One login per Wilma, as in WilmAI Home: another user for a Wilma already saved goes through its row (Log in again).
+            const before = await loadConfig();
+            const wilmaUrl = normalizeTenantUrl(tenantUrl);
+            const onWilma = (p) => normalizeTenantUrl(p.tenantUrl) === wilmaUrl;
+            const replaced = before.profiles.find((p) => p.id === body.replace);
+            const again = before.profiles.some((p) => onWilma(p) && p.username.toLowerCase() === username.toLowerCase());
+            if (!again && before.profiles.some((p) => onWilma(p) && p !== replaced)) {
+                sendJson(res, 200, { status: "error", code: "taken" });
+                return;
+            }
             try {
                 const { client, students } = await verifyLoginSession({ tenantUrl, username, password, totpSecret });
                 // Keep this verified session for the assistant's first questions (no second login or code).
-                adoptSession({ baseUrl: normalizeTenantUrl(tenantUrl), username, password }, client);
+                adoptSession({ baseUrl: wilmaUrl, username, password }, client);
                 const config = await loadConfig();
                 const stored = await saveLogin(config, {
-                    tenantUrl: normalizeTenantUrl(tenantUrl),
+                    tenantUrl: wilmaUrl,
                     tenantName: body.tenantName ?? null,
                     username,
                     password,
                     totpSecret,
                     students,
                 });
+                if (replaced && replaced.id !== stored.id)
+                    await takePlace(stored.id, replaced.id);
                 // Every Wilma login saved so far, so the page can show the whole family.
-                sendJson(res, 200, {
-                    status: "ok",
-                    students: students.map((s) => s.name),
-                    accounts: accountsSummary(config.profiles),
-                });
-                saved.push(stored);
+                sendJson(res, 200, { status: "ok", accounts: await savedLogins() });
+                // What this page saved, for `wilma login` to report (a replaced login isn't).
+                saved.splice(0, saved.length, ...saved.filter((p) => p.id !== stored.id && p.id !== replaced?.id), stored);
                 attempts = 0;
                 resetIdle();
                 settleFirst(stored);
@@ -188,6 +231,18 @@ export async function startLoginServer(opts = {}) {
     }
     return { url: `${origin}${base}/`, result, closed, close };
 }
+/** A new login in the place of the one it replaces (Log in again with another user or Wilma), which is removed. */
+async function takePlace(id, replacedId) {
+    const config = await loadConfig();
+    const login = config.profiles.find((p) => p.id === id);
+    const at = config.profiles.findIndex((p) => p.id === replacedId);
+    if (login && at !== -1) {
+        config.profiles = config.profiles.filter((p) => p !== login);
+        config.profiles.splice(at, 0, login);
+        await saveConfig(config);
+    }
+    await removeLogin(replacedId);
+}
 /** Best-effort: open a URL in the user's default browser. */
 export function openBrowser(url, opts = {}) {
     if (process.env.WILMAI_NO_BROWSER)
@@ -239,41 +294,60 @@ function jsonForScript(value) {
 function escapeHtml(value) {
     return value.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
 }
-/** The login page. The login API answers {status: "ok", students, accounts}. */
+/**
+ * The login page, laid out like WilmAI Home's Wilma page. The API answers
+ * {status: "ok", accounts} after a login, a removal or a tick.
+ */
 export function renderLoginPage(opts) {
     const strings = {
         en: {
             title: "Log in to Wilma — WilmAI",
             heading: "Log in to Wilma",
             intro: "Connect your Wilma account once. Your assistant can then check schedules, homework, exams, messages and news for you.",
+            introApp: "{app} asked to connect to your Wilma. Log in once, and {app} can then check schedules, homework, exams, messages and news for you.",
+            introMore: "Add another school's Wilma, or log in again if a password has changed. The logins already saved stay as they are.",
+            introMoreApp: "{app} opened this page. Add another school's Wilma, or log in again if a password has changed. The logins already saved stay as they are.",
+            who: "Who uses WilmAI",
+            parent: "A parent",
+            student: "A student",
+            whoParent: "All your children, from every school's Wilma.",
+            whoStudent: "Your own lessons, exams and homework, from your Wilma.",
+            oneWilma: "A student has one Wilma. Remove the others first.",
             school: "Your school's Wilma",
+            otherSchool: "The other school's Wilma",
             schoolHint: "Type your city or school name",
             schoolHelp: "Start typing, then pick your Wilma from the list. Or tap your city:",
             change: "Change",
             noResults: "No Wilma found. Many schools use their city's Wilma, so try the city or municipality. You can also paste the address, e.g. https://yourcity.inschool.fi",
+            taken: "This Wilma is here already. To use another username there, press Log in again on its row.",
             username: "Wilma username",
             password: "Password",
             mfaTitle: "Two-step verification",
             mfaBody: "Your account uses two-step verification. So your assistant can check Wilma without asking you for a code each time, paste the setup key from your authenticator app (a base32 key or an otpauth:// link).",
             mfaLabel: "Authenticator setup key",
             mfaHelp: "Where to find it: some authenticator apps (and password managers like 1Password or Bitwarden) can show the key for an existing entry. If yours can't, set up two-step verification again in Wilma and copy the key while the QR code is on screen — setup screens usually offer it as text. Add it to your authenticator app as usual and paste the same key here. WilmAI then makes the 6-digit codes itself.",
+            saved: "Saved",
+            ownLogin: "student's own login",
+            again: "Log in again",
+            cancel: "Cancel",
+            remove: "Remove",
+            removeAsk: "Remove {school}? Its Wilma session ends, and your assistant no longer reads it.",
+            kidsLabel: "Children to read from {school}",
+            twice: "Wilma lists {name} twice: a new school gives a new profile. Untick the one you don't need.",
+            noChildren: "No children found on this login.",
+            addAnother: "Add another school's Wilma",
+            addAnotherHint: "For a child at a school with its own Wilma: another town, an upper secondary school, a private school.",
             submit: "Log in",
             working: "Checking with Wilma…",
-            doneTitle: "You're connected",
-            doneIntro: "Found on this login:",
-            addAnother: "Add another Wilma",
-            addAnotherHint: "If one of your children goes to a school with a different Wilma, add that login too.",
-            finish: "Done",
+            done: "Done",
             finishedTitle: "All set",
             finishedBody: "You can close this tab and go back to your assistant.",
-            noChildren: "No children found on this login.",
             badCredentials: "Wilma didn't accept that username and password.",
             badTotp: "Wilma didn't accept the two-step verification. Paste the authenticator setup key (a long base32 key or an otpauth:// link), not a 6-digit code.",
             tooMany: "Too many attempts. Close this tab and start again from your assistant.",
-            missing: "Pick your school's Wilma and fill in both fields.",
+            missing: "Choose the school's Wilma, and type the username and password.",
             expired: "This login page is no longer active. Start the login again from your assistant, or run wilma login.",
             privacy: "Your login is saved only on this computer, in {path}, readable only by your user account. To remove it, run wilma config clear or delete that file.",
-            introApp: "{app} asked to connect to your Wilma. Log in once, and {app} can then check schedules, homework, exams, messages and news for you.",
             trustLocalTitle: "On your own computer",
             trustLocal: "This page isn't a website. It runs on this computer (that's what 127.0.0.1 in the address bar means), and WilmAI has no server.",
             trustWilmaTitle: "Only to your school's Wilma",
@@ -290,34 +364,50 @@ export function renderLoginPage(opts) {
             title: "Kirjaudu Wilmaan — WilmAI",
             heading: "Kirjaudu Wilmaan",
             intro: "Yhdistä Wilma-tunnuksesi kerran. Sen jälkeen avustajasi voi tarkistaa lukujärjestykset, läksyt, kokeet, viestit ja tiedotteet puolestasi.",
+            introApp: "{app} pyysi yhteyttä Wilmaasi. Kirjaudu kerran, niin {app} voi sen jälkeen tarkistaa lukujärjestykset, läksyt, kokeet, viestit ja tiedotteet puolestasi.",
+            introMore: "Lisää toisen koulun Wilma tai kirjaudu uudelleen, jos salasana on vaihtunut. Jo tallennetut tunnukset säilyvät ennallaan.",
+            introMoreApp: "{app} avasi tämän sivun. Lisää toisen koulun Wilma tai kirjaudu uudelleen, jos salasana on vaihtunut. Jo tallennetut tunnukset säilyvät ennallaan.",
+            who: "Kuka käyttää WilmAI:ta",
+            parent: "Huoltaja",
+            student: "Oppilas",
+            whoParent: "Kaikki lapsesi, jokaisen koulun Wilmasta.",
+            whoStudent: "Omat tuntisi, kokeesi ja läksysi Wilmastasi.",
+            oneWilma: "Oppilaalla on yksi Wilma. Poista ensin muut.",
             school: "Koulusi Wilma",
+            otherSchool: "Toisen koulun Wilma",
             schoolHint: "Kirjoita kaupunki tai koulun nimi",
             schoolHelp: "Ala kirjoittaa ja valitse Wilmasi listalta. Tai napauta kaupunkiasi:",
             change: "Vaihda",
             noResults: "Wilmaa ei löytynyt. Monen koulun Wilma löytyy kaupungin tai kunnan nimellä, joten kokeile sitä. Voit myös liittää osoitteen, esim. https://kaupunki.inschool.fi",
+            taken: "Tämä Wilma on jo täällä. Jos haluat käyttää siinä toista käyttäjätunnusta, paina sen kohdalla Kirjaudu uudelleen.",
             username: "Wilma-käyttäjätunnus",
             password: "Salasana",
             mfaTitle: "Kaksivaiheinen tunnistautuminen",
             mfaBody: "Tunnuksessasi on kaksivaiheinen tunnistautuminen. Jotta avustajasi voi tarkistaa Wilman kysymättä sinulta joka kerta koodia, liitä todennussovelluksesi asetusavain (base32-avain tai otpauth://-linkki).",
             mfaLabel: "Todennussovelluksen asetusavain",
             mfaHelp: "Mistä sen löytää: jotkin todennussovellukset (ja salasanojen hallintaohjelmat, kuten 1Password tai Bitwarden) näyttävät avaimen olemassa olevalle tunnukselle. Jos sovelluksesi ei näytä sitä, ota kaksivaiheinen tunnistautuminen uudelleen käyttöön Wilmassa ja kopioi avain, kun QR-koodi on näkyvissä — käyttöönottonäkymä tarjoaa sen yleensä myös tekstinä. Lisää se todennussovellukseesi tavalliseen tapaan ja liitä sama avain tähän. WilmAI tekee sen jälkeen 6-numeroiset koodit itse.",
+            saved: "Tallennettu",
+            ownLogin: "oppilaan omat tunnukset",
+            again: "Kirjaudu uudelleen",
+            cancel: "Peru",
+            remove: "Poista",
+            removeAsk: "Poistetaanko {school}? Sen Wilma-istunto päättyy, eikä avustajasi enää lue sitä.",
+            kidsLabel: "Luettavat lapset: {school}",
+            twice: "Wilma näyttää lapsen {name} kahdesti: uusi koulu antaa uuden profiilin. Poista valinta siltä, jota et tarvitse.",
+            noChildren: "Näillä tunnuksilla ei löytynyt lapsia.",
+            addAnother: "Lisää toisen koulun Wilma",
+            addAnotherHint: "Lapselle, jonka koululla on oma Wilma: toinen paikkakunta, lukio tai yksityinen koulu.",
             submit: "Kirjaudu",
             working: "Tarkistetaan Wilmasta…",
-            doneTitle: "Yhteys on valmis",
-            doneIntro: "Näillä tunnuksilla löytyi:",
-            addAnother: "Lisää toinen Wilma",
-            addAnotherHint: "Jos joku lapsistasi käy koulua, jolla on eri Wilma, lisää myös sen tunnukset.",
-            finish: "Valmis",
+            done: "Valmis",
             finishedTitle: "Kaikki valmista",
             finishedBody: "Voit sulkea tämän välilehden ja palata avustajaasi.",
-            noChildren: "Näillä tunnuksilla ei löytynyt lapsia.",
             badCredentials: "Wilma ei hyväksynyt käyttäjätunnusta ja salasanaa.",
             badTotp: "Wilma ei hyväksynyt kaksivaiheista tunnistautumista. Liitä todennussovelluksen asetusavain (pitkä base32-avain tai otpauth://-linkki), ei 6-numeroista koodia.",
             tooMany: "Liian monta yritystä. Sulje välilehti ja aloita uudelleen avustajasi kautta.",
-            missing: "Valitse koulusi Wilma ja täytä molemmat kentät.",
+            missing: "Valitse koulun Wilma ja kirjoita käyttäjätunnus ja salasana.",
             expired: "Tämä kirjautumissivu ei ole enää käytössä. Aloita kirjautuminen uudelleen avustajasi kautta tai komennolla wilma login.",
             privacy: "Kirjautumistietosi tallennetaan vain tälle tietokoneelle, tiedostoon {path}, jota vain sinun käyttäjätilisi voi lukea. Voit poistaa ne komennolla wilma config clear tai poistamalla tiedoston.",
-            introApp: "{app} pyysi yhteyttä Wilmaasi. Kirjaudu kerran, niin {app} voi sen jälkeen tarkistaa lukujärjestykset, läksyt, kokeet, viestit ja tiedotteet puolestasi.",
             trustLocalTitle: "Omalla koneellasi",
             trustLocal: "Tämä sivu ei ole verkkosivusto. Se toimii tällä koneella (sitä osoiterivin 127.0.0.1 tarkoittaa), eikä WilmAI:lla ole palvelinta.",
             trustWilmaTitle: "Vain koulusi Wilmaan",
@@ -355,32 +445,51 @@ export function renderLoginPage(opts) {
   p { margin:0 0 16px; }
   .muted { color:var(--muted); font-size:14px; }
   .card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px; margin:20px 0; }
-  label { display:block; font-weight:600; margin:14px 0 6px; }
-  label:first-child { margin-top:0; }
+  label, .label { display:block; font-weight:600; margin:14px 0 6px; }
+  .school-top { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0 0 10px; }
+  .school-top label, .school-top .label { margin:0; }
   input { width:100%; font:inherit; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); }
   input:focus { outline:2px solid var(--teal); outline-offset:1px; }
+  input[type=checkbox] { width:auto; margin:0; accent-color:var(--teal); }
   ul.results { list-style:none; margin:6px 0 0; padding:0; border:1.5px solid var(--teal); border-radius:10px; max-height:340px; overflow:auto; background:var(--card); box-shadow:0 8px 20px rgba(0,0,0,.08); }
   ul.results:empty { display:none; }
   ul.results button { display:block; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--line); padding:11px 14px; font:inherit; font-weight:600; line-height:1.35; color:inherit; cursor:pointer; }
   ul.results li:last-child button { border-bottom:0; }
   ul.results button:hover, ul.results button:focus, ul.results button.hl { background:var(--paper); }
   ul.results button.hl { box-shadow: inset 3px 0 0 var(--teal); }
+  ul.results small { display:block; margin-top:2px; font-weight:400; font-size:13px; color:var(--muted); }
   .help { font-size:14px; color:var(--muted); margin:8px 0 6px; }
   .chips { display:flex; flex-wrap:wrap; gap:6px; }
   .chips button { font:inherit; font-size:14px; padding:4px 12px; border-radius:999px; border:1px solid var(--line); background:var(--paper); color:var(--ink); cursor:pointer; }
   .chips button:hover, .chips button:focus { border-color:var(--teal); }
-  ul.results small { display:block; margin-top:2px; font-weight:400; font-size:13px; color:var(--muted); }
   .chosen { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--teal); border-radius:8px; }
   .chosen small { display:block; color:var(--muted); word-break:break-all; }
   .link { background:none; border:0; color:var(--teal); font:inherit; cursor:pointer; padding:0; text-decoration:underline; }
-  .primary { width:100%; margin-top:20px; padding:12px; font:inherit; font-weight:700; border:0; border-radius:8px; background:var(--teal); color:#fff; cursor:pointer; }
+  .quiet { background:none; border:1px solid var(--line); border-radius:8px; color:var(--ink); font:inherit; font-size:14px; padding:4px 10px; cursor:pointer; white-space:nowrap; }
+  .quiet:hover, .quiet:focus { border-color:var(--teal); }
+  .danger { background:var(--err); border:0; border-radius:8px; color:#fff; font:inherit; font-size:14px; font-weight:700; padding:5px 12px; cursor:pointer; }
+  .primary { width:100%; margin-top:18px; padding:12px; font:inherit; font-weight:700; border:0; border-radius:8px; background:var(--teal); color:#fff; cursor:pointer; }
   .primary:disabled { opacity:.6; cursor:wait; }
-  .secondary { width:100%; margin-top:10px; padding:11px; font:inherit; font-weight:700; border:1px solid var(--teal); border-radius:8px; background:transparent; color:var(--teal); cursor:pointer; }
-  .wilma-name { font-weight:700; margin:14px 0 4px; }
-  ul.children { margin:6px 0 0; padding-left:22px; }
-  ul.children li { padding:3px 0; }
-  .add-hint { margin-top:8px; }
-  .error { color:var(--err); margin-top:12px; }
+  .secondary { padding:8px 14px; font:inherit; font-size:15px; font-weight:700; border:1px solid var(--teal); border-radius:8px; background:transparent; color:var(--teal); cursor:pointer; }
+  .who { display:flex; gap:0; border:1px solid var(--line); border-radius:999px; padding:3px; width:fit-content; }
+  .who button { font:inherit; font-size:15px; padding:5px 16px; border:0; border-radius:999px; background:transparent; color:var(--muted); cursor:pointer; }
+  .who button[aria-pressed="true"] { background:var(--teal); color:#fff; font-weight:700; }
+  .who-field { margin-bottom:16px; }
+  .who-field .label { margin-top:0; }
+  .wilma-row { position:relative; border:1px solid var(--line); border-radius:10px; padding:14px; margin:0 0 12px; }
+  .wilma-row.new { border-style:dashed; }
+  .wilma-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
+  .wilma-head small { display:block; color:var(--muted); font-size:14px; }
+  .kids { margin-top:10px; display:flex; flex-direction:column; gap:6px; }
+  .kid { display:flex; align-items:center; gap:10px; font-weight:400; margin:0; cursor:pointer; }
+  .kids .help { margin:2px 0 0; }
+  .remove { margin-top:10px; font-size:14px; }
+  .confirm { display:flex; flex-wrap:wrap; align-items:center; gap:8px; color:var(--err); }
+  .confirm span { flex:1 1 100%; }
+  .mfa { margin-top:6px; }
+  .add { margin-top:22px; padding-top:16px; border-top:1px solid var(--line); }
+  .add .help { margin-top:8px; }
+  .error { color:var(--err); margin:10px 0 0; font-size:15px; }
   .done h2 { margin:0 0 8px; }
   .top { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:28px; }
   .brand { font-weight:800; font-size:18px; letter-spacing:-0.01em; }
@@ -417,40 +526,22 @@ export function renderLoginPage(opts) {
   </ul>
   </div>
   <div class="forms">
-  <section class="card" id="form-card">
-    <div id="school-pick">
-      <label for="school" id="school-label"></label>
-      <input id="school" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-controls="results" aria-expanded="false">
-      <ul class="results" id="results" role="listbox"></ul>
-      <p class="help" id="school-help"></p>
-      <div class="chips" id="chips"></div>
-      <p class="muted" id="no-results" hidden></p>
+  <section class="card" id="wilmas">
+    <div class="who-field">
+      <span class="label" id="who-label"></span>
+      <div class="who" role="group" aria-labelledby="who-label">
+        <button type="button" id="who-guardian"></button>
+        <button type="button" id="who-student"></button>
+      </div>
+      <p class="help" id="who-help"></p>
     </div>
-    <div id="school-chosen" hidden>
-      <label id="school-label-2"></label>
-      <div class="chosen"><div><span id="chosen-name"></span><small id="chosen-url"></small></div><button class="link" id="change" type="button"></button></div>
+    <div id="rows"></div>
+    <p class="error" id="note" role="alert" hidden></p>
+    <button class="primary" id="go" type="button"></button>
+    <div class="add" id="add-box">
+      <button class="secondary" id="add" type="button"></button>
+      <p class="help" id="add-help"></p>
     </div>
-    <label for="username" id="username-label"></label>
-    <input id="username" autocomplete="username" autocapitalize="none" spellcheck="false">
-    <label for="password" id="password-label"></label>
-    <input id="password" type="password" autocomplete="current-password">
-    <p class="sent-to" id="sent-to" hidden></p>
-    <div id="mfa" hidden>
-      <label id="mfa-title"></label>
-      <p class="muted" id="mfa-body"></p>
-      <label for="totp" id="mfa-label"></label>
-      <input id="totp" autocomplete="off" spellcheck="false">
-      <p class="muted" id="mfa-help"></p>
-    </div>
-    <p class="error" id="error" role="alert" hidden></p>
-    <button class="primary" id="submit" type="button"></button>
-  </section>
-  <section class="card done" id="done" hidden>
-    <h2 id="done-title"></h2>
-    <div id="accounts"></div>
-    <button class="primary" id="finish" type="button"></button>
-    <button class="secondary" id="add-another" type="button"></button>
-    <p class="muted add-hint" id="add-hint"></p>
   </section>
   <section class="card done" id="finished" hidden>
     <h2 id="finished-title"></h2>
@@ -470,15 +561,39 @@ export function renderLoginPage(opts) {
   const API = ${jsonForScript(opts.apiBase)};
   const CONFIG_PATH = ${jsonForScript(opts.configPath ?? "")};
   const OPENED_BY = ${jsonForScript(opts.openedBy ?? null)};
+  // Every saved login, as the page opened and after each change here.
+  let accounts = ${jsonForScript(opts.accounts ?? [])};
+  // Opened with logins saved already: the page is for another Wilma, or logging in again.
+  const more = accounts.length > 0;
   let lang = (navigator.language || "en").toLowerCase().startsWith("fi") ? "fi" : "en";
   let t = STRINGS[lang];
-  let tenant = null;
-  let timer = null;
-  let seq = 0;
-  let shownAccounts = null;
+  // Rows being filled in: new Wilmas, and saved ones logging in again (replace: the saved login's id).
+  let drafts = [];
+  let lastId = 0;
+  const newDraft = (replace = null, tenant = null, username = "") => ({ id: ++lastId, replace, tenant, username, password: "", totp: "", mfa: false, error: "" });
+  if (!accounts.length) drafts.push(newDraft());
+  let who = accounts.length && accounts.every((a) => a.role === "student") ? "student" : "guardian";
+  let note = "";
+  let busy = false;
+
   const $ = (id) => document.getElementById(id);
   const text = (id, value) => { $(id).textContent = value; };
   const hostOf = (url) => { try { return new URL(url).host; } catch { return url; } };
+  const focus = (id) => setTimeout(() => $(id) && $(id).focus(), 0);
+  const el = (tag, props = {}, ...children) => {
+    const node = Object.assign(document.createElement(tag), props);
+    node.append(...children.filter((child) => child !== null && child !== undefined));
+    return node;
+  };
+  const post = async (path, body) => {
+    const res = await fetch(API + path, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
+    return res.json();
+  };
+  const sameWilma = (a, b) => a.replace(/\\/$/, "").toLowerCase() === b.replace(/\\/$/, "").toLowerCase();
+  // One login per Wilma, as in WilmAI Home: a Wilma another row has already is taken.
+  const taken = (url, draft) =>
+    accounts.some((a) => a.id !== draft.replace && sameWilma(a.url, url)) || drafts.some((d) => d !== draft && d.tenant && sameWilma(d.tenant.url, url));
+  const filled = (d) => Boolean(d.tenant || d.username.trim() || d.password);
 
   // Every text on the page, in the chosen language (the switch at the top re-runs this).
   function applyText() {
@@ -487,187 +602,289 @@ export function renderLoginPage(opts) {
     document.title = t.title;
     $("heading").replaceChildren(t.heading.split(" ").slice(0, -1).join(" ") + " ");
     const mark = document.createElement("mark"); mark.textContent = t.heading.split(" ").slice(-1)[0]; $("heading").append(mark);
-    text("intro", OPENED_BY ? t.introApp.split("{app}").join(OPENED_BY.app) : t.intro);
+    const intro = more ? (OPENED_BY ? t.introMoreApp : t.introMore) : OPENED_BY ? t.introApp : t.intro;
+    text("intro", OPENED_BY ? intro.split("{app}").join(OPENED_BY.app) : intro);
     text("trust-local-title", t.trustLocalTitle); text("trust-local", t.trustLocal);
     text("trust-wilma-title", t.trustWilmaTitle);
     text("trust-read-title", t.trustReadTitle); text("trust-read", t.trustRead);
-    text("school-label", t.school); text("school-label-2", t.school);
-    $("school").placeholder = t.schoolHint; text("no-results", t.noResults); text("change", t.change);
-    text("school-help", t.schoolHelp);
-    text("username-label", t.username); text("password-label", t.password);
-    text("mfa-title", t.mfaTitle); text("mfa-body", t.mfaBody); text("mfa-label", t.mfaLabel); text("mfa-help", t.mfaHelp);
-    if (!$("submit").disabled) text("submit", t.submit);
-    text("done-title", t.doneTitle);
-    text("finish", t.finish); text("add-another", t.addAnother); text("add-hint", t.addAnotherHint);
+    text("who-label", t.who); text("who-guardian", t.parent); text("who-student", t.student);
+    text("add", t.addAnother); text("add-help", t.addAnotherHint);
     text("finished-title", t.finishedTitle); text("finished-body", t.finishedBody);
     text("privacy", t.privacy.replace("{path}", CONFIG_PATH));
     text("learn-more", t.learnMore); text("source-code", t.sourceCode);
     text("disclaimer", t.disclaimer);
     for (const code of ["fi", "en"]) $("lang-" + code).setAttribute("aria-pressed", String(code === lang));
+    render();
+  }
+
+  // The rows: each saved login (or its login form while logging in again), then the new ones.
+  function render() {
+    const box = $("rows");
+    box.replaceChildren();
+    for (const account of accounts) {
+      const draft = drafts.find((d) => d.replace === account.id);
+      box.append(draft ? draftRow(draft, t.school) : savedRow(account));
+    }
+    drafts.filter((d) => !d.replace).forEach((d, i) => box.append(draftRow(d, !accounts.length && i === 0 ? t.school : t.otherSchool)));
+    for (const v of ["guardian", "student"]) $("who-" + v).setAttribute("aria-pressed", String(who === v));
+    text("who-help", who === "guardian" ? t.whoParent : t.whoStudent);
+    $("add-box").hidden = who !== "guardian";
+    $("note").textContent = note; $("note").hidden = !note;
     showHost();
-    if (shownAccounts) renderAccounts(shownAccounts);
+    updateGo();
   }
 
-  // Where the password goes, once the parent has picked their Wilma.
-  function showHost() {
-    const host = tenant ? hostOf(tenant.url) : "";
-    text("trust-wilma", host ? t.trustWilmaHost.replace("{host}", host) : t.trustWilma);
-    $("sent-to").hidden = !host;
-    if (host) text("sent-to", t.sentTo.replace("{host}", host));
+  function updateGo() {
+    const go = $("go");
+    go.disabled = busy;
+    go.textContent = busy ? t.working : drafts.some(filled) || !accounts.length ? t.submit : t.done;
   }
 
-  for (const code of ["fi", "en"]) $("lang-" + code).addEventListener("click", () => { lang = code; applyText(); });
-  for (const city of ["Helsinki", "Espoo", "Tampere", "Vantaa", "Oulu", "Turku", "Jyväskylä"]) {
-    const b = document.createElement("button"); b.type = "button"; b.textContent = city;
-    b.addEventListener("click", () => { $("school").value = city; search(city).catch(() => showError(t.expired)); $("school").focus(); });
-    $("chips").append(b);
+  // Where the password goes, once a Wilma is picked.
+  function showHost() {
+    const hosts = [...new Set(drafts.filter((d) => d.tenant).map((d) => hostOf(d.tenant.url)))];
+    text("trust-wilma", hosts.length === 1 ? t.trustWilmaHost.replace("{host}", hosts[0]) : t.trustWilma);
   }
 
-  function renderAccounts(accounts) {
-    shownAccounts = accounts;
-    const box = $("accounts"); box.replaceChildren();
-    const intro = document.createElement("p"); intro.textContent = t.doneIntro; box.append(intro);
-    for (const account of accounts) {
-      if (accounts.length > 1) {
-        const name = document.createElement("p"); name.className = "wilma-name"; name.textContent = account.wilma; box.append(name);
+  function savedRow(account) {
+    const row = el("div", { className: "wilma-row" });
+    const who_ = account.username + " · " + (account.role === "student" ? t.ownLogin : t.saved);
+    row.append(el("div", { className: "wilma-head" },
+      el("div", {}, el("b", { textContent: account.wilma }), el("small", { textContent: who_ })),
+      el("button", { type: "button", className: "quiet", textContent: t.again, onclick: () => {
+        const draft = newDraft(account.id, { url: account.url, name: account.wilma }, account.username);
+        drafts.push(draft); note = ""; render(); focus("pass-" + draft.id);
+      } })));
+    const kids = account.children || [];
+    if (!kids.length) row.append(el("p", { className: "help", textContent: t.noChildren }));
+    else if (who === "guardian") {
+      const group = el("div", { className: "kids" });
+      group.setAttribute("role", "group");
+      group.setAttribute("aria-label", t.kidsLabel.replace("{school}", account.wilma));
+      for (const kid of kids) {
+        const tick = el("input", { type: "checkbox", checked: !kid.hidden });
+        tick.addEventListener("change", () => setShown(account, kid.number, tick.checked));
+        group.append(el("label", { className: "kid" }, tick, el("span", { textContent: kid.name })));
       }
-      const ul = document.createElement("ul"); ul.className = "children";
-      const kids = (account.students || []).filter(Boolean);
-      if (!kids.length) { const li = document.createElement("li"); li.textContent = t.noChildren; ul.append(li); }
-      for (const kid of kids) { const li = document.createElement("li"); li.textContent = kid; ul.append(li); }
-      box.append(ul);
+      const names = kids.map((k) => k.name);
+      const twice = names.find((name, i) => names.indexOf(name) !== i);
+      if (twice) group.append(el("p", { className: "help", textContent: t.twice.replace("{name}", twice.split(" ")[0]) }));
+      row.append(group);
     }
+    if (accounts.length > 1) row.append(removeLink(account));
+    return row;
   }
 
-  $("add-another").addEventListener("click", () => {
-    tenant = null; shownAccounts = null; showHost();
-    for (const id of ["school", "username", "password", "totp"]) $(id).value = "";
-    render([]); showError("");
-    $("mfa").hidden = true; $("school-chosen").hidden = true; $("school-pick").hidden = false;
-    $("done").hidden = true; $("form-card").hidden = false;
-    $("school").focus();
-  });
+  // Remove asks first: the login goes, and its Wilma session ends.
+  function removeLink(account) {
+    const box = el("div", { className: "remove" });
+    const link = el("button", { type: "button", className: "link", textContent: t.remove, onclick: () => {
+      box.replaceChildren(el("div", { className: "confirm" },
+        el("span", { textContent: t.removeAsk.replace("{school}", account.wilma) }),
+        el("button", { type: "button", className: "danger", textContent: t.remove, onclick: () => remove(account) }),
+        el("button", { type: "button", className: "quiet", textContent: t.cancel, onclick: () => box.replaceChildren(link) })));
+    } });
+    box.append(link);
+    return box;
+  }
 
-  $("finish").addEventListener("click", async () => {
-    const btn = $("finish"); btn.disabled = true;
-    try {
-      const res = await fetch(API + "/done", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: "{}",
-      });
-      const data = await res.json();
-      if (data.status !== "ok") { showError(data.message || t.expired); btn.disabled = false; return; }
-    } catch (err) {
-      // The page may already have closed; the login is saved either way.
+  function draftRow(d, label) {
+    const row = el("div", { className: "wilma-row new" });
+    const fresh = drafts.filter((x) => !x.replace);
+    // Cancel sits on the label's line, clear of the field below.
+    const cancel = d.replace || accounts.length || fresh.length > 1
+      ? el("button", { type: "button", className: "quiet", textContent: t.cancel, onclick: () => {
+          drafts = drafts.filter((x) => x !== d);
+          if (!accounts.length && !drafts.length) drafts.push(newDraft());
+          note = ""; render();
+        } })
+      : null;
+    row.append(schoolField(d, label, cancel));
+    const user = el("input", { id: "user-" + d.id, value: d.username, autocomplete: "username", autocapitalize: "none", spellcheck: false });
+    user.addEventListener("input", () => { d.username = user.value; updateGo(); });
+    const pass = el("input", { id: "pass-" + d.id, type: "password", value: d.password, autocomplete: "current-password" });
+    pass.addEventListener("input", () => { d.password = pass.value; updateGo(); });
+    pass.addEventListener("keydown", (e) => { if (e.key === "Enter") submit(); });
+    row.append(el("label", { htmlFor: user.id, textContent: t.username }), user, el("label", { htmlFor: pass.id, textContent: t.password }), pass);
+    if (d.tenant) row.append(el("p", { className: "sent-to", textContent: t.sentTo.replace("{host}", hostOf(d.tenant.url)) }));
+    if (d.mfa) {
+      const key = el("input", { id: "totp-" + d.id, value: d.totp, autocomplete: "off", spellcheck: false });
+      key.addEventListener("input", () => { d.totp = key.value; });
+      key.addEventListener("keydown", (e) => { if (e.key === "Enter") submit(); });
+      row.append(el("div", { className: "mfa" },
+        el("span", { className: "label", textContent: t.mfaTitle }),
+        el("p", { className: "muted", textContent: t.mfaBody }),
+        el("label", { htmlFor: key.id, textContent: t.mfaLabel }), key,
+        el("p", { className: "muted", textContent: t.mfaHelp })));
     }
-    $("done").hidden = true; $("finished").hidden = false;
-  });
-  const showError = (msg) => { const el = $("error"); el.textContent = msg; el.hidden = !msg; };
-
-  function choose(t2) {
-    tenant = t2;
-    text("chosen-name", t2.name || t2.url); text("chosen-url", t2.url); showHost();
-    $("school-pick").hidden = true; $("school-chosen").hidden = false;
-    $("username").focus();
+    if (d.error) row.append(el("p", { className: "error", textContent: d.error }));
+    return row;
   }
-  $("change").addEventListener("click", () => {
-    tenant = null; showHost(); $("school-chosen").hidden = true; $("school-pick").hidden = false; $("school").focus();
-  });
 
-  async function search(q) {
-    const mine = ++seq;
-    const trimmed = q.trim();
-    if (/^https?:\\/\\//i.test(trimmed)) {
-      render([{ url: trimmed.replace(/\\/$/, ""), name: trimmed.replace(/\\/$/, "") }]);
-      return;
+  function schoolField(d, label, cancel) {
+    const box = el("div", { className: "school" });
+    const id = "school-" + d.id;
+    if (d.tenant) {
+      box.append(el("div", { className: "school-top" }, el("span", { className: "label", textContent: label }), cancel), el("div", { className: "chosen" },
+        el("div", {}, el("span", { textContent: d.tenant.name || d.tenant.url }), el("small", { textContent: d.tenant.url })),
+        d.mfa ? null : el("button", { type: "button", className: "link", textContent: t.change, onclick: () => { d.tenant = null; d.error = ""; render(); focus(id); } })));
+      return box;
     }
-    if (!trimmed) { render([]); $("no-results").hidden = true; return; }
-    const res = await fetch(API + "/tenants?q=" + encodeURIComponent(trimmed));
-    if (!res.ok) throw new Error("search failed");
-    const data = await res.json();
-    if (mine !== seq) return;
-    showError("");
-    render(data.tenants || []);
-    $("no-results").hidden = (data.tenants || []).length > 0;
-  }
-  let highlighted = 0;
-  function highlight(index) {
-    const buttons = [...$("results").querySelectorAll("button")];
-    if (!buttons.length) return;
-    highlighted = (index + buttons.length) % buttons.length;
-    buttons.forEach((b, i) => { b.classList.toggle("hl", i === highlighted); b.setAttribute("aria-selected", String(i === highlighted)); });
-    buttons[highlighted].scrollIntoView({ block: "nearest" });
-  }
-  function render(list) {
-    const ul = $("results"); ul.replaceChildren();
-    $("school").setAttribute("aria-expanded", String(list.length > 0));
-    // While results are showing, hide the hint and city chips so the list is easy to read.
-    $("school-help").hidden = list.length > 0;
-    $("chips").hidden = list.length > 0;
-    for (const item of list) {
-      const li = document.createElement("li");
-      const b = document.createElement("button"); b.type = "button";
-      b.textContent = item.name || item.url;
-      const small = document.createElement("small"); small.textContent = item.url.replace(/^https?:\\/\\//, ""); b.append(small);
-      b.addEventListener("click", () => choose(item));
-      b.setAttribute("role", "option");
-      li.append(b); ul.append(li);
+    const input = el("input", { id, autocomplete: "off", spellcheck: false, placeholder: t.schoolHint });
+    input.setAttribute("role", "combobox");
+    input.setAttribute("aria-autocomplete", "list");
+    input.setAttribute("aria-expanded", "false");
+    const results = el("ul", { className: "results", id: "results-" + d.id });
+    results.setAttribute("role", "listbox");
+    input.setAttribute("aria-controls", results.id);
+    const help = el("p", { className: "help", textContent: t.schoolHelp });
+    const chips = el("div", { className: "chips" });
+    const none = el("p", { className: "muted", textContent: t.noResults, hidden: true });
+    let seq = 0;
+    let timer = null;
+    let highlighted = 0;
+    const pick = (tenant) => {
+      d.error = taken(tenant.url, d) ? t.taken : "";
+      if (!d.error) d.tenant = tenant;
+      render();
+      focus(d.tenant ? "user-" + d.id : id);
+    };
+    const highlight = (index) => {
+      const buttons = [...results.querySelectorAll("button")];
+      if (!buttons.length) return;
+      highlighted = (index + buttons.length) % buttons.length;
+      buttons.forEach((b, i) => { b.classList.toggle("hl", i === highlighted); b.setAttribute("aria-selected", String(i === highlighted)); });
+      buttons[highlighted].scrollIntoView({ block: "nearest" });
+    };
+    const show = (list) => {
+      results.replaceChildren();
+      input.setAttribute("aria-expanded", String(list.length > 0));
+      // While results are showing, the hint and city chips step aside so the list is easy to read.
+      help.hidden = list.length > 0;
+      chips.hidden = list.length > 0;
+      for (const item of list) {
+        const b = el("button", { type: "button", textContent: item.name || item.url }, el("small", { textContent: item.url.replace(/^https?:\\/\\//, "") }));
+        b.setAttribute("role", "option");
+        b.addEventListener("click", () => pick(item));
+        results.append(el("li", {}, b));
+      }
+      highlight(0);
+    };
+    const search = async (q) => {
+      const mine = ++seq;
+      const trimmed = q.trim();
+      if (/^https?:\\/\\//i.test(trimmed)) return show([{ url: trimmed.replace(/\\/$/, ""), name: trimmed.replace(/\\/$/, "") }]);
+      if (!trimmed) { show([]); none.hidden = true; return; }
+      const res = await fetch(API + "/tenants?q=" + encodeURIComponent(trimmed));
+      if (!res.ok) throw new Error("search failed");
+      const data = await res.json();
+      if (mine !== seq) return;
+      show(data.tenants || []);
+      none.hidden = (data.tenants || []).length > 0;
+    };
+    const failed = () => { note = t.expired; render(); };
+    input.addEventListener("input", () => {
+      clearTimeout(timer);
+      timer = setTimeout(() => search(input.value).catch(failed), 150);
+    });
+    input.addEventListener("keydown", (e) => {
+      if (e.key === "ArrowDown") { e.preventDefault(); highlight(highlighted + 1); }
+      else if (e.key === "ArrowUp") { e.preventDefault(); highlight(highlighted - 1); }
+      else if (e.key === "Enter") { const b = results.querySelectorAll("button")[highlighted]; if (b) b.click(); }
+    });
+    for (const city of ["Helsinki", "Espoo", "Tampere", "Vantaa", "Oulu", "Turku", "Jyväskylä"]) {
+      chips.append(el("button", { type: "button", textContent: city, onclick: () => { input.value = city; search(city).catch(failed); input.focus(); } }));
     }
-    highlight(0);
+    box.append(el("div", { className: "school-top" }, el("label", { htmlFor: id, textContent: label }), cancel), input, results, help, chips, none);
+    return box;
   }
-  $("school").addEventListener("input", (e) => {
-    clearTimeout(timer);
-    const q = e.target.value;
-    timer = setTimeout(() => search(q).catch(() => showError(t.expired)), 150);
-  });
-  $("school").addEventListener("keydown", (e) => {
-    if (e.key === "ArrowDown") { e.preventDefault(); highlight(highlighted + 1); }
-    else if (e.key === "ArrowUp") { e.preventDefault(); highlight(highlighted - 1); }
-    else if (e.key === "Enter") { const b = $("results").querySelectorAll("button")[highlighted]; if (b) b.click(); }
-  });
-  $("password").addEventListener("keydown", (e) => { if (e.key === "Enter") submit(); });
-  $("totp").addEventListener("keydown", (e) => { if (e.key === "Enter") submit(); });
-  $("submit").addEventListener("click", () => submit());
 
+  // Log in every row filled in, one after another; with none, Done.
   async function submit() {
-    showError("");
-    const username = $("username").value.trim();
-    const password = $("password").value;
-    if (!tenant || !username || !password) {
-      showError(t.missing);
-      if (!tenant) $("school").focus();
-      return;
+    if (busy) return;
+    note = "";
+    const ready = drafts.filter(filled);
+    if (!ready.length) {
+      if (accounts.length) return finish();
+      note = t.missing; render(); return;
     }
-    const btn = $("submit"); btn.disabled = true; btn.textContent = t.working;
-    try {
-      const res = await fetch(API + "/login", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ tenantUrl: tenant.url, tenantName: tenant.name, username, password, totpSecret: $("totp").value.trim() || undefined }),
-      });
-      const data = await res.json();
-      if (data.status === "ok") {
-        renderAccounts(data.accounts || [{ wilma: tenant.name || tenant.url, students: data.students || [] }]);
-        $("form-card").hidden = true; $("done").hidden = false;
-        $("finish").focus();
-        return;
+    busy = true; updateGo();
+    let first = null;
+    for (const d of ready) {
+      d.error = "";
+      if (!d.tenant || !d.username.trim() || !d.password) { d.error = t.missing; first ??= d; continue; }
+      try {
+        const data = await post("/login", {
+          tenantUrl: d.tenant.url, tenantName: d.tenant.name, username: d.username.trim(), password: d.password,
+          totpSecret: d.totp.trim() || undefined, replace: d.replace || undefined,
+        });
+        if (data.status === "ok") { accounts = data.accounts; drafts = drafts.filter((x) => x !== d); continue; }
+        first ??= d;
+        if (data.status === "mfa_required") { d.mfa = true; continue; }
+        if (data.code === "bad_totp") { d.mfa = true; d.error = lang === "fi" ? t.badTotp : data.message || t.badTotp; }
+        else d.error = { bad_credentials: t.badCredentials, too_many_attempts: t.tooMany, missing_fields: t.missing, taken: t.taken }[data.code] || data.message || "Error";
+      } catch {
+        // The page stops after Done, a timeout, or too many attempts.
+        note = t.expired;
+        break;
       }
-      if (data.status === "mfa_required") { $("mfa").hidden = false; $("totp").focus(); return; }
-      if (data.code === "bad_credentials") showError(t.badCredentials);
-      else if (data.code === "too_many_attempts") showError(t.tooMany);
-      else if (data.code === "missing_fields") showError(t.missing);
-      else if (data.code === "bad_totp") { $("mfa").hidden = false; showError(lang === "fi" ? t.badTotp : (data.message || t.badTotp)); }
-      else showError(data.message || "Error");
-    } catch (err) {
-      // The server stops after a login, a timeout, or too many attempts.
-      showError(t.expired);
-    } finally {
-      btn.disabled = false; btn.textContent = t.submit;
     }
+    // Empty rows go once something is saved; a page with nothing saved keeps one to fill in.
+    if (accounts.length) drafts = drafts.filter(filled);
+    busy = false;
+    render();
+    if (first && drafts.includes(first)) focus(first.mfa ? "totp-" + first.id : "pass-" + first.id);
+    else focus("go");
+  }
+
+  async function finish() {
+    busy = true; updateGo();
+    try {
+      const data = await post("/done", {});
+      if (data.status !== "ok") { note = data.message || t.expired; busy = false; render(); return; }
+    } catch {
+      // The page may already have closed; the logins are saved either way.
+    }
+    $("wilmas").hidden = true; $("finished").hidden = false;
   }
+
+  async function change(path, body) {
+    try {
+      const data = await post(path, body);
+      if (data.status === "ok") accounts = data.accounts;
+      else note = data.message || t.expired;
+    } catch {
+      note = t.expired;
+    }
+    render();
+  }
+
+  // A child unticked isn't read (a profile Wilma lists twice); ticking it again reads it again.
+  const setShown = (account, number, shown) =>
+    change("/children", { id: account.id, hidden: account.children.filter((k) => (k.number === number ? !shown : k.hidden)).map((k) => k.number) });
+
+  async function remove(account) {
+    drafts = drafts.filter((d) => d.replace !== account.id);
+    await change("/remove", { id: account.id });
+    if (!accounts.length && !drafts.length) { drafts.push(newDraft()); render(); }
+  }
+
+  for (const v of ["guardian", "student"]) {
+    $("who-" + v).addEventListener("click", () => {
+      note = "";
+      if (v === "student" && accounts.length + drafts.filter((d) => !d.replace).length > 1) note = t.oneWilma;
+      else who = v;
+      render();
+    });
+  }
+  for (const code of ["fi", "en"]) $("lang-" + code).addEventListener("click", () => { lang = code; applyText(); });
+  $("add").addEventListener("click", () => {
+    const draft = newDraft();
+    drafts.push(draft); note = ""; render(); focus("school-" + draft.id);
+  });
+  $("go").addEventListener("click", () => submit());
   applyText();
-  $("school").focus();
+  focus(drafts.length ? "school-" + drafts[0].id : "go");
 })();
 </script>
 </body>