Index: my-react-app/package-lock.json
===================================================================
--- my-react-app/package-lock.json	(revision db39d9efed86ed42d87bc8fef5803a0b89a39dd8)
+++ my-react-app/package-lock.json	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
@@ -14,4 +14,5 @@
         "axios": "^1.6.7",
         "bootstrap": "^5.3.2",
+        "jwt-decode": "^4.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -12268,4 +12269,12 @@
       }
     },
+    "node_modules/jwt-decode": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
+      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
Index: my-react-app/package.json
===================================================================
--- my-react-app/package.json	(revision db39d9efed86ed42d87bc8fef5803a0b89a39dd8)
+++ my-react-app/package.json	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
@@ -9,4 +9,5 @@
     "axios": "^1.6.7",
     "bootstrap": "^5.3.2",
+    "jwt-decode": "^4.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
Index: my-react-app/src/App.js
===================================================================
--- my-react-app/src/App.js	(revision db39d9efed86ed42d87bc8fef5803a0b89a39dd8)
+++ my-react-app/src/App.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
@@ -1,3 +1,3 @@
-import {BrowserRouter as Router, Route, Routes, useNavigate} from 'react-router-dom';
+import {BrowserRouter as Router, Navigate, Route, Routes, useNavigate} from 'react-router-dom';
 import Customers from './components/Customers';
 import Layout from "./components/Layout";
@@ -14,8 +14,22 @@
 import { CuisineContext } from './components/CuisineContext';
 import RestaurantInfo from "./components/RestaurantInfo";
-import LoginForm from "./components/Login";
+import AuthForm from "./components/AuthForm";
 import AppContent from "./components/AppContent";
+import ReservationHistory from "./components/ReservationHistory";
+
+const ProtectedRoute = ({ element, isAuthenticated }) => {
+    return isAuthenticated ? element : <Navigate to="/login" />;
+};
 
 const App = () => {
+    const [isAuthenticated, setIsAuthenticated] = React.useState(false);
+
+    React.useEffect(() => {
+        const token = localStorage.getItem('token');
+        if (token) {
+            setIsAuthenticated(true);
+        }
+    }, []);
+
     return (
         <Router>
@@ -23,21 +37,22 @@
                 <Routes>
                     <Route path="/" element={<Home />} />
-                    <Route path="/customers" element={<Customers />} />
-                    <Route path="/customers/add" element={<CustomerFormContainer/>} />
-                    <Route path="/customers/:id" element={<CustomerDetails />} />
-                    <Route path="/customers/edit/:id" element={<CustomerFormContainer/>} />
-                    <Route path="/restaurants" element={<Restaurants />} />
-                    <Route path="/restaurants/:id" element={<RestaurantDetails />} />
-                    <Route path="/reservations" element={<Reservations />} />
-                    <Route path="/reservationConfirmation/:tableNumber/:timeSlot/:restaurantId" element={<ReservationConfirmation />} />
-                    <Route path="/reservations/reservationEdit/:reservationId" element={<ReservationEdit />} />
-                    <Route path="/login" element={<LoginForm/>}/>
-                    <Route path="/error" element={<ErrorPage/>}/>
+                    <Route path="/customers" element={<ProtectedRoute isAuthenticated={isAuthenticated} element={<Customers />} />} />
+                    <Route path="/customers/add" element={<ProtectedRoute isAuthenticated={isAuthenticated} element={<CustomerFormContainer />} />} />
+                    <Route path="/customers/:id" element={<ProtectedRoute isAuthenticated={isAuthenticated} element={<CustomerDetails />} />} />
+                    <Route path="/customers/edit/:id" element={<ProtectedRoute isAuthenticated={isAuthenticated} element={<CustomerFormContainer />} />} />
+                    <Route path="/restaurants" element={<ProtectedRoute isAuthenticated={isAuthenticated} element={<Restaurants />} />} />
+                    <Route path="/restaurants/:id" element={<ProtectedRoute isAuthenticated={isAuthenticated} element={<RestaurantDetails />} />} />
+                    <Route path="/reservations" element={<ProtectedRoute isAuthenticated={isAuthenticated} element={<Reservations />} />} />
+                    <Route path="/reservationConfirmation/:tableNumber/:timeSlot/:restaurantId" element={<ProtectedRoute isAuthenticated={isAuthenticated} element={<ReservationConfirmation />} />} />
+                    <Route path="/reservations/reservationEdit/:reservationId" element={<ProtectedRoute isAuthenticated={isAuthenticated} element={<ReservationEdit />} />} />
+                    <Route path="/reservations-past" element={<ProtectedRoute isAuthenticated={isAuthenticated} element={<ReservationHistory />} />} />
+                    <Route path="/login" element={<AuthForm setIsAuthenticated={setIsAuthenticated} />} />
+
+                    <Route path="/error" element={<ErrorPage />} />
                 </Routes>
-                <AppContent/>
             </Layout>
         </Router>
     );
-}
+};
 
 
@@ -149,5 +164,5 @@
 
         try {
-            const response = await axios.post('http://localhost:8080/api/search', data);
+            const response = await axios.post('http://localhost:8081/api/search', data);
             const filteredRestaurants = response.data;
             setFilteredRestaurants(filteredRestaurants);
@@ -163,5 +178,5 @@
         const cuisineName = cuisine.replace('Searching by cuisine: ', '');
         try {
-            const response = await axios.post(`http://localhost:8080/api/search/shortcut/${cuisineName}`, cuisineName);
+            const response = await axios.post(`http://localhost:8081/api/search/shortcut/${cuisineName}`, cuisineName);
             console.log(response.data);
             setFilteredRestaurants(response.data)
Index: my-react-app/src/axios_helper.js
===================================================================
--- my-react-app/src/axios_helper.js	(revision db39d9efed86ed42d87bc8fef5803a0b89a39dd8)
+++ my-react-app/src/axios_helper.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
@@ -1,13 +1,9 @@
 import axios from "axios";
 import data from "bootstrap/js/src/dom/data";
-axios.defaults.baseURL = 'http://localhost:8080'
+axios.defaults.baseURL = 'http://localhost:8081'
 axios.defaults.headers.post["Content-Type"] = 'application/json'
 
 export const getAuthToken = () => {
     return window.localStorage.getItem("auth_token");
-}
-
-export const setAuthToken = (token) => {
-    window.localStorage.setItem("auth_token", token);
 }
 
@@ -24,2 +20,12 @@
     })
 }
+
+export const setAuthToken = (token) => {
+    if (token) {
+        axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+        localStorage.setItem('token', token);
+    } else {
+        delete axios.defaults.headers.common['Authorization'];
+        localStorage.removeItem('token');
+    }
+};
Index: my-react-app/src/components/AppContent.js
===================================================================
--- my-react-app/src/components/AppContent.js	(revision db39d9efed86ed42d87bc8fef5803a0b89a39dd8)
+++ my-react-app/src/components/AppContent.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
@@ -1,56 +1,93 @@
-import * as React from "react";
+import React from "react";
+import axios from "axios";
 import WelcomeContent from "./WelcomeContent";
 import AuthContent from "./AuthContent";
 import LoginForm from "./LoginForm";
-import { request, setAuthToken } from "../axios_helper";
-import Buttons from './Buttons'
+import AuthForm from "./AuthForm";
+import Buttons from './Buttons';
+import restaurants from "./Restaurants";
 
-export default class AppContent extends React.Component {
+class AppContent extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            componentToShow: "welcome"
+            componentToShow: "welcome",
+            isAuthenticated: false,
+            user: null,
+            loading: false // Add loading state
         };
+    }
+
+    componentDidMount() {
+        const token = localStorage.getItem('token');
+        console.log(token);
+        if (token) {
+            this.setAuthToken(token);
+            this.setState({ componentToShow: "restaurants", isAuthenticated: true });
+        }
+    }
+
+    fetchUserDetails = (token) => {
+        console.log("Fetch");
+        axios.get("/api/user")
+            .then((response) => {
+                this.setState({ user: response.data, componentToShow: "restaurants", isAuthenticated: true });
+            })
+            .catch((error) => {
+                console.error("Failed to fetch user details:", error);
+                this.logout();
+            });
     };
 
     login = () => {
-        this.setState({componentToShow: "login"})
+        this.setState({ componentToShow: "login" });
     }
 
     logout = () => {
-        this.setState({componentToShow: "welcome"})
+        localStorage.removeItem('token');
+        this.setAuthToken(null);
+        this.setState({ componentToShow: "welcome", isAuthenticated: false });
     }
 
     onLogin = (e, email, password) => {
         e.preventDefault();
-        request(
-            "POST",
-            "/api/login",
-            {email: email, password: password}
-        ).then((response) => {
-            this.setState({componentToShow: "restaurants"})
-            setAuthToken(response.data.token);
-        }).catch((error) => {
-            this.setState({componentToShow: "welcome"})
-        });
+        // After successful login, save the token
+        axios.post("/api/login", { email, password })
+            .then((response) => {
+                const token = response.data.token;
+                localStorage.setItem('token', token);  // Save the token
+                console.log(token);
+                this.setAuthToken(token);  // Set the token for future requests
+                this.setState({ componentToShow: "restaurants", isAuthenticated: true });
+            })
+            .catch((error) => {
+                console.error("Login failed:", error);
+                this.setState({ componentToShow: "welcome" });
+            });
+
     };
 
     onRegister = (e, firstName, lastName, email, password) => {
         e.preventDefault();
-        request(
-            "POST",
-            "/api/register",
-            {
-                firstName: firstName,
-                lastName: lastName,
-                email: email,
-                password: password
-            }
-        ).then((response) => {
-            this.setState({componentToShow: "restaurants"})
-            setAuthToken(response.data.token);
-        }).catch((error) => {
-            this.setState({componentToShow: "welcome"})
-        });
+        axios.post("/api/register", { firstName, lastName, email, password })
+            .then((response) => {
+                const token = response.data.token;
+                localStorage.setItem('token', token);
+                console.log(token);
+                this.setAuthToken(token);
+                this.fetchUserDetails(token);
+            })
+            .catch((error) => {
+                this.setState({ componentToShow: "welcome" });
+                console.error(error);
+            });
+    };
+
+    setAuthToken = (token) => {
+        if (token) {
+            axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
+        } else {
+            delete axios.defaults.headers.common["Authorization"];
+        }
     };
 
@@ -58,10 +95,14 @@
         return (
             <div>
-                <Buttons login={this.login} logout={this.logout}></Buttons>
-                {this.state.componentToShow === "welcome" && <WelcomeContent/>}
-                {this.state.componentToShow === "restaurants" && <AuthContent/>}
-                {this.state.componentToShow === "login" && <LoginForm onLogin={this.onLogin} onRegister={this.onRegister}/>}
+                <Buttons login={this.login} logout={this.logout} />
+                {this.state.componentToShow === "welcome" && <WelcomeContent />}
+                {this.state.componentToShow === "restaurants" && <AuthContent />}
+                {this.state.componentToShow === "login" && <LoginForm onLogin={this.onLogin} onRegister={this.onRegister} />}
+                {this.state.loading && <div>Loading...</div>} {/* Show loading state */}
             </div>
-        )
+        );
     }
 }
+
+
+export default AppContent;
Index: my-react-app/src/components/AuthContent.js
===================================================================
--- my-react-app/src/components/AuthContent.js	(revision db39d9efed86ed42d87bc8fef5803a0b89a39dd8)
+++ my-react-app/src/components/AuthContent.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
@@ -28,5 +28,5 @@
                         <p>Cuisine Type: {restaurant.cuisineType}</p>
                         <p>Address: {restaurant.address}</p>
-
+                        <p>User: {}</p>
                     </div>
                 ))}
Index: my-react-app/src/components/AuthForm.js
===================================================================
--- my-react-app/src/components/AuthForm.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
+++ my-react-app/src/components/AuthForm.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
@@ -0,0 +1,204 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import { useNavigate } from 'react-router-dom';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import classNames from 'classnames';
+import MembershipsEnum from './MembershipsEnum';
+
+const AuthForm = () => {
+    const navigate = useNavigate();
+    const [activeTab, setActiveTab] = useState('login');
+    const [credentials, setCredentials] = useState({
+        firstName: '',
+        lastName: '',
+        email: '',
+        password: '',
+        phone: '',
+        address: '',
+        membershipLevel: ''
+    });
+    const [error, setError] = useState('');
+
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setCredentials({ ...credentials, [name]: value });
+    };
+
+    const handleLogin = async (e) => {
+        e.preventDefault();
+        try {
+            const response = await axios.post('http://localhost:8081/api/login', {
+                email: credentials.email,
+                password: credentials.password
+            });
+
+            const { token } = response.data;
+            localStorage.setItem('token', token);
+            navigate('/');
+        } catch (err) {
+            setError('Login failed. Please check your credentials.');
+        }
+    };
+
+    const handleRegister = async (e) => {
+        e.preventDefault();
+        try {
+            await axios.post('http://localhost:8081/api/register', {
+                firstName: credentials.firstName,
+                lastName: credentials.lastName,
+                email: credentials.email,
+                password: credentials.password,
+                phone: credentials.phone,
+                address: credentials.address,
+                membershipLevel: credentials.membershipLevel
+            });
+            setActiveTab('login');
+            alert('Registration successful. Please log in.');
+        } catch (err) {
+            setError('Registration failed. Please try again.');
+        }
+    };
+
+    return (
+        <div className="container mt-5">
+            <ul className="nav nav-pills nav-justified mb-3">
+                <li className="nav-item">
+                    <button
+                        className={classNames('nav-link', { active: activeTab === 'login' })}
+                        onClick={() => setActiveTab('login')}
+                    >
+                        Login
+                    </button>
+                </li>
+                <li className="nav-item">
+                    <button
+                        className={classNames('nav-link', { active: activeTab === 'register' })}
+                        onClick={() => setActiveTab('register')}
+                    >
+                        Register
+                    </button>
+                </li>
+            </ul>
+
+            {activeTab === 'login' && (
+                <form onSubmit={handleLogin}>
+                    <div className="form-outline mb-4">
+                        <input
+                            type="email"
+                            name="email"
+                            className="form-control"
+                            placeholder="Email"
+                            value={credentials.email}
+                            onChange={handleChange}
+                            required
+                        />
+                    </div>
+                    <div className="form-outline mb-4">
+                        <input
+                            type="password"
+                            name="password"
+                            className="form-control"
+                            placeholder="Password"
+                            value={credentials.password}
+                            onChange={handleChange}
+                            required
+                        />
+                    </div>
+                    {error && <div className="text-danger mb-3">{error}</div>}
+                    <button type="submit" className="btn btn-primary w-100">Login</button>
+                </form>
+            )}
+
+            {activeTab === 'register' && (
+                <form onSubmit={handleRegister}>
+                    <div className="form-outline mb-4">
+                        <input
+                            type="text"
+                            name="firstName"
+                            className="form-control"
+                            placeholder="First Name"
+                            value={credentials.firstName}
+                            onChange={handleChange}
+                            required
+                        />
+                    </div>
+                    <div className="form-outline mb-4">
+                        <input
+                            type="text"
+                            name="lastName"
+                            className="form-control"
+                            placeholder="Last Name"
+                            value={credentials.lastName}
+                            onChange={handleChange}
+                            required
+                        />
+                    </div>
+                    <div className="form-outline mb-4">
+                        <input
+                            type="email"
+                            name="email"
+                            className="form-control"
+                            placeholder="Email"
+                            value={credentials.email}
+                            onChange={handleChange}
+                            required
+                        />
+                    </div>
+                    <div className="form-outline mb-4">
+                        <input
+                            type="password"
+                            name="password"
+                            className="form-control"
+                            placeholder="Password"
+                            value={credentials.password}
+                            onChange={handleChange}
+                            required
+                        />
+                    </div>
+                    <div className="form-outline mb-4">
+                        <input
+                            type="text"
+                            name="phone"
+                            className="form-control"
+                            placeholder="Phone"
+                            value={credentials.phone}
+                            onChange={handleChange}
+                            required
+                        />
+                    </div>
+                    <div className="form-outline mb-4">
+                        <input
+                            type="text"
+                            name="address"
+                            className="form-control"
+                            placeholder="Address"
+                            value={credentials.address}
+                            onChange={handleChange}
+                            required
+                        />
+                    </div>
+                    <div className="form-outline mb-4">
+                        <select
+                            name="membershipLevel"
+                            className="form-control"
+                            value={credentials.membershipLevel}
+                            onChange={handleChange}
+                            required
+                        >
+                            <option value="">Select Membership Type</option>
+                            {MembershipsEnum().map((membership, index) => (
+                                <option key={index} value={membership}>
+                                    {membership}
+                                </option>
+                            ))}
+                        </select>
+                    </div>
+                    {error && <div className="text-danger mb-3">{error}</div>}
+                    <button type="submit" className="btn btn-success w-100">Register</button>
+                </form>
+            )}
+        </div>
+    );
+};
+
+export default AuthForm;
Index: my-react-app/src/components/CuisineContext.js
===================================================================
--- my-react-app/src/components/CuisineContext.js	(revision db39d9efed86ed42d87bc8fef5803a0b89a39dd8)
+++ my-react-app/src/components/CuisineContext.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
@@ -10,5 +10,5 @@
         const fetchCuisineTypes = async () => {
             try {
-                const response = await axios.get('http://localhost:8080/api/cuisineTypes');
+                const response = await axios.get('http://localhost:8081/api/cuisineTypes');
                 setCuisineTypes(response.data);
             } catch (error) {
Index: my-react-app/src/components/CustomerContext.js
===================================================================
--- my-react-app/src/components/CustomerContext.js	(revision db39d9efed86ed42d87bc8fef5803a0b89a39dd8)
+++ my-react-app/src/components/CustomerContext.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
@@ -10,5 +10,5 @@
         const fetchCustomers = async () => {
             try {
-                const response = await axios.get("http://localhost:8080/api/customers");
+                const response = await axios.get("http://localhost:8081/api/customers");
                 setCustomers(response.data)
             } catch (error) {
Index: my-react-app/src/components/CustomerDetails.js
===================================================================
--- my-react-app/src/components/CustomerDetails.js	(revision db39d9efed86ed42d87bc8fef5803a0b89a39dd8)
+++ my-react-app/src/components/CustomerDetails.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
@@ -10,5 +10,5 @@
         const fetchCustomer = async () => {
             try {
-                const response = await axios.get(`http://localhost:8080/api/customers/${id}`);
+                const response = await axios.get(`http://localhost:8081/api/customers/${id}`);
                 setCustomer(response.data);
             } catch (error) {
Index: my-react-app/src/components/CustomerFormContainer.js
===================================================================
--- my-react-app/src/components/CustomerFormContainer.js	(revision db39d9efed86ed42d87bc8fef5803a0b89a39dd8)
+++ my-react-app/src/components/CustomerFormContainer.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
@@ -26,5 +26,5 @@
             const fetchCustomer = async () => {
                 try {
-                    const response = await axios.get(`http://localhost:8080/api/customers/${id}`);
+                    const response = await axios.get(`http://localhost:8081/api/customers/${id}`);
                     const customerData = response.data;
                     setFormData({
@@ -54,7 +54,7 @@
         try {
             if (customer) {
-                await axios.put(`http://localhost:8080/api/customers/edit/${customer.id}`, formData);
+                await axios.put(`http://localhost:8081/api/customers/edit/${customer.id}`, formData);
             } else {
-                await axios.post("http://localhost:8080/api/customers", formData);
+                await axios.post("http://localhost:8081/api/customers", formData);
             }
             navigate("/customers");
Index: my-react-app/src/components/Customers.js
===================================================================
--- my-react-app/src/components/Customers.js	(revision db39d9efed86ed42d87bc8fef5803a0b89a39dd8)
+++ my-react-app/src/components/Customers.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
@@ -26,5 +26,5 @@
     const handleDeleteClick = async (customerId) => {
         try {
-            await axios.delete(`http://localhost:8080/api/customers/delete/${customerId}`);
+            await axios.delete(`http://localhost:8081/api/customers/delete/${customerId}`);
             setCustomers(customers.filter(customer => customer.customerID !== customerId));
             window.location.reload();
@@ -48,6 +48,5 @@
                                     <p className="card-text"><strong>Phone:</strong> {customer.phone}</p>
                                     <p className="card-text"><strong>Address:</strong> {customer.address}</p>
-                                    <p className="card-text"><strong>Membership
-                                        Level:</strong> {customer.membershipLevel}</p>
+                                    <p className="card-text"><strong>Membership Level:</strong> {customer.membershipLevel}</p>
                                     {/*<p className="card-text"><strong>Registration*/}
                                     {/*    Date:</strong> {new Date(customer.registrationDate).toLocaleString()}</p>*/}
Index: my-react-app/src/components/Header.js
===================================================================
--- my-react-app/src/components/Header.js	(revision db39d9efed86ed42d87bc8fef5803a0b89a39dd8)
+++ my-react-app/src/components/Header.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
@@ -1,6 +1,18 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 
 const Header = () => {
+    const navigate = useNavigate();
+
+    // Check if the user is logged in by looking for a token in localStorage
+    const isLoggedIn = localStorage.getItem('token');
+
+    const handleLogout = () => {
+        // Clear the token from localStorage
+        localStorage.removeItem('token');
+        // Redirect to the home page or login page after logging out
+        navigate('/login');
+    };
+
     return (
         <header className="header navbar navbar-expand-lg navbar-light bg-light">
@@ -15,10 +27,4 @@
                         </li>
                         <li className="nav-item">
-                            <Link className="nav-link" to="/customers">Customers</Link>
-                        </li>
-                        <li className="nav-item">
-                            <Link className="nav-link" to="/customers/add">Add Customer</Link>
-                        </li>
-                        <li className="nav-item">
                             <Link className="nav-link" to="/restaurants">Restaurants</Link>
                         </li>
@@ -26,6 +32,13 @@
                             <Link className="nav-link" to="/reservations">Reservations</Link>
                         </li>
+                        <li className="nav-item">
+                            <Link className="nav-link" to="/reservations-past">Reservation history</Link>
+                        </li>
                         <form className="form-inline mt-2 mt-md-0 ml-3">
-                            <Link className="btn btn-outline-info my-2 my-sm-0" to={"/login"}>Login</Link>
+                            {isLoggedIn ? (
+                                <button className="btn btn-outline-danger my-2 my-sm-0" onClick={handleLogout}>Logout</button>
+                            ) : (
+                                <Link className="btn btn-outline-info my-2 my-sm-0" to="/login">Login</Link>
+                            )}
                         </form>
                     </ul>
Index: my-react-app/src/components/Login.js
===================================================================
--- my-react-app/src/components/Login.js	(revision db39d9efed86ed42d87bc8fef5803a0b89a39dd8)
+++ my-react-app/src/components/Login.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
@@ -6,4 +6,5 @@
     const navigate = useNavigate();
     const [credentials, setCredentials] = useState({ username: '', password: '' });
+    const [error, setError] = useState('');
 
     const handleChange = (e) => {
@@ -15,10 +16,11 @@
         e.preventDefault();
         try {
-            const response = await axios.post('http://localhost:8080/api/login', {
+            const response = await axios.post('http://localhost:8081/api/login', {
                 email: credentials.username,
                 password: credentials.password
             });
             const { token } = response.data;
-            // Store token securely (e.g., using HTTP cookies)
+
+            // Store token securely (consider httpOnly cookies)
             localStorage.setItem('token', token);
 
@@ -27,7 +29,7 @@
             // Handle login failure
             console.error('Login failed:', error);
+            setError('Login failed. Please check your credentials and try again.');
         }
     };
-
 
     return (
@@ -53,4 +55,5 @@
                     />
                 </div>
+                {error && <div style={{ color: 'red' }}>{error}</div>}
                 <button type="submit">Login</button>
             </form>
Index: my-react-app/src/components/LoginForm.js
===================================================================
--- my-react-app/src/components/LoginForm.js	(revision db39d9efed86ed42d87bc8fef5803a0b89a39dd8)
+++ my-react-app/src/components/LoginForm.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
@@ -55,12 +55,15 @@
                     <div className="tab-content">
                         <div
-                            className={classNames("tab-pane", "fade", this.state.active === "login" ? "show active" : "")} id="pills-login">
+                            className={classNames("tab-pane", "fade", this.state.active === "login" ? "show active" : "")}
+                            id="pills-login">
                             <form onSubmit={this.onSubmitLogin}>
                                 <div className="form-outline mb-4">
-                                    <input type="email" id="email" name="email" className="form-control" onChange={this.onChangeHandler}/>
+                                    <input type="email" id="email" name="email" className="form-control"
+                                           onChange={this.onChangeHandler}/>
                                     <label className="form-label" htmlFor="email">Email</label>
                                 </div>
                                 <div className="form-outline mb-4">
-                                    <input type="password" id="loginPassword" name="password" className="form-control" onChange={this.onChangeHandler}/>
+                                    <input type="password" id="loginPassword" name="password" className="form-control"
+                                           onChange={this.onChangeHandler}/>
                                     <label className="form-label" htmlFor="loginPassword">Password</label>
                                 </div>
@@ -71,24 +74,29 @@
 
                         <div
-                            className={classNames("tab-pane", "fade", this.state.active === "register" ? "show active" : "")} id="pills-register">
+                            className={classNames("tab-pane", "fade", this.state.active === "register" ? "show active" : "")}
+                            id="pills-register">
                             <form onSubmit={this.onSubmitRegister}>
                                 <div className="form-outline mb-4">
-                                    <input type="text" id="firstName" name="firstName" className="form-control" onChange={this.onChangeHandler}/>
+                                    <input type="text" id="firstName" name="firstName" className="form-control"
+                                           onChange={this.onChangeHandler}/>
                                     <label className="form-label" htmlFor="firstName">First Name</label>
                                 </div>
                                 <div className="form-outline mb-4">
-                                    <input type="text" id="lastName" name="lastName" className="form-control" onChange={this.onChangeHandler}/>
+                                    <input type="text" id="lastName" name="lastName" className="form-control"
+                                           onChange={this.onChangeHandler}/>
                                     <label className="form-label" htmlFor="lastName">Last Name</label>
                                 </div>
                                 <div className="form-outline mb-4">
-                                    <input type="text" id="email" name="email" className="form-control" onChange={this.onChangeHandler}/>
+                                    <input type="email" id="email" name="email" className="form-control"
+                                           onChange={this.onChangeHandler}/>
                                     <label className="form-label" htmlFor="email">Email</label>
                                 </div>
                                 <div className="form-outline mb-4">
-                                    <input type="password" id="loginPassword" name="password" className="form-control" onChange={this.onChangeHandler}/>
+                                    <input type="password" id="loginPassword" name="password" className="form-control"
+                                           onChange={this.onChangeHandler}/>
                                     <label className="form-label" htmlFor="loginPassword">Password</label>
                                 </div>
 
-                                <button type="submit" className="btn btn-primary btn-block mb-4">Sign In</button>
+                                <button type="submit" className="btn btn-primary btn-block mb-4">Register</button>
                             </form>
                         </div>
@@ -96,5 +104,6 @@
                 </div>
             </div>
-        )
+        );
+
     }
 }
Index: my-react-app/src/components/MembershipsEnum.js
===================================================================
--- my-react-app/src/components/MembershipsEnum.js	(revision db39d9efed86ed42d87bc8fef5803a0b89a39dd8)
+++ my-react-app/src/components/MembershipsEnum.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
@@ -3,21 +3,5 @@
 
 const MembershipsEnum = () => {
-    const [memberships, setMemberships] = useState([]);
-
-    useEffect(() => {
-        const fetchMemberships = async () => {
-            try {
-                const response = await axios.get('http://localhost:8080/api/memberships');
-                // Assuming the response.data is an array of enum values
-                setMemberships(response.data);
-            } catch (error) {
-                console.error('Error fetching enum data:', error);
-            }
-        };
-
-        fetchMemberships();
-    }, []);
-
-    return memberships;
+    return ['GOLD', 'PLATINUM', 'STANDARD'];
 };
 
Index: my-react-app/src/components/ReservationConfirmation.js
===================================================================
--- my-react-app/src/components/ReservationConfirmation.js	(revision db39d9efed86ed42d87bc8fef5803a0b89a39dd8)
+++ my-react-app/src/components/ReservationConfirmation.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
@@ -3,4 +3,5 @@
 import axios from 'axios';
 import { useNavigate } from 'react-router-dom';
+import {jwtDecode} from "jwt-decode";
 
 const ReservationConfirmation = () => {
@@ -17,8 +18,8 @@
         const fetchTableDetails = async () => {
             try {
-                const tableResponse = await axios.get(`http://localhost:8080/api/tables/${tableNumber}`);
+                const tableResponse = await axios.get(`http://localhost:8081/api/tables/${tableNumber}`);
                 setTable(tableResponse.data);
 
-                const restaurantResponse = await axios.get(`http://localhost:8080/api/restaurants/${restaurantId}`);
+                const restaurantResponse = await axios.get(`http://localhost:8081/api/restaurants/${restaurantId}`);
                 setRestaurant(restaurantResponse.data);
             } catch (error) {
@@ -31,22 +32,39 @@
     const handleSubmit = async (e) => {
         e.preventDefault();
-        // Handle form submission here
+
+        if (!restaurant || !table) {
+            console.error("Restaurant or table is missing.");
+            return;
+        }
+
         try {
-            // Check if restaurant and table are valid
-            if (!restaurant || !table) {
-                console.error("Restaurant or table is missing.");
+            const token = localStorage.getItem("token");
+            if (!token) {
+                console.error("No token found");
                 return;
             }
 
-            const response = await axios.post(`http://localhost:8080/api/reservations`, {
-                restaurant: restaurant, // Assuming restaurant has an 'id' property
-                table: table, // Assuming table has an 'id' property
-                checkInTime: timeSlot, // Fill in as needed
-                partySize: partySize,
-                specialRequests: specialRequests
-            });
-            // Handle successful reservation creation
-            // console.log("Reservation created:", response.data);
-            navigate("/reservations")
+            // Decode the token to get the user email
+            const decodedToken = jwtDecode(token);
+            console.log(decodedToken)
+            const userId = decodedToken.iss;// Assuming the email is part of the decoded JWT token
+
+            const response = await axios.post(
+                `http://localhost:8081/api/reservations/${userId}`,
+                {
+                    restaurant: restaurant,
+                    table: table,
+                    checkInTime: timeSlot,
+                    partySize: partySize,
+                    specialRequests: specialRequests
+                },
+                {
+                    headers: {
+                        Authorization: `Bearer ${token}` // Include the token here
+                    }
+                }
+            );
+
+            navigate("/reservations");
         } catch (error) {
             console.error("Error creating reservation:", error);
Index: my-react-app/src/components/ReservationEdit.js
===================================================================
--- my-react-app/src/components/ReservationEdit.js	(revision db39d9efed86ed42d87bc8fef5803a0b89a39dd8)
+++ my-react-app/src/components/ReservationEdit.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
@@ -3,4 +3,5 @@
 import {useNavigate, useParams} from 'react-router-dom';
 import StarRating from "./StarRating";
+import {jwtDecode} from "jwt-decode";
 
 const ReservationEdit = () => {
@@ -14,4 +15,5 @@
     const [timeSlots, setTimeSlots] = useState([]);
     const [filteredTimeSlots, setFilteredTimeSlots] = useState([]);
+    const [checkInTime, setCheckInTime] = useState([]);
 
     useEffect(() => {
@@ -19,6 +21,7 @@
             try {
                 setIsLoading(true);
-                const response = await axios.get(`http://localhost:8080/api/reservations/${reservationId}`);
-                setFormData(response.data); // Set form data with reservation data
+                const response = await axios.get(`http://localhost:8081/api/reservations/${reservationId}`);
+                setCheckInTime(response.data.checkInTime)
+                setFormData(response.data);
                 setTable(response.data.table);
                 setRestaurant(response.data.restaurant);
@@ -56,8 +59,18 @@
     const handleSubmit = async (e) => {
         e.preventDefault();
+
         try {
-            // Send updated reservation data to the server
-            await axios.post(`http://localhost:8080/api/reservations/${reservationId}`, formData);
-            // Redirect or show success message
+            const token = localStorage.getItem("token");
+            if (!token) {
+                console.error("No token found");
+                return;
+            }
+
+            const decodedToken = jwtDecode(token);
+            console.log(decodedToken)
+            const userId = decodedToken.iss;
+
+            await axios.post(`http://localhost:8081/api/reservations/${reservationId}/${userId}`, formData);
+
             navigate(`/reservations`)
         } catch (error) {
@@ -71,4 +84,11 @@
         const formattedTime = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
         return `${formattedDate} - ${formattedTime}`;
+    };
+
+    const formatCurrentTimeSlot = (timeSlot) => {
+        const date = new Date(timeSlot);
+        const formattedDate = date.toLocaleDateString('en-GB'); // Format date as YYYY-MM-DD
+        const formattedTime = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); // Format time as HH:MM
+        return `${formattedDate} ${formattedTime}`;
     };
 
@@ -100,4 +120,5 @@
                                 ))}
                             </select>
+                            <label className=".text-danger">Current check in time: {formatTimeSlot(checkInTime)}</label>
                         </div>
                         <div className="mb-3">
Index: my-react-app/src/components/ReservationHistory.js
===================================================================
--- my-react-app/src/components/ReservationHistory.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
+++ my-react-app/src/components/ReservationHistory.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from "react";
+import {jwtDecode} from "jwt-decode";
+import axios from "axios";
+
+const ReservationHistory = () => {
+    const [reservations, setReservations] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        const fetchReservations = async () => {
+            try {
+                const token = localStorage.getItem("token");
+                if (!token) {
+                    setError("User not authenticated.");
+                    setLoading(false);
+                    return;
+                }
+
+                const decodedToken = jwtDecode(token);
+                const userId = decodedToken.iss;
+
+                const response = await axios.get(
+                    `http://localhost:8081/api/past-reservations/${userId}`,
+                    {
+                        headers: { Authorization: `Bearer ${token}` },
+                    }
+                );
+
+                setReservations(response.data);
+            } catch (err) {
+                setError("Failed to fetch reservations.");
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchReservations();
+    }, []);
+
+    if (loading) return <div>Loading...</div>;
+    if (error) return <div className="alert alert-danger">{error}</div>;
+
+    return (
+        <div className="container mt-5">
+            <h3>Past Reservations</h3>
+            <table className="table table-bordered">
+                <thead className="thead-dark">
+                <tr>
+                    <th>#</th>
+                    <th>Restaurant</th>
+                    <th>Table</th>
+                    <th>Date & Time</th>
+                    <th>Party Size</th>
+                    <th>Special Requests</th>
+                    <th>Status</th>
+                    <th>Cancellation Reason</th>
+                </tr>
+                </thead>
+                <tbody>
+                {reservations.map((res, index) => (
+                    <tr key={res.id}>
+                        <td>{index + 1}</td>
+                        <td>{res.restaurant?.name || "N/A"}</td>
+                        <td>{res.table?.id || "N/A"}</td>
+                        <td>{new Date(res.reservationDateTime).toLocaleString()}</td>
+                        <td>{res.partySize}</td>
+                        <td>{res.specialRequests || "None"}</td>
+                        <td>{res.status}</td>
+                        <td>{res.cancellationReason || "None"}</td>
+                    </tr>
+                ))}
+                </tbody>
+            </table>
+        </div>
+    );
+};
+
+export default ReservationHistory;
Index: my-react-app/src/components/Reservations.js
===================================================================
--- my-react-app/src/components/Reservations.js	(revision db39d9efed86ed42d87bc8fef5803a0b89a39dd8)
+++ my-react-app/src/components/Reservations.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
@@ -3,4 +3,5 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
 import {useNavigate} from "react-router-dom";
+import {jwtDecode} from "jwt-decode";
 
 
@@ -13,5 +14,14 @@
         const fetchReservations = async () => {
             try {
-                const response = await axios.get('http://localhost:8080/api/reservations'); // Adjust URL as needed
+                const token = localStorage.getItem("token");
+                if (!token) {
+                    console.error("No token found");
+                    return;
+                }
+                const decodedToken = jwtDecode(token);
+                console.log(decodedToken)
+                const userId = decodedToken.iss;
+
+                const response = await axios.get(`http://localhost:8081/api/reservations/by/${userId}`);
                 setReservations(response.data);
             } catch (error) {
@@ -31,5 +41,5 @@
     const handleCancelReservation = async (reservationID) => {
         try {
-            await axios.delete(`http://localhost:8080/api/reservations/delete/${reservationID}`);
+            await axios.delete(`http://localhost:8081/api/reservations/delete/${reservationID}`);
             setReservations(reservations.filter(reservation => reservation.reservationID !== reservationID));
             alert('Reservation canceled successfully!');
Index: my-react-app/src/components/RestaurantContext.js
===================================================================
--- my-react-app/src/components/RestaurantContext.js	(revision db39d9efed86ed42d87bc8fef5803a0b89a39dd8)
+++ my-react-app/src/components/RestaurantContext.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
@@ -10,5 +10,5 @@
         const fetchRestaurants = async () => {
             try {
-                const response = await axios.get('http://localhost:8080/api/restaurants');
+                const response = await axios.get('http://localhost:8081/api/restaurants');
                 setRestaurants(response.data);
             } catch (error) {
@@ -17,5 +17,5 @@
         };
 
-        fetchRestaurants();
+        fetchRestaurants().then(r => console.log(fetchRestaurants()));
     }, []);
 
Index: my-react-app/src/components/RestaurantDetails.js
===================================================================
--- my-react-app/src/components/RestaurantDetails.js	(revision db39d9efed86ed42d87bc8fef5803a0b89a39dd8)
+++ my-react-app/src/components/RestaurantDetails.js	(revision 8ca35dc93473fb5be3777778a84fedee941c8790)
@@ -21,5 +21,5 @@
             try {
                 if (!id) return;
-                const response = await axios.get(`http://localhost:8080/api/restaurants/${id}`);
+                const response = await axios.get(`http://localhost:8081/api/restaurants/${id}`);
                 setRestaurant(response.data);
             } catch (error) {
@@ -36,5 +36,5 @@
         const fetchTableDetails = async () => {
             try {
-                const response = await axios.get(`http://localhost:8080/api/tables/${selectedTableId}`);
+                const response = await axios.get(`http://localhost:8081/api/tables/${selectedTableId}`);
                 setSelectedTable(response.data);
             } catch (error) {
