update

frontend/app/Sidebar.js

@@ -1,5 +1,5 @@
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
+import { useState, useEffect } from 'react';
+import Image from 'next/image';
 
 export default function Sidebar({
   searchQuery,
@@ -9,6 +9,15 @@ export default function Sidebar({
   setFilteredUsers,
 }) {
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const [me, setMe] = useState('');
+
+  useEffect(() => {
+    // Retrieve 'me' from localStorage
+    const storedMe = localStorage.getItem('me');
+    if (storedMe) {
+      setMe(storedMe);
+    }
+  }, []);
 
   const toggleSidebar = () => {
     setIsSidebarOpen((prev) => !prev);
@@ -47,14 +56,15 @@ export default function Sidebar({
           position: 'fixed',
           top: '10px',
           left: isSidebarOpen ? '210px' : '10px',
+          transform: isSidebarOpen ? 'rotate(90deg)' : 'none',
           zIndex: 1000,
-          backgroundColor: '#4b2e83',
+          backgroundColor: '#352e83',
           color: '#fff',
           border: 'none',
-          borderRadius: '5px',
+          borderRadius: '10px',
           padding: '10px',
           cursor: 'pointer',
-          transition: 'left 0.3s ease',
+          transition: 'left .4s ease',
         }}
       >
         ☰
@@ -65,7 +75,7 @@ export default function Sidebar({
         style={{
           position: 'fixed',
           top: 0,
-          left: isSidebarOpen ? 0 : '-260px', // Sidebar slides out of view when collapsed
+          left: isSidebarOpen ? 0 : '-260px',
           width: '250px',
           height: '100%',
           backgroundColor: '#333',
@@ -75,7 +85,7 @@ export default function Sidebar({
           zIndex: 999,
         }}
       >
-        <h3 style={{ color: '#fff', marginBottom: '20px' }}>Select Recipient</h3>
+        <h3 style={{ color: '#fff', marginBottom: '20px' }}>Find Chats</h3>
 
         <input
           type="text"
@@ -87,12 +97,39 @@ export default function Sidebar({
 
         <ul style={{ listStyleType: 'none', padding: 0 }}>
           {filteredUsers.map((recipient, index) => (
-            <li key={index} style={{ color: '#fff', cursor: 'pointer', marginBottom: '10px' }}>
-              <span
-                style={{ textDecoration: 'none', color: '#fff' }}
-                onClick={() => handleUserSelect(recipient)}
+            <li
+              key={index}
+              style={{
+                color: '#fff',
+                cursor: 'pointer',
+                marginBottom: '15px',
+                display: 'flex',
+                alignItems: 'center',
+              }}
+              onClick={() => handleUserSelect(recipient)}
+            >
+              {/* Profile Picture */}
+              <div
+                style={{
+                  width: '40px',
+                  height: '40px',
+                  position: 'relative',
+                  marginRight: '10px',
+                }}
               >
-                {recipient}
+                <Image
+                  src={`https://ui-avatars.com/api/?background=random&name=${encodeURIComponent(
+                    recipient
+                  )}`}
+                  alt={`${recipient}'s avatar`}
+                  layout="fill"
+                  objectFit="cover"
+                  style={{ borderRadius: '50%' }}
+                />
+              </div>
+              {/* Username */}
+              <span style={{ textDecoration: 'none', color: '#fff', fontSize: '16px' }}>
+                {recipient} {recipient === me ? '(Me)' : ''}
               </span>
             </li>
           ))}

frontend/app/layout.js

@@ -1,18 +1,21 @@
 'use client';
 import { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation'; 
+import { useRouter } from 'next/navigation';
 import { WebSocketProvider, useWebSocket } from './WebSocketContext';
 import './globals.css';
-import Sidebar from './Sidebar'; // Import Sidebar Component
+import Sidebar from './Sidebar';
 
 export default function RootLayout({ children }) {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
   const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
   const [recipientList, setRecipientList] = useState([]);
   const [searchQuery, setSearchQuery] = useState('');
   const [filteredUsers, setFilteredUsers] = useState([]);
   const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [isSignup, setIsSignup] = useState(false);
 
   return (
     <html lang="en">
@@ -23,8 +26,12 @@ export default function RootLayout({ children }) {
             setUsername={setUsername}
             password={password}
             setPassword={setPassword}
+            confirmPassword={confirmPassword}
+            setConfirmPassword={setConfirmPassword}
             isLoading={isLoading}
             setIsLoading={setIsLoading}
+            error={error}
+            setError={setError}
             recipientList={recipientList}
             setRecipientList={setRecipientList}
             searchQuery={searchQuery}
@@ -33,6 +40,8 @@ export default function RootLayout({ children }) {
             setFilteredUsers={setFilteredUsers}
             isLoggedIn={isLoggedIn}
             setIsLoggedIn={setIsLoggedIn}
+            isSignup={isSignup}
+            setIsSignup={setIsSignup}
           >
             {children}
           </WebSocketLayout>
@@ -47,8 +56,12 @@ function WebSocketLayout({
   setUsername,
   password,
   setPassword,
+  confirmPassword,
+  setConfirmPassword,
   isLoading,
   setIsLoading,
+  error,
+  setError,
   recipientList,
   setRecipientList,
   searchQuery,
@@ -57,22 +70,48 @@ function WebSocketLayout({
   setFilteredUsers,
   isLoggedIn,
   setIsLoggedIn,
+  isSignup,
+  setIsSignup,
   children,
 }) {
-  const { ws, status } = useWebSocket(); 
+  const { ws, status } = useWebSocket();
   const router = useRouter();
 
+  const validateSignup = () => {
+    if (!username || !password || !confirmPassword) {
+      setError('Please fill in all fields');
+      return false;
+    }
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return false;
+    }
+    return true;
+  };
+
   const connectAndAuthenticate = () => {
+    setError('');
     if (!username || !password) {
-      alert('Please enter both username and password');
+      setError('Please enter both username and password');
       return;
     }
 
     setIsLoading(true);
 
-    const loginData = JSON.stringify({ username, password });
+    const requestData = JSON.stringify({ username, password });
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      ws.send(requestData);
+    }
+  };
+
+  const handleSignup = () => {
+    if (!validateSignup()) return;
+
+    setIsLoading(true);
+
+    const signupData = JSON.stringify({ username, password, action: 'signup' });
     if (ws && ws.readyState === WebSocket.OPEN) {
-      ws.send(loginData);
+      ws.send(signupData);
     }
   };
 
@@ -80,38 +119,23 @@ function WebSocketLayout({
     if (ws) {
       ws.onmessage = (event) => {
         const data = JSON.parse(event.data);
-        console.log('Received message:', data);  
+        console.log('Received message:', data);
 
         if (data.status === 'success') {
           setIsLoading(false);
           setIsLoggedIn(true);
           setRecipientList(data.recipients || []);
+          localStorage.setItem('me', username);
         } else if (data.status === 'error') {
-          console.error(data.message);
-          alert(data.message);
+          setError(data.message);
           setIsLoading(false);
-        } else {
-          const { from: recipient, message } = data;
-
-          if (recipient && message) {
-            try {
-              const storedMessages = JSON.parse(localStorage.getItem(recipient)) || [];
-              storedMessages.push({ message, timestamp: data.timestamp });
-              localStorage.setItem(recipient, JSON.stringify(storedMessages));
-              console.log('LocalStorage after saving:', localStorage.getItem(recipient));
-            } catch (error) {
-              console.error('Error accessing localStorage:', error);
-            }
-          } else {
-            console.error('Received message is missing recipient or message.');
-          }
         }
       };
     }
-  }, [ws]);
+  }, [ws, username]);
 
   const handleUserSelect = (recipient) => {
-    router.push(`/${recipient}`);
+    router.push(`/u/${recipient}`);
   };
 
   return (
@@ -125,14 +149,12 @@ function WebSocketLayout({
             filteredUsers={filteredUsers}
             handleUserSelect={handleUserSelect}
           />
-          <div style={{ flex: 1, padding: '20px' }}>
-            {children}
-          </div>
+          <div style={{ flex: 1 }}>{children}</div>
         </div>
       ) : (
         <div style={loginContainerStyle}>
-          <h2 style={headingStyle}>Login</h2>
           <div style={inputContainerStyle}>
+            <h2 style={headingStyle}>{isSignup ? 'Signup' : 'Login'}</h2>
             <input
               type="text"
               placeholder="Username"
@@ -147,11 +169,31 @@ function WebSocketLayout({
               onChange={(e) => setPassword(e.target.value)}
               style={inputStyle}
             />
-            <button onClick={connectAndAuthenticate} style={loginButtonStyle}>
-              {isLoading ? 'Connecting...' : 'Login'}
+            {isSignup && (
+              <input
+                type="password"
+                placeholder="Confirm Password"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                style={inputStyle}
+              />
+            )}
+            <button
+              onClick={isSignup ? handleSignup : connectAndAuthenticate}
+              style={loginButtonStyle}
+            >
+              {isLoading ? 'Processing...' : isSignup ? 'Signup' : 'Login'}
+            </button>
+            <button
+              onClick={() => setIsSignup(!isSignup)}
+              style={switchButtonStyle}
+            >
+              {isSignup ? 'Switch to Login' : 'Switch to Signup'}
             </button>
+            {error && <div style={{ color: 'red', display: 'flex', alignItems: 'center'}}><div style={{ width: '8px', height: '8px', backgroundColor: 'red', borderRadius: '50px', marginRight: '5px' }}/> {error}</div>}
+            {status === 'Error' && <p style={{ color: 'red' }}>Connection failed. Please try again.</p>}
           </div>
-          {status === 'Error' && <p style={{ color: 'red' }}>Connection failed. Please try again.</p>}
+
         </div>
       )}
     </div>
@@ -163,7 +205,7 @@ const loginContainerStyle = {
   justifyContent: 'center',
   alignItems: 'center',
   height: '100vh',
-  backgroundColor: '#2e2e4f',
+  backgroundColor: '#1c1c37',
 };
 
 const headingStyle = {
@@ -199,3 +241,12 @@ const loginButtonStyle = {
   cursor: 'pointer',
   transition: 'background-color 0.3s',
 };
+
+const switchButtonStyle = {
+  marginTop: '10px',
+  color: '#fff',
+  background: 'none',
+  border: 'none',
+  cursor: 'pointer',
+  textDecoration: 'underline',
+};

frontend/app/{[recipientusername] → u/[recipientusername]}/page.js

@@ -1,45 +1,52 @@
 "use client";
 import { useState, useEffect } from "react";
 import { useParams } from "next/navigation";
-import { useWebSocket } from "../WebSocketContext"; // Import the WebSocket hook
+import { useWebSocket } from "../../WebSocketContext";
+import Image from "next/image";
 
 export default function ChatPage() {
-  const { recipientusername } = useParams(); // Use useParams to access the dynamic route parameter
+  const { recipientusername } = useParams();
   const [recipient, setRecipient] = useState(null);
   const [message, setMessage] = useState("");
   const [chatLog, setChatLog] = useState([]);
-  const { ws } = useWebSocket(); // Access WebSocket from context
+  const { ws } = useWebSocket();
+
+  const [me, setMe] = useState("");
+
+  useEffect(() => {
+    // Retrieve 'me' from localStorage
+    const storedMe = localStorage.getItem("me");
+    if (storedMe) {
+      setMe(storedMe);
+    }
+  }, []);
 
-  // Update recipient state when recipientusername changes
   useEffect(() => {
     if (recipientusername) {
       setRecipient(recipientusername);
     }
   }, [recipientusername]);
 
-  // Load chat history from localStorage when recipient changes
   useEffect(() => {
     if (recipient) {
       const storedMessages = JSON.parse(localStorage.getItem(recipient)) || [];
-      setChatLog(storedMessages);
+      setChatLog(formatMessages(storedMessages));
     }
   }, [recipient]);
 
-  // Re-fetch the chat log every 2 seconds
   useEffect(() => {
     const interval = setInterval(() => {
       if (recipient) {
-        const updatedMessages = JSON.parse(localStorage.getItem(recipient)) || [];
-        setChatLog(updatedMessages);
+        const updatedMessages =
+          JSON.parse(localStorage.getItem(recipient)) || [];
+        setChatLog(formatMessages(updatedMessages));
       }
-    }, 2000); // Fetch chat log every 2 seconds
+    }, 2000);
 
-    // Cleanup the interval when component unmounts
     return () => clearInterval(interval);
   }, [recipient]);
 
   const handleSendMessage = () => {
-    // Check if the WebSocket is connected and the message is not empty
     if (!ws) {
       alert("WebSocket is not connected.");
       return;
@@ -54,91 +61,168 @@ export default function ChatPage() {
       const msgData = JSON.stringify({ recipient, message });
       ws.send(msgData);
 
-      setChatLog((prev) => [
-        ...prev,
-        { from: "You", message, timestamp: new Date().toLocaleString() },
-      ]);
+      const newMessage = {
+        from: "You",
+        message,
+        timestamp: new Date().toISOString(), // Use ISO 8601 for consistency
+      };
+
+      setChatLog((prev) => [...prev, formatMessage(newMessage)]);
       setMessage("");
 
-      // Update localStorage
-      const updatedChatLog = [
-        ...chatLog,
-        { from: "You", message, timestamp: new Date().toLocaleString() },
-      ];
+      const updatedChatLog = [...chatLog, newMessage];
       localStorage.setItem(recipient, JSON.stringify(updatedChatLog));
     }
   };
 
+  const formatMessages = (messages) => {
+    return messages.map(formatMessage);
+  };
+
+  const formatMessage = (message) => {
+    const formattedTimestamp = new Date(message.timestamp).toLocaleString();
+    return { ...message, timestamp: formattedTimestamp };
+  };
+
   return (
     <div
       style={{
         backgroundColor: "#1a1a2e",
         minHeight: "100vh",
+        display: "flex",
+        flexDirection: "column",
         fontFamily: "Segoe UI, Tahoma, Geneva, Verdana, sans-serif",
-        padding: "20px",
         color: "#fff",
       }}
     >
       {recipient ? (
         <>
-          <h1 style={{ color: "#d4a5ff" }}>Chat with {recipient}</h1>
-
-          <div style={{ width: "100%", maxWidth: "600px" }}>
-            <div style={{ marginBottom: "10px" }}>
-              <input
-                type="text"
-                placeholder="Message"
-                value={message}
-                onChange={(e) => setMessage(e.target.value)}
-                style={inputStyle}
-              />
-              <button onClick={handleSendMessage} style={sendButtonStyle}>
-                Send
-              </button>
-            </div>
-
-            <div
-              style={{
-                maxHeight: "400px",
-                overflowY: "auto",
-                marginTop: "20px",
-                padding: "10px",
-                backgroundColor: "#2e2e4f",
-                borderRadius: "10px",
-                boxShadow: "0 2px 5px rgba(0, 0, 0, 0.2)",
-              }}
-            >
-              {chatLog.map((entry, index) => (
+          {/* Chat Header */}
+          <div
+            style={{
+              backgroundColor: "#170f3f",
+              padding: "10px",
+              display: "flex",
+              alignItems: "center",
+              gap: "10px",
+            }}
+          >
+            <Image
+              src={`https://ui-avatars.com/api/?name=${encodeURIComponent(
+                recipient
+              )}&background=random`}
+              alt={`${recipient}'s avatar`}
+              width={40}
+              height={40}
+              style={{ borderRadius: "50%", marginLeft: "40px" }}
+            />
+            <h1 style={{ margin: 0, fontSize: "20px" }}>
+              {recipient === me ? `${recipient} (Me)` : recipient}
+            </h1>
+          </div>
+
+          {/* Chat Log */}
+          <div
+            style={{
+              flex: 1,
+              overflowY: "auto",
+              padding: "20px",
+              backgroundColor: "#1c1c2f",
+              display: "flex",
+              flexDirection: "column",
+              gap: "10px",
+              borderTop: "1px solid #3d3d6b",
+            }}
+          >
+            {chatLog.map((entry, index) => (
+              <div
+                key={index}
+                style={{
+                  display: "flex",
+                  alignItems: "flex-end",
+                  flexDirection: entry.from === "You" ? "row-reverse" : "row",
+                  gap: "10px",
+                }}
+              >
+                {/* Avatar */}
+                <Image
+                  src={
+                    entry.from === "You"
+                      ? `https://ui-avatars.com/api/?name=${encodeURIComponent(
+                          me
+                        )}&background=random`
+                      : `https://ui-avatars.com/api/?name=${encodeURIComponent(
+                          recipient
+                        )}&background=random`
+                  }
+                  alt={`${entry.from}'s avatar`}
+                  width={30}
+                  height={30}
+                  style={{ borderRadius: "50%" }}
+                />
+
+                {/* Message */}
                 <div
-                  key={index}
                   style={{
-                    backgroundColor: entry.from === "You" ? "#4b2e83" : "#3d3d6b",
+                    backgroundColor:
+                      entry.from === "You" ? "#3b2e83" : "#3d446b",
                     color: "#fff",
                     padding: "10px",
-                    marginBottom: "10px",
                     borderRadius: "10px",
-                    maxWidth: "80%",
-                    marginLeft: entry.from === "You" ? "auto" : "0",
+                    maxWidth: "70%",
                     wordWrap: "break-word",
                   }}
                 >
-                  <p
-                    style={{
-                      margin: 0,
-                      fontWeight: "bold",
-                      fontSize: "14px",
-                      color: "#e0b0ff",
-                    }}
-                  >
-                    {entry.from}
-                  </p>
+                  <p style={{ margin: 0, fontWeight: "bold" }}>{entry.from}</p>
                   <p style={{ margin: "5px 0" }}>{entry.message}</p>
                   <small style={{ fontSize: "12px", color: "#a1a1c7" }}>
                     {entry.timestamp}
                   </small>
                 </div>
-              ))}
-            </div>
+              </div>
+            ))}
+          </div>
+
+          {/* Message Input */}
+          <div
+            style={{
+              backgroundColor: "#171927",
+              borderTop: "1px solid rgb(95, 38, 207)",
+              padding: "10px",
+              display: "flex",
+              gap: "10px",
+            }}
+          >
+            <input
+              type="text"
+              placeholder="Type your message..."
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              style={{
+                flex: 1,
+                padding: "10px",
+                borderRadius: "5px",
+                border: "1px solid #4b2e83",
+                fontSize: "16px",
+                backgroundColor: "#2e2e4f",
+                color: "#fff",
+              }}
+            />
+            <button
+              onClick={handleSendMessage}
+              style={{
+                padding: "10px 20px",
+                backgroundColor: "#3b2e83",
+                color: "#fff",
+                border: "none",
+                borderRadius: "5px",
+                fontSize: "16px",
+                cursor: "pointer",
+                transition: "background-color 0.3s",
+              }}
+            >
+              Send
+            </button>
           </div>
         </>
       ) : (
@@ -147,26 +231,3 @@ export default function ChatPage() {
     </div>
   );
 }
-
-const inputStyle = {
-  width: "100%",
-  padding: "10px",
-  margin: "5px 0",
-  borderRadius: "5px",
-  border: "1px solid #4b2e83",
-  fontSize: "16px",
-  backgroundColor: "#2e2e4f",
-  color: "#fff",
-};
-
-const sendButtonStyle = {
-  padding: "12px 20px",
-  backgroundColor: "#6a4c9c",
-  color: "#fff",
-  border: "none",
-  borderRadius: "5px",
-  fontSize: "16px",
-  cursor: "pointer",
-  marginLeft: "10px",
-  transition: "background-color 0.3s",
-};

frontend/next.config.mjs

@@ -1,4 +1,22 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    images: {
+      dangerouslyAllowSVG: true,
+      remotePatterns: [
+        {
+          protocol: 'https',
+          hostname: 'via.placeholder.com',
+          port: '',
+          pathname: '/**',
+        },
+        {
+          protocol: 'https',
+          hostname: 'ui-avatars.com',
+          port: '',
+          pathname: '/api/**',
+        },
+      ],
+    },
+  };
 
 export default nextConfig;