From b904f1ec0fe781a5d15464cec3b8a71ad2d0a5e8 Mon Sep 17 00:00:00 2001
From: Marcin-Ramotowski <marcin00.mr@gmail.com>
Date: Sun, 13 Apr 2025 18:51:58 +0200
Subject: [PATCH] Added possibility of deleting own account

---
 frontend/src/App.tsx                 |  2 +
 frontend/src/pages/DeleteAccount.tsx | 55 ++++++++++++++++++++++++++++
 2 files changed, 57 insertions(+)
 create mode 100644 frontend/src/pages/DeleteAccount.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 09e9c1e..46f00a9 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -3,6 +3,7 @@ import Login from "./pages/Login";
 import Tasks from "./pages/Tasks";
 import Profile from "./pages/Profile";
 import ChangePassword from "./pages/ChangePassword";
+import DeleteAccount from "./pages/DeleteAccount";
 
 const App = () => {
   return (
@@ -12,6 +13,7 @@ const App = () => {
         <Route path="/tasks" element={<Tasks />} />
         <Route path="/profile" element={<Profile />} />
         <Route path="/profile/change-password" element={<ChangePassword />} />
+        <Route path="/profile/delete" element={<DeleteAccount />} />
       </Routes>
     </Router>
   );
diff --git a/frontend/src/pages/DeleteAccount.tsx b/frontend/src/pages/DeleteAccount.tsx
new file mode 100644
index 0000000..f1ab7dc
--- /dev/null
+++ b/frontend/src/pages/DeleteAccount.tsx
@@ -0,0 +1,55 @@
+import { useNavigate, useParams } from "react-router-dom";
+import { useState } from "react";
+import api from "../api/api";
+import { logout } from "../api/auth";
+
+const DeleteAccount = () => {
+  const navigate = useNavigate();
+  const { id } = useParams();
+  const [confirmation, setConfirmation] = useState("");
+  const [error, setError] = useState("");
+
+  const handleDelete = async () => {
+    try {
+      await api.delete(`/users/${id}`);
+      await logout();
+      navigate("/login");
+    } catch (err: any) {
+      console.error(err);
+      setError("Wystąpił błąd podczas usuwania konta.");
+    }
+  };
+
+  return (
+    <div className="p-6 max-w-md mx-auto">
+      <h1 className="text-2xl font-bold mb-4 text-red-600">⚠️ Usuń konto</h1>
+      <p className="mb-4">
+        Tej operacji nie można cofnąć. Aby potwierdzić, wpisz <strong>USUŃ</strong> poniżej:
+      </p>
+
+      <input
+        type="text"
+        placeholder="Wpisz: USUŃ"
+        value={confirmation}
+        onChange={(e) => setConfirmation(e.target.value)}
+        className="border p-2 rounded w-full mb-4"
+      />
+
+      <button
+        onClick={handleDelete}
+        disabled={confirmation !== "USUŃ"}
+        className={`p-2 rounded w-full ${
+          confirmation === "USUŃ"
+            ? "bg-red-600 text-white hover:bg-red-700"
+            : "bg-gray-300 text-gray-600 cursor-not-allowed"
+        }`}
+      >
+        🗑️ Potwierdź usunięcie konta
+      </button>
+
+      {error && <p className="text-red-500 mt-2">{error}</p>}
+    </div>
+  );
+};
+
+export default DeleteAccount;