101 lines
3.7 KiB
JavaScript
101 lines
3.7 KiB
JavaScript
import { useState } from 'react';
|
|
import { useAuth } from '../context/AuthContext';
|
|
import { updateCredentials } from '../auth';
|
|
|
|
export default function Profile() {
|
|
const { token, user: authUser, loginUser } = useAuth();
|
|
const [currentPassword, setCurrentPassword] = useState('');
|
|
const [newUsername, setNewUsername] = useState('');
|
|
const [newPassword, setNewPassword] = useState('');
|
|
const [saving, setSaving] = useState(false);
|
|
const [error, setError] = useState('');
|
|
const [success, setSuccess] = useState('');
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
setSaving(true);
|
|
setError('');
|
|
setSuccess('');
|
|
try {
|
|
const data = await updateCredentials(token, {
|
|
currentPassword,
|
|
newUsername: newUsername || undefined,
|
|
newPassword: newPassword || undefined,
|
|
});
|
|
loginUser(data.user, data.token);
|
|
setCurrentPassword('');
|
|
setNewUsername('');
|
|
setNewPassword('');
|
|
setSuccess('Daten erfolgreich geändert!');
|
|
} catch (err) {
|
|
setError(err.message);
|
|
}
|
|
setSaving(false);
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-lg mx-auto">
|
|
<h1 className="text-2xl font-bold mb-6">Profil</h1>
|
|
|
|
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
|
<p className="text-sm text-gray-500 mb-6">
|
|
Angemeldet als <span className="font-medium text-gray-700">{authUser?.username}</span>
|
|
{authUser?.is_admin && <span className="ml-2 text-xs bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded-full">Admin</span>}
|
|
</p>
|
|
|
|
{error && (
|
|
<div className="bg-red-50 border border-red-200 text-red-700 text-sm px-4 py-3 rounded-xl mb-4">
|
|
{error}
|
|
</div>
|
|
)}
|
|
{success && (
|
|
<div className="bg-green-50 border border-green-200 text-green-700 text-sm px-4 py-3 rounded-xl mb-4">
|
|
{success}
|
|
</div>
|
|
)}
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Aktuelles Passwort</label>
|
|
<input
|
|
type="password"
|
|
value={currentPassword}
|
|
onChange={e => setCurrentPassword(e.target.value)}
|
|
placeholder="Aktuelles Passwort eingeben"
|
|
required
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Neuer Benutzername (optional)</label>
|
|
<input
|
|
type="text"
|
|
value={newUsername}
|
|
onChange={e => setNewUsername(e.target.value)}
|
|
placeholder="Neuen Benutzernamen wählen"
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Neues Passwort (optional)</label>
|
|
<input
|
|
type="password"
|
|
value={newPassword}
|
|
onChange={e => setNewPassword(e.target.value)}
|
|
placeholder="Mindestens 6 Zeichen"
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
disabled={saving}
|
|
className="bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white px-6 py-2 rounded-lg font-medium transition-colors"
|
|
>
|
|
{saving ? 'Speichern...' : 'Speichern'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|