fixed unnecessary log in option after getting logged in (#205)

frontend/package.json

@@ -22,6 +22,7 @@
     "dotenv": "^16.4.5",
     "framer-motion": "^11.5.6",
     "gsap": "^3.12.5",
+    "js-cookie": "^3.0.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",

frontend/src/components/Pages/Login.jsx

@@ -2,7 +2,7 @@ import { Link, useNavigate } from 'react-router-dom';
 import photo from '../../assets/login.png';
 import React, { useState } from 'react';
 import { message } from 'antd';
-
+import Cookies from 'js-cookie'
 const Login = () => {
   const API_URL = import.meta.env.VITE_BACKEND_URL || 'http://localhost:3000';
   const [data, setData] = useState({
@@ -34,6 +34,10 @@ const Login = () => {
         throw new Error(result.message || 'Login failed');
       }
       // Handle successful login (e.g., store token, redirect)
+      Cookies.set('authToken',result.token,{
+        expire:'1h',
+        secure:true
+      });
       message.success('Login successful');
       navigate('/');
     } catch (err) {

frontend/src/components/Shared/Navbar.jsx

@@ -1,12 +1,14 @@
 import { useState, useEffect } from 'react';
 import Logo from '../../assets/Logo/playcafe.png';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
+import Cookies from 'js-cookie'
 
 const Navbar = () => {
   const [isloggedIn, setisloggedIn] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isScrolled, setIsScrolled] = useState(false);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [token,setToken] = useState(Cookies.get('authToken'));
   const location = useLocation();
   const navigate = useNavigate(); // Correctly initialize useNavigate
 
@@ -17,7 +19,9 @@ const Navbar = () => {
     { name: 'RESERVATION', path: '/reservation' },
     { name: 'BOARDGAMES', path: '/boardgame' },
   ];
-
+  useEffect(() => {
+    setToken(Cookies.get('authToken'));
+  });
   useEffect(() => {
     const handleScroll = () => {
       const scrollPosition = window.scrollY;
@@ -29,15 +33,21 @@ const Navbar = () => {
     return () => {
       window.removeEventListener('scroll', handleScroll);
     };
+
   }, []);
 
   const toggleMenu = () => {
     setIsMenuOpen(!isMenuOpen);
   };
 
   const handleLogout = () => {
-    setisloggedIn(false); // Set isLoggedIn to false on confirmation
+    // setisloggedIn(false); // Set isLoggedIn to false on confirmation
+    //managing log in , logout using jwt tokens 
+    Cookies.remove("authToken");
+    setToken(null);
     setIsModalOpen(false); // Close the modal
+    setIsMenuOpen(false) // after getting logged out close the menu if it is open
+    navigate("/login");//navigate to login after get logged out
   };
 
   const isHomePage = location.pathname === '/';
@@ -96,7 +106,7 @@ const Navbar = () => {
           </div>
 
           <div className="hidden md:flex font-semibold Poppins text-lg">
-            {isloggedIn ? (
+            {token ? (
               <button
                 className={`${baseTextColorClass} ${hoverTextColorClass} px-4 py-1 rounded-md border-2 border-black bg-beige shadow-[4px_4px_0px_0px_black] font-semibold text-[#323232]`}
                 type="button"
@@ -175,7 +185,7 @@ const Navbar = () => {
                 {item.name}
               </Link>
             ))}
-            {isloggedIn ? (
+            {token ? (
               <button
                 className={`block w-full text-left px-4 py-3 rounded-md text-base font-semibold transition duration-300 
                           ${mobileMenuBaseTextColorClass} hover:bg-amber-300 hover:text-black`}