Merge branch 'main' into user2

ReactFrontEnd/package.json

@@ -12,12 +12,15 @@
   "dependencies": {
     "@tanstack/react-query": "^5.29.0",
     "axios": "^1.6.8",
+    "context": "^3.0.29",
     "dotenv": "^16.4.5",
     "flowbite": "^2.3.0",
     "flowbite-react": "^0.7.5",
+    "global": "^4.4.0",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.4",
     "react": "^18.2.0",
+    "react-cookie": "^7.1.4",
     "react-datepicker": "^6.6.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",

ReactFrontEnd/src/App.jsx

@@ -13,6 +13,7 @@ import CreateReview from './Components/CreateReview'
 import SearchList from './Components/SearchList'
 import ParkDetails from './Components/ParkDetails'
 import Register from './Components/Register'
+import Login from './Components/Login'
 import Footer from './Components/Footer'
 
 
@@ -33,8 +34,9 @@ function App() {
           <Route path="/itinerary" element={<Itinerary />} />
           <Route path="/register" element={<Register />} />
           <Route path = "/parksearch" element = {<ParkSearch />} >
-           <Route path = "search" element = {<SearchList />} />
-          </Route> 
+            <Route path = "search" element = {<SearchList />} />
+          </ Route>    
+          <Route path ="/login" element ={<Login />} />
           <Route path="/parksearch/search/:parkcode" element={<ParkDetails/>} />
         </Routes>
       </BrowserRouter>

ReactFrontEnd/src/Components/HeaderItem.jsx

@@ -8,6 +8,7 @@ function HeaderItem({name,Icon,path}) {
   return (
     <>
         <Link to={path}>
+
           <div className="text-nps-green-200 flex items-center gap-3 
           text-[18px] font-semibold cursor-pointer hover:underline underline-offset-8">
             <Icon/>

ReactFrontEnd/src/Components/Login.jsx

@@ -3,23 +3,37 @@ import { Link } from 'react-router-dom'
 import Slideshow from './Slideshow'
 import Header from './Header'
 import axios from 'axios';
+import LoginService from '../Services/LoginService';
+const SERVER_API_BASE_URL = "http://localhost:8080/";
+const axiosInstance = axios.create({
+        withCredentials: true,
+        baseURL: SERVER_API_BASE_URL,
+        headers: {
+        "Cache-Control": "no-cache",
+        "Accept-Language": "en",
+        "Content-Type": "application/json",
+        "Access-Control-Allow-Origin": "http://localhost:5173",
+        "Access-Control-Allow-Methods": "POST",
+        "Access-Control-Allow-Headers": "Content-Type, Authorization, X-Requested-With",
+        "Authorization": null,
+
+        }});
 
 function Login() {
-    const [user, setUser] = useState({username: "",password: ""})
+    const [userLogin, setUser] = useState({username: "",password: ""})
 
     const handleSubmit = (event) => {
         event.preventDefault();
-        axios.get("http://localhost:8080/login", user).then((response) => {
-            console.log(response.status, response.data)
-        })
+        LoginService.login(userLogin, axiosInstance);
+        };
 
-      };
+
 
       const handleChange = (event) => {
         const { name, value } = event.target;
-        setUser(prevUser => ({ ...prevUser, [name]: value }));
+        setUser(prevUserLogin => ({ ...prevUserLogin, [name]: value }));
       };
-
+      
       return (<>
         <Header />
         <Slideshow />
@@ -28,14 +42,14 @@ function Login() {
           <input
             type="text"
             name="username"
-            value={user.username}
+            value={userLogin.username}
             onChange={handleChange}
             placeholder="Username"
           />
           <input
             type="password"
             name="password"
-            value={user.password}
+            value={userLogin.password}
             onChange={handleChange}
             placeholder="Enter a Password"
           />

ReactFrontEnd/src/Interceptors/AxiosInterceptor.jsx

@@ -0,0 +1,22 @@
+import { Axios } from "axios";
+
+
+
+class AxiosInterceptor {
+
+    updatePostHeader = (credentials, instance) => instance.interceptors.request.use(
+        (config) => {
+            const hash = window.btoa(credentials.username+":"+credentials.password);
+            const csrfToken = localStorage.getItem("X-XRSF-TOKEN");
+            if (hash) {
+                instance.defaults.headers["Authorization"] = hash;
+            }
+            if(csrfToken) {
+                instance.defaults.headers["X-XRSF-TOKEN"] = csrfToken;
+            }
+        return config
+        }
+
+    )
+} 
+export default AxiosInterceptor;

ReactFrontEnd/src/Services/LoginService.jsx

@@ -0,0 +1,35 @@
+import React from "react";
+import axios from "axios";
+
+
+
+
+
+
+class LoginService {
+
+
+    login(user, instance) { 
+        if (user.username && user.password) {
+        instance.interceptors.request.use((config) => {
+            const hash = window.btoa(user.username+":"+user.password);
+            if (hash) {
+                let authHeader = "Basic "+hash;
+                instance.defaults.headers["Authorization"] = authHeader;
+                window.localStorage.setItem("Auth", authHeader);
+            }
+
+        return config
+        });
+        };
+
+        instance.post("/user",user)
+            .then((response) => {
+                console.log(response);
+            })
+
+
+    }
+};
+export default new LoginService();
+

ReactFrontEnd/src/Services/ReviewServices.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import axios from 'axios'
+import { getItem } from 'localforage';
 
 const REVIEW_API_BASE_URL = "http://localhost:8080/api/v1/review";