132 lines
3.7 KiB
TypeScript
132 lines
3.7 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { getUser, updateUser } from "../api/user";
|
|
import Cookies from "js-cookie";
|
|
|
|
interface User {
|
|
id: number;
|
|
username: string;
|
|
email: string;
|
|
role: string;
|
|
}
|
|
|
|
const Profile = () => {
|
|
const id = Cookies.get("user_id")
|
|
const navigate = useNavigate();
|
|
if (!id) {
|
|
navigate("/login")
|
|
}
|
|
const [user, setUser] = useState<User | null>(null);
|
|
const [editMode, setEditMode] = useState(false);
|
|
const [formData, setFormData] = useState({ username: "", email: "" });
|
|
|
|
useEffect(() => {
|
|
const fetchUser = async () => {
|
|
try {
|
|
const data = await getUser(Number(id));
|
|
setUser(data);
|
|
setFormData({ username: data.username, email: data.email });
|
|
} catch (err) {
|
|
console.error("Błąd podczas pobierania danych użytkownika:", err);
|
|
navigate("/tasks");
|
|
}
|
|
};
|
|
|
|
fetchUser();
|
|
}, [id]);
|
|
|
|
const handleUpdate = async () => {
|
|
try {
|
|
const updated = await updateUser(Number(id), formData);
|
|
setUser(updated);
|
|
setEditMode(false);
|
|
} catch (err) {
|
|
console.error("Błąd podczas aktualizacji użytkownika:", err);
|
|
}
|
|
};
|
|
|
|
if (!user) return <p>Ładowanie...</p>;
|
|
|
|
return (
|
|
<div className="p-6 max-w-xl mx-auto">
|
|
<h1 className="text-2xl font-bold mb-6">👤 Twój profil</h1>
|
|
|
|
<div className="mb-4">
|
|
<label className="block font-semibold mb-1"><strong>Nazwa użytkownika:</strong></label>
|
|
{editMode ? (
|
|
<input
|
|
type="text"
|
|
value={formData.username}
|
|
onChange={(e) => setFormData({ ...formData, username: e.target.value })}
|
|
className="border p-2 rounded w-full"
|
|
/>
|
|
) : (
|
|
<p>{user.username}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="mb-4">
|
|
<label className="block font-semibold mb-1"><strong>Email:</strong></label>
|
|
{editMode ? (
|
|
<input
|
|
type="email"
|
|
value={formData.email}
|
|
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
|
className="border p-2 rounded w-full"
|
|
/>
|
|
) : (
|
|
<p>{user.email}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="mb-6">
|
|
<label className="block font-semibold mb-1"><strong>Rola:</strong></label>
|
|
<p>{user.role}</p>
|
|
</div>
|
|
|
|
{editMode ? (
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={handleUpdate}
|
|
className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600"
|
|
>
|
|
💾 Zapisz zmiany
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
setEditMode(false);
|
|
setFormData({ username: user.username, email: user.email });
|
|
}}
|
|
className="bg-gray-300 px-4 py-2 rounded hover:bg-gray-400"
|
|
>
|
|
Anuluj
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col gap-2">
|
|
<button
|
|
onClick={() => setEditMode(true)}
|
|
className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
|
|
>
|
|
✏ Edytuj profil
|
|
</button>
|
|
<button
|
|
onClick={() => navigate("/profile/change-password")}
|
|
className="bg-yellow-500 text-white px-4 py-2 rounded hover:bg-yellow-600"
|
|
>
|
|
🔒 Zmień hasło
|
|
</button>
|
|
<button
|
|
onClick={() => navigate("/profile/delete")}
|
|
className="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600"
|
|
>
|
|
❌ Usuń konto
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Profile;
|