add swagger and token verification

Author: Syed-Bilal-Haider-Engineer

client/app/(auth)/login/login.tsx

@@ -32,15 +32,13 @@ export default function LoginPage() {
 
   const { mutate, isPending, isSuccess, isError } = useMutation({
     mutationFn: loginUser,
+   // Update the onSuccess handler:
     onSuccess: (data) => {
       setSuccessMsg("Login successfully!");
-      console.log("data==>", data);
+      localStorage.setItem("token", data.token);
+      setTokenState(data.token); // This will trigger verification in context
       reset();
-      localStorage.setItem("token",data.token)
-      setTokenState(data.token)
-      setTimeout(() => {
-        setIsLogin(false);
-      }, 2000);
+      setTimeout(() => setIsLogin(false), 2000);
     },
     onError: (err: any) => {
       setErrorMsg(err.message || "Something went wrong");

client/app/_lib/services/authenticationService.tsx

@@ -0,0 +1,21 @@
+'use client'
+import axios from 'axios';
+
+const API_BASE = 'http://localhost:4000/api';
+
+export const authentication = async (token: string | null) => {
+  if (!token) return { success: false };
+  
+  try {
+    const response = await axios.get(`${API_BASE}/authenticate`, {
+      headers: { Authorization: `Bearer ${token}` },
+    });
+    
+    return { 
+      data: response.data 
+    };
+  } catch (error) {
+    console.error("Authentication failed:", error);
+    return { success: false };
+  }
+}

client/app/_lib/services/viewService.tsx

@@ -4,17 +4,12 @@ import axios from "axios";
 const API_BASE = 'http://localhost:4000/api'; 
 export const getPlaceViewDetails = async ({
   queryKey,
-}: QueryFunctionContext<[string, string, string]>) => {
-  const [, token, id] = queryKey;
+}: QueryFunctionContext<[string, string]>) => {
+  const [, id] = queryKey;
 
-  console.log("Frontend Token:", token);
   console.log("Feature ID:", id);
 
-  const response = await axios.get(`${API_BASE}/featuresDetails?featureId=${id}`, {
-    headers: {
-      Authorization: `Bearer ${token}`,
-    },
-  });
+  const response = await axios.get(`${API_BASE}/featuresDetails?featureId=${id}`);
 
   return response.data;
 };

client/app/_lib/styles/sidebar.css

@@ -0,0 +1,5 @@
+.menu{
+    @media (width <= 760px) {
+        display: none !important;
+    }
+}

client/app/_lib/styles/site.module.css

@@ -1,7 +1,6 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
-import '../../_lib/styles/modal.css';
 import { createPortal } from 'react-dom';
 
 interface ModalProps {
@@ -16,10 +15,10 @@ function Modal({ children }: ModalProps) {
     setPortalRoot(el);
   }, []);
 
-  if (!portalRoot) return null; // Wait until DOM is ready
+  if (!portalRoot) return null; 
 
   return createPortal(
-    <div id="myModal" className="modal">
+    <div id="myModal" className="fixed inset-0 z-50 flex items-center justify-center bg-opacity-40 px-4 sm:px-6">
       {children}
     </div>,
     portalRoot

client/app/components/common/modal.tsx

@@ -1,13 +1,16 @@
 'use client';
-import { BellIcon, UserCircle, LogIn, LogOut, UserPlus, Link } from 'lucide-react';
+import { BellIcon, UserCircle, LogOut, UserPlus } from 'lucide-react';
 import { useState, useRef, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { useContextAPI } from '../../_lib/context/contextAPI';
+
 const Header = () => {
+
   const {setIsLogin,setIsSignUp,setIsProfile, setTokenState} = useContextAPI()
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
-  const router = useRouter()
+  const router = useRouter();
+
   // Close dropdown when clicking outside or pressing Escape
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -46,6 +49,7 @@ const Header = () => {
       localStorage.removeItem('token');
       setTokenState('')
     }
+    router.push('/')
   };
 
   const handleSignIn = () => {

client/app/components/layout/Header.tsx

@@ -3,11 +3,11 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { Map, ChevronsLeft, ChevronsRight, HeartPlus } from 'lucide-react';
 import { useContextAPI } from '../../../_lib/context/contextAPI';
-
+import '../../../_lib/styles/sidebar.css'
 export default function Sidebar() {
   const pathname = usePathname();
   const { isCollapsed, toggleSidebar, token } = useContextAPI();
-
+ console.log("sidebar token=>",token)
   const navItems = [
     { label: 'Map', href: '/', icon: <Map size={20} /> },
     ...(token ? [{ label: 'Favorites', href: '/favorites', icon: <HeartPlus size={20} /> }] : []),
@@ -16,11 +16,11 @@ export default function Sidebar() {
   return (
     <aside className={`
       h-screen bg-white border-r border-gray-200 py-3 px-2 flex flex-col gap-y-6
-      transition-all duration-300 ease-in-out shadow-sm shadow-gray-200
-      ${isCollapsed ? 'w-[60px]' : 'w-[200px]'}
+      transition-all duration-300 ease-in-out shadow-sm shadow-gray-200 
+      ${isCollapsed ? 'w-[60px]' : ' w-[60px] md:w-[200px]'}
     `}>
-      <div className={`flex ${isCollapsed ? 'flex-col' : ''} justify-between items-center`}>
-        <span className={`text-base font-medium ${isCollapsed && 'mt-2'}`}>Chemnitz Culture</span>
+      <div className={`flex ${isCollapsed ? 'flex-col' : ' flex-col md:flex-row'} justify-between items-center`}>
+        <span className={`text-2xl font-bold ml-2 ${isCollapsed && 'mt-2'}`}>KultLink</span>
         <button
           onClick={toggleSidebar}
           className="p-1 rounded-md hover:bg-gray-100 transition-colors hover:cursor-pointer"
@@ -45,17 +45,7 @@ export default function Sidebar() {
               {icon}
             </span>
             {!isCollapsed && (
-              <span className="hover:cursor-pointer">{label}</span>
-            )}
-            {isCollapsed && (
-              <span className="
-                absolute left-full ml-4 px-2 py-1 rounded-md
-                bg-gray-800 text-white text-sm
-                invisible opacity-0 group-hover:visible group-hover:opacity-100
-                transition-opacity duration-200
-              ">
-                {label}
-              </span>
+              <span className=" menu md:block text-sm  hover:cursor-pointer transition-opacity duration-200">{label}</span>
             )}
           </Link>
         ))}
@@ -64,7 +54,7 @@ export default function Sidebar() {
       {isCollapsed && (
         <div className="mt-auto text-center">
           <span className="text-xs text-gray-500 rotate-90 inline-block origin-center whitespace-nowrap">
-            Chemnitz
+            KultLink
           </span>
         </div>
       )}