[FIX] Improve Login registration functionality #588 (#612)

index.css

@@ -114,12 +114,3 @@
     --chart-5: 340 75% 55%
   }
 }
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}

src/components/Admin-Dashboard/AdminDashboard.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import './AdminDashboard.css';
 
 const AdminDashboard = () => {
@@ -19,6 +19,7 @@ const AdminDashboard = () => {
           <h2>Admin Panel</h2>
         </div>
         <ul className="sidebar-menu">
+          <li><Link to="/">Home</Link></li>
           <li>Dashboard Overview</li>
           <li>Manage Users</li>
           <li>Property Listings</li>

src/components/Header-section/Navbar.jsx

@@ -4,19 +4,19 @@ import { Link, useLocation } from "react-router-dom";
 import logo from "../../assets/Images/logo.png";
 import { useState, useEffect } from "react";
 import GoogleTranslate from "./GoogleTranslate";
-import gsap from 'gsap'
+import gsap from "gsap";
 import ProgressBar from "./ProgressBar";
-const tl=gsap.timeline()
-import '../Header-section/Navbar.css'
+const tl = gsap.timeline();
+import "../Header-section/Navbar.css";
 
 const Navbar = () => {
   const [darkMode, setDarkMode] = useState(false); // Track theme state
   const [showMenu, setShowMenu] = useState("");
   const [doBlure, setDoBlure] = useState(false);
   const [navLinkbgColor, setNavlinkbgColor] = useState(true);
   const [activeSection, setActiveSection] = useState("home"); // Track active section
-
-  const sectionIds = ["home", "Service", "AboutUs", "ContactUs","FAQ"]; // Section IDs
+  const [checkToken, setCheckToken] = useState(false);
+  const sectionIds = ["home", "Service", "AboutUs", "ContactUs", "FAQ"]; // Section IDs
 
   // Toggle Dark Mode
   const toggleDarkMode = () => {
@@ -25,26 +25,31 @@ const Navbar = () => {
   };
 
   useEffect(() => {
-    const tl = gsap.timeline();  // Initialize the timeline
-  
+    const tl = gsap.timeline(); // Initialize the timeline
+
     const ctx = gsap.context(() => {
-      tl.fromTo('.navbar',
+      tl.fromTo(
+        ".navbar",
         { y: -100, opacity: 0 },
         { y: 0, opacity: 1, duration: 1, ease: "power2.inOut", stagger: 0.3 }
       );
-      tl.fromTo('.navbar2',
+      tl.fromTo(
+        ".navbar2",
         { y: -100, opacity: 0 },
         { y: 0, opacity: 1, duration: 0.5, ease: "power2.inOut", stagger: 0.3 }
       );
-      tl.fromTo('.navbar3',
+      tl.fromTo(
+        ".navbar3",
         { y: -100, opacity: 0 },
         { y: 0, opacity: 1, duration: 0.5, ease: "power2.inOut", stagger: 0.3 }
       );
     });
-
+    var getToken = localStorage.getItem("userToken");
+    if (getToken != null || getToken != undefined) {
+      setCheckToken(true);
+    }
     return () => ctx.revert();
   }, []);
-
 
   // Intersection Observer to Highlight Links on Scroll and Update URL
   useEffect(() => {
@@ -65,7 +70,8 @@ const Navbar = () => {
     );
 
     sections.forEach((section) => section && observer.observe(section));
-    return () => sections.forEach((section) => section && observer.unobserve(section));
+    return () =>
+      sections.forEach((section) => section && observer.unobserve(section));
   }, []);
 
   useEffect(() => {
@@ -91,14 +97,17 @@ const Navbar = () => {
 
   if (showMenu) {
     const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+    const scrollLeft =
+      window.pageXOffset || document.documentElement.scrollLeft;
     window.onscroll = () => window.scrollTo(scrollLeft, scrollTop);
 
     return (
-
       <div className="md:hidden bg-[#1ABC9C] fixed w-full z-20 top-0 left-0 h-full flex justify-center items-center">
-        <ProgressBar/>
-        <button onClick={() => setShowMenu("")} className="absolute top-0 left-0 m-[1.5rem]">
+        <ProgressBar />
+        <button
+          onClick={() => setShowMenu("")}
+          className="absolute top-0 left-0 m-[1.5rem]"
+        >
           <FiX className="m-2 text-textWhite text-lg" />
         </button>
         {/* Other elements */}
@@ -107,55 +116,105 @@ const Navbar = () => {
   } else {
     window.onscroll = () => {};
   }
-
+  const handleLogout = () => {
+    // Clear session data (e.g., token from localStorage)
+    localStorage.removeItem("userToken");
+    setCheckToken(false)
+    // Redirect to login page
+    navigate("/");
+  };
   return (
-    <nav className={`fixed w-full z-20 top-0 left-0 ${darkMode ? "bg-gray-900 text-white" : "bg-white text-black"} transition-colors duration-500`}>
-      <ProgressBar/>
+    <nav
+      className={`fixed w-full z-20 top-0 left-0 ${darkMode ? "bg-gray-900 text-white" : "bg-white text-black"} transition-colors duration-500`}
+    >
+      <ProgressBar />
+
+      <div
+        className={
+          doBlure
+            ? `absolute w-full h-full -z-20 bg-beige `
+            : `absolute w-full h-full -z-20 bg-beige `
+        }
+      ></div>
 
-      <div className={doBlure ? `absolute w-full h-full -z-20 bg-gray-light opacity-0` : `absolute w-full h-full -z-20 bg-gray-light opacity-80`}></div>
-
       <div className="max-w-screen-xl flex items-center justify-between mx-auto p-2 text-sm">
-
         {/* Logo on the Left */}
         <div className="flex flex-row items-center">
           <a href="#home" aria-current="page">
-            <img className="self-start w-36 navbar my-auto" src={logo} alt="Rentalog-logo"/>
+            <img
+              className="self-start w-36 navbar my-auto"
+              src={logo}
+              alt="Rentalog-logo"
+            />
           </a>
         </div>
 
         {/* Center Navigation Links */}
         <ul className="hidden md:flex items-center gap-4 text-sm font-light">
           {sectionIds.map((section) => (
-            <li className="hover:scale-[1.05] transition duration-300" key={section}>
+            <li
+              className="hover:scale-[1.05] transition duration-300"
+              key={section}
+            >
               <a href={`#${section}`}>
-                <h1 className={activeSection === section ? "text-green" : ""}>{section.toUpperCase()}</h1>
+                <h1 className={activeSection === section ? "text-green" : ""}>
+                  {section.toUpperCase()}
+                </h1>
               </a>
             </li>
           ))}
         </ul>
-        
+
         {/* Right side: Login, Register, and GoogleTranslate */}
         <div className="flex items-center space-x-2 md:space-x-4">
           <button onClick={toggleDarkMode} className="text-lg">
             {darkMode ? <FiSun /> : <FiMoon />}
           </button>
 
-          <Link to="/login">
-            <button className="navbar3 hidden md:block text-sm px-4 py-1 rounded-lg bg-green-500 text-white transition-transform hover:scale-105">Login</button>
-          </Link>
-          <Link to="/register">
+          {checkToken ? (
+            <Link to="/">
+              <button onClick={handleLogout} className="navbar3 hidden md:block text-sm px-4 py-1 rounded-lg bg-green-500 text-white transition-transform hover:scale-105">
+              Logout
+              </button>
+            </Link>
+          ) : (
+            <>
+            <Link to="/login">
+              <button className="navbar3 hidden md:block text-sm px-4 py-1 rounded-lg bg-green-500 text-white transition-transform hover:scale-105">
+                Login
+              </button>
+            </Link>
+            <Link to="/register">
             <button className="navbar3 hidden md:flex items-center gap-1 px-4 py-1 text-sm rounded-lg bg-green-500 text-white transition-transform hover:scale-105">
               <FiUser className="text-lg" />
               Register
             </button>
           </Link>
-          <GoogleTranslate/>
+          </>
+          )}
+
+          <GoogleTranslate />
         </div>
 
         {/* Mobile Menu Button */}
-        <button onClick={() => setShowMenu("show")} type="button" className="md:hidden p-2">
-          <svg className="w-4 h-4" aria-hidden="true" fill="none" viewBox="0 0 17 14">
-            <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M1 1h15M1 7h15M1 13h15"/>
+        <button
+          onClick={() => setShowMenu("show")}
+          type="button"
+          className="md:hidden p-2"
+        >
+          <svg
+            className="w-4 h-4"
+            aria-hidden="true"
+            fill="none"
+            viewBox="0 0 17 14"
+          >
+            <path
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M1 1h15M1 7h15M1 13h15"
+            />
           </svg>
         </button>
       </div>

src/pages/Home.jsx

@@ -9,6 +9,7 @@ import Testimonials from "../components/testimonial-section/Testimonial";
 import { ScrollToTop } from "react-simple-scroll-up";
 import carImg3 from "../assets/Icons/arrow-up.png";
 import "./home.css";
+import { useEffect, useState } from "react";
 
 function Home() {
   return (

src/pages/Login.jsx

@@ -32,9 +32,10 @@ export default function Login() {
   };
 
   const onSubmit = (data) => {
-    console.log(data);
+    //console.log(data);
     // Perform login logic here
     // If successful, navigate to admin dashboard
+    localStorage.setItem("userToken",data.email);
     navigate("/admin-dashboard");
     reset(); // Reset form after successful submission
   };