Add Privacy and Policy page with styling

frontend/package.json

@@ -36,7 +36,7 @@
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.2",
+    "@vitejs/plugin-react": "^4.3.3",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.9.0",
     "eslint-plugin-react": "^7.35.0",

frontend/src/App.jsx

@@ -24,43 +24,44 @@ import HelpAndSupport from "./Pages/HelpandSupport";
 import Emergency from "./Pages/Emergency";
 import AboutUs from "./Pages/AboutUs";
 import Error from "./Pages/Error";
-import User from "./Pages/User";
+import PrivacyPolicy from "./Pages/PrivacyPolicy"; // Added back from one version
+import User from "./Pages/User"; // Added from the other version
 
 function App() {
   return (
     <>
       <Router>
         <Routes>
-          <Route path='/' element={<Herosection />} />
-          <Route path='/Login' element={<LoginPage />} />
-          <Route path='/Register' element={<Register />} />
-          <Route path='/password-recovery' element={<PasswordRecovery />} />
-          <Route path='/Stations' element={<RailwayStations />} />
-          <Route path='/Navigation' element={<NavigationPage />} />
-          <Route path='/Booking' element={<BookingPage />} />
-          <Route path='/3DMap' element={<MapPage />} />
-          <Route path='/Schedule' element={<SchedulePage />} />
-          <Route path='/Notification' element={<NotificationPage />} />
-          <Route path='/chatbot' element={<Chatbot />} />
-          <Route path='/ContactUs' element={<ContactUs />} />
-          <Route path='/Settings' element={<Settings />} />
-          <Route path='/help' element={<Help />} />
-          <Route path='/about' element={<About />} />
-          <Route path='/contributor' element={<Contributor />} />
-          <Route path='/payment' element={<Payment />} />
-          <Route path='/aboutus' element={<AboutUs />} />
-          <Route path='/emergency' element={<Emergency />} />
-          <Route path='/help-and-support' element={<HelpAndSupport />} />
-          <Route path='/help-and-support' element={<HelpAndSupport />} />
-          <Route path='*' element={<Error />} />
-          <Route path='/user' element={<User />} />
-          {/* This route is just for testing protected routes it can be removed later when there is a route other than login or signup */}
+          <Route path="/" element={<Herosection />} />
+          <Route path="/Login" element={<LoginPage />} />
+          <Route path="/Register" element={<Register />} />
+          <Route path="/password-recovery" element={<PasswordRecovery />} />
+          <Route path="/Stations" element={<RailwayStations />} />
+          <Route path="/Navigation" element={<NavigationPage />} />
+          <Route path="/Booking" element={<BookingPage />} />
+          <Route path="/3DMap" element={<MapPage />} />
+          <Route path="/Schedule" element={<SchedulePage />} />
+          <Route path="/Notification" element={<NotificationPage />} />
+          <Route path="/chatbot" element={<Chatbot />} />
+          <Route path="/ContactUs" element={<ContactUs />} />
+          <Route path="/Settings" element={<Settings />} />
+          <Route path="/help" element={<Help />} />
+          <Route path="/about" element={<About />} />
+          <Route path="/contributor" element={<Contributor />} />
+          <Route path="/payment" element={<Payment />} />
+          <Route path="/aboutus" element={<AboutUs />} />
+          <Route path="/emergency" element={<Emergency />} />
+          <Route path="/help-and-support" element={<HelpAndSupport />} />
+          <Route path="/privacy-policy" element={<PrivacyPolicy />} /> {/* Restored PrivacyPolicy */}
+          <Route path="/user" element={<User />} /> {/* Added User */}
+          <Route path="*" element={<Error />} />
         </Routes>
       </Router>
 
+      {/* Optional chatbot icon at the bottom right */}
       {/* <div className='fixed bottom-0 right-0 z-50 m-4 cursor-pointer'>
-      <img src={chatbotsvg} alt="chatbot" className='w-16 h-16' />
-    </div> */}
+        <img src={chatbotsvg} alt="chatbot" className='w-16 h-16' />
+      </div> */}
     </>
   );
 }
@@ -70,7 +71,6 @@ export default App;
 export function ProtectedRoute() {
   const navigate = useNavigate();
 
-  // Async function to verify the token
   const verifyToken = async () => {
     try {
       const res = await fetch("http://localhost:3000/auth/verify", {
@@ -82,15 +82,11 @@ export function ProtectedRoute() {
       });
 
       const data = await res.json();
-      console.log("Token Verification error:", data.error); // For debugging
+      console.log("Token Verification error:", data.error);
 
       if (data.error || res.status === 400 || res.status === 500) {
         navigate("/Login");
       }
-
-      if (res.status === 400 || res.status === 500) {
-        navigate("/Login");
-      }
     } catch (error) {
       console.error("Error verifying token:", error);
       navigate("/Login");
@@ -101,6 +97,5 @@ export function ProtectedRoute() {
     verifyToken();
   }, [navigate]);
 
-  // If everything is fine, render the protected content
   return <Outlet />;
 }

frontend/src/Pages/PrivacyPolicy.css

@@ -0,0 +1,60 @@
+
+.privacy-policy-container {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 30px 15px;
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    color: #333;
+    font-family: Arial, sans-serif;
+}
+
+.privacy-policy-header {
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+.privacy-policy-header h1 {
+    font-size: 2rem;
+    color: #007bff;
+    margin-bottom: 8px;
+}
+
+.privacy-policy-header p {
+    font-size: 1rem;
+    color: #555;
+}
+
+
+.privacy-policy-section h2 {
+    font-size: 1.5rem;
+    color: #333;
+    margin-bottom: 12px;
+    border-bottom: 2px solid #007bff;
+    padding-bottom: 4px;
+}
+
+.privacy-policy-section p {
+    font-size: 0.9rem;
+    line-height: 1.5;
+    color: #666;
+    margin-bottom: 15px;
+}
+
+.privacy-policy-section ul {
+    margin-left: 15px;
+    margin-bottom: 15px;
+}
+
+.privacy-policy-section ul li {
+    font-size: 0.9rem;
+    color: #666;
+    line-height: 1.5;
+}
+
+
+
+.privacy-policy-section a:hover {
+    text-decoration: underline;
+}

frontend/src/Pages/PrivacyPolicy.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import './PrivacyPolicy.css'; 
+
+function PrivacyPolicy() {
+  return (
+    <div className="privacy-policy-container">
+      <div className="privacy-policy-header">
+        <h1>Privacy Policy</h1>
+
+      </div>
+
+      <div className="privacy-policy-section">
+        <h2>1. Introduction</h2>
+        <p>
+          Welcome to our website. We are committed to protecting your personal information 
+          and your right to privacy. If you have any questions or concerns about our policy, 
+          or our practices with regards to your personal information, please contact us.
+        </p>
+      </div>
+
+      <div className="privacy-policy-section">
+        <h2>2. Information We Collect</h2>
+        <p>
+          We collect personal information that you voluntarily provide to us when registering 
+          on the website, expressing an interest in obtaining information about us or our 
+          products and services, when participating in activities on the website, or otherwise 
+          contacting us.
+        </p>
+        <ul>
+          <li>Personal Identification Information (Name, Email Address, Phone Number, etc.)</li>
+          <li>Payment Information (if applicable)</li>
+          <li>Technical Data (IP Address, Browser Type, etc.)</li>
+        </ul>
+      </div>
+
+      <div className="privacy-policy-section">
+        <h2>3. How We Use Your Information</h2>
+        <p>
+          We use the information we collect in the following ways:
+        </p>
+        <ul>
+          <li>To provide and manage services you have requested</li>
+          <li>To send promotional communications, with your consent</li>
+          <li>To improve our services and website functionality</li>
+        </ul>
+      </div>
+
+      <div className="privacy-policy-section">
+        <h2>4. Sharing Your Information</h2>
+        <p>
+          We may share your information in the following situations:
+        </p>
+        <ul>
+          <li>When you consent to the sharing of information</li>
+          <li>To comply with legal obligations or regulations</li>
+          <li>To protect the rights and safety of others</li>
+        </ul>
+      </div>
+
+      <div className="privacy-policy-section">
+        <h2>5. Your Privacy Rights</h2>
+        <p>
+          Depending on your location, you may have the right to access, update, or delete 
+          your personal information. Please contact us to exercise your rights.
+        </p>
+      </div>
+
+
+    </div>
+  );
+}
+
+export default PrivacyPolicy;

frontend/src/Pages/hamburger.jsx

@@ -166,6 +166,9 @@ const Hamburger = () => {
   const Contactclick = () => {
     navigate('/ContactUs');
   };
+  const privacyClick = () => {
+    navigate('/PrivacyPolicy');  // Navigate to Privacy and Policy page
+  };
 
 
 
@@ -177,7 +180,7 @@ const Hamburger = () => {
 
   const toggleMenu = () => {
     setOpen((prev) => !prev);
-  };
+  };.3
 
 
   const handleBack = () => {

frontend/src/components/Footer.jsx

@@ -0,0 +1,14 @@
+
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const Footer = () => {
+  return (
+    <footer style={{ textAlign: 'center', padding: '20px', backgroundColor: '#f1f1f1', marginTop: 'auto' }}>
+      <p>All rights reserved.</p>
+      <Link to="/privacy-policy" style={{ color: '#007bff' }}>Privacy and Policy</Link>
+    </footer>
+  );
+};
+
+export default Footer;

frontend/src/components/navbar.jsx

@@ -80,6 +80,7 @@ const Navbar = () => {
     setIsOpen(false);
   };
 
+
   const handleAboutUsClick = () => {
     navigate('/about');
     setIsOpen(false);
@@ -148,6 +149,16 @@ const Navbar = () => {
 
         {/* Footer */}
         <div className="absolute bottom-0 w-full p-4 text-sm text-center text-gray-500">
+        <a 
+    href="/privacy-policy" 
+    onClick={() => { 
+      navigate('/privacy-policy'); 
+      setIsOpen(false);
+    }}
+    className="block mb-2 text-blue-500 hover:underline"
+  >
+    Privacy and Policy
+  </a>
           App version 1.0.0.0
 
         </div>