forked from CSI-KJSCE/Travel-policy-
123 lines
4.5 KiB
JavaScript
123 lines
4.5 KiB
JavaScript
import React, { useState } from "react";
|
|
import { toast } from "react-toastify";
|
|
import axios from "axios";
|
|
|
|
// Settings Change Password Component
|
|
const Settings = () => {
|
|
const [passwords, setPasswords] = useState({
|
|
oldPassword: "",
|
|
newPassword: "",
|
|
confirmPassword: "",
|
|
});
|
|
|
|
// Handle input changes
|
|
const handleChange = (e) => {
|
|
setPasswords({ ...passwords, [e.target.name]: e.target.value });
|
|
};
|
|
|
|
// Submit the form to the backend
|
|
const handleSubmit = async (e) => {
|
|
// Step 1: Prevent the page from reloading
|
|
e.preventDefault();
|
|
|
|
// Step 2: Check if the new password and confirm password are the same
|
|
if (passwords.newPassword !== passwords.confirmPassword) {
|
|
toast.error("New passwords do not match!");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// Step 3: Send the old and new password to the server
|
|
const res = await axios.post(
|
|
`${import.meta.env.VITE_APP_API_URL}/general/changePassword`,
|
|
{
|
|
oldPassword: passwords.oldPassword,
|
|
newPassword: passwords.newPassword,
|
|
},
|
|
{ withCredentials: true }
|
|
);
|
|
|
|
// Step 4: If everything is good, show success message
|
|
if (res.status === 200) {
|
|
toast.success("Password updated successfully!");
|
|
// Clear the form inputs
|
|
setPasswords({ oldPassword: "", newPassword: "", confirmPassword: "" });
|
|
}
|
|
} catch (error) {
|
|
// Step 5: If there is an error (like wrong old password), show it
|
|
console.log(error);
|
|
toast.error(error.response?.data?.message || "Failed to update password");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="p-8 bg-gray-50 dark:bg-google-dark min-h-screen transition-colors duration-200">
|
|
<h1 className="text-3xl font-bold text-gray-800 dark:text-google-text mb-6 border-b-2 border-red-700 pb-2 inline-block">
|
|
Account Settings
|
|
</h1>
|
|
|
|
<div className="bg-white dark:bg-google-gray p-8 rounded-xl shadow-lg border border-gray-100 dark:border-gray-700 max-w-lg mt-4 mx-auto transition-colors duration-200">
|
|
<h2 className="text-2xl font-semibold mb-6 text-red-700 dark:text-red-500 flex items-center">
|
|
Change Password
|
|
</h2>
|
|
|
|
<form onSubmit={handleSubmit} className="flex flex-col gap-6">
|
|
<div>
|
|
<label className="block text-gray-700 dark:text-google-text mb-2 font-medium">
|
|
Current Password
|
|
</label>
|
|
<input
|
|
type="password"
|
|
name="oldPassword"
|
|
value={passwords.oldPassword}
|
|
onChange={handleChange}
|
|
placeholder="Enter your current password"
|
|
className="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-all dark:bg-[#3c4043] dark:text-white"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-gray-700 dark:text-google-text mb-2 font-medium">
|
|
New Password
|
|
</label>
|
|
<input
|
|
type="password"
|
|
name="newPassword"
|
|
value={passwords.newPassword}
|
|
onChange={handleChange}
|
|
placeholder="Enter new password"
|
|
className="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-all dark:bg-[#3c4043] dark:text-white"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-gray-700 dark:text-google-text mb-2 font-medium">
|
|
Confirm New Password
|
|
</label>
|
|
<input
|
|
type="password"
|
|
name="confirmPassword"
|
|
value={passwords.confirmPassword}
|
|
onChange={handleChange}
|
|
placeholder="Confirm new password"
|
|
className="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-all dark:bg-[#3c4043] dark:text-white"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
className="mt-2 bg-red-700 text-white font-bold py-3 px-6 rounded-lg hover:bg-red-800 transition-colors shadow-md hover:shadow-lg transform active:scale-95 duration-200"
|
|
>
|
|
Update Password
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Settings;
|