Create settings page to allow user to update password.
// components/nav/Sidebar.js
<li className="nav-item">
<NavLink className="nav-link" to="/user/settings">
Settings
</NavLink>
</li>
// pages/user/Settings.js
import Sidebar from "../../components/nav/Sidebar";
import PasswordUpdate from "../../components/forms/PasswordUpdate";
export default function Profile() {
return (
<div className="contaienr-fluid">
<Sidebar />
<div className="container mt-2">
<PasswordUpdate />
</div>
</div>
);
}
// App.js
<Route path="user/settings" element={<Settings />} />
// components/forms/PasswordUpdate.js
import { useState } from "react";
import axios from "axios";
import toast from "react-hot-toast";
import { useNavigate } from "react-router-dom";
// gets prop from main nav
export default function ProfileUpdate() {
// state
const [password, setPassword] = useState("");
const [loading, setLoading] = useState(false);
// hooks
const navigate = useNavigate();
const handleSubmit = async (e) => {
e.preventDefault();
try {
setLoading(true);
// console.log(username, name, email, company, address, phone, about, photo);
const { data } = await axios.put("/update-password", { password });
if (data?.error) {
toast.error(data.error);
setLoading(false);
} else {
setLoading(false);
toast.success("Password updated");
}
} catch (err) {
console.log(err);
toast.error("Password update failed. Try again.");
setLoading(false);
}
};
return (
<div className="container">
<div className="row">
<div className="col-lg-8 offset-lg-2 mt-1">
<form onSubmit={handleSubmit}>
<input
name="password"
type="password"
placeholder="Update your password"
className="form-control mb-4"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<button className="btn btn-primary col-12 mb-4" disabled={loading}>
{loading ? "Updating..." : "Update password"}
</button>
</form>
</div>
</div>
</div>
);
}