dogfather-universe/server/pruef-nachfrage.mjs

/* =====================================================================
   pruef-nachfrage.mjs — Nichts verschwindet ohne Nachfrage.

   Filipe, 19.09.2026: „Es darf vor allem keine Stellen geben, an denen
   ein Benutzer etwas falsch machen kann, nur weil die Seite es nicht
   verständlich genug erklärt." Und: „Fehler möglichst verhindern,
   bevor sie entstehen."

   ---------------------------------------------------------------------
   WAS DAS PROBLEM WAR

   Das Haus hatte die richtige Bauweise — einen <dialog> statt
   `confirm()` — und begründete sie in `aufgaben.html` sogar ausführlich.
   Nur stand sie IN EINER SEITE. Gemessen am 19.09.2026: **30 Stellen**
   in 16 Dateien griffen weiterhin zu `confirm()` oder `prompt()`.

   Der Unterschied ist nicht Geschmack. `confirm('Wirklich löschen?')`
   stellt die falsche Frage: Es fragt, ob man sicher ist, und nennt
   nicht, WAS passiert, was BLEIBT und ob es ZURÜCK geht. Genau das
   sind die drei Dinge, die man vor einem Löschen wissen will.

   ---------------------------------------------------------------------
   VIER DINGE WERDEN GEPRÜFT

     1. KEIN NATIVER DIALOG mehr in einer Seiten-Datei. Ausgenommen ist
        allein der Notnagel in `nachfrage.js` selbst — für Browser ohne
        <dialog>. (Ein Verbot ohne diese Ausnahme wäre falsch: Ein
        iPhone vor Safari 15.4 bekäme sonst gar nichts angezeigt.)

     2. ANGESCHLOSSEN — jede Seite, deren Skripte `frageNach` benutzen,
        lädt auch `nachfrage.js`. Ohne die Datei wäre `frageNach` nicht
        definiert, und aus einer Rückfrage würde ein Absturz: Der Knopf
        täte stillschweigend nichts.

        ACHTUNG, hier steckte beim Bauen schon eine Falle: Die erste
        Fassung dieser Prüfung zählte `nachfrage.js` SELBST als Nutzer
        (die Datei enthält das Wort natürlich) — damit war jede Seite
        „Nutzer", die Prüfung immer grün und sie bewies nichts. Deshalb
        ist die Datei unten ausdrücklich ausgenommen.

     3. GESTALTET — `.dialog` wird in einer Datei gestaltet, die JEDE
        Seite lädt. Vorher stand sie in `aufgaben.css`; auf `dateien.html`
        wäre der Dialog ein weißer Systemkasten auf dunkler Seite
        gewesen. Das ist keine Schönheitsfrage: Ein Kasten, der aussieht
        wie eine Browser-Warnung, wird weggeklickt statt gelesen.

     4. VOLLSTÄNDIG — jeder Aufruf hat einen `titel` und sagt, was
        passiert (`was`). Ein Dialog ohne diese Angabe ist ein
        `confirm()` mit mehr Zeilen Code.

   Dazu GEGENPROBEN: Jede Prüfung muss beweisen, dass sie auch
   „nicht in Ordnung" sagen kann.

   AUFRUF:  node server/pruef-nachfrage.mjs
   Läuft in unter zwei Sekunden, ohne Server.
   ===================================================================== */

import { readFileSync, readdirSync } from "node:fs";
import { join, dirname } from "node:path";
import { fileURLToPath } from "node:url";
import { bestaetige, nachfrageText } from "./helfer-nachfrage.mjs";

const HIER = dirname(fileURLToPath(import.meta.url));
const WURZEL = join(HIER, "..");
const SEITEN_ORDNER = join(WURZEL, "workspace");
const JS_ORDNER = join(SEITEN_ORDNER, "assets", "js");
const CSS_ORDNER = join(SEITEN_ORDNER, "assets", "css");

/* Die eine Datei, die `confirm`/`prompt` benutzen DARF -- sie ist der
   Notnagel fuer Browser ohne <dialog>. */
const DER_NOTNAGEL = "nachfrage.js";

let ok = 0, fehl = 0;
const pruef = (name, bedingung, zusatz = "") => {
  if (bedingung) { ok++; console.log(`  OK   ${name}`); }
  else { fehl++; console.log(`  FEHL ${name}${zusatz ? "\n         " + zusatz : ""}`); }
};

const lies = (p) => readFileSync(p, "utf8");
const seiten = readdirSync(SEITEN_ORDNER).filter((f) => f.endsWith(".html"));
const skripte = readdirSync(JS_ORDNER).filter((f) => f.endsWith(".js"));

console.log("\n=== Nachfragen: kein nativer Dialog, und keiner ohne Erklärung ===\n");

/* ---------------------------------------------------------------------
   1. KEIN NATIVER DIALOG
   ------------------------------------------------------------------ */

/** Entfernt Kommentare, bevor gesucht wird. Ohne das zaehlt jeder
 *  Kommentar, der `confirm()` ERWAEHNT, als Fund -- und davon gibt es
 *  in diesem Haus absichtlich mehrere (die Begruendungen). */
function ohneKommentare(js) {
  return js.replace(/\/\*[\s\S]*?\*\//g, "").replace(/(^|[^:])\/\/.*$/gm, "$1");
}

const nativ = [];
for (const f of skripte) {
  if (f === DER_NOTNAGEL) continue;
  const code = ohneKommentare(lies(join(JS_ORDNER, f)));
  for (const m of code.matchAll(/(?:^|[^.\w])(confirm|prompt)\s*\(/g)) {
    const zeile = code.slice(0, m.index).split("\n").length;
    nativ.push(`${f}:${zeile} → ${m[1]}()`);
  }
}
pruef("keine Seite benutzt noch confirm() oder prompt()", nativ.length === 0,
  nativ.slice(0, 8).join("\n         "));

/* Und der Notnagel ist da -- sonst haetten Browser ohne <dialog> gar
   nichts. Die ZAHL gehoert in die Bedingung, nicht nur in den Text. */
const notnagel = lies(join(JS_ORDNER, DER_NOTNAGEL));
pruef("der Notnagel für alte Browser ist vorhanden",
  /HTMLDialogElement/.test(notnagel) && /window\.confirm\(/.test(notnagel));

/* ---------------------------------------------------------------------
   2. ANGESCHLOSSEN
   ------------------------------------------------------------------ */

/** Welche Skripte rufen frageNach auf? OHNE die Datei, die es
 *  DEFINIERT -- sonst ist die Antwort immer „alle". */
const nutzer = new Set();
for (const f of skripte) {
  if (f === DER_NOTNAGEL) continue;
  if (/\bfrageNach\s*\(/.test(ohneKommentare(lies(join(JS_ORDNER, f))))) nutzer.add(f);
}
pruef("es gibt überhaupt Seiten, die nachfragen", nutzer.size > 0,
  `gefunden: ${nutzer.size}`);

const ohneDatei = [], totesGewicht = [], fragendeSeiten = [];
let mitNutzung = 0;
for (const s of seiten) {
  const html = lies(join(SEITEN_ORDNER, s));
  const geladen = [...html.matchAll(/<script src="assets\/js\/([a-z0-9-]+\.js)/g)]
    .map((m) => m[1]);
  const kannFragen = geladen.some((g) => nutzer.has(g));
  const hatDatei = html.includes("assets/js/nachfrage.js");
  if (kannFragen) { mitNutzung++; fragendeSeiten.push(s); if (!hatDatei) ohneDatei.push(s); }
  else if (hatDatei) totesGewicht.push(s);
}
pruef("jede Seite, die nachfragt, lädt auch nachfrage.js",
  mitNutzung > 0 && ohneDatei.length === 0,
  `${mitNutzung} Seiten nutzen es, ohne Datei: ${ohneDatei.join(", ") || "keine"}`);

/* UND DIE GEGENRICHTUNG. Ohne sie waere „ueberall einbinden" die
   bequeme Antwort -- und die Anmeldewand, die jeder Besucher als
   erste laedt, truege 4,8 KB fuer einen Dialog, den sie nie zeigt.
   Zwei Richtungen, eine Regel: Die Datei liegt genau dort, wo sie
   gebraucht wird. */
pruef("und keine Seite lädt sie, ohne je nachzufragen",
  totesGewicht.length === 0,
  `unnötig geladen auf: ${totesGewicht.join(", ")}`);

/* ---------------------------------------------------------------------
   3. GESTALTET, UND ZWAR ÜBERALL
   ------------------------------------------------------------------ */

/** In welchen CSS-Dateien wird `.dialog` gestaltet? */
const dialogCss = readdirSync(CSS_ORDNER).filter((f) => f.endsWith(".css"))
  .filter((f) => /^\.dialog[\s,{:]/m.test(lies(join(CSS_ORDNER, f))));

/** Und welche davon laedt jede Seite, DIE NACHFRAGEN KANN? Abgeleitet,
 *  nicht behauptet -- eine Liste „module.css laedt ueberall" waere genau
 *  die abgeschriebene Liste, vor der die Hausregeln warnen.
 *
 *  Gemessen wird gegen die fragenden Seiten, nicht gegen alle: Die zwei
 *  Anmeldewaende zeigen nie einen Dialog. Von ihnen die Dialog-
 *  Gestaltung zu verlangen hiesse, 12 KB auf die Seite zu legen, die
 *  jeder Besucher als erste laedt -- fuer nichts. */
const ueberall = new Set(dialogCss);
for (const s of fragendeSeiten) {
  const html = lies(join(SEITEN_ORDNER, s));
  const css = new Set([...html.matchAll(/href="assets\/css\/([a-z0-9-]+\.css)/g)]
    .map((m) => m[1]));
  for (const d of [...ueberall]) if (!css.has(d)) ueberall.delete(d);
}
pruef(".dialog wird dort gestaltet, wo jede fragende Seite es lädt",
  ueberall.size > 0 && fragendeSeiten.length > 0,
  `.dialog steht in: ${dialogCss.join(", ")} — von allen `
  + `${fragendeSeiten.length} fragenden Seiten geladen: `
  + `${[...ueberall].join(", ") || "KEINE"}`);

/* Die zwei eigenen Bauteile des Nachfrage-Dialogs gehoeren in dieselbe
   Datei -- sonst waere der wichtigste Satz ("nicht rueckgaengig")
   ungestaltet. */
const gemeinsam = [...ueberall][0];
const gCss = gemeinsam ? lies(join(CSS_ORDNER, gemeinsam)) : "";
pruef("auch die Warnzeile und die Fehlerzeile sind dort gestaltet",
  /\.nachfrage__endgueltig/.test(gCss) && /\.nachfrage__fehler/.test(gCss));

/* Und sie traegt ihre Aussage nicht nur ueber Farbe. */
pruef("die Warnzeile hat ein Zeichen, nicht nur eine Farbe",
  /\.nachfrage__endgueltig::before\s*{[^}]*content/.test(gCss),
  "Farbe allein trägt keine Aussage — Rot-Grün-Schwäche, Kontrastmodus");

/* ---------------------------------------------------------------------
   4. VOLLSTÄNDIG: jeder Aufruf sagt, was passiert
   ------------------------------------------------------------------ */

/** Schneidet den Objektliteral-Teil eines frageNach-Aufrufs heraus,
 *  klammergenau. Ein Muster „bis zur naechsten }" wuerde bei jedem
 *  verschachtelten Ausdruck danebengreifen. */
function aufrufe(js) {
  const out = [];
  for (const m of js.matchAll(/frageNach\s*\(\s*{/g)) {
    let i = m.index + m[0].length - 1, tiefe = 0, j = i;
    for (; j < js.length; j++) {
      if (js[j] === "{") tiefe++;
      else if (js[j] === "}") { tiefe--; if (tiefe === 0) { j++; break; } }
    }
    out.push(js.slice(i, j));
  }
  return out;
}

let gezaehlt = 0;
const ohneTitel = [], ohneWas = [];
for (const f of skripte) {
  if (f === DER_NOTNAGEL) continue;
  const code = ohneKommentare(lies(join(JS_ORDNER, f)));
  for (const a of aufrufe(code)) {
    gezaehlt++;
    if (!/\btitel\s*:/.test(a)) ohneTitel.push(f);
    if (!/\bwas\s*:/.test(a)) ohneWas.push(f);
  }
}
/* DIE ZAHL GEHOERT IN DIE BEDINGUNG: Bei null Aufrufen waere
   „alle haben einen Titel" trivialerweise wahr. */
pruef("jeder Aufruf hat einen Titel", gezaehlt > 0 && ohneTitel.length === 0,
  `${gezaehlt} Aufrufe geprüft, ohne Titel: ${ohneTitel.join(", ") || "keiner"}`);
pruef("jeder Aufruf sagt, WAS passiert", gezaehlt > 0 && ohneWas.length === 0,
  `ohne „was": ${ohneWas.join(", ") || "keiner"}`);

/* Und die gefaehrlichste Handlung im Haus -- eine Person loeschen --
   verlangt das Abtippen des Namens. Das ist keine Schikane: Der
   Loeschknopf sitzt neben dem Sperrknopf. */
pruef("eine Person löschen verlangt den Namen abgetippt",
  /tippen:\s*v\.person\.name/.test(lies(join(JS_ORDNER, "personen.js"))));

/* ---------------------------------------------------------------------
   DIE GEGENPROBEN — jede muss anschlagen
   ------------------------------------------------------------------ */
console.log("\n  --- Gegenproben (jede MUSS anschlagen) ---");

pruef("Gegenprobe: ein erfundenes confirm() würde gefunden",
  /(?:^|[^.\w])(confirm|prompt)\s*\(/.test(
    ohneKommentare("function x(){ if (!confirm('weg?')) return; }")));

pruef("Gegenprobe: ein confirm() im KOMMENTAR wird NICHT gemeldet",
  !/(?:^|[^.\w])(confirm|prompt)\s*\(/.test(
    ohneKommentare("/* frueher stand hier confirm('weg?') */")));

pruef("Gegenprobe: nachfrage.js selbst zählt nicht als Nutzer",
  !nutzer.has(DER_NOTNAGEL),
  'sonst wäre jede Seite trivialerweise Nutzer und die Prüfung grün ohne Inhalt');

pruef("Gegenprobe: die Gestaltung-Prüfung kann auch NEIN sagen",
  (() => {
    /* Eine erfundene Seite, die nachfragt, aber die Datei nicht laedt:
       Die Schnittmenge muss dadurch leer werden. */
    const probe = new Set(dialogCss);
    for (const d of [...probe]) if (!new Set(["gibt-es-nicht.css"]).has(d)) probe.delete(d);
    return probe.size === 0;
  })());

pruef("Gegenprobe: ein Aufruf ohne Titel würde auffallen",
  aufrufe("frageNach({ was: 'x' })").length === 1
  && !/\btitel\s*:/.test(aufrufe("frageNach({ was: 'x' })")[0]));

pruef("Gegenprobe: der Klammerzähler findet das Ende auch bei Verschachtelung",
  aufrufe("frageNach({ titel: f({a:1}), was: 'x' }) ; danach")[0]
    === "{ titel: f({a:1}), was: 'x' }");

/* =====================================================================
   UND JETZT AM ECHTEN BILDSCHIRM

   Alles oben ist Textsuche. Sie beweist, dass der Aufruf dasteht --
   nicht, dass der Dialog aufgeht, dass "Doch nicht" wirklich nichts
   tut und dass das Abtippen wirklich sperrt.

   Geprüft wird ausgerechnet der gefährlichste Handgriff im Haus: eine
   Person löschen. `pruef-personen-loeschen` gibt es zwar, aber sie
   kennt nur die Schnittstelle -- kein Browser, kein Knopf, kein
   Dialog. Der Weg, den ein Mensch geht, war nie geprüft.
   ===================================================================== */
if (process.env.OHNE_BROWSER === "ja") {
  console.log("\n  (Browserteil übersprungen — OHNE_BROWSER=ja)");
} else {
  const { mkdtempSync, rmSync } = await import("node:fs");
  const { tmpdir } = await import("node:os");
  const { portMussFreiSein } = await import("./helfer-port.mjs");
  const { notbremse } = await import("./helfer-notbremse.mjs");

  const ordner = mkdtempSync(join(tmpdir(), "ws-nachfrage-"));
  process.env.WORKSPACE_DB = join(ordner, "workspace.db");
  const PORT = await portMussFreiSein(4329, "die Nachfragepruefung");
  process.env.PORT = String(PORT);
  process.env.SITE_ACCESS_SECRET = "lokaler-test";
  process.env.SITE_PUBLIC_LAUNCH_AT = "2020-01-01T00:00:00+01:00";

  const express = (await import("express")).default;
  const ec = express.response.cookie;
  express.response.cookie = function (n, w, o) {
    return ec.call(this, n, w, { ...(o || {}), secure: false });
  };
  await import("./index.js");
  notbremse(240_000, "pruef-nachfrage");
  await new Promise((r) => setTimeout(r, 1000));
  const BASIS = `http://127.0.0.1:${PORT}`;

  const { DatabaseSync } = await import("node:sqlite");
  const { scryptSync, randomBytes } = await import("node:crypto");
  await fetch(BASIS + "/workspace/api/anmelden", {
    method: "POST", headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ rolle: "admin", code: "x" }) }).catch(() => {});
  for (let i = 0; i < 60; i++) {
    try {
      const pb = new DatabaseSync(process.env.WORKSPACE_DB);
      try { pb.prepare("SELECT 1 FROM personen LIMIT 1").get(); break; } finally { pb.close(); }
    } catch { await new Promise((r) => setTimeout(r, 250)); }
  }
  const db = new DatabaseSync(process.env.WORKSPACE_DB);
  const jetzt = new Date().toISOString();
  const anlegen = (name, rolle, code) => {
    const salt = randomBytes(16).toString("hex");
    const h = scryptSync(code, salt, 64,
      { N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex");
    db.prepare("INSERT INTO personen (name, rolle, code_hash, code_salt, code_n, aktiv, erstellt)"
      + " VALUES (?,?,?,?,?,1,?)").run(name, rolle, h, salt, 32768, jetzt);
  };
  anlegen("Filipe", "admin", "CODE-DOGI-0001");
  anlegen("Testolina", "creator", "CODE-CREA-0001");
  db.close();

  const pw = await import("file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs");
  const browser = await pw.chromium.launch();
  const ctx = await browser.newContext({ viewport: { width: 1280, height: 900 } });
  const seite = await ctx.newPage();
  const abstuerze = [];
  seite.on("pageerror", (f) => abstuerze.push(f.message));

  await seite.goto(BASIS + "/workspace/", { waitUntil: "networkidle" });
  await seite.click('.rolle[data-rolle="admin"]');
  await seite.fill("#code", "CODE-DOGI-0001");
  await seite.click("button[type=submit]");
  await seite.waitForURL("**/start.html", { timeout: 25000 });
  await seite.goto(BASIS + "/workspace/personen.html", { waitUntil: "networkidle" });
  await seite.waitForTimeout(900);

  console.log("\n  --- Am echten Bildschirm: eine Person löschen ---");

  const wieViele = () => seite.evaluate(() =>
    [...document.querySelectorAll(".person")].length);
  /* DEN ABSCHNITT AUFKLAPPEN. Die Rollen-Abschnitte sind
     standardmäßig ZU -- nur der eigene ist offen. Das ist so gewollt
     (eine Liste mit fünf offenen Abschnitten ist unlesbar), und eine
     Prüfung, die das nicht weiß, misst eine leere Liste und hält das
     für einen Befund. Genau das ist beim Bauen passiert. */
  await seite.waitForSelector('.gruppe[data-rolle="creator"] .gruppe__kopf',
    { timeout: 15_000 });
  await seite.click('.gruppe[data-rolle="creator"] .gruppe__kopf');
  await seite.waitForFunction(
    () => document.querySelectorAll(".person").length >= 2,
    { timeout: 15_000 }).catch(() => {});
  const vorher = await wieViele();
  const namen2 = await seite.evaluate(() =>
    [...document.querySelectorAll(".person")]
      .map((e) => e.textContent.trim().slice(0, 30)).join(" | "));
  pruef("die Liste steht da", vorher >= 2, `${vorher} Personen: ${namen2}`);

  const loeschKnopf = seite.locator(".person", { hasText: "Testolina" })
    .locator("button", { hasText: "Löschen" }).first();
  await loeschKnopf.click();

  let dialogDa = true;
  try { await seite.waitForSelector("dialog.nachfrage[open]", { timeout: 4000 }); }
  catch { dialogDa = false; }
  pruef("der Dialog geht auf", dialogDa);

  if (dialogDa) {
    const inhalt = await nachfrageText(seite);
    pruef("er nennt den Namen im Titel", /Testolina/.test(inhalt.titel), inhalt.titel);
    pruef("er sagt, dass es endgültig ist", inhalt.endgueltig);
    pruef("er sagt, WAS passiert", inhalt.was.length > 10, inhalt.was);
    pruef("und was BLEIBT", inhalt.bleibt.length > 10, inhalt.bleibt);

    /* DER RIEGEL: Ein falsch abgetippter Name darf NICHTS loeschen. */
    await seite.fill("#nachfrage-tipp", "Testolinaa");
    await seite.click('dialog.nachfrage [data-teil="ja"]');
    await seite.waitForTimeout(500);
    const nochOffen = await seite.evaluate(() =>
      !!document.querySelector("dialog.nachfrage[open]"));
    pruef("ein falsch abgetippter Name schließt den Dialog NICHT", nochOffen);
    const fehlertext = await seite.evaluate(() =>
      document.querySelector('dialog.nachfrage [data-teil="fehler"]')?.textContent?.trim() || "");
    pruef("und sagt, was erwartet wird", /Testolina/.test(fehlertext), fehlertext);
    pruef("die Person ist noch da", await wieViele() === vorher);

    /* Der Knopf daneben muss wirklich nichts tun. */
    await seite.click('dialog.nachfrage [data-teil="nein"]');
    await seite.waitForTimeout(400);
    pruef("der Abbruchknopf schließt den Dialog",
      !await seite.evaluate(() => !!document.querySelector("dialog.nachfrage[open]")));
    pruef("und löscht nichts", await wieViele() === vorher);

    /* Und jetzt richtig. */
    await bestaetige(seite, () => loeschKnopf.click(), { tippen: "Testolina" });
    await seite.waitForTimeout(1400);
    const nachher = await wieViele();
    pruef("mit richtig abgetipptem Namen wird gelöscht",
      nachher === vorher - 1, `${vorher} → ${nachher}`);
  }

  /* Und Esc bricht ab -- auf einem Dialog OHNE Abtippen. */
  await seite.goto(BASIS + "/workspace/start.html", { waitUntil: "networkidle" });
  await seite.waitForTimeout(700);
  await seite.click("#abmelden");
  let abmeldeDialog = true;
  try { await seite.waitForSelector("dialog.nachfrage[open]", { timeout: 4000 }); }
  catch { abmeldeDialog = false; }
  pruef("auch Abmelden fragt nach", abmeldeDialog);
  if (abmeldeDialog) {
    const t = await nachfrageText(seite);
    pruef("und nennt den Grund: der Zugangscode", /Zugangscode/.test(t.was), t.was);
    await seite.keyboard.press("Escape");
    await seite.waitForTimeout(800);
    pruef("Esc bricht ab – man bleibt angemeldet",
      seite.url().includes("start.html"), seite.url());
  }

  pruef("keine Abstürze im Browser", abstuerze.length === 0, abstuerze[0] || "");

  await browser.close();
  try { rmSync(ordner, { recursive: true, force: true }); } catch { /* egal */ }
}

console.log(`\n  ${ok} bestanden, ${fehl} fehlgeschlagen`);
console.log(`  (${gezaehlt} Rückfragen in ${nutzer.size} Dateien, `
  + `${mitNutzung} Seiten)\n`);
process.exit(fehl ? 1 : 0);