added jwt token

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "dotenv": "^16.4.5",
     "firebase": "^10.12.2",
+    "js-cookie": "^3.0.5",
     "moment": "^2.30.1",
     "next": "14.2.4",
     "react": "^18",

src/app/auth/page.js

@@ -1,15 +1,13 @@
 'use client';
 
 import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { useAuthContext } from '../context/AuthContext';
+import useLogin from '../hooks/useLogin';
 
 export default function Auth() {
   const [userName, setUsername] = useState('');
   const [error, setError] = useState('');
 
-  const router = useRouter();
-  const { setCurrentUser } = useAuthContext();
+  const { login } = useLogin();
 
   const onChange = (e) => {
     setUsername(e.target.value);
@@ -18,13 +16,7 @@ export default function Auth() {
   const onSubmit = async (e) => {
     e.preventDefault();
 
-    await fetch('http://localhost:8081/auth/login', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ username: userName }),
-    });
+    login(userName);
   };
 
   const disabledStyles =

src/app/chat/Channel.js

@@ -11,7 +11,7 @@ const Channel = ({
 }) => {
   return (
     <div
-      className={`p-4 border-b border-gray-200 hover:bg-gray-800 cursor-pointer ${isSelected ? 'bg-gray-800' : ''}`}
+      className={`p-4 border-b hover:bg-gray-800 cursor-pointer ${isSelected ? 'bg-gray-800' : ''}`}
       onClick={() => handleChannelSelect(id)}
     >
       <p className={`text-lg font-medium ${isSelected ? 'text-blue-600' : ''}`}>

src/app/chat/ChannelList.js

@@ -18,7 +18,7 @@ const ChannelList = ({ channels, handleChannelSelect, selectedChannel }) => {
   }
 
   return (
-    <div className="w-1/4  border-r border-gray-200">
+    <div id="c-list">
       <div className="m-6">
         <h1 className="text-xl font-semibold">Channels</h1>
       </div>

src/app/chat/MessagePanelFooter.js

@@ -24,7 +24,7 @@ const MessagesPanelFooter = ({ socket, currentUser }) => {
   };
 
   return (
-    <div className="p-4 border-t border-gray-200">
+    <div className="p-4 border-t border-gray-200 h-20">
       <div className="flex items-center space-x-4">
         <input
           type="text"

src/app/chat/page.js

@@ -11,7 +11,7 @@ import { db } from '../../database/firebase';
 import { onValue, ref, set } from 'firebase/database';
 import ChatHeader from './ChatHeader';
 import { useStoreContext } from '../context/StoreContext';
-import { redirect } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 
 const SERVER = 'http://127.0.0.1:8081';
 
@@ -24,6 +24,7 @@ const Chat = () => {
 
   const { currentUser } = useAuthContext();
   const { channels, setChannels, updateParticipants } = useStoreContext();
+  const router = useRouter();
 
   useEffect(() => {
     socket.on('messageResponse', (data) => setMessages([...messages, data]));
@@ -60,17 +61,31 @@ const Chat = () => {
     });
   }, []);
 
-  if (!currentUser) {
-    redirect('/auth');
-  }
+  // if (!currentUser) {
+  //   redirect('/auth');
+  // }
 
   return (
-    <div className="w-full flex h-screen flex-row">
-      <ChannelList
-        channels={channels}
-        handleChannelSelect={handleChannelSelect}
-        selectedChannel={selectedChannel}
-      />
+    <div className="w-full flex h-screen flex-row bg-gray-900">
+      <div className="flex flex-col w-1/4 border-r border-gray-200 justify-between">
+        <ChannelList
+          channels={channels}
+          handleChannelSelect={handleChannelSelect}
+          selectedChannel={selectedChannel}
+        />
+        <div className="h-20 flex items-center justify-center border-t border-gray-200">
+          <button
+            className={
+              'text-white max-w-40 bg-slate-500 active:bg-slate-700 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none'
+            }
+            type="button"
+            onClick={() => router.push('/profile')}
+          >
+            Profile
+          </button>
+        </div>
+      </div>
+
       <div className="flex flex-col w-full">
         <ChatHeader />
         <MessagesPanel
@@ -80,11 +95,6 @@ const Chat = () => {
         />
         <MessagesPanelFooter socket={socket} currentUser={currentUser} />
       </div>
-      {/* {notifications.map(({ id }) => (
-        <Notification onClose={() => deleteNotification(id)} key={id}>
-          This is a notification!
-        </Notification>
-      ))} */}
     </div>
   );
 };

src/app/hooks/useLogin.js

@@ -0,0 +1,26 @@
+import Cookies from 'js-cookie';
+import { useRouter } from 'next/navigation';
+
+const useLogin = () => {
+  const router = useRouter();
+
+  const login = async (username) => {
+    const response = await fetch('http://localhost:8081/auth/login', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ username }),
+    });
+    const user = await response.json();
+
+    if (user) {
+      Cookies.set('access_token', JSON.stringify(user.token), { expires: 1 });
+      router.push('/chat');
+    }
+  };
+
+  return { login };
+};
+
+export default useLogin;

src/app/profile/page.js

@@ -0,0 +1,55 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+const Profile = () => {
+  const router = useRouter();
+
+  return (
+    <div className="min-h-screen bg-gray-900 flex flex-col items-center p-6 relative">
+      <div className="absolute top-4 left-4">
+        <button
+          onClick={() => router.back()}
+          className="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded"
+        >
+          Back
+        </button>
+      </div>
+      <div className="bg-gray-800 shadow-md rounded-lg overflow-hidden w-full max-w-md relative">
+        <div className="absolute top-4 right-4">
+          <button
+            onClick={() => {}}
+            className="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 rounded"
+          >
+            Edit
+          </button>
+        </div>
+        <div className="bg-gray-700 h-32 flex justify-center items-center">
+          <img
+            src="https://via.placeholder.com/100"
+            alt="Profile"
+            className="w-24 h-24 rounded-full border-4 border-gray-800 -mt-12"
+          />
+        </div>
+        <div className="p-6">
+          <h1 className="text-xl font-semibold text-white">John Doe</h1>
+          <p className="text-gray-400">@johndoe</p>
+          <p className="mt-4 text-gray-300">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+          <div className="mt-6">
+            <h2 className="text-lg font-semibold text-white">Details</h2>
+            <ul className="mt-2 text-gray-300">
+              <li>Email: [email protected]</li>
+              <li>Location: New York, USA</li>
+              <li>Member since: January 2020</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Profile;

src/server/routes/auth.js

@@ -1,6 +1,5 @@
 const express = require('express');
 const router = express.Router();
-const bcrypt = require('bcrypt');
 const jwt = require('jsonwebtoken');
 const { signIn } = require('../../database/firebase');
 const authenticateToken = require('../middleware/authenticateToken');
@@ -30,7 +29,7 @@ router.post('/login', async (req, res) => {
     ) {
       res.setHeader('Access-Control-Allow-Origin', req.headers.origin);
     }
-    return res.status(200).json({ token });
+    return res.status(200).json({ username, token });
   } catch (error) {
     res.status(500).json({ error: 'Login failed' });
   }

tailwind.config.js

@@ -1,16 +1,19 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
     extend: {
       backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic':
+          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+      },
+      height: {
+        'h-18': '4.5rem',
       },
     },
   },