Added change password view
This commit is contained in:
parent
e374df55de
commit
0e1f337360
@ -2,6 +2,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";
|
||||
import ChangePassword from "./pages/ChangePassword";
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
@ -9,7 +10,8 @@ const App = () => {
|
||||
<Routes>
|
||||
<Route path="/login" element={<Login />} />
|
||||
<Route path="/tasks" element={<Tasks />} />
|
||||
<Route path="/profile" element={<Profile />} />
|
||||
<Route path="/profile" element={<Profile />} />
|
||||
<Route path="/profile/change-password" element={<ChangePassword />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
);
|
||||
|
64
frontend/src/pages/ChangePassword.tsx
Normal file
64
frontend/src/pages/ChangePassword.tsx
Normal file
@ -0,0 +1,64 @@
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import api from "../api/api";
|
||||
import Cookies from "js-cookie"
|
||||
|
||||
const ChangePassword = () => {
|
||||
const id = Cookies.get("user_id")
|
||||
const navigate = useNavigate();
|
||||
if (!id) {
|
||||
navigate("/login")
|
||||
}
|
||||
const [newPassword, setNewPassword] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [success, setSuccess] = useState("");
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
setSuccess("");
|
||||
|
||||
try {
|
||||
await api.patch(`/users/${id}`, {
|
||||
password: newPassword,
|
||||
});
|
||||
|
||||
setSuccess("Hasło zostało zmienione.");
|
||||
setNewPassword("");
|
||||
|
||||
setTimeout(() => navigate("/profile"), 2000); // krótka pauza, żeby pokazać sukces
|
||||
} catch (err: any) {
|
||||
console.error(err);
|
||||
setError(err.response?.data?.message || "Błąd zmiany hasła.");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-md mx-auto">
|
||||
<h1 className="text-2xl font-bold mb-4">Zmień hasło</h1>
|
||||
|
||||
<form onSubmit={handleSubmit} className="bg-white shadow p-4 rounded flex flex-col gap-4">
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Nowe hasło"
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
required
|
||||
className="border p-2 rounded"
|
||||
/>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-blue-500 text-white p-2 rounded hover:bg-blue-600"
|
||||
>
|
||||
💾 Zapisz hasło
|
||||
</button>
|
||||
|
||||
{error && <p className="text-red-500">{error}</p>}
|
||||
{success && <p className="text-green-600">{success}</p>}
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChangePassword;
|
@ -57,7 +57,7 @@ const Profile = () => {
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<button
|
||||
onClick={() => navigate(`/profile/${user.id}/change-password`)}
|
||||
onClick={() => navigate("/profile/change-password")}
|
||||
className="bg-blue-500 text-white p-2 rounded hover:bg-blue-600"
|
||||
>
|
||||
🔐 Zmień hasło
|
||||
|
Loading…
x
Reference in New Issue
Block a user