Added change password view

This commit is contained in:
Marcin-Ramotowski 2025-04-13 18:38:23 +02:00
parent e374df55de
commit 0e1f337360
3 changed files with 68 additions and 2 deletions

View File

@ -2,6 +2,7 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from "./pages/Login"; 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";
const App = () => { const App = () => {
return ( return (
@ -10,6 +11,7 @@ const App = () => {
<Route path="/login" element={<Login />} /> <Route path="/login" element={<Login />} />
<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 />} />
</Routes> </Routes>
</Router> </Router>
); );

View 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;

View File

@ -57,7 +57,7 @@ const Profile = () => {
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<button <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" className="bg-blue-500 text-white p-2 rounded hover:bg-blue-600"
> >
🔐 Zmień hasło 🔐 Zmień hasło