DogFatherGit
4ad99b5c37
Ein 401 ohne Anmeldung beweist nur, dass die Adresse existiert -- nicht, dass die Antwort auch bei ANGEMELDETEM Zugriff kommt. Genau dort blieb die Verwaltung stehen. Die Diagnose geht jetzt denselben Weg wie die Verwaltung: Ausweis von der Zugangswand holen, damit die Einstellungen abrufen, Zeit messen. Mit eigenem Zeitlimit von 12 Sekunden, damit die Diagnose nicht selbst haengt, wenn die Adresse haengt -- ein Pruefwerkzeug, das am selben Problem scheitert, ist wertlos. Damit ist der Befund eindeutig statt vermutet: entweder 'Erfolgreich in X ms', oder eine Statusnummer samt Antworttext, oder 'KEINE Antwort innerhalb von 12 Sekunden'.
361 lines
15 KiB
HTML
361 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Diagnose — Dogfather Webdesign</title>
|
|
<meta name="robots" content="noindex, nofollow" />
|
|
<meta name="theme-color" content="#05070b" />
|
|
<style>
|
|
/* ---------------------------------------------------------------------
|
|
BEWUSST OHNE EXTERNE DATEIEN.
|
|
|
|
Diese Seite muss auch dann funktionieren, wenn genau das kaputt ist,
|
|
was sie untersuchen soll: veraltete CSS- und JS-Dateien aus dem
|
|
Zwischenspeicher. Würde sie webdesign.css oder wd-core.js laden,
|
|
könnte sie am selben Problem scheitern und wäre nutzlos.
|
|
|
|
Deshalb steht hier alles inline und es gibt keinen Service Worker.
|
|
--------------------------------------------------------------------- */
|
|
:root { color-scheme: dark; }
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0; padding: 1.5rem 1rem 3rem;
|
|
background: #05070b; color: #eef4fb;
|
|
font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
}
|
|
.hu { max-width: 720px; margin: 0 auto; }
|
|
h1 { font-size: 1.5rem; margin: 0 0 .3rem; }
|
|
p.lead { color: #8f9fb4; margin: 0 0 1.6rem; }
|
|
h2 { font-size: 1.05rem; margin: 1.8rem 0 .6rem; color: #7fd0e8; }
|
|
.zeile {
|
|
display: flex; gap: .8rem; align-items: flex-start;
|
|
padding: .8rem .9rem; margin-bottom: .5rem;
|
|
border: 1px solid rgba(127,208,232,.16); border-radius: 10px;
|
|
background: rgba(16,26,41,.5);
|
|
}
|
|
/* min-width:0 ist Pflicht, kein Feinschliff: Ohne das weigert sich ein
|
|
Flex-Kind, unter seine Inhaltsbreite zu schrumpfen, und langer Text
|
|
sprengt die Karte seitlich. */
|
|
.zeile .inhalt { min-width: 0; flex: 1 1 auto; }
|
|
.zeile b { display: block; margin-bottom: .1rem; }
|
|
/* Nur der Beschreibungstext, NICHT jeder span in der Zeile -- sonst
|
|
traefe die Regel auch den Statuskreis. */
|
|
.zeile .text { color: #8f9fb4; font-size: .9rem; overflow-wrap: anywhere; }
|
|
.mark {
|
|
flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
|
|
display: grid; place-items: center;
|
|
font-size: .95rem; line-height: 1;
|
|
/* Der Kreis enthaelt genau ein Zeichen. Sollte je mehr hineingeraten,
|
|
bricht es nicht die Seite auf, sondern wird abgeschnitten. */
|
|
overflow: hidden;
|
|
}
|
|
.gut { background: rgba(111,214,163,.15); color: #6fd6a3; }
|
|
.warn { background: rgba(232,200,119,.18); color: #e8c877; }
|
|
.bad { background: rgba(255,157,157,.15); color: #ff9d9d; }
|
|
.wart { background: rgba(143,159,180,.15); color: #8f9fb4; }
|
|
button {
|
|
font: inherit; font-weight: 700; cursor: pointer;
|
|
padding: .85rem 1.3rem; border-radius: 10px; border: 0;
|
|
background: linear-gradient(135deg, #a9e2f2, #7fd0e8); color: #04060a;
|
|
min-height: 48px;
|
|
}
|
|
button.zweit { background: transparent; color: #7fd0e8; border: 1px solid rgba(127,208,232,.34); }
|
|
.knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
|
|
.hinweis {
|
|
margin-top: 1.6rem; padding: 1rem 1.1rem; border-radius: 12px;
|
|
background: rgba(232,200,119,.08); border: 1px solid rgba(232,200,119,.32);
|
|
}
|
|
.hinweis b { color: #e8c877; }
|
|
code { background: rgba(127,208,232,.1); padding: .1rem .35rem; border-radius: 5px; font-size: .88em; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="hu">
|
|
<h1>Diagnose</h1>
|
|
<p class="lead">
|
|
Diese Seite prüft, warum der Verwaltungs- oder Portalbereich nicht lädt.
|
|
Sie lädt selbst keine externen Dateien — sie funktioniert also auch dann,
|
|
wenn genau die das Problem sind.
|
|
</p>
|
|
|
|
<h2>Prüfungen</h2>
|
|
<div id="ergebnis">
|
|
<div class="zeile"><span class="mark wart" aria-hidden="true">…</span><div class="inhalt"><b>Prüfung läuft</b><span class="text">Einen Moment.</span></div></div>
|
|
</div>
|
|
|
|
<div class="knoepfe">
|
|
<button type="button" id="reparieren">Zwischenspeicher leeren und neu laden</button>
|
|
<button type="button" class="zweit" id="nochmal">Nochmal prüfen</button>
|
|
</div>
|
|
|
|
<div class="hinweis">
|
|
<p style="margin:0 0 .4rem"><b>Was der grosse Knopf macht</b></p>
|
|
<p style="margin:0;font-size:.92rem">
|
|
Er meldet den Service Worker ab und löscht alle zwischengespeicherten
|
|
Dateien dieser Seite. Danach holt der Browser alles frisch vom Server.
|
|
<strong>Deine Anmeldung und deine Daten bleiben unberührt</strong> —
|
|
gelöscht werden nur Kopien von Dateien, die ohnehin jederzeit neu
|
|
geladen werden können.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
/* Alles inline und ohne Abhängigkeiten — siehe Begründung im CSS-Kopf. */
|
|
(function () {
|
|
"use strict";
|
|
var API = "https://postfach.dogfather-universe.com";
|
|
var ziel = document.getElementById("ergebnis");
|
|
|
|
/* Die Zeile wird Element fuer Element gebaut, NICHT ueber innerHTML mit
|
|
anschliessendem querySelector.
|
|
|
|
Genau daran ist die erste Fassung gescheitert: Sie schrieb
|
|
d.querySelector("span").textContent = text -- und querySelector
|
|
liefert den ERSTEN passenden span. Das war der Statuskreis, nicht das
|
|
Textfeld darunter. Der ganze Beschreibungstext landete dadurch in
|
|
einem 26 Pixel breiten Kreis und lief als schmale Buchstabensaeule
|
|
ueber die halbe Seite.
|
|
|
|
Mit direkten Verweisen auf die erzeugten Elemente kann das nicht
|
|
passieren -- es gibt nichts zu verwechseln. */
|
|
function zeile(art, titel, text) {
|
|
var zeichen = { gut: "✓", warn: "!", bad: "✕", wart: "…" };
|
|
|
|
var d = document.createElement("div");
|
|
d.className = "zeile";
|
|
|
|
var kreis = document.createElement("span");
|
|
kreis.className = "mark " + art;
|
|
kreis.textContent = zeichen[art] || "?";
|
|
kreis.setAttribute("aria-hidden", "true");
|
|
|
|
var inhalt = document.createElement("div");
|
|
inhalt.className = "inhalt";
|
|
|
|
var ueberschrift = document.createElement("b");
|
|
ueberschrift.textContent = titel;
|
|
|
|
var beschreibung = document.createElement("span");
|
|
beschreibung.className = "text";
|
|
beschreibung.textContent = text;
|
|
|
|
inhalt.appendChild(ueberschrift);
|
|
inhalt.appendChild(beschreibung);
|
|
d.appendChild(kreis);
|
|
d.appendChild(inhalt);
|
|
ziel.appendChild(d);
|
|
}
|
|
|
|
async function pruefen() {
|
|
ziel.innerHTML = "";
|
|
|
|
/* Welche Fassung SOLL es sein? Steht im Service-Worker-Skript auf
|
|
dem Server. Ohne diesen Vergleich kann man nicht sagen, ob ein
|
|
gefuellter Zwischenspeicher gut oder schlecht ist -- die erste
|
|
Fassung meldete jeden Zwischenspeicher als "auffaellig", auch den
|
|
topaktuellen. Das ist Panikmache, kein Befund. */
|
|
var sollFassung = null;
|
|
try {
|
|
var swTxt = await (await fetch("/webdesign/sw.js?diagnose=" + Date.now(), { cache: "no-store" })).text();
|
|
var tref = swTxt.match(/CACHE_NAME\s*=\s*"([^"]+)"/);
|
|
if (tref) sollFassung = tref[1];
|
|
} catch (e) { /* nicht schlimm, dann eben ohne Vergleich */ }
|
|
|
|
/* 1. Service Worker.
|
|
|
|
Aktiv zu sein ist der NORMALFALL -- die Seite ist als App
|
|
installierbar, dafuer braucht es ihn. Auffaellig ist er nur, wenn
|
|
er eine veraltete Fassung vorhaelt. */
|
|
var swAktiv = 0;
|
|
if ("serviceWorker" in navigator) {
|
|
try {
|
|
var regs = await navigator.serviceWorker.getRegistrations();
|
|
swAktiv = regs.filter(function (r) {
|
|
return (r.scope || "").indexOf("/webdesign") >= 0;
|
|
}).length;
|
|
} catch (e) { swAktiv = -1; }
|
|
}
|
|
|
|
/* 2. Zwischenspeicher -- und der Vergleich, auf den es ankommt. */
|
|
var gefunden = [];
|
|
if ("caches" in window) {
|
|
try {
|
|
var namen = await caches.keys();
|
|
gefunden = namen.filter(function (n) { return n.indexOf("webdesign") >= 0; });
|
|
} catch (e) { gefunden = []; }
|
|
}
|
|
|
|
var aktuell = !sollFassung || !gefunden.length || gefunden.indexOf(sollFassung) >= 0;
|
|
var veraltet = gefunden.filter(function (n) { return n !== sollFassung; });
|
|
|
|
if (swAktiv < 0) {
|
|
zeile("warn", "Service Worker", "Konnte nicht geprüft werden.");
|
|
} else if (!swAktiv) {
|
|
zeile("gut", "Service Worker", "Keiner aktiv — alles kommt direkt vom Server.");
|
|
} else if (aktuell && !veraltet.length) {
|
|
zeile("gut", "Service Worker",
|
|
"Aktiv und aktuell. Das ist so gewollt — dadurch lässt sich die Seite als App installieren.");
|
|
} else {
|
|
zeile("warn", "Service Worker",
|
|
"Aktiv, hält aber eine veraltete Fassung vor. Der Knopf unten setzt ihn zurück.");
|
|
}
|
|
|
|
if (!("caches" in window)) {
|
|
zeile("gut", "Zwischenspeicher", "Wird von diesem Browser nicht genutzt.");
|
|
} else if (!gefunden.length) {
|
|
zeile("gut", "Zwischenspeicher", "Leer.");
|
|
} else if (aktuell && !veraltet.length) {
|
|
zeile("gut", "Zwischenspeicher",
|
|
"Aktuelle Fassung (" + gefunden.join(", ") + ")" +
|
|
(sollFassung ? " — stimmt mit dem Server überein." : "."));
|
|
} else {
|
|
zeile("warn", "Zwischenspeicher",
|
|
"Veraltet: " + veraltet.join(", ") +
|
|
(sollFassung ? ". Der Server liefert " + sollFassung + "." : "."));
|
|
}
|
|
|
|
/* 3. Ist der Server erreichbar? Ein Endpunkt, der ohne Anmeldung
|
|
antwortet -- 401 ist hier die RICHTIGE Antwort und beweist,
|
|
dass alles bis dorthin funktioniert. */
|
|
try {
|
|
var t0 = Date.now();
|
|
var a = await fetch(API + "/webdesign/admin/anfragen", { cache: "no-store" });
|
|
var ms = Date.now() - t0;
|
|
if (a.status === 401) {
|
|
zeile("gut", "Server erreichbar", "Antwortet in " + ms + " ms (Status 401 = erwartet ohne Anmeldung).");
|
|
} else if (a.status === 404) {
|
|
zeile("bad", "Server veraltet", "Status 404 — der interne Dienst kennt diese Adresse noch nicht.");
|
|
} else {
|
|
zeile("warn", "Server antwortet", "Status " + a.status + " nach " + ms + " ms.");
|
|
}
|
|
} catch (e) {
|
|
zeile("bad", "Server NICHT erreichbar",
|
|
"Der Browser kommt nicht an " + API + " heran. " + (e.message || ""));
|
|
}
|
|
|
|
/* 4. Die neuen Adressen */
|
|
try {
|
|
var b = await fetch(API + "/webdesign/admin/einstellungen", { cache: "no-store" });
|
|
if (b.status === 401) zeile("gut", "Zahlungen-Bereich", "Vorhanden und geschützt.");
|
|
else if (b.status === 404) zeile("bad", "Zahlungen-Bereich fehlt",
|
|
"Der Server muss noch aktualisiert werden (git pull + Neustart).");
|
|
else zeile("warn", "Zahlungen-Bereich", "Status " + b.status + ".");
|
|
} catch (e) {
|
|
zeile("bad", "Zahlungen-Bereich", "Nicht erreichbar: " + (e.message || ""));
|
|
}
|
|
|
|
/* 4b. DER ENTSCHEIDENDE TEST: derselbe Ablauf wie in der Verwaltung,
|
|
mit einem echten Ausweis.
|
|
|
|
Ein 401 ohne Anmeldung beweist nur, dass die Adresse existiert.
|
|
Es beweist NICHT, dass die Antwort auch dann kommt, wenn man
|
|
angemeldet ist -- und genau dort blieb die Verwaltung stehen.
|
|
|
|
Deshalb hier der volle Weg: Ausweis holen, damit die Einstellungen
|
|
abrufen, Zeit messen. Bricht es ab, steht hier die Ursache. */
|
|
try {
|
|
var t1 = Date.now();
|
|
var aw = await fetch("/webdesign/api-ausweis", { cache: "no-store" });
|
|
var awMs = Date.now() - t1;
|
|
if (!aw.ok) {
|
|
zeile("bad", "Ausweis für die Verwaltung",
|
|
"Die Zugangswand gibt keinen aus (Status " + aw.status + "). "
|
|
+ "Dann fragt die Verwaltung nach dem Code — das ist die Ursache.");
|
|
} else {
|
|
var awD = await aw.json();
|
|
if (!awD.ausweis) {
|
|
zeile("bad", "Ausweis für die Verwaltung",
|
|
"Kein Ausweis" + (awD.grund ? " (" + awD.grund + ")" : "")
|
|
+ ". Ohne ihn kann die Verwaltung keine Daten laden.");
|
|
} else {
|
|
zeile("gut", "Ausweis für die Verwaltung", "Erhalten in " + awMs + " ms.");
|
|
|
|
/* Jetzt der eigentliche Abruf -- mit eigenem Zeitlimit, damit
|
|
die Diagnose nicht selbst haengt, wenn die Adresse haengt. */
|
|
var abbruch = new AbortController();
|
|
var wecker = setTimeout(function () { abbruch.abort(); }, 12000);
|
|
var t2 = Date.now();
|
|
try {
|
|
var ein = await fetch(API + "/webdesign/admin/einstellungen", {
|
|
headers: { Authorization: "Bearer " + awD.ausweis },
|
|
cache: "no-store",
|
|
signal: abbruch.signal,
|
|
});
|
|
var einMs = Date.now() - t2;
|
|
var txt = await ein.text();
|
|
if (ein.status === 200) {
|
|
zeile("gut", "Einstellungen abrufen",
|
|
"Erfolgreich in " + einMs + " ms (" + txt.length + " Zeichen Antwort).");
|
|
} else {
|
|
zeile("bad", "Einstellungen abrufen",
|
|
"Status " + ein.status + " nach " + einMs + " ms. Antwort: " + txt.slice(0, 160));
|
|
}
|
|
} catch (e2) {
|
|
zeile("bad", "Einstellungen abrufen",
|
|
e2.name === "AbortError"
|
|
? "KEINE Antwort innerhalb von 12 Sekunden — die Anfrage bleibt hängen."
|
|
: "Fehlgeschlagen: " + (e2.message || e2.name));
|
|
} finally { clearTimeout(wecker); }
|
|
}
|
|
}
|
|
} catch (e) {
|
|
zeile("bad", "Ausweis für die Verwaltung", "Nicht abrufbar: " + (e.message || ""));
|
|
}
|
|
|
|
/* 5. Anmeldung im Browser vorhanden? */
|
|
try {
|
|
var tok = sessionStorage.getItem("wd-vw-token");
|
|
if (tok) zeile("gut", "Anmeldung Verwaltung", "Ein Sitzungsschlüssel liegt vor.");
|
|
else zeile("gut", "Anmeldung Verwaltung",
|
|
"In diesem Tab keiner — das ist normal und KEIN Fehler. Der Schlüssel gilt "
|
|
+ "je Tab, und er soll beim Schliessen der Seite ohnehin verschwinden. "
|
|
+ "Die Verwaltung fragt dann einmal nach dem Zugangscode.");
|
|
} catch (e) {
|
|
zeile("warn", "Anmeldung", "Speicher nicht lesbar: " + e.message);
|
|
}
|
|
|
|
/* 6. Welche Fassung liegt im Browser? */
|
|
try {
|
|
var c = await fetch("/assets/css/webdesign.css?diagnose=" + Date.now(), { cache: "no-store" });
|
|
var txt = await c.text();
|
|
var hatNeu = txt.indexOf("--wd-blau-rgb") >= 0;
|
|
zeile(hatNeu ? "gut" : "bad", "Gestaltungsdatei",
|
|
hatNeu ? "Aktuelle Fassung wird ausgeliefert."
|
|
: "VERALTETE Fassung. Der Knopf unten hilft.");
|
|
} catch (e) {
|
|
zeile("warn", "Gestaltungsdatei", "Nicht prüfbar: " + e.message);
|
|
}
|
|
}
|
|
|
|
document.getElementById("nochmal").addEventListener("click", pruefen);
|
|
|
|
document.getElementById("reparieren").addEventListener("click", async function () {
|
|
var k = this;
|
|
k.disabled = true;
|
|
k.textContent = "Wird bereinigt …";
|
|
try {
|
|
if ("serviceWorker" in navigator) {
|
|
var regs = await navigator.serviceWorker.getRegistrations();
|
|
for (var i = 0; i < regs.length; i++) await regs[i].unregister();
|
|
}
|
|
if ("caches" in window) {
|
|
var namen = await caches.keys();
|
|
for (var j = 0; j < namen.length; j++) await caches.delete(namen[j]);
|
|
}
|
|
} catch (e) { /* weiter -- neu laden hilft meistens trotzdem */ }
|
|
k.textContent = "Fertig — wird neu geladen …";
|
|
/* Mit Zeitstempel, damit auch der Browser-eigene Zwischenspeicher
|
|
umgangen wird. */
|
|
setTimeout(function () {
|
|
location.href = "/webdesign/verwaltung.html?frisch=" + Date.now();
|
|
}, 700);
|
|
});
|
|
|
|
pruefen();
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|