update to the color
This commit is contained in:
@@ -134,6 +134,62 @@ exports.completeSignUp = async (req, res) => {
|
||||
}
|
||||
};
|
||||
|
||||
exports.doLogin = async (req, res) => {
|
||||
const { email, password } = req.body;
|
||||
|
||||
// Input validation
|
||||
if (!email || !password) {
|
||||
return res.status(400).json({
|
||||
found: false,
|
||||
error: "Email and password are required",
|
||||
});
|
||||
}
|
||||
|
||||
try {
|
||||
// Query to find user with matching email
|
||||
const query = "SELECT * FROM User WHERE email = ?";
|
||||
const [data, fields] = await db.execute(query, [email]);
|
||||
|
||||
// Check if user was found
|
||||
if (data && data.length > 0) {
|
||||
const user = data[0];
|
||||
|
||||
// Verify password match
|
||||
if (user.Password === password) {
|
||||
// Consider using bcrypt for secure password comparison
|
||||
// Return user data without password
|
||||
return res.json({
|
||||
found: true,
|
||||
userID: user.UserID,
|
||||
name: user.Name,
|
||||
email: user.Email,
|
||||
UCID: user.UCID,
|
||||
phone: user.Phone,
|
||||
address: user.Address,
|
||||
});
|
||||
} else {
|
||||
// Password doesn't match
|
||||
return res.json({
|
||||
found: false,
|
||||
error: "Invalid email or password",
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// User not found
|
||||
return res.json({
|
||||
found: false,
|
||||
error: "Invalid email or password",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error logging in:", error);
|
||||
return res.status(500).json({
|
||||
found: false,
|
||||
error: "Database error occurred",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
exports.getAllUser = async (req, res) => {
|
||||
try {
|
||||
const [users, fields] = await db.execute("SELECT * FROM User;");
|
||||
@@ -174,6 +230,7 @@ exports.findUserByEmail = async (req, res) => {
|
||||
UCID: user.UCID,
|
||||
phone: user.Phone,
|
||||
address: user.Address,
|
||||
password: user.Password,
|
||||
// Include any other fields your user might have
|
||||
// Make sure the field names match exactly with your database column names
|
||||
});
|
||||
@@ -201,7 +258,7 @@ exports.updateUser = async (req, res) => {
|
||||
const phone = req.body?.phone;
|
||||
const UCID = req.body?.UCID;
|
||||
const address = req.body?.address;
|
||||
|
||||
const password = req.body?.password;
|
||||
if (!userId) {
|
||||
return res.status(400).json({ error: "User ID is required" });
|
||||
}
|
||||
@@ -213,7 +270,7 @@ exports.updateUser = async (req, res) => {
|
||||
if (phone) updateData.phone = phone;
|
||||
if (UCID) updateData.UCID = UCID;
|
||||
if (address) updateData.address = address;
|
||||
|
||||
if (password) updateData.password = password;
|
||||
if (Object.keys(updateData).length === 0) {
|
||||
return res.status(400).json({ error: "No valid fields to update" });
|
||||
}
|
||||
|
||||
@@ -7,6 +7,7 @@ const {
|
||||
findUserByEmail,
|
||||
updateUser,
|
||||
deleteUser,
|
||||
doLogin,
|
||||
} = require("../controllers/user");
|
||||
|
||||
const router = express.Router();
|
||||
@@ -26,6 +27,9 @@ router.get("/fetch_all_users", getAllUser);
|
||||
//Fetch One user Data with all fields:
|
||||
router.post("/find_user", findUserByEmail);
|
||||
|
||||
//Fetch One user Data with all fields:
|
||||
router.post("/do_login", doLogin);
|
||||
|
||||
//Update A uses Data:
|
||||
router.post("/update", updateUser);
|
||||
|
||||
|
||||
@@ -52,10 +52,9 @@ function App() {
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, []);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
sendSessionDataToServer();
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
sendSessionDataToServer();
|
||||
}, []);
|
||||
|
||||
// Send verification code
|
||||
const sendVerificationCode = async (userData) => {
|
||||
@@ -250,7 +249,7 @@ useEffect(() => {
|
||||
UCID: formValues.ucid,
|
||||
phone: formValues.phone,
|
||||
password: formValues.password, // This will be needed for the final signup
|
||||
address: "NOT_GIVEN",
|
||||
address: formValues.address, // Add this line
|
||||
client: 1,
|
||||
admin: 0,
|
||||
};
|
||||
@@ -266,7 +265,7 @@ useEffect(() => {
|
||||
|
||||
// Make API call to localhost:3030/find_user
|
||||
const response = await fetch(
|
||||
"http://localhost:3030/api/user/find_user",
|
||||
"http://localhost:3030/api/user/do_login",
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
@@ -301,7 +300,7 @@ useEffect(() => {
|
||||
// Save to localStorage to persist across refreshes
|
||||
sessionStorage.setItem("isAuthenticated", "true");
|
||||
sessionStorage.setItem("user", JSON.stringify(userObj));
|
||||
sendSessionDataToServer(); // Call it after signup
|
||||
|
||||
sessionStorage.getItem("user");
|
||||
|
||||
console.log("Login successful for:", userData.email);
|
||||
@@ -370,8 +369,8 @@ useEffect(() => {
|
||||
try {
|
||||
// Retrieve data from sessionStorage
|
||||
const user = JSON.parse(sessionStorage.getItem("user"));
|
||||
const isAuthenticated =
|
||||
sessionStorage.getItem("isAuthenticated") === "true";
|
||||
// const isAuthenticated =
|
||||
// sessionStorage.getItem("isAuthenticated") === "true";
|
||||
|
||||
if (!user || !isAuthenticated) {
|
||||
console.log("User is not authenticated");
|
||||
@@ -532,6 +531,25 @@ useEffect(() => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isSignUp && (
|
||||
<div>
|
||||
<label
|
||||
htmlFor="address"
|
||||
className="block mb-1 text-sm font-medium text-gray-800"
|
||||
>
|
||||
Address
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="address"
|
||||
name="address"
|
||||
placeholder="Your address"
|
||||
className="w-full px-4 py-2 border border-gray-300 bg-white text-gray-800 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500"
|
||||
required={isSignUp}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="password"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useState } from "react";
|
||||
import { X, ChevronLeft, Plus, Trash2 } from "lucide-react";
|
||||
import { X, ChevronLeft, Plus, Trash2, Check } from "lucide-react";
|
||||
|
||||
const ProductForm = ({
|
||||
editingProduct,
|
||||
@@ -50,12 +50,19 @@ const ProductForm = ({
|
||||
}));
|
||||
};
|
||||
|
||||
const toggleSoldStatus = () => {
|
||||
setEditingProduct((prev) => ({
|
||||
...prev,
|
||||
isSold: !prev.isSold,
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white border border-gray-200 shadow-md p-6">
|
||||
{/* Back Button */}
|
||||
<button
|
||||
onClick={onCancel}
|
||||
className="mb-4 text-blue-600 hover:text-blue-800 flex items-center gap-1"
|
||||
className="mb-4 text-emerald-600 hover:text-emerald-800 flex items-center gap-1"
|
||||
>
|
||||
<ChevronLeft size={16} />
|
||||
<span>Back to Listings</span>
|
||||
@@ -77,7 +84,7 @@ const ProductForm = ({
|
||||
onChange={(e) =>
|
||||
setEditingProduct({ ...editingProduct, name: e.target.value })
|
||||
}
|
||||
className="w-full px-3 py-2 border border-gray-300 focus:border-blue-500 focus:outline-none"
|
||||
className="w-full px-3 py-2 border border-gray-300 focus:border-emerald-500 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -95,10 +102,31 @@ const ProductForm = ({
|
||||
price: e.target.value,
|
||||
})
|
||||
}
|
||||
className="w-full px-3 py-2 border border-gray-300 focus:border-blue-500 focus:outline-none"
|
||||
className="w-full px-3 py-2 border border-gray-300 focus:border-emerald-500 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Sold Status */}
|
||||
<div className="md:col-span-2">
|
||||
<div className="flex items-center mt-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="soldStatus"
|
||||
checked={editingProduct.isSold || false}
|
||||
onChange={toggleSoldStatus}
|
||||
className="w-4 h-4 text-emerald-600 rounded focus:ring-emerald-500"
|
||||
/>
|
||||
<label htmlFor="soldStatus" className="ml-2 text-sm text-gray-700">
|
||||
Mark as {editingProduct.isSold ? "Available" : "Sold"}
|
||||
</label>
|
||||
{editingProduct.isSold && (
|
||||
<span className="ml-2 inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
|
||||
Sold
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Categories */}
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
@@ -108,7 +136,7 @@ const ProductForm = ({
|
||||
<select
|
||||
value={selectedCategory}
|
||||
onChange={(e) => setSelectedCategory(e.target.value)}
|
||||
className="flex-1 px-3 py-2 border border-gray-300 focus:border-blue-500 focus:outline-none"
|
||||
className="flex-1 px-3 py-2 border border-gray-300 focus:border-emerald-500 focus:outline-none"
|
||||
>
|
||||
<option value="" disabled>
|
||||
Select a category
|
||||
@@ -127,7 +155,7 @@ const ProductForm = ({
|
||||
type="button"
|
||||
onClick={addCategory}
|
||||
disabled={!selectedCategory}
|
||||
className="px-3 py-2 bg-blue-600 text-white hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed flex items-center gap-1"
|
||||
className="px-3 py-2 bg-emerald-600 text-white hover:bg-emerald-700 disabled:bg-gray-300 disabled:cursor-not-allowed flex items-center gap-1"
|
||||
>
|
||||
<Plus size={16} />
|
||||
<span>Add</span>
|
||||
@@ -140,13 +168,13 @@ const ProductForm = ({
|
||||
{(editingProduct.categories || []).map((category) => (
|
||||
<span
|
||||
key={category}
|
||||
className="inline-flex items-center px-2 py-1 bg-blue-100 text-blue-800"
|
||||
className="inline-flex items-center px-2 py-1 bg-emerald-100 text-emerald-800"
|
||||
>
|
||||
{category}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeCategory(category)}
|
||||
className="ml-1 text-blue-600 hover:text-blue-800"
|
||||
className="ml-1 text-emerald-600 hover:text-emerald-800"
|
||||
>
|
||||
<X size={14} />
|
||||
</button>
|
||||
@@ -160,26 +188,6 @@ const ProductForm = ({
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Status */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Status
|
||||
</label>
|
||||
<select
|
||||
value={editingProduct.status || "Unsold"}
|
||||
onChange={(e) =>
|
||||
setEditingProduct({
|
||||
...editingProduct,
|
||||
status: e.target.value,
|
||||
})
|
||||
}
|
||||
className="w-full px-3 py-2 border border-gray-300 focus:border-blue-500 focus:outline-none"
|
||||
>
|
||||
<option value="Unsold">Unsold</option>
|
||||
<option value="Sold">Sold</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
@@ -194,7 +202,7 @@ const ProductForm = ({
|
||||
})
|
||||
}
|
||||
rows="4"
|
||||
className="w-full px-3 py-2 border border-gray-300 focus:border-blue-500 focus:outline-none"
|
||||
className="w-full px-3 py-2 border border-gray-300 focus:border-emerald-500 focus:outline-none"
|
||||
placeholder="Describe your product in detail..."
|
||||
></textarea>
|
||||
</div>
|
||||
@@ -223,7 +231,7 @@ const ProductForm = ({
|
||||
htmlFor="image-upload"
|
||||
className="block w-full p-3 border border-gray-300 bg-gray-50 text-center cursor-pointer hover:bg-gray-100"
|
||||
>
|
||||
<span className="text-blue-600 font-medium">
|
||||
<span className="text-emerald-600 font-medium">
|
||||
Click to upload images
|
||||
</span>
|
||||
</label>
|
||||
@@ -280,19 +288,33 @@ const ProductForm = ({
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="mt-6 flex justify-end gap-3 border-t border-gray-200 pt-4">
|
||||
<div className="mt-6 flex justify-between border-t border-gray-200 pt-4">
|
||||
<button
|
||||
onClick={onCancel}
|
||||
className="bg-gray-100 text-gray-700 px-4 py-2 hover:bg-gray-200"
|
||||
onClick={toggleSoldStatus}
|
||||
className={`flex items-center gap-1 px-4 py-2 rounded-md transition-colors ${
|
||||
editingProduct.isSold
|
||||
? "bg-green-100 text-green-700 hover:bg-green-200"
|
||||
: "bg-red-100 text-red-700 hover:bg-red-200"
|
||||
}`}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={onSave}
|
||||
className="bg-blue-600 text-white px-6 py-2 hover:bg-blue-700"
|
||||
>
|
||||
{editingProduct.id ? "Update Product" : "Add Product"}
|
||||
<Check size={16} />
|
||||
<span>Mark as {editingProduct.isSold ? "Available" : "Sold"}</span>
|
||||
</button>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={onCancel}
|
||||
className="bg-gray-100 text-gray-700 px-4 py-2 hover:bg-gray-200 rounded-md"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={onSave}
|
||||
className="bg-emerald-600 text-white px-6 py-2 hover:bg-emerald-700 rounded-md"
|
||||
>
|
||||
{editingProduct.id ? "Update Product" : "Add Product"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -129,7 +129,7 @@ const Favorites = () => {
|
||||
{sortedFavorites.map((product) => (
|
||||
<div
|
||||
key={product.id}
|
||||
className="border-2 border-gray-200 rounded overflow-hidden hover:shadow-md transition-shadow"
|
||||
className="border-2 border-gray-200 overflow-hidden hover:shadow-md transition-shadow"
|
||||
>
|
||||
<Link to={`/product/${product.id}`}>
|
||||
<div className="h-48 bg-gray-200 flex items-center justify-center">
|
||||
@@ -150,10 +150,14 @@ const Favorites = () => {
|
||||
{product.name}
|
||||
</h3>
|
||||
<button
|
||||
onClick={() => removeFromFavorites(product.id)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
removeFromFavorites(product.id);
|
||||
}}
|
||||
className="text-red-500 hover:text-red-600"
|
||||
>
|
||||
<Trash2 size={18} />
|
||||
<Trash2 size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,6 +1,12 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { Tag, ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import {
|
||||
Tag,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Bookmark,
|
||||
BookmarkCheck,
|
||||
} from "lucide-react";
|
||||
|
||||
import FloatingAlert from "../components/FloatingAlert"; // adjust path if needed
|
||||
|
||||
@@ -246,7 +252,7 @@ const Home = () => {
|
||||
{/* Scrollable Listings Container */}
|
||||
<div
|
||||
id="RecomContainer"
|
||||
className="overflow-x-auto whitespace-nowrap flex space-x-6 scroll-smooth scrollbar-hide px-10 pl-0"
|
||||
className="overflow-x-auto whitespace-nowrap flex space-x-6 scroll-smooth scrollbar-hide px-10 pl-0 rounded"
|
||||
>
|
||||
{recommended.map((recommended) => (
|
||||
<Link
|
||||
@@ -267,9 +273,9 @@ const Home = () => {
|
||||
e.preventDefault();
|
||||
toggleFavorite(recommended.id);
|
||||
}}
|
||||
className="absolute top-2 right-2 p-2 bg-white rounded-full shadow-sm hover:bg-gray-100 transition"
|
||||
className="absolute top-0 right-0 p-2 rounded-bl-md bg-emerald-600 hover:bg-emerald-500 transition shadow-sm"
|
||||
>
|
||||
<span className="text-xl font-bold text-gray-600">+</span>
|
||||
<Bookmark className="text-white w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -362,9 +368,9 @@ const Home = () => {
|
||||
e.preventDefault();
|
||||
toggleFavorite(listing.id);
|
||||
}}
|
||||
className="absolute top-2 right-2 p-2 bg-white rounded-full shadow-sm hover:bg-gray-100 transition"
|
||||
className="absolute top-0 right-0 p-2 rounded-bl-md bg-emerald-600 hover:bg-emerald-500 transition shadow-sm"
|
||||
>
|
||||
<span className="text-xl font-bold text-gray-600">+</span>
|
||||
<Bookmark className="text-white w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -454,9 +460,9 @@ const Home = () => {
|
||||
e.preventDefault();
|
||||
toggleFavorite(history.id);
|
||||
}}
|
||||
className="absolute top-2 right-2 p-2 bg-white rounded-full shadow-sm hover:bg-gray-100 transition"
|
||||
className="absolute top-0 right-0 p-2 rounded-bl-md bg-emerald-600 hover:bg-emerald-500 transition shadow-sm"
|
||||
>
|
||||
<span className="text-xl font-bold text-gray-600">+</span>
|
||||
<Bookmark className="text-white w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -9,6 +9,7 @@ import {
|
||||
Star,
|
||||
Phone,
|
||||
Mail,
|
||||
Bookmark,
|
||||
} from "lucide-react";
|
||||
import FloatingAlert from "../components/FloatingAlert"; // adjust path if needed
|
||||
|
||||
@@ -247,7 +248,7 @@ const ProductDetail = () => {
|
||||
if (loading.product) {
|
||||
return (
|
||||
<div className="flex justify-center items-center h-screen">
|
||||
<div className="animate-spin h-32 w-32 border-t-2 border-emerald-500"></div>
|
||||
<div className="animate-spin h-32 w-32 border-t-2 border-green-500"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -261,7 +262,7 @@ const ProductDetail = () => {
|
||||
<p className="text-gray-600">{error.product}</p>
|
||||
<Link
|
||||
to="/"
|
||||
className="mt-4 inline-block bg-emerald-500 text-white px-4 py-2 hover:bg-emerald-600"
|
||||
className="mt-4 inline-block bg-green-500 text-white px-4 py-2 hover:bg-green-600"
|
||||
>
|
||||
Back to Listings
|
||||
</Link>
|
||||
@@ -278,7 +279,7 @@ const ProductDetail = () => {
|
||||
<h2 className="text-2xl text-red-500 mb-4">Product Not Found</h2>
|
||||
<Link
|
||||
to="/"
|
||||
className="mt-4 inline-block bg-emerald-500 text-white px-4 py-2 hover:bg-emerald-600"
|
||||
className="mt-4 inline-block bg-green-500 text-white px-4 py-2 hover:bg-green-600"
|
||||
>
|
||||
Back to Listings
|
||||
</Link>
|
||||
@@ -293,7 +294,7 @@ const ProductDetail = () => {
|
||||
<div className="mb-6">
|
||||
<Link
|
||||
to="/search"
|
||||
className="flex items-center text-emerald-600 hover:text-emerald-700"
|
||||
className="flex items-center text-green-600 hover:text-green-700"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-1" />
|
||||
<span>Back</span>
|
||||
@@ -350,7 +351,7 @@ const ProductDetail = () => {
|
||||
{product.images.map((image, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`bg-white border ${currentImage === index ? "border-emerald-500 border-2" : "border-gray-200"} min-w-[100px] cursor-pointer`}
|
||||
className={`bg-white border ${currentImage === index ? "border-green-500 border-2" : "border-gray-200"} min-w-[100px] cursor-pointer`}
|
||||
onClick={() => selectImage(index)}
|
||||
>
|
||||
<img
|
||||
@@ -375,17 +376,18 @@ const ProductDetail = () => {
|
||||
{product.Name || "Unnamed Product"}
|
||||
</h1>
|
||||
<button
|
||||
onClick={() => toggleFavorite(product.ProductID)}
|
||||
className="p-2 hover:bg-gray-100"
|
||||
aria-label={
|
||||
isFavorite ? "Remove from favorites" : "Add to favorites"
|
||||
}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
toggleFavorite(product.ProductID);
|
||||
}}
|
||||
className="top-0 p-2 rounded-bl-md bg-emerald-600 hover:bg-emerald-500 transition shadow-sm"
|
||||
>
|
||||
<Heart className={`h-6 w-6 ext-red-500 fill-red-500`} />
|
||||
<Bookmark className="text-white w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="text-2xl font-bold text-emerald-600 mb-4">
|
||||
<div className="text-2xl font-bold text-green-600 mb-4">
|
||||
$
|
||||
{typeof product.Price === "number"
|
||||
? product.Price.toFixed(2)
|
||||
@@ -416,7 +418,7 @@ const ProductDetail = () => {
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setShowContactOptions(!showContactOptions)}
|
||||
className="w-full bg-emerald-500 hover:bg-emerald-600 text-white font-medium py-3 px-4 mb-3"
|
||||
className="w-full bg-green-500 hover:bg-green-600 text-white font-medium py-3 px-4 mb-3"
|
||||
>
|
||||
Contact Seller
|
||||
</button>
|
||||
@@ -428,7 +430,7 @@ const ProductDetail = () => {
|
||||
href={`tel:${product.SellerPhone}`}
|
||||
className="flex items-center gap-2 p-3 hover:bg-gray-50 border-b border-gray-100"
|
||||
>
|
||||
<Phone className="h-5 w-5 text-emerald-500" />
|
||||
<Phone className="h-5 w-5 text-green-500" />
|
||||
<span>Call Seller</span>
|
||||
</a>
|
||||
)}
|
||||
@@ -438,7 +440,7 @@ const ProductDetail = () => {
|
||||
href={`mailto:${product.SellerEmail}`}
|
||||
className="flex items-center gap-2 p-3 hover:bg-gray-50"
|
||||
>
|
||||
<Mail className="h-5 w-5 text-emerald-500" />
|
||||
<Mail className="h-5 w-5 text-green-500" />
|
||||
<span>Email Seller</span>
|
||||
</a>
|
||||
)}
|
||||
@@ -475,7 +477,7 @@ const ProductDetail = () => {
|
||||
<div className="bg-white border border-gray-200 p-6">
|
||||
{loading.reviews ? (
|
||||
<div className="flex justify-center py-8">
|
||||
<div className="animate-spin h-8 w-8 border-t-2 border-emerald-500"></div>
|
||||
<div className="animate-spin h-8 w-8 border-t-2 border-green-500"></div>
|
||||
</div>
|
||||
) : error.reviews ? (
|
||||
<div className="text-red-500 mb-4">
|
||||
@@ -522,7 +524,7 @@ const ProductDetail = () => {
|
||||
<div className="mt-4">
|
||||
<button
|
||||
onClick={() => setShowReviewForm(true)}
|
||||
className="bg-emerald-500 hover:bg-emerald-600 text-white font-medium py-2 px-4"
|
||||
className="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4"
|
||||
>
|
||||
Write a Review
|
||||
</button>
|
||||
@@ -580,7 +582,7 @@ const ProductDetail = () => {
|
||||
id="comment"
|
||||
value={reviewForm.comment}
|
||||
onChange={handleReviewInputChange}
|
||||
className="w-full p-3 border border-gray-300 focus:outline-none focus:border-emerald-500"
|
||||
className="w-full p-3 border border-gray-300 focus:outline-none focus:border-green-500"
|
||||
rows="4"
|
||||
required
|
||||
></textarea>
|
||||
@@ -596,7 +598,7 @@ const ProductDetail = () => {
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="px-4 py-2 bg-emerald-500 text-white hover:bg-emerald-600"
|
||||
className="px-4 py-2 bg-green-500 text-white hover:bg-green-600"
|
||||
disabled={loading.submitting}
|
||||
>
|
||||
{loading.submitting ? "Submitting..." : "Submit Review"}
|
||||
|
||||
@@ -10,9 +10,7 @@ const Settings = () => {
|
||||
phone: "",
|
||||
UCID: "",
|
||||
address: "",
|
||||
currentPassword: "",
|
||||
newPassword: "",
|
||||
confirmPassword: "",
|
||||
password: "",
|
||||
});
|
||||
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
@@ -62,10 +60,7 @@ const Settings = () => {
|
||||
UCID: data.UCID || storedUser.UCID || "",
|
||||
phone: data.phone || storedUser.phone || "",
|
||||
address: data.address || storedUser.address || "",
|
||||
// Reset password fields
|
||||
currentPassword: "",
|
||||
newPassword: "",
|
||||
confirmPassword: "",
|
||||
password: data.password,
|
||||
}));
|
||||
} else {
|
||||
throw new Error(data.error || "Failed to retrieve user data");
|
||||
@@ -146,41 +141,6 @@ const Settings = () => {
|
||||
}
|
||||
};
|
||||
|
||||
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(
|
||||
@@ -345,6 +305,21 @@ const Settings = () => {
|
||||
className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="password"
|
||||
className="block text-sm font-medium text-gray-700 mb-1"
|
||||
>
|
||||
password
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="password"
|
||||
value={userData.password}
|
||||
onChange={handleInputChange}
|
||||
className="w-full p-2 border border-gray-300 focus:outline-none focus:border-emerald-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
@@ -357,84 +332,10 @@ const Settings = () => {
|
||||
</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! 😉"
|
||||
message="We Removed Your History! 😉"
|
||||
onClose={() => setShowAlert(false)}
|
||||
/>
|
||||
)}
|
||||
@@ -448,7 +349,7 @@ const Settings = () => {
|
||||
|
||||
<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 justify-between items-center">
|
||||
<div className="flex items-start">
|
||||
<History className="h-5 w-5 text-gray-500 mr-2 mt-0.5" />
|
||||
<div>
|
||||
|
||||
Binary file not shown.
Reference in New Issue
Block a user