74 lines
3.0 KiB
TypeScript
74 lines
3.0 KiB
TypeScript
'use client'
|
|
import { useState } from 'react'
|
|
|
|
const inp: React.CSSProperties = {
|
|
width: '100%', padding: '8px 12px', borderRadius: '6px',
|
|
border: '1px solid var(--border-color)', background: 'var(--bg)',
|
|
color: 'var(--text-primary)', fontSize: '14px', boxSizing: 'border-box',
|
|
}
|
|
const lbl: React.CSSProperties = {
|
|
fontSize: '11px', fontWeight: 600, textTransform: 'uppercase',
|
|
letterSpacing: '1px', color: 'var(--text-muted)', display: 'block', marginBottom: '6px',
|
|
}
|
|
|
|
export default function PasswortAendern() {
|
|
const [current, setCurrent] = useState('')
|
|
const [next, setNext] = useState('')
|
|
const [confirm, setConfirm] = useState('')
|
|
const [saving, setSaving] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [success, setSuccess] = useState(false)
|
|
|
|
async function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault()
|
|
setError(null)
|
|
if (next !== confirm) { setError('Die neuen Passwörter stimmen nicht überein.'); return }
|
|
if (next.length < 8) { setError('Das neue Passwort muss mindestens 8 Zeichen haben.'); return }
|
|
setSaving(true)
|
|
const res = await fetch('/api/admin/passwort', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ currentPassword: current, newPassword: next }),
|
|
})
|
|
const json = await res.json()
|
|
setSaving(false)
|
|
if (!res.ok) { setError(json.error ?? 'Fehler beim Speichern.'); return }
|
|
setSuccess(true)
|
|
setCurrent(''); setNext(''); setConfirm('')
|
|
setTimeout(() => setSuccess(false), 3000)
|
|
}
|
|
|
|
return (
|
|
<div style={{ maxWidth: '480px' }}>
|
|
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
|
|
<div>
|
|
<label style={lbl}>Aktuelles Passwort</label>
|
|
<input type="password" style={inp} value={current} onChange={e => setCurrent(e.target.value)} autoComplete="current-password" required />
|
|
</div>
|
|
<div>
|
|
<label style={lbl}>Neues Passwort</label>
|
|
<input type="password" style={inp} value={next} onChange={e => setNext(e.target.value)} autoComplete="new-password" required />
|
|
</div>
|
|
<div>
|
|
<label style={lbl}>Neues Passwort bestätigen</label>
|
|
<input type="password" style={inp} value={confirm} onChange={e => setConfirm(e.target.value)} autoComplete="new-password" required />
|
|
</div>
|
|
|
|
{error && (
|
|
<p style={{ fontSize: '13px', color: '#f87171', padding: '10px 14px', borderRadius: '6px', background: 'rgba(248,113,113,0.1)', border: '1px solid rgba(248,113,113,0.3)' }}>
|
|
{error}
|
|
</p>
|
|
)}
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={saving}
|
|
style={{ padding: '10px', borderRadius: '6px', background: 'var(--accent)', color: '#fff', fontWeight: 700, border: 'none', cursor: 'pointer', fontSize: '14px' }}
|
|
>
|
|
{saving ? 'Wird gespeichert…' : success ? '✓ Passwort geändert' : 'Passwort ändern'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|