From b40129be21a504735bbc048bc6e6a76b71e64bf4 Mon Sep 17 00:00:00 2001
From: Amnyadav <amn.yadav707@gmail.com>
Date: Fri, 11 Oct 2024 12:08:00 +0530
Subject: [PATCH 1/2] chore: fixed unnecessary log in option after getting
 logged in using jwt token

---
 frontend/src/components/Pages/Login.jsx   |  2 ++
 frontend/src/components/Shared/Navbar.jsx | 11 ++++++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Pages/Login.jsx b/frontend/src/components/Pages/Login.jsx
index c233e569..49e52855 100644
--- a/frontend/src/components/Pages/Login.jsx
+++ b/frontend/src/components/Pages/Login.jsx
@@ -34,6 +34,8 @@ const Login = () => {
         throw new Error(result.message || 'Login failed');
       }
       // Handle successful login (e.g., store token, redirect)
+      const token=result.token;
+      localStorage.setItem("token",JSON.stringify(token));
       message.success('Login successful');
       navigate('/');
     } catch (err) {
diff --git a/frontend/src/components/Shared/Navbar.jsx b/frontend/src/components/Shared/Navbar.jsx
index d9c7ef10..a3c70a7d 100644
--- a/frontend/src/components/Shared/Navbar.jsx
+++ b/frontend/src/components/Shared/Navbar.jsx
@@ -7,6 +7,7 @@ const Navbar = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isScrolled, setIsScrolled] = useState(false);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const token=localStorage.getItem("token");
   const location = useLocation();
   const navigate = useNavigate(); // Correctly initialize useNavigate
 
@@ -36,8 +37,12 @@ const Navbar = () => {
   };
 
   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 
+    localStorage.removeItem("token");
     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 +101,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 +180,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`}

From 2fca884d8db7a46247b9ebf8e705b1ca57952172 Mon Sep 17 00:00:00 2001
From: Amnyadav <amn.yadav707@gmail.com>
Date: Fri, 11 Oct 2024 15:29:02 +0530
Subject: [PATCH 2/2] add changes as suggested by code rabbit

---
 frontend/package.json                     |  1 +
 frontend/src/components/Pages/Login.jsx   |  8 +++++---
 frontend/src/components/Shared/Navbar.jsx | 11 ++++++++---
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index a1695e2e..8f7a92f8 100644
--- a/frontend/package.json
+++ b/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",
diff --git a/frontend/src/components/Pages/Login.jsx b/frontend/src/components/Pages/Login.jsx
index 49e52855..dd6588ce 100644
--- a/frontend/src/components/Pages/Login.jsx
+++ b/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,8 +34,10 @@ const Login = () => {
         throw new Error(result.message || 'Login failed');
       }
       // Handle successful login (e.g., store token, redirect)
-      const token=result.token;
-      localStorage.setItem("token",JSON.stringify(token));
+      Cookies.set('authToken',result.token,{
+        expire:'1h',
+        secure:true
+      });
       message.success('Login successful');
       navigate('/');
     } catch (err) {
diff --git a/frontend/src/components/Shared/Navbar.jsx b/frontend/src/components/Shared/Navbar.jsx
index a3c70a7d..4993a7ae 100644
--- a/frontend/src/components/Shared/Navbar.jsx
+++ b/frontend/src/components/Shared/Navbar.jsx
@@ -1,13 +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=localStorage.getItem("token");
+  const [token,setToken] = useState(Cookies.get('authToken'));
   const location = useLocation();
   const navigate = useNavigate(); // Correctly initialize useNavigate
 
@@ -18,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;
@@ -30,6 +33,7 @@ const Navbar = () => {
     return () => {
       window.removeEventListener('scroll', handleScroll);
     };
+    
   }, []);
 
   const toggleMenu = () => {
@@ -39,7 +43,8 @@ const Navbar = () => {
   const handleLogout = () => {
     // setisloggedIn(false); // Set isLoggedIn to false on confirmation
     //managing log in , logout using jwt tokens 
-    localStorage.removeItem("token");
+    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