diff --git a/frontend/package-lock.json b/frontend/package-lock.json index a88f055..9eae912 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "axios": "^1.8.3", "js-cookie": "^3.0.5", + "lucide-react": "^0.488.0", "react": "^19.0.0", "react-dom": "^19.0.0", "react-router-dom": "^7.3.0" @@ -2814,6 +2815,15 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "0.488.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.488.0.tgz", + "integrity": "sha512-ronlL0MyKut4CEzBY/ai2ZpKPxyWO4jUqdAkm2GNK5Zn3Rj+swDz+3lvyAUXN0PNqPKIX6XM9Xadwz/skLs/pQ==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/math-intrinsics": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 30bd962..c9fded6 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -12,6 +12,7 @@ "dependencies": { "axios": "^1.8.3", "js-cookie": "^3.0.5", + "lucide-react": "^0.488.0", "react": "^19.0.0", "react-dom": "^19.0.0", "react-router-dom": "^7.3.0" diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 26b1a7d..1176c85 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,6 +1,7 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import Login from "./pages/Login"; import Tasks from "./pages/Tasks"; +import Profile from "./pages/Profile"; const App = () => { return ( @@ -8,6 +9,7 @@ const App = () => { } /> } /> + } /> ); diff --git a/frontend/src/api/user.ts b/frontend/src/api/user.ts new file mode 100644 index 0000000..6cd5938 --- /dev/null +++ b/frontend/src/api/user.ts @@ -0,0 +1,24 @@ +import api from "./api"; + +export const getUser = async (userId: number) => { + const response = await api.get(`/users/${userId}`); + return response.data; +}; + +export const updateUser = async ( + userId: number, + data: { + username: string; + email: string; + password?: string; + oldPassword?: string; + } +) => { + const response = await api.patch(`/users/${userId}`, data); + return response.data; +}; + +export const deleteUser = async (userId: number) => { + const response = await api.delete(`/users/${userId}`); + return response.data; + }; \ No newline at end of file diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx new file mode 100644 index 0000000..50e2fa4 --- /dev/null +++ b/frontend/src/pages/Profile.tsx @@ -0,0 +1,77 @@ +import { useEffect, useState } from "react"; +import { useNavigate } from "react-router-dom"; +import { getUser, deleteUser } 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(null); + + useEffect(() => { + const fetchUser = async () => { + try { + const userData = await getUser(Number(id)); + setUser(userData); + } catch (error) { + console.error("Błąd podczas pobierania danych użytkownika:", error); + } + }; + + fetchUser(); + }, [id]); + + const handleDeleteAccount = async () => { + if (!window.confirm("Na pewno chcesz usunąć konto? Tej operacji nie da się cofnąć.")) return; + + try { + await deleteUser(Number(id)); + Cookies.remove("user_id"); + navigate("/login"); + } catch (error) { + console.error("Błąd podczas usuwania konta:", error); + } + }; + + if (!user) return
Ładowanie danych użytkownika...
; + + return ( +
+

Twój profil

+ +
+

Nazwa użytkownika: {user.username}

+

Email: {user.email}

+

Rola: {user.role}

+
+ +
+ + + +
+
+ ); +}; + +export default Profile; diff --git a/frontend/src/pages/Tasks.tsx b/frontend/src/pages/Tasks.tsx index 6639010..cbf4ba0 100644 --- a/frontend/src/pages/Tasks.tsx +++ b/frontend/src/pages/Tasks.tsx @@ -4,6 +4,7 @@ import { getUserTasks, createTask, deleteTask } from "../api/tasks"; import { logout } from "../api/auth"; import api from "../api/api"; import Cookies from "js-cookie"; +import { User } from "lucide-react"; // Define Task type interface Task { @@ -82,9 +83,14 @@ const Tasks = () => { }; return ( -
+
+

Twoje zadania

-