Merge branch 'main' into feature/GoogleAuth

backend/package.json

@@ -11,6 +11,7 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
+    "backend": "file:",
     "bcrypt": "^5.1.1",
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",

package.json

@@ -20,8 +20,11 @@
     "@types/react-router-dom": "^5.3.3",
     "axios": "^1.7.7",
     "bootstrap": "^5.3.3",
+    "bootstrap-icons": "^1.11.3",
     "concurrently": "^9.0.1",
+
     "firebase": "^10.14.0",
+
     "framer-motion": "^11.11.1",
     "lucide-react": "^0.447.0",
     "react": "^18.3.1",

src/App.js

@@ -5,6 +5,7 @@ import { Route, BrowserRouter as Router, Routes } from "react-router-dom"; // Im
 import "bootstrap/dist/css/bootstrap.min.css"; // Import Bootstrap CSS
 import Home from "./components/Home";
 import Template from "./components/Auth/Template";
+import Forget from "./components/Forget";
 
 
 function App() {
@@ -16,14 +17,16 @@ function App() {
 					<Route
 						path="/"
 						element={<Home />}></Route>
-					<Route
+					{ <Route
 						path="/login"
 						element={<Template formType={"login"} />}
-					/>
+					/> }
+
 					<Route
 						path="/signup"
 						element={<Template formType={"signup"} />}
 					/>
+					<Route path="/forget" element={<Forget/>} /> 
 				</Routes>
 			</Router>
 		</div>

src/assets/styles/Header.css

@@ -34,13 +34,48 @@
     font-weight: bold;
   }
 
+
   .search-bar {
-    width: 50%; /* Adjust width as needed */
+    border-radius: 50px; 
+    width: 50vw;
+    overflow: hidden; 
+    display: flex;
   }
 
   .search-bar input {
-    padding: 5px;
-    width: 300px;
+    border: 2px solid rgb(217, 202, 202);
+    border-right: none;
+    border-radius: 50px 0 0 50px; 
+    padding: 10px 15px;
+    width: 100%; 
+    outline: none;
+
+  }
+
+  .input-group-text {
+    background-color: white; 
+    border: 2px solid rgb(217, 202, 202);
+    border-left: none;
+    border-radius: 0 50px 50px 0; 
+    padding: 10px 15px;
+    display: flex;
+    align-items: center;
+
+  }
+
+  .bi-search {
+    font-size: 18px;
+    color: #000; 
+  }
+
+  .search-bar .form-control:focus {
+    box-shadow: none; 
+  }
+
+
+  .search-bar:focus-within .input-group-text {
+    box-shadow: 4px 4px 8px rgba(0, 123, 255, 0.5); 
+    border-color:rgba(0, 123, 255, 0.5);
   }
 
   .location-signin {

src/components/Auth/LoginForm.jsx

@@ -4,35 +4,38 @@ import { useState } from "react";
 import { AiOutlineEye, AiOutlineEyeInvisible, AiOutlineGoogle } from "react-icons/ai";
 import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
-import { login } from "../../services/operations/authAPI";
+
+import { login } from "../../services/operations/authAPI"; 
+
 
 // Import Firebase Auth and Google Auth Provider
 import { auth, provider, signInWithPopup } from "./Firebase";
 
 
 function LoginForm() {
-	const navigate = useNavigate();
-	const dispatch = useDispatch();
-	const [formData, setFormData] = useState({
-		email: "",
-		password: "",
-	});
-
-	const [showPassword, setShowPassword] = useState(false);
-
-	const { email, password } = formData;
-
-	const handleOnChange = (e) => {
-		setFormData((prevData) => ({
-			...prevData,
-			[e.target.name]: e.target.value,
-		}));
-	};
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const [formData, setFormData] = useState({
+    email: "",
+    password: "",
+  });
+
+  const [showPassword, setShowPassword] = useState(false);
+
+  const { email, password } = formData;
+
+  const handleOnChange = (e) => {
+    setFormData((prevData) => ({
+      ...prevData,
+      [e.target.name]: e.target.value,
+    }));
+  }; 
+
+  const handleOnSubmit = (e) => {
+    e.preventDefault();
+    dispatch(login(email, password, navigate));
+  }; 
 
-	const handleOnSubmit = (e) => {
-		e.preventDefault();
-		dispatch(login(email, password, navigate));
-	};
 
 	// Function to handle Google Sign-In
 	const handleGoogleSignIn = () => {
@@ -130,6 +133,7 @@ function LoginForm() {
 			</form>
 		</div>
 	);
+
 }
 
 export default LoginForm;

src/components/Forget.js

@@ -0,0 +1,29 @@
+import React from 'react';
+
+function Forget() {
+  return (
+    <div className="flex items-center justify-center h-screen bg-gray-100">
+      <form className="bg-white p-6 rounded-lg shadow-md w-full max-w-sm">
+        <h2 className="text-2xl font-semibold mb-4 text-center">Forgot Password</h2>
+
+        <label className="block mb-2 text-sm font-medium text-gray-700">
+          Email Address
+        </label>
+        <input
+          type="email"
+          placeholder="[email protected]"
+          className="w-full p-2 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+
+        <button
+          type="submit"
+          className="w-full bg-blue-600 text-white font-semibold py-2 rounded-md hover:bg-blue-700 transition-all"
+        >
+          Submit
+        </button>
+      </form>
+    </div>
+  );
+}
+
+export default Forget;

src/components/Header.js

@@ -1,13 +1,16 @@
 /** @format */
 
-// Header.js
 import React from "react"; // Add this line
 import NavBar from "./NavBar";
 import { Link, useNavigate,useLocation } from "react-router-dom";
 
+
 import "../assets/styles/Header.css";
 import { useSelector, useDispatch } from "react-redux";
 import { logout } from "../services/operations/authAPI";
+import { useLocation } from 'react-router-dom';
+import 'bootstrap-icons/font/bootstrap-icons.css';
+
 
 function Header() {
     const navigate = useNavigate();
@@ -16,10 +19,10 @@ function Header() {
 
     const location = useLocation(); // Get the current path
 
-// If the current path is "/signup" or "/login", don't render the Header
+    // If the current path is "/signup" or "/login", don't render the Header
     if (location.pathname === "/signup" || location.pathname === "/login") {
         return null;
-    }
+    } 
 
     return (
         <header className="header container-fluid d-flex align-items-center justify-content-between p-3 bg-white">
@@ -34,6 +37,9 @@ function Header() {
                     className="form-control"
                     placeholder="Search for Movies, Events, Plays, Sports and Activities"
                 />
+                <span className="input-group-text">
+                    <i className="bi bi-search"></i> {/* Bootstrap Icon */}
+                </span>
             </div>
             <div className="location-signin d-flex align-items-center">
                 <select className="location me-3 form-select">
@@ -64,4 +70,3 @@ function Header() {
 }
 
 export default Header;
-