Stimmen: nur noch die zwei Originalfiguren + eigenes Bild hochladen
Nutzer-Wunsch 21.08.2026: "benutz da bitte nur die originalen husky und hasen. mach nur die zwei. und die auswahl wo die leute selbst ein bild rein setzen können." - Auswahl von acht auf zwei reduziert (DogFather-Husky, HasiDog). Die übrigen Bilddateien bleiben liegen, falls sie je zurücksollen -- es genügt, die Zeile in data-stimmen-avatare.js und die Id in ERLAUBTE_AVATARE wieder zu ergänzen. - Neue Kachel "eigenes Bild" (gestrichelter Rand + Plus), die den Dateidialog öffnet, das Bild sofort hochlädt und als Vorschau in der Kachel zeigt. Bereits freigegebene Stimmen mit einer der entfernten Figuren zeigen wieder den Anfangsbuchstaben statt eines kaputten Bildes -- die Auflösung unbekannter Ids liefert null, das war schon so vorgesehen. Sicherheit des öffentlichen Uploads (bisher war Hochladen bewusst nur der Verwaltung erlaubt): - Gleiche multer-Härtung wie der Verwaltungs-Upload: nur JPG/PNG/WebP, max. 5 MB, zufälliger UUID-Dateiname (kein Originalname). - Der Server nimmt im Avatar-Feld weiterhin NUR bekannte Ids an oder eine Adresse, die exakt auf den eigenen Upload-Ordner zeigt und danach nur aus UUID + Bildendung besteht. Gegengetestet: fremde Domains, "../"-Ausbruch, .svg/.html, javascript:, angehängte Skripte und http statt https werden alle abgelehnt. - Missbrauchsbremse gegen Vollschreiben der Festplatte: max. 10 Uploads pro Stunde und IP. - Sichtbar wird ein Bild ohnehin erst, wenn die Stimme freigegeben wird. Mit Playwright end-to-end geprüft (10 Tests) plus 9 Sicherheitsfälle. Cache-Busting-Version auf 20260821q erhöht. Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -4157,6 +4157,20 @@ body.start-seite .music-toggle:focus-visible {
|
||||
box-shadow: 0 0 0 2px rgba(212, 175, 55, .45), 0 0 18px rgba(212, 175, 55, .4);
|
||||
}
|
||||
.stimmen-avatar-kachel:focus-visible { outline: 2px solid #ffe9a8; outline-offset: 3px; }
|
||||
/* "Eigenes Bild"-Kachel (21.08.2026): gestrichelter Rand, damit sofort
|
||||
erkennbar ist, dass hier noch nichts drin ist und etwas hinzugefügt
|
||||
werden kann -- im Unterschied zu den fertigen Auswahlbildern daneben.
|
||||
Sobald ein Bild hochgeladen wurde, ersetzt das <img> das Plus-Zeichen
|
||||
und die Kachel sieht aus wie die anderen. */
|
||||
.stimmen-avatar-eigenes { border-style: dashed; border-color: rgba(255, 233, 168, .45); }
|
||||
.stimmen-avatar-eigenes:has(img) { border-style: solid; }
|
||||
.stimmen-avatar-plus {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
width: 100%; height: 100%;
|
||||
font-size: 1.3rem; line-height: 1; color: #ffe9a8;
|
||||
}
|
||||
/* Während des Hochladens: kurz gedimmt, damit klar ist, dass etwas läuft. */
|
||||
.stimmen-avatar-eigenes.laedt { opacity: .5; pointer-events: none; }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.stimmen-avatar-kachel { transition: none; }
|
||||
.stimmen-avatar-kachel:hover { transform: none; }
|
||||
|
||||
@@ -18,15 +18,16 @@
|
||||
übereinstimmen — der Server nimmt nur bekannte Ids an, damit über das
|
||||
öffentliche Formular kein beliebiger Pfad eingeschleust werden kann.
|
||||
===================================================================== */
|
||||
/* Nutzer-Wunsch 21.08.2026: "benutz da bitte nur die originalen husky und
|
||||
hasen. mach nur die zwei." -- vorher standen hier acht Bilder (zusätzlich
|
||||
Husky-Kopf, zwei Kosmos-Varianten, zwei Casper-Bilder, Logo). Die beiden
|
||||
Originalfiguren bleiben, der Rest ist raus. Die Bilddateien selbst wurden
|
||||
NICHT gelöscht: sollten sie je wieder gebraucht werden, genügt es, die
|
||||
Zeile hier (und die passende Id in ERLAUBTE_AVATARE, siehe unten) wieder
|
||||
zu ergänzen. */
|
||||
window.STIMMEN_AVATARE = [
|
||||
{ id: "husky-hoodie", name: "DogFather-Husky", datei: "/assets/img/stimmen-avatare/stimme-husky-hoodie.png" },
|
||||
{ id: "hase-hoodie", name: "HasiDog", datei: "/assets/img/stimmen-avatare/stimme-hase-hoodie.png" },
|
||||
{ id: "husky-kopf", name: "Husky-Kopf", datei: "/assets/img/stimmen-avatare/stimme-husky-kopf.png" },
|
||||
{ id: "husky-kosmos", name: "Kosmos-Husky", datei: "/assets/img/stimmen-avatare/stimme-husky-kosmos.png" },
|
||||
{ id: "hase-kosmos", name: "Kosmos-Hase", datei: "/assets/img/stimmen-avatare/stimme-hase-kosmos.png" },
|
||||
{ id: "casper", name: "Casper", datei: "/assets/img/stimmen-avatare/stimme-casper.png" },
|
||||
{ id: "casper-blick", name: "Casper (Blick)", datei: "/assets/img/stimmen-avatare/stimme-casper-blick.png" },
|
||||
{ id: "logo", name: "DogFather-Logo", datei: "/assets/img/stimmen-avatare/stimme-logo.png" },
|
||||
];
|
||||
|
||||
/* Liefert die Bilddatei zu einer gespeicherten Auswahl.
|
||||
|
||||
+52
-2
@@ -21,23 +21,73 @@
|
||||
const kachel = (id, inhalt, titel) =>
|
||||
`<button type="button" class="stimmen-avatar-kachel" data-avatar="${id}" role="radio" aria-checked="false" title="${titel}" aria-label="${titel}">${inhalt}</button>`;
|
||||
|
||||
/* Letzte Kachel: eigenes Bild (21.08.2026, Nutzer-Wunsch "und die
|
||||
auswahl wo die leute selbst ein bild rein setzen können"). Die
|
||||
versteckte Datei-Auswahl liegt gleich daneben; die Kachel selbst
|
||||
löst sie nur aus, damit die Optik zu den anderen Kacheln passt. */
|
||||
wahlEl.innerHTML =
|
||||
kachel("", `<span class="stimmen-avatar-keins" aria-hidden="true">✦</span>`, "Kein Bild") +
|
||||
liste.map((a) => kachel(a.id, `<img src="${a.datei}" alt="" loading="lazy" />`, a.name)).join("");
|
||||
liste.map((a) => kachel(a.id, `<img src="${a.datei}" alt="" loading="lazy" />`, a.name)).join("") +
|
||||
`<button type="button" class="stimmen-avatar-kachel stimmen-avatar-eigenes" id="stimmen-avatar-eigenes"
|
||||
role="radio" aria-checked="false" title="Eigenes Bild hochladen" aria-label="Eigenes Bild hochladen">
|
||||
<span class="stimmen-avatar-plus" aria-hidden="true">＋</span>
|
||||
</button>
|
||||
<input type="file" id="stimmen-avatar-datei" accept="image/jpeg,image/png,image/webp" hidden />`;
|
||||
|
||||
const eigenesBtn = document.getElementById("stimmen-avatar-eigenes");
|
||||
const dateiInput = document.getElementById("stimmen-avatar-datei");
|
||||
let eigenesBildUrl = "";
|
||||
|
||||
const markiere = () => {
|
||||
wahlEl.querySelectorAll(".stimmen-avatar-kachel").forEach((b) => {
|
||||
const aktiv = b.dataset.avatar === gewaehlterAvatar;
|
||||
// Die "eigenes Bild"-Kachel hat kein data-avatar; sie gilt als
|
||||
// gewählt, wenn die aktuelle Auswahl die hochgeladene Adresse ist.
|
||||
const wert = b === eigenesBtn ? eigenesBildUrl : b.dataset.avatar;
|
||||
const aktiv = !!gewaehlterAvatar === !!wert && wert === gewaehlterAvatar;
|
||||
b.classList.toggle("aktiv", aktiv);
|
||||
b.setAttribute("aria-checked", aktiv ? "true" : "false");
|
||||
});
|
||||
};
|
||||
|
||||
wahlEl.addEventListener("click", (e) => {
|
||||
const btn = e.target.closest(".stimmen-avatar-kachel");
|
||||
if (!btn) return;
|
||||
if (btn === eigenesBtn) {
|
||||
// Schon hochgeladen -> einfach wieder auswählen, sonst Dateidialog.
|
||||
if (eigenesBildUrl) { gewaehlterAvatar = eigenesBildUrl; markiere(); }
|
||||
else dateiInput.click();
|
||||
return;
|
||||
}
|
||||
gewaehlterAvatar = btn.dataset.avatar;
|
||||
markiere();
|
||||
});
|
||||
|
||||
dateiInput.addEventListener("change", async () => {
|
||||
const datei = dateiInput.files && dateiInput.files[0];
|
||||
if (!datei) return;
|
||||
const fehlerEl = document.getElementById("stimmen-fehler");
|
||||
eigenesBtn.classList.add("laedt");
|
||||
try {
|
||||
const form = new FormData();
|
||||
form.append("image", datei);
|
||||
const res = await fetch(`${API_BASE_URL}/testimonials/upload-avatar`, { method: "POST", body: form });
|
||||
const data = await res.json();
|
||||
if (!data.ok) {
|
||||
if (fehlerEl) { fehlerEl.textContent = data.error || "Das Bild konnte nicht hochgeladen werden."; fehlerEl.classList.add("zeige"); }
|
||||
return;
|
||||
}
|
||||
eigenesBildUrl = data.url;
|
||||
gewaehlterAvatar = data.url;
|
||||
eigenesBtn.innerHTML = `<img src="${data.url}" alt="" />`;
|
||||
markiere();
|
||||
} catch {
|
||||
if (fehlerEl) { fehlerEl.textContent = "Das Bild konnte nicht hochgeladen werden (keine Verbindung)."; fehlerEl.classList.add("zeige"); }
|
||||
} finally {
|
||||
eigenesBtn.classList.remove("laedt");
|
||||
dateiInput.value = ""; // erlaubt, dieselbe Datei erneut zu wählen
|
||||
}
|
||||
});
|
||||
|
||||
markiere();
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user