Added possibility of deleting own account
This commit is contained in:
parent
0e1f337360
commit
b904f1ec0f
@ -3,6 +3,7 @@ import Login from "./pages/Login";
|
|||||||
import Tasks from "./pages/Tasks";
|
import Tasks from "./pages/Tasks";
|
||||||
import Profile from "./pages/Profile";
|
import Profile from "./pages/Profile";
|
||||||
import ChangePassword from "./pages/ChangePassword";
|
import ChangePassword from "./pages/ChangePassword";
|
||||||
|
import DeleteAccount from "./pages/DeleteAccount";
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
return (
|
return (
|
||||||
@ -12,6 +13,7 @@ const App = () => {
|
|||||||
<Route path="/tasks" element={<Tasks />} />
|
<Route path="/tasks" element={<Tasks />} />
|
||||||
<Route path="/profile" element={<Profile />} />
|
<Route path="/profile" element={<Profile />} />
|
||||||
<Route path="/profile/change-password" element={<ChangePassword />} />
|
<Route path="/profile/change-password" element={<ChangePassword />} />
|
||||||
|
<Route path="/profile/delete" element={<DeleteAccount />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
</Router>
|
</Router>
|
||||||
);
|
);
|
||||||
|
55
frontend/src/pages/DeleteAccount.tsx
Normal file
55
frontend/src/pages/DeleteAccount.tsx
Normal file
@ -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;
|
Loading…
x
Reference in New Issue
Block a user