From 81119c19bcd656c8e657a0833320972c94a57817 Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 27 Sep 2026 09:22:37 +0000 Subject: [PATCH] =?UTF-8?q?Kundenbereich:=20Passwort=20selbst=20=C3=A4nder?= =?UTF-8?q?n?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Im Konto-Menü (Profilbild) gibt es unter "Konto" jetzt "Passwort ändern". Die Seite fragt aktuelles Passwort, neues Passwort und Wiederholung ab (mindestens 8 Zeichen, "Passwörter anzeigen"). Am Handy ist sie eine Unterseite des Tabs, aus dem man kam; Direktlink /dashboard.html#passwort. Im Ansichtsmodus ist sie gesperrt. Server (POST /api/auth/password): - Das aktuelle Passwort wird über eine kurze Appwrite-Session geprüft, die gleich wieder gelöscht wird. Tippfehler lösen nicht die globale Login-Sperre aus. Es gibt höchstens 5 Prüfungen je Kunde und Stunde, das bleibt unter Appwrites Grenze (10 Anmeldungen je E-Mail und Stunde). - Das neue Passwort wird über die Users-API gesetzt. Fehler von Appwrite (zuletzt benutzt, zu häufig, persönliche Daten) kommen als verständliche Meldung. - Die Klartext-Kopie in customers.portalPassword und ein Alt-Eintrag in den Notizen werden geleert. Ein selbst gewähltes Passwort wird nie im Klartext gespeichert; das Ticketsystem zeigt dann "–". - Der Kunde bekommt eine Bestätigungsmail (Kopie an die Admins wie bei allen Kundenmails). Andere Geräte werden abgemeldet: Kunden-Sessions merken sich beim Login den Passwortstand (Appwrite passwordUpdate, pwv). requireSession und /api/auth/me prüfen ihn, 60 s zwischengespeichert. Das gilt auch, wenn wir im Ticketsystem ein neues Passwort setzen. Ist Appwrite nicht erreichbar, bleibt die Session gültig. Sessions von vor diesem Update haben keinen Stand und laufen normal aus (höchstens 7 Tage). Login-Seite: Hinweis auf "Passwort ändern" statt "über das Ticketsystem", dazu "Passwort vergessen?" mit support@webklar.com. Co-Authored-By: Claude Opus 5.5 --- .env.example | 3 +- public/app.js | 145 ++++++++++++++++++++++-- public/dashboard.html | 46 ++++++++ public/kundenbereich.css | 16 +++ public/login.html | 3 +- server/middleware/session.js | 12 +- server/routes/auth.js | 39 ++++++- server/services/appwriteClient.js | 20 ++++ server/services/customerAdmin.js | 21 ++++ server/services/customerPassword.js | 168 ++++++++++++++++++++++++++++ server/services/passwordVersion.js | 63 +++++++++++ test/customerPassword.test.js | 62 ++++++++++ 12 files changed, 585 insertions(+), 13 deletions(-) create mode 100644 server/services/customerPassword.js create mode 100644 server/services/passwordVersion.js create mode 100644 test/customerPassword.test.js diff --git a/.env.example b/.env.example index 1ab02fb..3182c99 100644 --- a/.env.example +++ b/.env.example @@ -6,7 +6,8 @@ APPWRITE_ENDPOINT=https://ticket.webklar.com/v1 APPWRITE_PROJECT_ID=6a1058610003c5a13a05 # Fest: nur woms-database (Ticketsystem). Wird bei abweichendem Wert ignoriert. # APPWRITE_DATABASE_ID=woms-database -# API-Key Scopes (Appwrite 1.8): databases.read/write, collections.read/write, documents.read/write +# API-Key Scopes (Appwrite 1.8): databases.read/write, collections.read/write, documents.read/write, +# users.read/write (Kundenzugänge anlegen, Passwort ändern, Abmelden anderer Geräte) APPWRITE_API_KEY= APPWRITE_COLLECTION_CUSTOMERS=customers diff --git a/public/app.js b/public/app.js index 2ac816e..c2f3549 100644 --- a/public/app.js +++ b/public/app.js @@ -1,3 +1,6 @@ +// Sitzung beendet (Passwort auf einem anderen Gerät geändert): nur einmal zur Anmeldung wechseln +let sessionEndRedirected = false + async function api(path, options = {}) { const response = await fetch(path, { credentials: 'same-origin', @@ -12,7 +15,13 @@ async function api(path, options = {}) { : `Fehler ${response.status}` const err = new Error(data.error || fallback) err.status = response.status + if (data.code) err.code = data.code if (data.retryAfterSeconds) err.retryAfterSeconds = data.retryAfterSeconds + // Passwort auf einem anderen Gerät geändert: diese Sitzung gilt nicht mehr + if (data.code === 'session_revoked' && document.body.classList.contains('dashboard-page') && !sessionEndRedirected) { + sessionEndRedirected = true + window.location.href = `/login.html?error=${encodeURIComponent(err.message)}` + } throw err } return data @@ -1272,11 +1281,122 @@ async function loadTakeoverCard({ abo, notice = '' } = {}) { })) } +/* -------------------------------------------------------- Passwort ändern --- */ +// Seite "Passwort ändern" aus dem Konto-Menü. Dieselben Regeln prüft der Server +// (server/services/customerPassword.js); danach sind andere Geräte abgemeldet. +function passwordProblem(current, next, repeat, email) { + if (!current) return ['pw-current', 'Bitte gib dein aktuelles Passwort ein.'] + if (!next) return ['pw-new', 'Bitte gib ein neues Passwort ein.'] + if ([...next].length < 8) return ['pw-new', 'Das neue Passwort muss mindestens 8 Zeichen haben.'] + if (new TextEncoder().encode(next).length > 256) return ['pw-new', 'Das neue Passwort ist zu lang (höchstens 256 Zeichen).'] + if (!next.trim()) return ['pw-new', 'Das neue Passwort darf nicht nur aus Leerzeichen bestehen.'] + if (next === current) return ['pw-new', 'Das neue Passwort muss sich vom aktuellen unterscheiden.'] + if (email && next.trim().toLowerCase() === email.trim().toLowerCase()) { + return ['pw-new', 'Bitte nimm nicht deine E-Mail-Adresse als Passwort.'] + } + if (next !== repeat) return ['pw-repeat', 'Die beiden neuen Passwörter stimmen nicht überein.'] + return null +} + +const passwordState = { email: '', ready: false, viewAs: false } + +// Kunde bekannt (/api/auth/me): Zugang für Passwort-Manager, im Ansichtsmodus gesperrt +function setPasswordAccount(customer, viewAs) { + passwordState.email = customer.email || '' + passwordState.viewAs = viewAs + passwordState.ready = true + document.getElementById('pw-username').value = passwordState.email + if (!viewAs) return + const submit = document.getElementById('pw-submit') + document.querySelectorAll('#pw-form input').forEach((f) => { f.disabled = true }) + submit.disabled = true + submit.insertAdjacentHTML('afterend', 'Im Ansichtsmodus kann das Passwort nicht geändert werden.') +} + +// Gleich beim Start: das Formular darf nie ohne Script-Handler abgeschickt werden +function initPasswordView() { + const form = document.getElementById('pw-form') + if (!form) return + const done = document.getElementById('pw-done') + const errorEl = document.getElementById('pw-error') + const submit = document.getElementById('pw-submit') + const show = document.getElementById('pw-show') + const fields = ['pw-current', 'pw-new', 'pw-repeat'].map((id) => document.getElementById(id)) + const [current, next, repeat] = fields + let returnTo = 'projects' + + const clearFields = () => { + fields.forEach((f) => { f.value = ''; f.type = 'password' }) + show.checked = false + hideError(errorEl) + } + const showDone = (on) => { + form.classList.toggle('hidden', on) + done.classList.toggle('hidden', !on) + } + // Wer die Seite verlässt, findet beim nächsten Mal ein leeres Formular (keine Passwörter im DOM) + document.addEventListener('kb:view', (ev) => { + if (ev.detail.name !== 'passwort') { + returnTo = ev.detail.name + clearFields() + showDone(false) + } else if (!passwordState.viewAs && !coarsePointer.matches) { + // Am Desktop gleich lostippen; auf dem Handy nicht ungefragt die Tastatur öffnen + current.focus({ preventScroll: true }) + } + }) + + show.addEventListener('change', () => { + fields.forEach((f) => { f.type = show.checked ? 'text' : 'password' }) + }) + + form.addEventListener('submit', async (ev) => { + ev.preventDefault() + if (submit.disabled || !passwordState.ready || passwordState.viewAs) return + hideError(errorEl) + const problem = passwordProblem(current.value, next.value, repeat.value, passwordState.email) + if (problem) { + showError(errorEl, problem[1]) + document.getElementById(problem[0]).focus() + return + } + submit.disabled = true + submit.textContent = 'Wird gespeichert…' + try { + await api('/api/auth/password', { + method: 'POST', + body: JSON.stringify({ currentPassword: current.value, newPassword: next.value }), + }) + clearFields() + showDone(true) + done.focus() + } catch (err) { + showError(errorEl, err.message) + if (err.code === 'wrong_password' || err.code === 'current_missing') { + current.focus() + current.select() + } else if (err.code === 'new_invalid') { + next.focus() + } + } finally { + submit.disabled = false + submit.textContent = 'Passwort ändern' + } + }) + + // Fertig: zurück, woher man kam (App-Ansicht über den Verlauf wie der Zurück-Pfeil) + document.getElementById('pw-done-btn')?.addEventListener('click', () => { + if (window.history.state?.kbSub === 'passwort') window.history.back() + else showView(APP_PARENT.passwort || returnTo) + }) +} + /* ---------------------------------------------------------- Navigation --- */ // Ansichten im Inhaltsbereich; Hash fuer Direktlinks (z. B. aus Mails: #abo, #gutschrift). // "wartung" gibt es nur in der App-Ansicht (Tab), am Desktop zeigt sie das Wartungs-Abo. // "projekt" (Projektdetails als eigene Seite) gibt es ebenfalls nur in der App-Ansicht. -const VIEW_HASHES = { projects: '', activity: 'fortschritt', invoices: 'rechnungen', chat: 'chat', wartung: 'wartung', abo: 'abo', takeover: 'gutschrift', projekt: 'projekt' } +// "passwort" oeffnet das Konto-Menue (Profilbild). +const VIEW_HASHES = { projects: '', activity: 'fortschritt', invoices: 'rechnungen', chat: 'chat', wartung: 'wartung', abo: 'abo', takeover: 'gutschrift', projekt: 'projekt', passwort: 'passwort' } const viewLoaders = { activity: loadCustomerActivity, chat: initChat } const loadedViews = new Set() @@ -1319,6 +1439,7 @@ async function initDashboardPage() { const loadError = document.getElementById('load-error') initAppShell() + initPasswordView() // Konto-Menü (Profilbild): Abmelden und "Abo verwalten & Rechnungen" gibt es nur dort document.getElementById('kb-sheet-logout')?.addEventListener('click', async () => { @@ -1345,7 +1466,10 @@ async function initDashboardPage() { const me = await api('/api/auth/me') if (!me.authenticated) { - window.location.href = loginUrl + const target = new URL(loginUrl, window.location.origin) + // Passwort auf einem anderen Gerät geändert: Hinweis auf der Anmeldeseite + if (me.reason === 'password_changed' && me.message) target.searchParams.set('error', me.message) + window.location.href = target.pathname + target.search return } if (me.role === 'admin' && !me.customer) { @@ -1361,6 +1485,7 @@ async function initDashboardPage() { chatState.viewAs = Boolean(me.viewAs) takeoverState.customer = customer renderViewAsBanner(me) + setPasswordAccount(customer, chatState.viewAs) const displayName = customer.companyName || customer.name || customer.email document.getElementById('customer-name').textContent = displayName @@ -1424,9 +1549,10 @@ async function initDashboardPage() { // Gleiche Bedingung wie der Abschnitt "App-Ansicht" in kundenbereich.css (auch Handys quer) const appLayout = window.matchMedia('(max-width: 880px), (pointer: coarse) and (max-height: 500px)') const coarsePointer = window.matchMedia('(pointer: coarse)') -// Unterseite -> Tab, zu dem sie gehoert (und Text neben dem Zurueck-Pfeil) +// Unterseite -> Tab, zu dem sie gehoert (und Text neben dem Zurueck-Pfeil). +// "passwort" setzt onAppViewShown: die Ansicht, aus der das Konto-Menue geoeffnet wurde. const APP_PARENT = { abo: 'wartung', takeover: 'wartung', projekt: 'projects' } -const APP_PARENT_LABEL = { wartung: 'Wartung', projects: 'Projekte' } +const APP_PARENT_LABEL = { wartung: 'Wartung', projects: 'Projekte', activity: 'Fortschritt', invoices: 'Rechnungen', chat: 'Chat' } const appShell = { view: 'projects', scroll: {}, fromHistory: false, sideCards: [], installPrompt: null } const TEXT_INPUT = 'textarea, input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=date]):not([type=button]):not([type=submit]):not([type=range]):not([type=color])' @@ -1498,15 +1624,18 @@ function onAppViewShown(name) { return } const prev = appShell.view + // "Passwort ändern" (Konto-Menü) ist in der App-Ansicht eine Unterseite der Ansicht, in der man gerade war + if (name === 'passwort' && prev !== 'passwort') APP_PARENT.passwort = isAppLayout() ? prev : undefined const parent = APP_PARENT[name] const nav = name === prev ? 'same' : parent === prev ? 'push' : APP_PARENT[prev] === name ? 'back' : 'tab' appShell.view = name document.body.dataset.kbView = name document.body.dataset.kbNav = nav - // Unterseiten markieren ihren Tab + // Unterseiten markieren ihren Tab (Passwort aus einer Unterseite: deren Tab) + const tab = APP_PARENT[parent] || parent || name document.querySelectorAll('.kb-nav-item').forEach((b) => { - const on = b.dataset.view === (parent || name) + const on = b.dataset.view === tab b.classList.toggle('active', on) if (on) b.setAttribute('aria-current', 'page') else b.removeAttribute('aria-current') @@ -1654,7 +1783,9 @@ function initAccountSheet() { sheet.addEventListener('close', () => { sheet.classList.remove('is-closing') document.documentElement.classList.remove('kb-sheet-open') - avatar.focus({ preventScroll: true }) + // Fokus zurück aufs Profilbild – außer die geöffnete Ansicht hat ihn schon gesetzt ("Passwort ändern") + const active = document.activeElement + if (!active || active === document.body || sheet.contains(active)) avatar.focus({ preventScroll: true }) }) // Klick auf den Hintergrund, das X oder eine Ansicht (z. B. "Nachricht schreiben") schließt sheet.addEventListener('click', (ev) => { diff --git a/public/dashboard.html b/public/dashboard.html index 7db6210..e823884 100644 --- a/public/dashboard.html +++ b/public/dashboard.html @@ -77,6 +77,10 @@ Vertrag widerrufen +

Konto

+