Einstellungen: Passwort-Ändern-Funktion

This commit is contained in:
rene 2026-05-22 08:19:58 +02:00
parent aa9ab9d776
commit e2d7655e13

View file

@ -133,6 +133,34 @@
.join(', ') || '—'; .join(', ') || '—';
} }
// Passwort ändern
let pwAlt = $state('');
let pwNeu = $state('');
let pwWdh = $state('');
let pwError = $state('');
let pwSuccess = $state('');
let pwSaving = $state(false);
async function passwortAendern() {
if (!pwAlt || !pwNeu) { pwError = 'Alle Felder ausfüllen.'; return; }
if (pwNeu.length < 8) { pwError = 'Neues Passwort mindestens 8 Zeichen.'; return; }
if (pwNeu !== pwWdh) { pwError = 'Passwörter stimmen nicht überein.'; return; }
pwError = ''; pwSuccess = ''; pwSaving = true;
try {
const u = get(user);
// Altes Passwort prüfen via Login
await api.post('/auth/login', { email: u?.email, password: pwAlt });
// Neues Passwort setzen
await api.put('/users/' + u?.id, { password: pwNeu });
pwSuccess = 'Passwort geändert.';
pwAlt = ''; pwNeu = ''; pwWdh = '';
} catch {
pwError = 'Altes Passwort falsch oder Fehler beim Ändern.';
} finally {
pwSaving = false;
}
}
function abmelden() { function abmelden() {
user.clear(); user.clear();
goto('/login'); goto('/login');
@ -329,6 +357,30 @@
<div class="divider"></div> <div class="divider"></div>
<!-- Passwort ändern -->
<section>
<h2>Passwort ändern</h2>
<div class="field">
<label for="pw-alt">Aktuelles Passwort</label>
<input id="pw-alt" type="password" bind:value={pwAlt} autocomplete="current-password" />
</div>
<div class="field">
<label for="pw-neu">Neues Passwort</label>
<input id="pw-neu" type="password" bind:value={pwNeu} autocomplete="new-password" />
</div>
<div class="field">
<label for="pw-wdh">Neues Passwort wiederholen</label>
<input id="pw-wdh" type="password" bind:value={pwWdh} autocomplete="new-password" />
</div>
{#if pwError}<p class="err">{pwError}</p>{/if}
{#if pwSuccess}<p class="ok">{pwSuccess}</p>{/if}
<button class="btn-save" onclick={passwortAendern} disabled={pwSaving}>
{pwSaving ? 'Wird geändert…' : 'Passwort ändern'}
</button>
</section>
<div class="divider"></div>
<a href="/import-export" class="btn-importexport">Import / Export</a> <a href="/import-export" class="btn-importexport">Import / Export</a>
<div class="divider" style="margin-top:1rem"></div> <div class="divider" style="margin-top:1rem"></div>
@ -414,6 +466,16 @@
.error { color: #dc2626; font-size: 0.875rem; margin-bottom: 0.75rem; } .error { color: #dc2626; font-size: 0.875rem; margin-bottom: 0.75rem; }
.success { color: #16a34a; font-size: 0.875rem; margin-bottom: 0.75rem; } .success { color: #16a34a; font-size: 0.875rem; margin-bottom: 0.75rem; }
.err { color: #dc2626; font-size: 0.875rem; margin: 0.5rem 0; }
.ok { color: #16a34a; font-size: 0.875rem; margin: 0.5rem 0; }
.btn-save {
padding: 0.65rem 1.25rem;
background: #1e40af; color: #fff;
border: none; border-radius: 8px;
font-size: 0.95rem; font-weight: 600; cursor: pointer;
margin-top: 0.25rem;
}
.btn-save:disabled { opacity: 0.55; cursor: not-allowed; }
.hint { color: #94a3b8; font-size: 0.95rem; } .hint { color: #94a3b8; font-size: 0.95rem; }
.btn-primary { .btn-primary {