-
-
-
- {/* <p className="w-2/4 m-auto text-xs sm:text-sm md:text-base text-gray-600">
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, ipsa.</p> */}
- </div>
-
- {/* rendering products */}
-
- <div className="grid grid-cols-4 sm:grid-col-3 md:grid-cols-4 lg:grid-cols-5 gap-4 gap-y-15 px-8 font-bold">
-
- {
-
-
-latestProducts.map((product, index) => (
- <ProductItem
- key={index}
- id={product.id}
- img={product.img}
- name={product.name}
- price={product.price}
- category ={product.category}
- />
-))
-
- }
- </div>
-
- </div>
- )
-}
-
-export default LatestCollection
\ No newline at end of file
diff --git a/Frontend/src/components/Pages/LogOut.jsx b/Frontend/src/components/Pages/LogOut.jsx
new file mode 100644
index 0000000..5783120
--- /dev/null
+++ b/Frontend/src/components/Pages/LogOut.jsx
@@ -0,0 +1,53 @@
+import React, { useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ShopContext } from '../Context/ShopContext';
+import axios from 'axios';
+
+function LogOut() {
+ const navigate = useNavigate();
+ const { setUser, clearCart } = useContext(ShopContext);
+
+ const handleLogout = async () => {
+ try {
+ // Call Django logout endpoint using the URL name
+ await axios.post('http://localhost:8000/logout/', {}, {
+ withCredentials: true, // Required for session cookies
+ headers: {
+ 'X-CSRFToken': getCookie('csrftoken'), // Needed if using CSRF protection
+ 'Content-Type': 'application/json'
+ }
+ });
+
+ // Clear frontend state
+ localStorage.removeItem('token');
+ if (setUser) setUser(null);
+ if (clearCart) clearCart();
+
+ // Redirect to home
+ navigate('/');
+
+ } catch (error) {
+ console.error('Logout failed:', error.response?.data || error.message);
+ // Optional: Show error to user
+ alert('Logout failed. Please try again.');
+ }
+ };
+
+ // Helper function to get CSRF token
+ const getCookie = (name) => {
+ const value = `; ${document.cookie}`;
+ const parts = value.split(`; ${name}=`);
+ if (parts.length === 2) return parts.pop().split(';').shift();
+ };
+
+ return (
+ <button
+ onClick={handleLogout}
+ className="text-gray-700 hover:text-gray-900 cursor-pointer py-2 px-4"
+ >
+ Logout
+ </button>
+ );
+}
+
+export default LogOut;
\ No newline at end of file
diff --git a/Frontend/src/components/Pages/Login.jsx b/Frontend/src/components/Pages/Login.jsx
index 89a82cd..6ed44e6 100644
--- a/Frontend/src/components/Pages/Login.jsx
+++ b/Frontend/src/components/Pages/Login.jsx
@@ -1,252 +1,216 @@
-
-// import React, { useState, useContext } from 'react';
-// import { useNavigate,Link } from 'react-router-dom';
-// import { ShopContext } from '../Context/ShopContext';
-// import Register from './Register';
-// function Login() {
-// const [username, setUsername] = useState('');
-// const [password, setPassword] = useState('');
-// const [error, setError] = useState('');
-// const navigate = useNavigate();
-// const { setIsLoggedIn, setUser } = useContext(ShopContext);
-
-// const handleSubmit = async (e) => {
-// e.preventDefault();
-// setError('');
-
-// try {
-// const response = await fetch('http://localhost:8000/api/login/', {
-// method: 'POST',
-// headers: {
-// 'Content-Type': 'application/json',
-// },
-// body: JSON.stringify({
-// username,
-// password
-// })
-// });
-
-// if (!response.ok) {
-// const errorData = await response.json();
-// throw new Error(errorData.detail || 'Login failed');
-// }
-
-// const data = await response.json();
-
-// // Store tokens in localStorage
-// localStorage.setItem('access_token', data.access);
-// localStorage.setItem('refresh_token', data.refresh);
-
-// // Update context
-// setIsLoggedIn(true);
-// setUser({
-// username: data.username,
-// phone: data.phone
-// });
-
-// // Redirect to home page
-// navigate('/');
-// } catch (err) {
-// setError(err.message || 'Login failed. Please check your credentials.');
-// }
-// };
-
-// return (
-// <div className="flex justify-center items-center min-h-screen bg-gray-100">
-// <div className="bg-[#fbfcfc] p-8 rounded-lg shadow-md w-full max-w-md">
-// <h2 className="text-3xl font-semi-bold mb-6 text-center text-[#287588]">Login</h2>
-
-// {error && (
-// <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
-// {error}
-// </div>
-// )}
-
-// <form onSubmit={handleSubmit}>
-// <div className="mb-4">
-// <label className="block text-gray-600 text-[17px] font-semi-bold mb-2" htmlFor="username">
-// Username
-// </label>
-// <input
-// className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-// id="username"
-// type="text"
-// placeholder="Username"
-// value={username}
-// onChange={(e) => setUsername(e.target.value)}
-// required
-// />
-// </div>
-
-// <div className="mb-6">
-// <label className="block text-gray-600 text-[17px] font-semi-bold mb-2" htmlFor="password">
-// Password
-// </label>
-// <input
-// className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-// id="password"
-// type="password"
-// placeholder="******************"
-// value={password}
-// onChange={(e) => setPassword(e.target.value)}
-// required
-// />
-// </div>
-
-// <div className="flex items-center justify-between">
-// <button
-// className="bg-[#1b5968] hover:bg-[#4b5f64] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full"
-// type="submit"
-// >
-// Sign In
-// </button>
-// </div>
-
-// <div className="text-center mt-4">
-// <p>Don't have an account? <Link to="/register" className="text-[#12a0c4] hover:text-blue-700">Register</Link></p>
-// </div>
-// </form>
-// </div>
-// </div>
-// );
-// }
-
-// export default Login;
-
-import React, { useState, useContext } from 'react';
-import { useNavigate, Link } from 'react-router-dom';
-import { ShopContext } from '../Context/ShopContext';
-import axios from 'axios';
+{/* <div className="flex flex-col items-center justify-center gap-4 p-8 rounded-xl bg-white shadow-lg max-w-md mx-auto">
+ <img src={check} alt="Success" className="w-20 h-20 text-green-500" />
+ <p className="text-4xl font-bold text-gray-800">Rs. {data.total_amount || "0"}</p>
+ <p className="text-2xl font-semibold text-green-600">Payment Successful</p>
+</div> */}
+import React, { useState, useEffect } from "react";
+import { useNavigate, Link } from "react-router-dom";
function Login() {
- const [formData, setFormData] = useState({
- username: '',
- password: '',
- });
- const [error, setError] = useState('');
- const [isLoading, setIsLoading] = useState(false);
- const navigate = useNavigate();
- const { setIsLoggedIn, setUser } = useContext(ShopContext);
-
- const handleChange = (e) => {
- setFormData({
- ...formData,
- [e.target.name]: e.target.value,
- });
- };
-
- const handleSubmit = async (e) => {
- e.preventDefault();
- setError('');
- setIsLoading(true);
-
- try {
- const response = await axios.post(
- 'http://localhost:8000/api/login/',
- formData,
- {
- headers: {
- 'Content-Type': 'application/json',
- },
- }
- );
-
- const { access, refresh, user } = response.data;
-
- // Store tokens securely
- localStorage.setItem('access_token', access);
- localStorage.setItem('refresh_token', refresh);
-
- // Update context
- setIsLoggedIn(true);
- setUser(user);
-
- // Set default axios authorization header
- axios.defaults.headers.common['Authorization'] = `Bearer ${access}`;
-
- // Redirect to home or intended page
- navigate('/');
- } catch (err) {
- setError(
- err.response?.data?.detail ||
- 'Login failed. Please check your credentials.'
- );
- } finally {
- setIsLoading(false);
- }
- };
-
- return (
- <div className="flex justify-center items-center min-h-screen bg-gray-100">
- <div className="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
- <h2 className="text-3xl font-bold mb-6 text-center text-blue-600">Login</h2>
-
- {error && (
- <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
- {error}
- </div>
- )}
-
- <form onSubmit={handleSubmit} className="space-y-4">
- <div>
- <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="username">
- Username
- </label>
- <input
- className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
- id="username"
- type="text"
- name="username"
- placeholder="Username"
- value={formData.username}
- onChange={handleChange}
- required
- />
- </div>
-
- <div>
- <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="password">
- Password
- </label>
- <input
- className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
- id="password"
- type="password"
- name="password"
- placeholder="******************"
- value={formData.password}
- onChange={handleChange}
- required
- />
- </div>
-
- <div className="flex items-center justify-between">
- <button
- className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full disabled:opacity-50"
- type="submit"
- disabled={isLoading}
- >
- {isLoading ? 'Logging in...' : 'Sign In'}
- </button>
- </div>
-
- <div className="text-center mt-4">
- <p className="text-sm">
- Don't have an account?{' '}
- <Link to="/register" className="text-blue-500 hover:text-blue-700">
- Register
- </Link>
- </p>
- <p className="text-sm mt-2">
- <Link to="/forgot-password" className="text-blue-500 hover:text-blue-700">
- Forgot password?
- </Link>
- </p>
- </div>
- </form>
- </div>
- </div>
- );
+ const [formData, setFormData] = useState({
+ username: "",
+ password: "",
+ });
+ const [errors, setErrors] = useState({});
+ const [isLoading, setIsLoading] = useState(false);
+ const [loginSuccess, setLoginSuccess] = useState(false);
+ const navigate = useNavigate();
+
+ // Helper function to get CSRF token from cookies
+ const getCookie = (name) => {
+ let cookieValue = null;
+ if (document.cookie && document.cookie !== "") {
+ const cookies = document.cookie.split(";");
+ for (let i = 0; i < cookies.length; i++) {
+ const cookie = cookies[i].trim();
+ if (cookie.substring(0, name.length + 1) === name + "=") {
+ cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+ break;
+ }
+ }
+ }
+ return cookieValue;
+ };
+
+ const handleChange = (e) => {
+ const { name, value } = e.target;
+ setFormData({
+ ...formData,
+ [name]: value,
+ });
+ // Clear error when typing
+ if (errors[name]) {
+ setErrors((prev) => ({ ...prev, [name]: "" }));
+ }
+ };
+
+ // Effect to handle redirect after successful login
+ useEffect(() => {
+ let redirectTimer;
+ if (loginSuccess) {
+ redirectTimer = setTimeout(() => {
+ navigate("/", { state: { from: "login" } });
+ }, 2000); // Wait 2 seconds before redirecting
+ }
+ return () => clearTimeout(redirectTimer);
+ }, [loginSuccess, navigate]);
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ setIsLoading(true);
+ setErrors({});
+
+ try {
+ // 1. First get CSRF token
+ await fetch("http://localhost:8000/get-csrf-token/", {
+ credentials: "include",
+ });
+
+ // 2. Then submit login with CSRF token
+ const response = await fetch("http://localhost:8000/login/", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ "X-CSRFToken": getCookie("csrftoken"),
+ },
+ body: JSON.stringify(formData),
+ credentials: "include",
+ });
+
+ const data = await response.json();
+
+ if (!response.ok) {
+ setErrors(data);
+ throw new Error(data.detail || "Login failed");
+ }
+
+ // Show success message
+ setLoginSuccess(true);
+ } catch (error) {
+ console.error("Login error:", error);
+ setErrors((prev) => ({
+ ...prev,
+ nonFieldErrors: [error.message],
+ }));
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ return (
+ <div className="flex justify-center items-center min-h-screen bg-gray-100">
+ <div className="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
+ <h2 className="text-3xl font-semi-bold mb-6 text-center text-[#287588]">
+ Login
+ </h2>
+
+ {loginSuccess && (
+ <div className="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
+ <p className="text-sm">
+ Login successful! Redirecting to home page...
+ </p>
+ </div>
+ )}
+
+ {errors.nonFieldErrors && (
+ <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
+ {errors.nonFieldErrors.map((error, index) => (
+ <p key={index} className="text-sm">
+ {error}
+ </p>
+ ))}
+ </div>
+ )}
+
+ <form onSubmit={handleSubmit} className="space-y-4">
+ <div>
+ <label
+ className="block text-gray-600 text-[17px] font-semi-bold mb-2"
+ htmlFor="username"
+ >
+ Username
+ </label>
+ <input
+ className={`shadow appearance-none border ${
+ errors.username ? "border-red-500" : "border-gray-300"
+ } rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline`}
+ id="username"
+ type="text"
+ name="username"
+ placeholder="Username"
+ value={formData.username}
+ onChange={handleChange}
+ required
+ disabled={loginSuccess}
+ />
+ {errors.username && (
+ <p className="text-red-500 text-xs italic mt-1">
+ {errors.username}
+ </p>
+ )}
+ </div>
+
+ <div>
+ <label
+ className="block text-gray-600 text-[17px] font-semi-bold mb-2"
+ htmlFor="password"
+ >
+ Password
+ </label>
+ <input
+ className={`shadow appearance-none border ${
+ errors.password ? "border-red-500" : "border-gray-300"
+ } rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline`}
+ id="password"
+ type="password"
+ name="password"
+ placeholder="••••••••"
+ value={formData.password}
+ onChange={handleChange}
+ required
+ disabled={loginSuccess}
+ />
+ {errors.password && (
+ <p className="text-red-500 text-xs italic mt-1">
+ {errors.password}
+ </p>
+ )}
+ </div>
+
+ <div className="flex items-center justify-between">
+ <button
+ className="bg-[#1b5968] hover:bg-[#4b5f64] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full disabled:opacity-50"
+ type="submit"
+ disabled={isLoading || loginSuccess}
+ >
+ {isLoading ? (
+ <>
+ <span className="inline-block animate-spin mr-2">↻</span>
+ Logging in...
+ </>
+ ) : loginSuccess ? (
+ "Logged In"
+ ) : (
+ "Sign In"
+ )}
+ </button>
+ </div>
+
+ <div className="text-center mt-4">
+ <p className="text-sm">
+ Don't have an account?{" "}
+ <Link
+ to="/register"
+ className="text-[#2d98b3] hover:text-gray-700"
+ >
+ Register
+ </Link>
+ </p>
+ </div>
+ </form>
+ </div>
+ </div>
+ );
}
export default Login;
\ No newline at end of file
diff --git a/Frontend/src/components/Pages/Navbar.jsx b/Frontend/src/components/Pages/Navbar.jsx
index 7c2d484..bb32f45 100644
--- a/Frontend/src/components/Pages/Navbar.jsx
+++ b/Frontend/src/components/Pages/Navbar.jsx
@@ -6,20 +6,22 @@ import menu from "/public/images/menu.png";
import searchh from "/public/images/searchh.png";
import { Link, NavLink } from "react-router-dom";
import { ShopContext } from "../Context/ShopContext";
-// import Login from "./Login"
-
function Navbar() {
const [isMenuOpen, setIsMenuOpen] = useState(false);
+ const [isHeaderVisible, setIsHeaderVisible] = useState(true);
- const {setShowSearch} = useContext(ShopContext)
+ const {setShowSearch, getCartCount} = useContext(ShopContext)
const toggleMenu = () => {
setIsMenuOpen(!isMenuOpen);
};
+
return (
- <div className="flex justify-between items-center px-12 -mt-4 pt-4 pb-0 relative bg-[#e5f1f4]">
+
+
+ <div className="flex justify-between items-center px-12 -mt-4 pt-10 pb-5 relative bg-[#e5f1f4]">
<Link to="/">
- <img src={glazep} alt="logo" className="w-26 -mt-4" />
+ <img src={glazep} alt="logo" className="w-28 -mt-4" />
</Link>
{/* Desktop Navigation */}
@@ -66,7 +68,7 @@ function Navbar() {
<img
src={profile}
alt="profile-icon"
- className="w-[25px] -mt-3 cursor-pointer"
+ className="w-[28px] -mt-3 cursor-pointer"
/>
</Link>
{/* Dropdown menu (initially hidden, appears on group hover) */}
@@ -74,7 +76,9 @@ function Navbar() {
<div className="flex flex-col gap-2 w-36 py-3 px-5 bg-slate-100 text-gray-500 rounded">
<p className="cursor-pointer hover:text-black">My Profile</p>
<p className="cursor-pointer hover:text-black">Orders</p>
- <p className="cursor-pointer hover:text-black">Logout</p>
+
+ {/* <Link to="/logout" className="hover:text-black">Logout</Link> */}
+
</div>
</div>
</div>
@@ -82,11 +86,11 @@ function Navbar() {
<img
src={cart}
alt="cart"
- className="w-7 min-w-5 -mt-3 cursor-pointer"
+ className="w-8 min-w-5 -mt-3 cursor-pointer"
/>
- <p className="absolute right-[2px] bottom-[-5px] w-4 text-center leading-4 bg-black text-white aspect-square rounded-full text-[8px]">
- 10
- </p>
+<p className="absolute right-[2px] bottom-[-5px] w-4 text-center leading-4 bg-black text-white aspect-square rounded-full text-[8px]">
+ {getCartCount()}
+</p>
</Link>
{/* Mobile Menu Toggle Button */}
@@ -132,6 +136,7 @@ function Navbar() {
)}
</div>
);
+
}
export default Navbar;
diff --git a/Frontend/src/components/Pages/PlaceOrder.jsx b/Frontend/src/components/Pages/PlaceOrder.jsx
deleted file mode 100644
index 57ec56e..0000000
--- a/Frontend/src/components/Pages/PlaceOrder.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-
-function PlaceOrder() {
- return (
- <div>PlaceOrder</div>
- )
-}
-
-export default PlaceOrder
\ No newline at end of file
diff --git a/Frontend/src/components/Pages/Products.jsx b/Frontend/src/components/Pages/Products.jsx
index 6ecb79b..bfbeb04 100644
--- a/Frontend/src/components/Pages/Products.jsx
+++ b/Frontend/src/components/Pages/Products.jsx
@@ -1,107 +1,155 @@
-import React, { useContext, useEffect, useState } from 'react'
-import { useParams } from 'react-router-dom'
-import { ShopContext } from '../Context/ShopContext'
+
+
+import React, { useContext, useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { ShopContext } from '../Context/ShopContext';
function Products() {
- const { productId } = useParams()
- const { products } = useContext(ShopContext)
- const [productData, setProductData] = useState(false)
- const [image, setImage] = useState('')
- const [quantity, setQuantity] = useState(1);
-
- const increaseQuantity = () => setQuantity(prev => prev + 1);
- const decreaseQuantity = () => setQuantity(prev => (prev > 1 ? prev - 1 : 1));
- // const [add,setAdd] = useState()
- // const [subtract,setSubtract] = useState()
- // const [cart,setCart] =useState(1)
- const fetchProductData = async () => {
- products.map((item) => {
- if (item.id == productId) {
- setProductData(item)
- console.log(item.img)
- setImage(`http://localhost:8000${item.img}`
- )
- return null;
- }
- return null; // Added return for non-matching items to avoid warnings
- })
- }
+ const { productId } = useParams();
+ const { products, addToCart } = useContext(ShopContext);
+ const [productData, setProductData] = useState(null);
+ const [selectedQuantity, setSelectedQuantity] = useState(1);
+
+
+ const handleAddToCart = () => {
+ if (productData) {
+ addToCart(productData.id, selectedQuantity);
+ // setSelectedQuantity(1); // Reset quantity after adding
+ }
+
+ };
+ // const handleAddToCart = async () => {
+ // if (!productData) return;
- useEffect(() => {
- fetchProductData()
- }, [productId, products])
+ // // Local add to cart
+ // addToCart(productData.id, selectedQuantity);
- return productData ? (
- <div className='border-t-1 border-gray-200 pt-10 transition-opacity ease-in duration-500 opacity-100'>
- {/* product data */}
- <div className='flex gap-12 sm:gap-12 flex-col sm:flex-row'>
- {/* product image */}
- <div className="flex-1 flex flex-col-reverse gap-3 sm:flex-row">
- {/* Thumbnail section (currently showing just the single image) */}
- <div className='flex sm:flex-col overflow-x-auto sm:overflow-y-scroll justify-between sm:justify-normal sm:w-[18.7%] w-full'>
- <img
- src={image}
- alt={productData.name}
- className='w-[24%] sm:w-full sm:mb-3 flex-shrink-0 cursor-pointer'
- onClick={() => setImage(productData.img)}
- />
- </div>
-
- {/* Main image display */}
- <div className='flex-1'>
- <img
- src={image || productData.img}
+ // // Send to backend
+ // const token = localStorage.getItem('token'); // or wherever you store JWT
+ // try {
+ // const response = await fetch('http://localhost:8000/api/cart/add/', {
+ // method: 'POST',
+ // headers: {
+ // 'Content-Type': 'application/json',
+ // 'Authorization': `Bearer ${token}`,
+ // },
+ // body: JSON.stringify({
+ // product_id: productData.id,
+ // quantity: selectedQuantity,
+ // }),
+ // });
+
+ // if (!response.ok) {
+ // throw new Error('Failed to add to cart');
+ // }
+
+ // const data = await response.json();
+ // console.log('Item added to cart:', data);
+
+ // // Optionally show success message or reset quantity
+ // // setSelectedQuantity(1);
+ // } catch (error) {
+ // console.error('Error adding to cart:', error);
+ // // Optionally show error to user
+ // }
+ // };
+
+
+ useEffect(() => {
+ if (products && products.length > 0) {
+ const foundProduct = products.find(item => item.id.toString() === productId);
+ if (foundProduct) {
+ setProductData({
+ ...foundProduct,
+ img: getImageUrl(foundProduct.img),
+ });
+ }
+ }
+ }, [productId, products]);
+
+ const getImageUrl = (imagePath) => {
+ if (!imagePath) return '';
+ if (imagePath.startsWith('http')) return imagePath;
+ if (process.env.NODE_ENV === 'development') {
+ return `http://localhost:8000${imagePath}`;
+ }
+ return imagePath;
+ };
+
+ if (!productData) {
+ return (
+ <div className="flex justify-center items-center h-64">
+ <p>Loading product details...</p>
+ </div>
+ );
+ }
+
+ return (
+ <div className="border-t-1 border-gray-200 pt-10 transition-opacity ease-in duration-500 opacity-100">
+ <div className="flex gap-12 sm:gap-12 flex-col sm:flex-row">
+ {/* Product image section */}
+ <div className="flex-1 flex flex-col-reverse gap-3 sm:flex-row mt-8">
+ <div className="flex-1">
+ <img
+ src={productData.img}
alt={productData.name}
- className='w-full h-auto max-h-[500px] object-contain'
+ className="w-full h-auto max-h-[500px] object-contain"
+ onError={(e) => {
+ e.target.onerror = null;
+ e.target.src = '/images/fallback-product.jpg';
+ console.error('Failed to load image:', e.target.src);
+ }}
/>
</div>
</div>
-
+
{/* Product information section */}
- <div className='flex-1 p-4'>
- <h1 className='text-3xl font-bold mb-2 text-gray-700'>{productData.name}</h1>
- <p className='text-lg font-semibold mb-4 text-[22px] text-gray-700'>Rs. {productData.price}</p>
- <p className='text-gray-700 mb-4 text-[18px]'>{productData.description}</p>
- <div className='mb-4'>
- <h2 className='font-bold mb-2 text-[20px] text-gray-700'>Brand:</h2>
- <p className='text-[18px]'>{productData.brand}</p>
+ <div className="flex-1 p-4 mt-5">
+ <h1 className="text-3xl font-bold mb-4 text-gray-700">
+ {productData.name}
+ </h1>
+
+ <p className="text-lg mt-5 font-bold mb-4 text-[30px] text-gray-700">
+ Rs. {productData.price}
+ </p>
+
+ <p className="text-lg mt-5 font-bold mb-2 text-[20px] text-gray-700">
+ Category:
+ </p>
+ <p className="text-gray-700 mb-4 text-[16px] uppercase">
+ {productData.category}
+ </p>
+
+ <h2 className="font-bold mb-2 text-[18px] text-gray-700">Description:</h2>
+ <p className="text-gray-700 mb-4 text-[16px]">
+ {productData.description}
+ </p>
+
+ <div className="mb-4">
+ <h2 className="font-bold mb-2 text-[18px] text-gray-700">Brand:</h2>
+ <p className="text-[16px]">{productData.brand}</p>
</div>
- <div className='mb-4'>
- <h2 className='font-bold mb-2 text-[20px] text-gray-700'>Ingredients:</h2>
- <p className='text-gray-700 text-[18px]'>{productData.ingredients}</p>
+
+ <div className="mb-4">
+ <h2 className="font-bold mb-2 text-[18px] text-gray-700">Ingredients:</h2>
+ <p className="text-gray-700 text-[16px]">{productData.ingredients}</p>
</div>
- <div>
- <h2 className='font-bold mb-2 text-[20px] text-gray-700'>Category:</h2>
- <p className='capitalize text-[18px]'>{productData.category}</p>
+
+ <div className="mt-6">
+
</div>
-
-
- <div className="mt-6">
- <p className="text-[18px] mb-2 font-semibold">Select quantity</p>
- <div className="flex items-center bg-gray-100 rounded-full w-fit px-4 py-2">
- <button
- onClick={decreaseQuantity}
- className="text-xl px-3 font-bold text-gray-700"
- >−</button>
- <span className="mx-3 text-base font-medium">{quantity}</span>
- <button
- onClick={increaseQuantity}
- className="text-xl px-3 font-bold text-gray-700"
- >+</button>
- </div>
- </div>
- <button className='bg-gray-800 text-white px-8 py-3 mt-6 hover:bg-gray-600'>Add to Cart</button>
- <hr className="mt-8 sm:w-4/5 text-gray-300 w-6xl" />
- <div className="text-medium text-gray-600 mt-5 flex flex-col gap-1">
- <p>100% original product</p>
- <p>Cash on delivery is available.</p>
- <p>Easy return and Exchange</p>
- </div>
+
+ <button
+ className="bg-gray-800 text-white px-8 py-3 mt-6 hover:bg-gray-600"
+ onClick={handleAddToCart}
+ >
+ Add to Cart
+ </button>
</div>
</div>
</div>
- ) : <div className='opacity-0'></div>
+ );
}
-export default Products
\ No newline at end of file
+export default Products;
diff --git a/Frontend/src/components/Pages/Register.jsx b/Frontend/src/components/Pages/Register.jsx
index 1e23662..47eae77 100644
--- a/Frontend/src/components/Pages/Register.jsx
+++ b/Frontend/src/components/Pages/Register.jsx
@@ -1,7 +1,6 @@
-
import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { Link } from 'react-router-dom';
+import { useNavigate, Link } from 'react-router-dom';
+
function Register() {
const [formData, setFormData] = useState({
username: '',
@@ -13,52 +12,97 @@ function Register() {
password: '',
password2: ''
});
+
const [errors, setErrors] = useState({});
const [isSubmitting, setIsSubmitting] = useState(false);
const navigate = useNavigate();
+ // Helper function to get CSRF token from cookies
+ const getCookie = (name) => {
+ let cookieValue = null;
+ if (document.cookie && document.cookie !== '') {
+ const cookies = document.cookie.split(';');
+ for (let i = 0; i < cookies.length; i++) {
+ const cookie = cookies[i].trim();
+ if (cookie.substring(0, name.length + 1) === (name + '=')) {
+ cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+ break;
+ }
+ }
+ }
+ return cookieValue;
+ };
+
const handleChange = (e) => {
const { name, value } = e.target;
setFormData({
...formData,
[name]: value
});
+ // Clear error when user types
+ if (errors[name]) {
+ setErrors(prev => ({ ...prev, [name]: null }));
+ }
+ };
+
+ const validatePasswords = () => {
+ if (formData.password !== formData.password2) {
+ setErrors(prev => ({
+ ...prev,
+ password2: ['Passwords do not match']
+ }));
+ return false;
+ }
+ return true;
};
const handleSubmit = async (e) => {
e.preventDefault();
- setIsSubmitting(true); // Show the user something is happening
- console.log("Submitting form data:", formData); // Debug log
+ if (!validatePasswords()) {
+ return;
+ }
+ setIsSubmitting(true);
+ setErrors({});
+
try {
+ // 1. First get CSRF token
+ await fetch('http://localhost:8000/get-csrf-token/', {
+ credentials: 'include'
+ });
+
+ // 2. Then submit registration with CSRF token
const response = await fetch('http://localhost:8000/register/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
+ 'X-CSRFToken': getCookie('csrftoken')
},
body: JSON.stringify(formData),
credentials: 'include'
});
-
- console.log("Response status:", response.status); // Debug log
-
+
const data = await response.json();
- console.log('Response data:', data);
if (!response.ok) {
setErrors(data);
- throw new Error(data.message || 'Registration failed');
+ throw new Error(data.non_field_errors?.[0] || 'Registration failed');
}
-
- // If successful, redirect or show success message
- alert('Registration successful!');
- navigate('/login');
-
+
+ navigate('/login', {
+ state: {
+ registrationSuccess: true,
+ message: 'Registration successful! Please login.'
+ }
+ });
+
} catch (error) {
console.error('Registration error:', error);
- // Set general error if not caught by the response handling
- setErrors(prev => ({...prev, non_field_errors: [error.message]}));
+ setErrors(prev => ({
+ ...prev,
+ non_field_errors: [error.message]
+ }));
} finally {
setIsSubmitting(false);
}
@@ -69,15 +113,20 @@ function Register() {
<div className="bg-[#fbfcfc] p-8 rounded-lg shadow-md w-full max-w-[600px]">
<h2 className="text-3xl font-semi-bold mb-6 text-center text-[#287588]">Create Account</h2>
+ {errors.non_field_errors && (
+ <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
+ {errors.non_field_errors.map((error, index) => (
+ <p key={index} className="text-sm">{error}</p>
+ ))}
+ </div>
+ )}
+
<form onSubmit={handleSubmit} className="space-y-4">
{/* Username */}
<div>
- <label className="block text-gray-600 text-[17px] font-semi-bold mb-2" htmlFor="username">
- Username*
- </label>
+ <label className="block text-gray-600 text-[17px] font-semi-bold mb-2">Username*</label>
<input
className={`shadow appearance-none border ${errors.username ? 'border-red-500' : 'border-gray-300'} rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline`}
- id="username"
type="text"
name="username"
value={formData.username}
@@ -89,12 +138,9 @@ function Register() {
{/* First Name */}
<div>
- <label className="block text-gray-600 text-[17px] font-semi-bold mb-2" htmlFor="first_name">
- First Name*
- </label>
+ <label className="block text-gray-600 text-[17px] font-semi-bold mb-2">First Name*</label>
<input
className={`shadow appearance-none border ${errors.first_name ? 'border-red-500' : 'border-gray-300'} rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline`}
- id="first_name"
type="text"
name="first_name"
value={formData.first_name}
@@ -106,12 +152,9 @@ function Register() {
{/* Last Name */}
<div>
- <label className="block text-gray-600 text-[17px] font-semi-bold mb-2" htmlFor="last_name">
- Last Name*
- </label>
+ <label className="block text-gray-600 text-[17px] font-semi-bold mb-2">Last Name*</label>
<input
className={`shadow appearance-none border ${errors.last_name ? 'border-red-500' : 'border-gray-300'} rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline`}
- id="last_name"
type="text"
name="last_name"
value={formData.last_name}
@@ -123,12 +166,9 @@ function Register() {
{/* Email */}
<div>
- <label className="block text-gray-600 text-[17px] font-semi-bold mb-2" htmlFor="email">
- Email*
- </label>
+ <label className="block text-gray-600 text-[17px] font-semi-bold mb-2">Email*</label>
<input
className={`shadow appearance-none border ${errors.email ? 'border-red-500' : 'border-gray-300'} rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline`}
- id="email"
type="email"
name="email"
value={formData.email}
@@ -140,31 +180,33 @@ function Register() {
{/* Phone */}
<div>
- <label className="block text-gray-600 text-[17px] font-semi-bold mb-2" htmlFor="phone">
- Phone Number* (10 digits)
- </label>
+ <label className="block text-gray-600 text-[17px] font-semi-bold mb-2">Phone*</label>
<input
className={`shadow appearance-none border ${errors.phone ? 'border-red-500' : 'border-gray-300'} rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline`}
- id="phone"
type="tel"
name="phone"
value={formData.phone}
- onChange={handleChange}
+ onChange={(e) => {
+ const value = e.target.value.replace(/\D/g, '').slice(0, 10);
+ handleChange({
+ target: {
+ name: 'phone',
+ value
+ }
+ });
+ }}
required
pattern="[0-9]{10}"
- title="Phone number should be 10 digits"
+ title="10 digit phone number"
/>
{errors.phone && <p className="text-red-500 text-xs italic">{errors.phone}</p>}
</div>
{/* Address */}
<div>
- <label className="block text-gray-600 text-[17px] font-semi-bold mb-2" htmlFor="address">
- Address*
- </label>
+ <label className="block text-gray-600 text-[17px] font-semi-bold mb-2">Address*</label>
<textarea
className={`shadow appearance-none border ${errors.address ? 'border-red-500' : 'border-gray-300'} rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline`}
- id="address"
name="address"
value={formData.address}
onChange={handleChange}
@@ -176,29 +218,24 @@ function Register() {
{/* Password */}
<div>
- <label className="block text-gray-600 text-[17px] font-semi-bold mb-2" htmlFor="password">
- Password*
- </label>
+ <label className="block text-gray-600 text-[17px] font-semi-bold mb-2">Password*</label>
<input
className={`shadow appearance-none border ${errors.password ? 'border-red-500' : 'border-gray-300'} rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline`}
- id="password"
type="password"
name="password"
value={formData.password}
onChange={handleChange}
required
+ minLength="8"
/>
{errors.password && <p className="text-red-500 text-xs italic">{errors.password}</p>}
</div>
{/* Confirm Password */}
<div>
- <label className="block text-gray-600 text-[17px] font-semi-bold mb-2" htmlFor="password2">
- Confirm Password*
- </label>
+ <label className="block text-gray-600 text-[17px] font-semi-bold mb-2">Confirm Password*</label>
<input
className={`shadow appearance-none border ${errors.password2 ? 'border-red-500' : 'border-gray-300'} rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline`}
- id="password2"
type="password"
name="password2"
value={formData.password2}
@@ -208,24 +245,13 @@ function Register() {
{errors.password2 && <p className="text-red-500 text-xs italic">{errors.password2}</p>}
</div>
- {/* Non-field errors */}
- {errors.non_field_errors && (
- <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
- {errors.non_field_errors.map((error, index) => (
- <p key={index}>{error}</p>
- ))}
- </div>
- )}
-
- <div className="flex items-center justify-between">
- <button
- className="bg-[#1b5968] hover:bg-[#4b5f64] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full"
- type="submit"
- disabled={isSubmitting}
- >
- {isSubmitting ? 'Registering...' : 'Register'}
- </button>
- </div>
+ <button
+ className="bg-[#1b5968] hover:bg-[#4b5f64] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full disabled:opacity-50"
+ type="submit"
+ disabled={isSubmitting}
+ >
+ {isSubmitting ? 'Registering...' : 'Register'}
+ </button>
<div className="text-center mt-4">
<p>Already have an account? <Link to="/login" className="text-[#12a0c4] hover:text-blue-700">Login</Link></p>
diff --git a/Frontend/src/components/Pages/Signup.jsx b/Frontend/src/components/Pages/Signup.jsx
deleted file mode 100644
index b4082d9..0000000
--- a/Frontend/src/components/Pages/Signup.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-
-function Signup() {
- return (
- <div>Signup</div>
- )
-}
-
-export default Signup
\ No newline at end of file
diff --git a/Frontend/src/components/Payment/Failure.jsx b/Frontend/src/components/Payment/Failure.jsx
new file mode 100644
index 0000000..b7d5742
--- /dev/null
+++ b/Frontend/src/components/Payment/Failure.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Failure() {
+ return (
+ <div>Transaction Failure</div>
+ )
+}
+
+export default Failure
\ No newline at end of file
diff --git a/Frontend/src/components/Payment/PaymentGateway.jsx b/Frontend/src/components/Payment/PaymentGateway.jsx
new file mode 100644
index 0000000..93fd01e
--- /dev/null
+++ b/Frontend/src/components/Payment/PaymentGateway.jsx
@@ -0,0 +1,217 @@
+
+
+
+
+import React, { useState, useEffect } from "react";
+import { v4 as uuidv4 } from "uuid";
+import CryptoJS from "crypto-js";
+import { useLocation } from "react-router-dom";
+
+const PaymentGateway = () => {
+ const location = useLocation();
+ const initialTotal = location.state?.total || "10";
+
+ const [formData, setFormData] = useState({
+ amount: initialTotal,
+ tax_amount: "0",
+ total_amount: initialTotal,
+ transaction_uuid: uuidv4(),
+ product_service_charge: "0",
+ product_delivery_charge: "0",
+ product_code: "EPAYTEST",
+ success_url: "http://localhost:5173/success",
+ failure_url: "http://localhost:5173/failure",
+ signed_field_names: "total_amount,transaction_uuid,product_code",
+ signature: "",
+ });
+
+ const [userDetails, setUserDetails] = useState({
+ firstName: "",
+ lastName: "",
+ email: "",
+ mobile: "",
+ address: "",
+ paymentMethod: "esewa",
+ });
+
+ const generateSignature = (data) => {
+ const secret = "8gBm/:&EnhH.1/q";
+ const hashString = `total_amount=${data.total_amount},transaction_uuid=${data.transaction_uuid},product_code=${data.product_code}`;
+ const hash = CryptoJS.HmacSHA256(hashString, secret);
+ return CryptoJS.enc.Base64.stringify(hash);
+ };
+
+ useEffect(() => {
+ const signature = generateSignature(formData);
+ setFormData((prev) => ({ ...prev, signature }));
+ }, [formData.total_amount, formData.transaction_uuid, formData.product_code]);
+
+ const handleAmountChange = (e) => {
+ const value = e.target.value;
+ setFormData((prev) => ({
+ ...prev,
+ amount: value,
+ total_amount: value,
+ }));
+ };
+
+ return (
+ <div className="flex flex-col md:flex-row max-w-5xl mx-auto p-6 gap-8 ">
+ {/* Checkout Form */}
+ <form
+ action={userDetails.paymentMethod === "esewa"
+ ? "https://rc-epay.esewa.com.np/api/epay/main/v2/form"
+ : "#"}
+ method="POST"
+ className="flex-1 space-y-4 border border-gray-300 p-6 rounded shadow"
+ >
+ <h1 className="text-2xl font-bold mb-8 text-gray-700 text-center">Checkout</h1>
+
+ <div className="grid grid-cols-2 gap-4">
+ <div>
+ <label className="block text-sm font-medium text-gray-700">First Name</label>
+ <input
+ type="text"
+ className="w-full p-2 border border-gray-400 rounded "
+ value={userDetails.firstName}
+ onChange={(e) =>
+ setUserDetails({ ...userDetails, firstName: e.target.value })
+ }
+ required
+ />
+ </div>
+ <div>
+ <label className="block text-sm font-medium text-gray-700">Last Name</label>
+ <input
+ type="text"
+ className="w-full p-2 border rounded border-gray-300"
+ value={userDetails.lastName}
+ onChange={(e) =>
+ setUserDetails({ ...userDetails, lastName: e.target.value })
+ }
+ required
+ />
+ </div>
+ </div>
+
+ <div>
+ <label className="block text-sm font-medium">Email</label>
+ <input
+ type="email"
+ className="w-full p-2 border rounded"
+ value={userDetails.email}
+ onChange={(e) =>
+ setUserDetails({ ...userDetails, email: e.target.value })
+ }
+ required
+ />
+ </div>
+
+ <div>
+ <label className="block text-sm font-medium">Mobile No</label>
+ <input
+ type="text"
+ className="w-full p-2 border rounded"
+ value={userDetails.mobile}
+ onChange={(e) =>
+ setUserDetails({ ...userDetails, mobile: e.target.value })
+ }
+ required
+ />
+ </div>
+
+ <div>
+ <label className="block text-sm font-medium">Address</label>
+ <input
+ type="text"
+ className="w-full p-2 border rounded"
+ value={userDetails.address}
+ onChange={(e) =>
+ setUserDetails({ ...userDetails, address: e.target.value })
+ }
+ required
+ />
+ </div>
+
+ <div>
+ <label className="block text-sm font-medium">Payment Method</label>
+ <select
+ className="w-full p-2 border rounded"
+ value={userDetails.paymentMethod}
+ onChange={(e) =>
+ setUserDetails({ ...userDetails, paymentMethod: e.target.value })
+ }
+ >
+ <option value="esewa">eSewa</option>
+ <option value="cod">Cash on Delivery</option>
+ </select>
+ </div>
+
+ <div className="space-y-2">
+ <label htmlFor="amount" className="block text-sm font-medium">
+ Amount
+ </label>
+ <input
+ type="text"
+ id="amount"
+ name="amount"
+ className="w-full p-2 border rounded"
+ value={formData.amount}
+ onChange={handleAmountChange}
+ required
+ />
+ </div>
+
+ {/* Hidden Fields for eSewa */}
+ {userDetails.paymentMethod === "esewa" && (
+ <>
+ <input type="hidden" name="tax_amount" value={formData.tax_amount} />
+ <input type="hidden" name="total_amount" value={formData.total_amount} />
+ <input type="hidden" name="transaction_uuid" value={formData.transaction_uuid} />
+ <input type="hidden" name="product_code" value={formData.product_code} />
+ <input type="hidden" name="product_service_charge" value={formData.product_service_charge} />
+ <input type="hidden" name="product_delivery_charge" value={formData.product_delivery_charge} />
+ <input type="hidden" name="success_url" value={formData.success_url} />
+ <input type="hidden" name="failure_url" value={formData.failure_url} />
+ <input type="hidden" name="signed_field_names" value={formData.signed_field_names} />
+ <input type="hidden" name="signature" value={formData.signature} />
+ </>
+ )}
+
+ <button
+ type="submit"
+ className="w-full bg-gray-800 text-white py-3 rounded hover:bg-gray-600 transition"
+ >
+ {userDetails.paymentMethod === "esewa"
+ ? "Pay via eSewa"
+ : "Place Order (COD)"}
+ </button>
+ </form>
+
+
+<div className="mt-10" >
+ <h2 className="text-xl font-bold mb-4">Your Products</h2>
+ <div className="space-y-4 flex flex-col gap-6 justify-between align-center">
+ {location.state?.cartItems?.map((item, idx) => (
+ <div key={idx} className="border p-4 rounded shadow-sm flex gap-4 items-center">
+ <img
+ src={item.product.img}
+ alt={item.product.name}
+ className="w-20 h-20 object-contain bg-gray-100"
+ />
+ <div>
+ <h3 className="font-semibold text-lg">{item.product.name}</h3>
+ <p className="text-sm text-gray-500">Category: {item.product.category || 'N/A'}</p>
+ <p>Qty: {item.quantity}</p>
+ <p className="text-sm font-medium">{location.state.currency} {item.product.price}</p>
+ </div>
+ </div>
+ ))}
+ </div>
+</div>
+
+ </div>
+ );
+};
+
+export default PaymentGateway;
diff --git a/Frontend/src/components/Payment/Success.jsx b/Frontend/src/components/Payment/Success.jsx
new file mode 100644
index 0000000..349f313
--- /dev/null
+++ b/Frontend/src/components/Payment/Success.jsx
@@ -0,0 +1,46 @@
+// export default Success;
+import React, { useEffect, useState } from "react";
+import { useSearchParams } from "react-router-dom"; // Correct import
+import check from "./check.png"
+const Success = () => {
+ const [searchParams] = useSearchParams();
+ const dataQuery = searchParams.get("data");
+ const [data, setData] = useState({});
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ try {
+ if (dataQuery) {
+ const resData = atob(dataQuery);
+ const resObject = JSON.parse(resData);
+ console.log(resObject);
+ setData(resObject);
+ } else {
+ setError("No data parameter found in URL");
+ }
+ } catch (err) {
+ console.error("Error parsing data:", err);
+ setError("Failed to parse payment data");
+ }
+ }, [dataQuery]);
+
+ if (error) {
+ return (
+ <div className="payment-container error">
+ <p className="status">{error}</p>
+ </div>
+ );
+ }
+
+ return (
+ <div className="flex justify-center items-center pt-5">
+ <div className="flex flex-col items-center justify-center gap-4 p-8 rounded-xl bg-white shadow-lg max-w-md mx-auto">
+ <img src={check} alt="Success" className="w-20 h-20 text-green-500" />
+ <p className="text-4xl font-bold text-gray-800">Rs. {data.total_amount || "0"}</p>
+ <p className="text-2xl font-semibold text-green-600">Payment Successful</p>
+</div>
+ </div>
+ );
+};
+
+export default Success;
\ No newline at end of file
diff --git a/Frontend/src/components/Payment/check.png b/Frontend/src/components/Payment/check.png
new file mode 100644
index 0000000..6aa84d9
Binary files /dev/null and b/Frontend/src/components/Payment/check.png differ
diff --git a/Frontend/src/components/Payment/successful.png b/Frontend/src/components/Payment/successful.png
new file mode 100644
index 0000000..5cdb890
Binary files /dev/null and b/Frontend/src/components/Payment/successful.png differ
diff --git a/Frontend/src/components/api/axiosInstance.jsx b/Frontend/src/components/api/axiosInstance.jsx
new file mode 100644
index 0000000..e55087e
--- /dev/null
+++ b/Frontend/src/components/api/axiosInstance.jsx
@@ -0,0 +1,12 @@
+// src/api/axiosInstance.js
+import axios from 'axios';
+import React from 'react';
+
+const instance = axios.create({
+ baseURL: 'http://localhost:8000', // update with your backend URL
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+});
+
+export default instance;
diff --git a/backend/app/esewa_utils.py b/backend/app/esewa_utils.py
new file mode 100644
index 0000000..d1f7783
--- /dev/null
+++ b/backend/app/esewa_utils.py
@@ -0,0 +1,32 @@
+import hashlib
+import uuid
+from django.conf import settings
+
+def generate_esewa_payment_data(amount, order_id, service_charge = 0):
+ data = {
+ 'amount' : amount,
+ 'product_delivery_charge': 0,
+ 'product_service_charge': service_charge,
+ 'tax_amount': 0,
+ 'total_amount': float(amount) + float(service_charge),
+ 'transaction_uuid': order_id,
+ 'product_code': settings.ESEWA_MERCHANT_ID,
+ 'success_url': settings.ESEWA_SUCCESS_URL,
+ 'failure_url': settings.ESEWA_FAILURE_URL,
+
+ }
+ return data
+
+def verify_esewa_payment(pid, refId,amount):
+ import requests
+ data = {
+ 'amount': amount,
+ 'transaction_id': pid,
+ 'product_code': settings.ESEWA_MERCHANT_ID
+
+ }
+ response = requests.post(settings.ESEWA_VERIFY_URL, data = data)
+ if response.status_code == 200:
+ res_data = response.json()
+ return res_data.get('status') == "COMPLETE"
+ return False
\ No newline at end of file
diff --git a/backend/app/models.py b/backend/app/models.py
index 17f711d..3e61af3 100644
--- a/backend/app/models.py
+++ b/backend/app/models.py
@@ -21,7 +21,7 @@ class Product(models.Model):
description = models.TextField()
brand = models.CharField()
ingredients = models.TextField()
- img = models.ImageField(upload_to='images')
+ img = models.ImageField(upload_to='images/')
class User(AbstractUser):
@@ -41,3 +41,21 @@ class Cart(models.Model):
user = models.ForeignKey(User, on_delete=models.CASCADE)
product = models.ForeignKey(Product, on_delete = models.CASCADE)
quantity = models.PositiveIntegerField(default = 1)
+
+class Order(models.Model):
+ PAYMENT_CHOICES = [
+ ('COD', 'Cash on Delivery'),
+ ('ESEWA', 'eSewa'),
+ ('FONEPAY','Fonepay'),
+ ]
+ user = models.ForeignKey(User, on_delete= models.CASCADE)
+ order_id = models.CharField(max_length = 100, unique = True)
+ amount = models.DecimalField(max_digits = 10, decimal_places = 2)
+ location = models.TextField()
+ payment_method = models.CharField(max_length=10, choices = PAYMENT_CHOICES)
+ payment_status = models.CharField(max_length= 20,default ='PENDING')
+ transaction_id = models.CharField(max_length = 100, blank = True, null = True)
+ created_at = models.DateTimeField(auto_now_add =True)
+
+ def __str__(self):
+ return f"Order {self.order_id} - {self.user.username}"
\ No newline at end of file
diff --git a/backend/app/serializer.py b/backend/app/serializer.py
index 5cd92f9..52903a5 100644
--- a/backend/app/serializer.py
+++ b/backend/app/serializer.py
@@ -40,8 +40,8 @@ class ProductSerializer(serializers.ModelSerializer):
class Meta:
model = Product
fields = '__all__'
-
- def __str__(self):
+
+ def __str__(self):
return self.name
class MyTokenPairSerializer(TokenObtainPairSerializer):
diff --git a/backend/app/urls.py b/backend/app/urls.py
index cd1012f..59f0e54 100644
--- a/backend/app/urls.py
+++ b/backend/app/urls.py
@@ -5,12 +5,17 @@
path('products/',views.GetProducts, name="products"),
path('products/category/<slug:val>',views.GetProductsByCategory, name="products-category"),
path('products/search/<slug:val>',views.GetProductsBySearch, name="products-search"),
- path('login/',views.login, name ="login"),
- path('logout/',views.LogoutView, name ="logout"),
+ path('login/',views.login_view, name ="login"),
+ path('logout/',views.session_logout, name ="logout"),
+ path('get-csrf-token/',views.get_csrf_token, name ="get-csrf-token"),
path('add-to-cart/',views.AddToCart, name = "add-to-cart"),
path('show-cart/',views.ShowCart, name = "show-cart"),
path('plus-cart/',views.PlusCart, name = "plus-cart"),
path('minus-cart/',views.MinusCart, name = "minus-cart"),
path('remove-cart/',views.RemoveCart, name = "remove-cart"),
+ path('checkout/',views.checkout,name="checkout"),
+ # path('esewa/success',views.esewa_success, name="esewa_success"),
+ # path('esewa/failure',views.esewa_failure, name="esewa_failure"),
+
]
\ No newline at end of file
diff --git a/backend/app/views.py b/backend/app/views.py
index c4399f4..4f4d2c0 100644
--- a/backend/app/views.py
+++ b/backend/app/views.py
@@ -9,6 +9,11 @@
from rest_framework.response import Response
from rest_framework_simplejwt.tokens import RefreshToken
from rest_framework.authtoken.models import Token
+from .esewa_utils import *
+from django.contrib.auth import login as django_login,logout
+from django.http import JsonResponse
+from django.views.decorators.csrf import ensure_csrf_cookie, csrf_exempt
+import uuid
# Create your views here.
class RegisterView(generics.CreateAPIView):
@@ -19,29 +24,25 @@ class RegisterView(generics.CreateAPIView):
def perform_create(self, serializer):
user = serializer.save()
-@api_view(['POST'])
-@permission_classes([AllowAny])
-def login(request):
- serializer = LoginSerializer(data = request.data)
- if serializer.is_valid():
- user = serializer.validated_data['user']
- refresh = RefreshToken.for_user(user)
- access_token = refresh.access_token
- access_token['username'] = user.username
- access_token['phone'] = user.phone
- return Response({
- 'refresh' : str(refresh),
- 'access': str(access_token),
- 'user': {
- 'username': user.username,
- 'phone': user.phone
- }
- }, status = status.HTTP_200_OK)
- else:
- return Response(serializer.errors, status = status.HTTP_400_BAD_REQUEST)
+@api_view(['POST'])
+@permission_classes([AllowAny])
+def login_view(request): # renamed to avoid conflict with login
+ serializer = LoginSerializer(data=request.data, context={'request': request})
+ if serializer.is_valid():
+ user = serializer.validated_data['user']
+ django_login(request, user) # use _request to get the original Django request object
+ return Response({
+ "message": "Login successful",
+ "user": {
+ "username": user.username,
+ "voted": user.phone
+ }
+ })
+
+ return Response(serializer.errors, status=400)
@api_view(['GET'])
def GetProducts(request):
@@ -107,18 +108,14 @@ def ShowCart(request):
@api_view(['POST'])
@permission_classes([IsAuthenticated])
-def LogoutView(request):
- try:
- refresh_token = request.data.get("refresh")
- if not refresh_token:
- return Response({"error": "Refresh token is required"}, status=status.HTTP_400_BAD_REQUEST)
+def session_logout(request):
+ logout(request)
+ return Response({"message": "Logout successful"})
- token = RefreshToken(refresh_token)
- token.blacklist()
+@ensure_csrf_cookie
+def get_csrf_token(request):
+ return JsonResponse({"message": "CSRF cookie set"})
- return Response({"message": "Successfully logged out"}, status=status.HTTP_200_OK)
- except Exception as e:
- return Response({"error": str(e)}, status=status.HTTP_400_BAD_REQUEST)
@@ -185,6 +182,64 @@ def RemoveCart(request):
})
+@api_view(['POST'])
+@permission_classes([IsAuthenticated])
+def checkout(request):
+ user = request.user;
+ location = request.data.get("location")
+ payment_method = request.data.get("payment_method")
+
+ cart_items = Cart.objects.filter(user = user)
+ if not cart_items.exists():
+ return Response({'error': 'Cart is empty'}, status = status.HTTP_400_BAD_REQUEST)
+ total_amount = sum(item.product.price * item.quantity for item in cart_items)
+
+ order_id = f"ORD - {uuid.uuid4().hex[:8]}"
+
+ order = Order.objects.create(
+ user = user,
+ order_id = order_id,
+ amount = total_amount,
+ location = location,
+ payment_method = payment_method,
+ payment_status = 'PENDING'
+ )
+
+ if payment_method == "COD":
+ order.payment_status = 'ACCEPTED'
+ order.save()
+ cart_items.delete()
+
+ return Response({
+ 'status': 'success',
+ 'message': 'Order placed successfully. Payment will be collected on delivery',
+ 'order_id': order_id
+ })
+ elif payment_method == "ESEWA":
+ payment_data = generate_esewa_payment_data(amount = total_amount, order_id=order_id)
+ return Response({'payment_gateway':'esewa',
+ 'payment_url': settings.ESEWA_API_URL,
+ 'payment_data': payment_data,
+ 'method': 'POST'})
+ else:
+ return Response(
+ {'error': 'Invalid payment method'},
+ status=status.HTTP_400_BAD_REQUEST
+ )
+
+
+def esewa_success(request):
+ ref_id = request.GET.get('refId')
+ order_id = request.GET.get('oid')
+ return Response({
+ "value": "Success"
+ })
+
+def failure(request):
+ return Response({
+ "value": "Failure"
+ })
-
+def esewa_test_view(request):
+ return render(request, 'app/esewa/test.html')
diff --git a/backend/backend/settings.py b/backend/backend/settings.py
index 0e2e6a7..f08f399 100644
--- a/backend/backend/settings.py
+++ b/backend/backend/settings.py
@@ -1,3 +1,197 @@
+# """
+# Django settings for backend project.
+
+# Generated by 'django-admin startproject' using Django 5.1.6.
+
+# For more information on this file, see
+# https://docs.djangoproject.com/en/5.1/topics/settings/
+
+# For the full list of settings and their values, see
+# https://docs.djangoproject.com/en/5.1/ref/settings/
+# """
+# from datetime import timedelta
+# from pathlib import Path
+# import os
+# # Build paths inside the project like this: BASE_DIR / 'subdir'.
+# BASE_DIR = Path(__file__).resolve().parent.parent
+
+
+# # Quick-start development settings - unsuitable for production
+# # See https://docs.djangoproject.com/en/5.1/howto/deployment/checklist/
+
+# # SECURITY WARNING: keep the secret key used in production secret!
+# SECRET_KEY = 'django-insecure-((s(w$z@8rma5supc9hrp_b_1q_5cn-qj-t0#6@e)=oq^gxr41'
+
+# # SECURITY WARNING: don't run with debug turned on in production!
+# DEBUG = True
+
+# ALLOWED_HOSTS = []
+
+
+# # Application definition
+
+# INSTALLED_APPS = [
+# 'django.contrib.admin',
+# 'django.contrib.auth',
+# 'django.contrib.contenttypes',
+# 'django.contrib.sessions',
+# 'django.contrib.messages',
+# 'django.contrib.staticfiles',
+# 'app',
+# 'corsheaders',
+# 'rest_framework',
+# 'rest_framework_simplejwt',
+# 'rest_framework.authtoken',
+# 'rest_framework_simplejwt.token_blacklist',
+# ]
+
+# REST_FRAMEWORK = {
+# 'DEFAULT_AUTHENTICATION_CLASSES': (
+# 'rest_framework.authentication.SessionAuthentication',
+# # 'rest_framework_simplejwt.authentication.JWTAuthentication',
+# ),
+# # 'DEFAULT_RENDERER_CLASSES':('rest_framework.renderers.JSONRenderer',),
+
+# }
+
+# MIDDLEWARE = [
+# 'django.middleware.security.SecurityMiddleware',
+# 'django.contrib.sessions.middleware.SessionMiddleware',
+# 'corsheaders.middleware.CorsMiddleware',
+# 'django.middleware.common.CommonMiddleware',
+# 'django.middleware.csrf.CsrfViewMiddleware',
+# 'django.contrib.auth.middleware.AuthenticationMiddleware',
+# 'django.contrib.messages.middleware.MessageMiddleware',
+# 'django.middleware.clickjacking.XFrameOptionsMiddleware',
+# ]
+
+# ROOT_URLCONF = 'backend.urls'
+
+# TEMPLATES = [
+# {
+# 'BACKEND': 'django.template.backends.django.DjangoTemplates',
+# 'DIRS': [os.path.join(BASE_DIR, 'templates')],
+# 'APP_DIRS': True,
+# 'OPTIONS': {
+# 'context_processors': [
+# 'django.template.context_processors.debug',
+# 'django.template.context_processors.request',
+# 'django.contrib.auth.context_processors.auth',
+# 'django.contrib.messages.context_processors.messages',
+# ],
+# },
+# },
+# ]
+
+# WSGI_APPLICATION = 'backend.wsgi.application'
+
+
+# # Database
+# # https://docs.djangoproject.com/en/5.1/ref/settings/#databases
+
+# DATABASES = {
+# 'default': {
+# 'ENGINE': 'django.db.backends.postgresql',
+# 'NAME': 'postgres',
+# 'USER': 'postgres.umxbhshsupgsiqvnzduy',
+# 'PASSWORD': 'muSical833201eve',
+# 'HOST': 'aws-0-us-east-2.pooler.supabase.com', # Change to remote DB host if needed
+# 'PORT': '5432', # Default PostgreSQL port
+# }
+# }
+
+
+
+# # Password validation
+# # https://docs.djangoproject.com/en/5.1/ref/settings/#auth-password-validators
+
+# AUTH_PASSWORD_VALIDATORS = [
+# {
+# 'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
+# },
+# {
+# 'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
+# },
+# {
+# 'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
+# },
+# {
+# 'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
+# },
+# ]
+
+
+# # Internationalization
+# # https://docs.djangoproject.com/en/5.1/topics/i18n/
+
+# LANGUAGE_CODE = 'en-us'
+
+# TIME_ZONE = 'UTC'
+
+# USE_I18N = True
+
+# USE_TZ = True
+
+# AUTH_USER_MODEL = 'app.User'
+
+# # Static files (CSS, JavaScript, Images)
+# # https://docs.djangoproject.com/en/5.1/howto/static-files/
+
+# STATIC_URL = 'static/'
+# MEDIA_URL ='/media/'
+# MEDIA_ROOT = os.path.join(BASE_DIR,'media')
+
+# # Default primary key field type
+# # https://docs.djangoproject.com/en/5.1/ref/settings/#default-auto-field
+
+# DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
+
+
+# SIMPLE_JWT = {
+# "ACCESS_TOKEN_LIFETIME": timedelta(minutes=30),
+# "REFRESH_TOKEN_LIFETIME": timedelta(days=1),
+# "ROTATE_REFRESH_TOKENS": False,
+# "BLACKLIST_AFTER_ROTATION": False,
+# "UPDATE_LAST_LOGIN": False,
+
+# "AUTH_HEADER_TYPES": ("Bearer",),
+# "AUTH_HEADER_NAME": "HTTP_AUTHORIZATION",
+# "USER_ID_FIELD": "id",
+# "USER_ID_CLAIM": "user_id",
+# "USER_AUTHENTICATION_RULE": "rest_framework_simplejwt.authentication.default_user_authentication_rule",
+
+# "AUTH_TOKEN_CLASSES": ("rest_framework_simplejwt.tokens.AccessToken",),
+# "TOKEN_TYPE_CLAIM": "token_type",
+# "TOKEN_USER_CLASS": "rest_framework_simplejwt.models.TokenUser",
+
+# "JTI_CLAIM": "jti",
+
+# }
+# CORS_ALLOW_CREDENTIALS = True
+# CORS_ALLOWED_ORIGINS = [
+# "http://localhost:5173",
+# "http://127.0.0.1:8000",
+# "http://127.0.0.1:3000"
+# ]
+
+# CSRF_TRUSTED_ORIGINS = [
+# "http://localhost:5173",
+# ]
+
+# CORS_ALLOW_CREDENTIALS = True
+# CSRF_COOKIE_HTTPONLY = False
+# SESSION_COOKIE_SECURE = False # True for HTTPS, False for local dev
+# CSRF_COOKIE_SECURE = False
+# SESSION_COOKIE_SAMESITE = 'Lax' # or 'None' if cross-site
+# CSRF_COOKIE_SAMESITE = 'Lax'
+
+
+# ESEWA_MERCHANT_ID = 'EPAYTEST'
+# ESEWA_API_URL = 'https://rc-epay.esewa.com.np/api/epay/main/v2/form'
+# ESEWA_VERIFY_URL = 'https://rc.esewa.com.np/api/epay/transaction/status/'
+# ESEWA_SUCCESS_URL = 'http://127.0.0.1:8000/esewa/success'
+# ESEWA_FAILURE_URL = 'http://127.0.0.1:8000/esewa/failure'
+
"""
Django settings for backend project.
@@ -47,7 +241,8 @@
REST_FRAMEWORK = {
'DEFAULT_AUTHENTICATION_CLASSES': (
- 'rest_framework_simplejwt.authentication.JWTAuthentication',
+ 'rest_framework.authentication.SessionAuthentication',
+ # 'rest_framework_simplejwt.authentication.JWTAuthentication',
),
# 'DEFAULT_RENDERER_CLASSES':('rest_framework.renderers.JSONRenderer',),
@@ -69,7 +264,7 @@
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
- 'DIRS': [],
+ 'DIRS': [os.path.join(BASE_DIR, 'templates')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
@@ -168,9 +363,25 @@
}
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOWED_ORIGINS = [
- "http://localhost:8080",
+ "http://localhost:5173",
"http://127.0.0.1:8000",
- "http://localhost:3000",
- "http://localhost:5173",
- "http://127.0.0.1:3000",
-]
\ No newline at end of file
+ "http://127.0.0.1:3000"
+]
+
+CSRF_TRUSTED_ORIGINS = [
+ "http://localhost:5173",
+]
+
+CORS_ALLOW_CREDENTIALS = True
+CSRF_COOKIE_HTTPONLY = False
+SESSION_COOKIE_SECURE = False # True for HTTPS, False for local dev
+CSRF_COOKIE_SECURE = False
+SESSION_COOKIE_SAMESITE = 'Lax' # or 'None' if cross-site
+CSRF_COOKIE_SAMESITE = 'Lax'
+
+
+ESEWA_MERCHANT_ID = 'EPAYTEST'
+ESEWA_API_URL = 'https://rc-epay.esewa.com.np/api/epay/main/v2/form'
+ESEWA_VERIFY_URL = 'https://rc.esewa.com.np/api/epay/transaction/status/'
+ESEWA_SUCCESS_URL = 'http://127.0.0.1:8000/esewa/success'
+ESEWA_FAILURE_URL = 'http://127.0.0.1:8000/esewa/failure'
\ No newline at end of file
{
+ e.target.onerror = null;
+ e.target.src = "/default-product.jpg";
+ }}
+ />
+