502 lines
15 KiB
JavaScript
502 lines
15 KiB
JavaScript
import { useState, useEffect } from "react";
|
|
import { User, Lock, Trash2, History, Shield } from "lucide-react";
|
|
import FloatingAlert from "../components/FloatingAlert"; // adjust path if needed
|
|
|
|
const Settings = () => {
|
|
const [userData, setUserData] = useState({
|
|
userId: "",
|
|
name: "",
|
|
email: "",
|
|
phone: "",
|
|
UCID: "",
|
|
address: "",
|
|
currentPassword: "",
|
|
newPassword: "",
|
|
confirmPassword: "",
|
|
});
|
|
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [error, setError] = useState(null);
|
|
const [showAlert, setShowAlert] = useState(false);
|
|
const storedUser = JSON.parse(sessionStorage.getItem("user"));
|
|
|
|
// Fetch user data when component mounts
|
|
useEffect(() => {
|
|
const fetchUserData = async () => {
|
|
try {
|
|
setIsLoading(true);
|
|
setError(null);
|
|
|
|
// Get the user's data from localStorage
|
|
const storedUser = JSON.parse(sessionStorage.getItem("user"));
|
|
console.log(storedUser);
|
|
|
|
if (!storedUser || !storedUser.email) {
|
|
throw new Error("User details not found. Please log in again.");
|
|
}
|
|
|
|
// Make API call to fetch user data
|
|
const response = await fetch(
|
|
"http://localhost:3030/api/user/find_user",
|
|
{
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
email: storedUser.email,
|
|
}),
|
|
},
|
|
);
|
|
|
|
const data = await response.json();
|
|
console.log(data);
|
|
|
|
if (data.found) {
|
|
// Update state with fetched data
|
|
setUserData((prevData) => ({
|
|
...prevData,
|
|
userId: storedUser.ID, // Try both sources
|
|
name: data.name || storedUser.name || "",
|
|
email: data.email || storedUser.email || "",
|
|
UCID: data.UCID || storedUser.UCID || "",
|
|
phone: data.phone || storedUser.phone || "",
|
|
address: data.address || storedUser.address || "",
|
|
// Reset password fields
|
|
currentPassword: "",
|
|
newPassword: "",
|
|
confirmPassword: "",
|
|
}));
|
|
} else {
|
|
throw new Error(data.error || "Failed to retrieve user data");
|
|
}
|
|
} catch (error) {
|
|
console.error("Error fetching user data:", error);
|
|
setError(
|
|
error.message || "An error occurred while loading your profile",
|
|
);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchUserData();
|
|
}, []);
|
|
|
|
const handleInputChange = (e) => {
|
|
const { id, value } = e.target;
|
|
setUserData((prevData) => ({
|
|
...prevData,
|
|
[id]: value,
|
|
}));
|
|
};
|
|
|
|
const removeHistory = async () => {
|
|
const response = await fetch(
|
|
"http://localhost:3030/api/history/delHistory",
|
|
{
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
userID: storedUser.ID,
|
|
}),
|
|
},
|
|
);
|
|
|
|
if (response.ok) {
|
|
setShowAlert(true);
|
|
}
|
|
};
|
|
|
|
const handleUpdateProfile = async () => {
|
|
try {
|
|
// Ensure userId is present
|
|
if (!userData.userId) {
|
|
throw new Error("User ID is missing. Unable to update profile.");
|
|
}
|
|
|
|
setIsLoading(true);
|
|
setError(null);
|
|
|
|
const response = await fetch("http://localhost:3030/api/user/update", {
|
|
method: "POST", // or "PUT" if your backend supports it
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(userData),
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (!response.ok) {
|
|
throw new Error(result.error || "Failed to update profile");
|
|
}
|
|
|
|
console.log("Profile updated successfully:", result);
|
|
alert("Profile updated successfully!");
|
|
} catch (error) {
|
|
console.error("Error updating profile:", error);
|
|
setError(
|
|
error.message || "An error occurred while updating your profile.",
|
|
);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handlePasswordUpdate = async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
// Validate passwords match
|
|
if (userData.newPassword !== userData.confirmPassword) {
|
|
alert("New passwords do not match!");
|
|
return;
|
|
}
|
|
|
|
// TODO: Implement the actual password update API call
|
|
console.log("Password updated");
|
|
|
|
// Update password in localStorage
|
|
const storedUser = JSON.parse(localStorage.getItem("user"));
|
|
const updatedUser = {
|
|
...storedUser,
|
|
password: userData.newPassword,
|
|
};
|
|
localStorage.setItem("user", JSON.stringify(updatedUser));
|
|
|
|
// Reset password fields
|
|
setUserData((prevData) => ({
|
|
...prevData,
|
|
currentPassword: "",
|
|
newPassword: "",
|
|
confirmPassword: "",
|
|
}));
|
|
|
|
alert("Password updated successfully!");
|
|
} catch (error) {
|
|
console.error("Error updating password:", error);
|
|
alert("Failed to update password: " + error.message);
|
|
}
|
|
};
|
|
|
|
const handleDeleteAccount = async () => {
|
|
if (
|
|
window.confirm(
|
|
"Are you sure you want to delete your account? This action cannot be undone.",
|
|
)
|
|
) {
|
|
try {
|
|
// Get user ID from state or localStorage
|
|
const storedUser = JSON.parse(sessionStorage.getItem("user"));
|
|
const userId = storedUser.ID;
|
|
|
|
if (!userId) {
|
|
throw new Error("User ID not found");
|
|
}
|
|
|
|
// Make API call to delete the account
|
|
const response = await fetch("http://localhost:3030/api/user/delete", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
userId: userId,
|
|
}),
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
alert("Account deleted successfully. You will be logged out.");
|
|
// Clear user data from localStorage and redirect to login
|
|
sessionStorage.removeItem("user");
|
|
sessionStorage.removeItem("isAuthenticated");
|
|
window.location.href = "/login";
|
|
} else {
|
|
throw new Error(data.error || "Failed to delete account");
|
|
}
|
|
} catch (error) {
|
|
console.error("Error deleting account:", error);
|
|
|
|
alert("Cannot delete account, Please logout and retry:");
|
|
}
|
|
}
|
|
};
|
|
|
|
// Show loading state
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex justify-center items-center h-64">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-emerald-500"></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-3xl mx-auto">
|
|
<h1 className="text-2xl font-bold text-gray-800 mb-6">
|
|
Account Settings
|
|
</h1>
|
|
|
|
{/* Error message if any */}
|
|
{error && (
|
|
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{/* Profile Information Section */}
|
|
<div className="bg-white border border-gray-200 mb-6">
|
|
<div className="border-b border-gray-200 p-4">
|
|
<div className="flex items-center">
|
|
<User className="h-5 w-5 text-gray-500 mr-2" />
|
|
<h2 className="text-lg font-medium text-gray-800">
|
|
Profile Information
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-4">
|
|
<form onSubmit={handleUpdateProfile}>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
|
<div>
|
|
<label
|
|
htmlFor="name"
|
|
className="block text-sm font-medium text-gray-700 mb-1"
|
|
>
|
|
Full Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
value={userData.name}
|
|
onChange={handleInputChange}
|
|
className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
htmlFor="email"
|
|
className="block text-sm font-medium text-gray-700 mb-1"
|
|
>
|
|
Email Address
|
|
</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
value={userData.email}
|
|
onChange={handleInputChange}
|
|
className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
|
|
required
|
|
readOnly // Email is often used as identifier and not changeable
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
htmlFor="phone"
|
|
className="block text-sm font-medium text-gray-700 mb-1"
|
|
>
|
|
Phone Number
|
|
</label>
|
|
<input
|
|
type="tel"
|
|
id="phone"
|
|
value={userData.phone}
|
|
onChange={handleInputChange}
|
|
className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
htmlFor="UCID"
|
|
className="block text-sm font-medium text-gray-700 mb-1"
|
|
>
|
|
UCID
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="UCID"
|
|
value={userData.UCID}
|
|
onChange={handleInputChange}
|
|
className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
htmlFor="address"
|
|
className="block text-sm font-medium text-gray-700 mb-1"
|
|
>
|
|
Address
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="address"
|
|
value={userData.address}
|
|
onChange={handleInputChange}
|
|
className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
className="bg-emerald-500 hover:bg-emerald-600 text-white font-medium py-2 px-4"
|
|
>
|
|
Update Profile
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Security Section */}
|
|
<div className="bg-white border border-gray-200 mb-6">
|
|
<div className="border-b border-gray-200 p-4">
|
|
<div className="flex items-center">
|
|
<Lock className="h-5 w-5 text-gray-500 mr-2" />
|
|
<h2 className="text-lg font-medium text-gray-800">Password</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-4">
|
|
<form onSubmit={handlePasswordUpdate}>
|
|
<div className="space-y-4 mb-4">
|
|
<div>
|
|
<label
|
|
htmlFor="currentPassword"
|
|
className="block text-sm font-medium text-gray-700 mb-1"
|
|
>
|
|
Current Password
|
|
</label>
|
|
<input
|
|
type="password"
|
|
id="currentPassword"
|
|
value={userData.currentPassword}
|
|
onChange={handleInputChange}
|
|
className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
htmlFor="newPassword"
|
|
className="block text-sm font-medium text-gray-700 mb-1"
|
|
>
|
|
New Password
|
|
</label>
|
|
<input
|
|
type="password"
|
|
id="newPassword"
|
|
value={userData.newPassword}
|
|
onChange={handleInputChange}
|
|
className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
htmlFor="confirmPassword"
|
|
className="block text-sm font-medium text-gray-700 mb-1"
|
|
>
|
|
Confirm New Password
|
|
</label>
|
|
<input
|
|
type="password"
|
|
id="confirmPassword"
|
|
value={userData.confirmPassword}
|
|
onChange={handleInputChange}
|
|
className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
className="bg-emerald-500 hover:bg-emerald-600 text-white font-medium py-2 px-4"
|
|
>
|
|
Change Password
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Privacy Section */}
|
|
{showAlert && (
|
|
<FloatingAlert
|
|
message="Removed Your History! 😉"
|
|
onClose={() => setShowAlert(false)}
|
|
/>
|
|
)}
|
|
<div className="bg-white border border-gray-200 mb-6">
|
|
<div className="border-b border-gray-200 p-4">
|
|
<div className="flex items-center">
|
|
<Shield className="h-5 w-5 text-gray-500 mr-2" />
|
|
<h2 className="text-lg font-medium text-gray-800">Privacy</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-4">
|
|
<div className="space-y-4">
|
|
<div className="flex justify-between items-center pb-4 border-b border-gray-100">
|
|
<div className="flex items-start">
|
|
<History className="h-5 w-5 text-gray-500 mr-2 mt-0.5" />
|
|
<div>
|
|
<h3 className="font-medium text-gray-800"> History</h3>
|
|
<p className="text-sm text-gray-500">
|
|
Delete all your history on Market
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => removeHistory()}
|
|
className="bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium py-2 px-4 flex items-center"
|
|
>
|
|
<Trash2 className="h-4 w-4 mr-1" />
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Delete Account (Danger Zone) */}
|
|
<div className="bg-white border border-red-200 mb-6">
|
|
<div className="border-b border-red-200 p-4 bg-red-50">
|
|
<h2 className="text-lg font-medium text-red-700">Danger Zone !!!</h2>
|
|
</div>
|
|
|
|
<div className="p-4">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<h3 className="font-medium text-gray-800">Delete Account</h3>
|
|
<p className="text-sm text-gray-500">
|
|
Once you delete your account, there is no going back. Please be
|
|
certain.
|
|
</p>
|
|
</div>
|
|
<button
|
|
className="bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-4"
|
|
onClick={handleDeleteAccount}
|
|
>
|
|
Delete Account
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Settings;
|