Implement Cookie based User session Handling

client/package.json

@@ -14,6 +14,7 @@
     "axios": "^1.6.8",
     "lottie-react": "^2.4.0",
     "react": "^18.3.1",
+    "react-cookie-consent": "^9.0.0",
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.1",
     "react-router-dom": "^6.23.1",
@@ -43,5 +44,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
   }
 }

client/src/App.js

@@ -1,6 +1,7 @@
 
 import "./App.css";
 // import {Outlet} from "react-router-dom";
+import React, { useState, useEffect } from 'react';
 import { Navbar, Footer } from './Components/index.js';
 import { ProfilePage, Product } from './Components/index';
 import LoginPage from './Pages/LoginPage.jsx';
@@ -11,36 +12,63 @@ import Wishlist from './Pages/Wishlist.jsx';
 import HomePage from './Pages/Home.jsx';
 import Shop from "./Pages/Shop.jsx";
 import { Toast } from "./Toast/Toast.js";
-
-import { BrowserRouter as Router, Routes, Route} from 'react-router-dom';
+import Contact from "./Pages/Contact.jsx";
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import './Animations.css';
+import FAQ from "./Pages/Faq.jsx";
+import ForgotPassword from "./Pages/ForgotPassword.jsx"; // Import ForgotPassword
+import ResetPassword from "./Pages/ResetPassword.jsx"; // Import ResetPassword
+import CookieBanner from "./Components/CookieBanner/CookieBanner.js";
 
+function App() {
+  const [darkMode, setDarkMode] = useState(false);
 
+  const toggleDarkMode = () => {
+    setDarkMode(!darkMode);
+  };
+
+  useEffect(() => {
+    if (darkMode) {
+      document.body.style.backgroundColor = '#121212';
+      document.body.style.color = 'black';
+    } else {
+      document.body.style.backgroundColor = 'white';
+      document.body.style.color = 'black';
+    }
+  }, [darkMode]);
+
+  const appStyle = {
+    backgroundColor: darkMode ? '#333' : '#f4f4f4',
+    padding: '20px',
+    borderRadius: '8px',
+  };
 
-function App() {
   return (
     <>
-
-    <Router>
-      <div className="App">
-        <Navbar/>
-        <Routes>
-          <Route path="/"         exact element={<HomePage/>} />
-          <Route path="/shop"     exact element={<Shop/>} />
-          <Route path="/shop/:id"       element={<Product/>} />
-          <Route path="/login"          element={<LoginPage/>} />
-          <Route path="/signup"         element={<SignUpPage/>} />
-          <Route path="/wishlist"       element={<Wishlist/>} />
-          <Route path="/cart"           element={<Cart/>} />
-          <Route path="/orders"         element={<Orders/>} />
-        </Routes>
-        <Toast position="bottom-right"/>
-        <Footer/>
-      </div>
-    </Router>
-
+      <Router>
+        <div className="App" style={appStyle}>
+          <Navbar darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
+          <Routes>
+            <Route path="/" exact element={<HomePage darkMode={darkMode} />} />
+            <Route path="/shop" exact element={<Shop />} />
+            <Route path="/shop/:id" element={<Product />} />
+            <Route path="/login" element={<LoginPage />} />
+            <Route path="/signup" element={<SignUpPage />} />
+            <Route path="/wishlist" element={<Wishlist />} />
+            <Route path="/cart" element={<Cart />} />
+            <Route path="/orders" element={<Orders />} />
+            <Route path="/contactus" element={<Contact />} />
+            <Route path="/faqs" element={<FAQ/>}/>
+            <Route path="/password/forgot" element={<ForgotPassword />} />{" "}
+            {/* Add this line */}
+            <Route path="/password/reset/:token" element={<ResetPassword />} />
+          </Routes>
+          <Toast position="bottom-right" />
+          <Footer />
+        </div>
+      </Router>
     </>
   );
 }
 
-export default App;
+export default App;

client/src/Components/CookieBanner/CookieBanner.css

@@ -0,0 +1,49 @@
+.cookie-banner {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: #333;
+  color: white;
+  padding: 20px;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: 0px -4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.cookie-banner p {
+  margin: 0;
+  font-size: 16px;
+  flex-grow: 1;
+}
+
+.cookie-banner-buttons {
+  display: flex;
+  gap: 20px; /* Increased gap */
+}
+
+.cookie-banner .accept,
+.cookie-banner .decline {
+  padding: 10px 20px;
+  border: none;
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: 5px;
+}
+
+.cookie-banner .accept {
+  background-color: #208836;
+  color: white;
+  margin-right: 30px;
+}
+
+.cookie-banner .decline {
+  background-color: #df3e3e;
+  color: white;
+}
+
+.cookie-banner button:hover {
+  opacity: 0.8;
+}

client/src/Components/CookieBanner/CookieBanner.js

@@ -0,0 +1,60 @@
+import React, { useState, useEffect } from "react";
+import "./CookieBanner.css";
+
+const CookieBanner = () => {
+  const [accepted, setAccepted] = useState(false);
+
+  const handleAccept = () => {
+    const expirationDays = 1;
+    const expirationTime = new Date(
+      new Date().getTime() + expirationDays * 24 * 60 * 60 * 1000
+    );
+    localStorage.setItem("cookiesAccepted", true);
+    localStorage.setItem("cookiesExpiration", expirationTime.toISOString());
+    setAccepted(true);
+    console.log("Cookies accepted");
+  };
+
+  const handleDecline = () => {
+    localStorage.removeItem("cookiesAccepted");
+    localStorage.removeItem("cookiesExpiration");
+    setAccepted(false);
+    console.log("Cookies declined");
+  };
+
+  useEffect(() => {
+    const cookiesAccepted = localStorage.getItem("cookiesAccepted");
+    const cookiesExpiration = localStorage.getItem("cookiesExpiration");
+    const isCookieExpired = new Date(cookiesExpiration) < new Date();
+
+    console.log("cookiesAccepted:", cookiesAccepted);
+    console.log("cookiesExpiration:", cookiesExpiration);
+    console.log("isCookieExpired:", isCookieExpired);
+
+    if (cookiesAccepted && !isCookieExpired) {
+      setAccepted(true);
+    }
+  }, []);
+
+  if (accepted) {
+    return null;
+  }
+
+  return (
+    <div className="cookie-banner">
+      <p>
+        We use cookies to personalize content and ads, to provide social media
+        features, and to analyze our traffic. By continuing to use our site, you
+        accept our use of cookies.
+      </p>
+      <button className="accept" onClick={handleAccept}>
+        Accept
+      </button>
+      <button className="decline" onClick={handleDecline}>
+        Decline
+      </button>
+    </div>
+  );
+};
+
+export default CookieBanner;

client/src/Pages/ForgotPassword.jsx

@@ -0,0 +1,53 @@
+// ForgotPasswordPage.jsx
+import React, { useState } from "react";
+import { Container, Typography, TextField, Button } from "@mui/material";
+import axios from "axios";
+
+const ForgotPasswordPage = () => {
+  const [email, setEmail] = useState("");
+  const [message, setMessage] = useState("");
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      const response = await axios.post(
+        "http://localhost:8080/auth/password/forgot",
+        { email }
+      );
+      setMessage(response.data.message);
+    } catch (error) {
+      setMessage(error.response.data.message);
+    }
+  };
+
+  return (
+    <Container maxWidth="xl">
+      <div style={{ marginTop: "100px", marginBottom: "180px" }}>
+        <Typography variant="h5" align="center" gutterBottom>
+          Forgot Password
+        </Typography>
+        <form onSubmit={handleSubmit} style={{ textAlign: "center" }}>
+          <TextField
+            label="Email"
+            fullWidth
+            variant="outlined"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            margin="normal"
+          />
+          <Button variant="contained" type="submit" sx={{ mt: 2 }}>
+            Submit
+          </Button>
+        </form>
+        {message && (
+          <Typography color="primary" align="center">
+            {message}
+          </Typography>
+        )}
+      </div>
+    </Container>
+  );
+};
+
+export default ForgotPasswordPage;