update 2

frontend/app/Auth.js

@@ -0,0 +1,277 @@
+import { useState } from 'react';
+
+const Auth = ({
+  username,
+  setUsername,
+  password,
+  setPassword,
+  confirmPassword,
+  setConfirmPassword,
+  isLoading,
+  setIsLoading,
+  error,
+  setError,
+  isSignup,
+  setIsSignup,
+  connectAndAuthenticate
+}) => {
+  const [usernameValid, setUsernameValid] = useState(false);
+  const [passwordValid, setPasswordValid] = useState(false);
+  const [passwordsMatch, setPasswordsMatch] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+
+  const validateSignup = () => {
+    if (!username || !password || !confirmPassword) {
+      setError('Please fill in all fields');
+      return false;
+    }
+    if (username.length < 4) {
+      setError('Username must be at least 4 characters');
+      return false;
+    }
+    if (password.length <= 8) {
+      setError('Password must be longer than 8 characters');
+      return false;
+    }
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return false;
+    }
+    return true;
+  };
+
+  const handleSignup = () => {
+    if (!validateSignup()) return;
+
+    setIsLoading(true);
+    const signupData = JSON.stringify({ username, password, action: 'signup' });
+    connectAndAuthenticate(signupData);
+  };
+
+  const handleLogin = () => {
+    if (!username || !password) {
+      setError('Please enter both username and password');
+      return;
+    }
+
+    setIsLoading(true);
+    const loginData = JSON.stringify({ username, password, action: 'login' });
+    connectAndAuthenticate(loginData);
+  };
+
+  // Validations to dynamically update conditions
+  const checkUsername = (value) => {
+    setUsername(value);
+    setUsernameValid(value.length >= 4);
+  };
+
+  const checkPassword = (value) => {
+    setPassword(value);
+    setPasswordValid(value.length > 8);
+  };
+
+  const checkPasswordsMatch = (value) => {
+    setConfirmPassword(value);
+    setPasswordsMatch(value === password);
+  };
+
+  return (
+    <div style={inputContainerStyle}>
+      {isSignup ? (
+        // Signup Form
+        <div style={inputContainerStyle}>
+          <h2 style={headingStyle}>Signup</h2>
+          <input
+            type="text"
+            placeholder="Username"
+            value={username}
+            onChange={(e) => checkUsername(e.target.value)}
+            style={inputStyle}
+          />
+          <div style={passwordInputContainerStyle}>
+            <input
+              type={showPassword ? 'text' : 'password'}
+              placeholder="Password"
+              value={password}
+              onChange={(e) => checkPassword(e.target.value)}
+              style={inputStyle}
+            />
+            <span
+              onClick={() => setShowPassword(!showPassword)}
+              style={eyeIconStyle}
+            >
+              👁️
+            </span>
+          </div>
+          <div style={passwordInputContainerStyle}>
+            <input
+              type={showConfirmPassword ? 'text' : 'password'}
+              placeholder="Confirm Password"
+              value={confirmPassword}
+              onChange={(e) => checkPasswordsMatch(e.target.value)}
+              style={inputStyle}
+            />
+            <span
+              onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+              style={eyeIconStyle}
+            >
+              👁️
+            </span>
+          </div>
+          <div style={buttonContainerStyle}>
+            <button
+              onClick={handleSignup}
+              style={loginButtonStyle}
+            >
+              {isLoading ? 'Processing...' : 'Signup'}
+            </button>
+          </div>
+        </div>
+      ) : (
+        // Login Form
+        <div style={inputContainerStyle}>
+          <h2 style={headingStyle}>Login</h2>
+          <input
+            type="text"
+            placeholder="Username"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            style={inputStyle}
+          />
+          <div style={passwordInputContainerStyle}>
+            <input
+              type={showPassword ? 'text' : 'password'}
+              placeholder="Password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              style={inputStyle}
+            />
+            <span
+              onClick={() => setShowPassword(!showPassword)}
+              style={eyeIconStyle}
+            >
+              👁️
+            </span>
+          </div>
+          <div style={buttonContainerStyle}>
+            <button
+              onClick={handleLogin}
+              style={loginButtonStyle}
+            >
+              {isLoading ? 'Processing...' : 'Login'}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {isSignup && (
+        <div style={conditionsContainerStyle}>
+          <h3 style={conditionsHeaderStyle}>Signup Conditions</h3>
+          <ul>
+            <li style={{ color: usernameValid ? 'green' : 'red' }}>
+              {usernameValid ? '✔ Username must be at least 4 characters' : '✘ Username must be at least 4 characters'}
+            </li>
+            <li style={{ color: passwordValid ? 'green' : 'red' }}>
+              {passwordValid ? '✔ Password must be longer than 8 characters' : '✘ Password must be longer than 8 characters'}
+            </li>
+            <li style={{ color: passwordsMatch ? 'green' : 'red' }}>
+              {passwordsMatch ? '✔ Passwords match' : '✘ Passwords do not match'}
+            </li>
+          </ul>
+        </div>
+      )}
+
+      <div style={buttonContainerStyle}>
+        <button
+          onClick={() => setIsSignup(!isSignup)}
+          style={switchButtonStyle}
+        >
+          {isSignup ? 'Already have an Account? Login' : 'Don\'t have an Account? Signup'}
+        </button>
+      </div>
+
+      {error && <div style={{ color: 'red', display: 'flex', alignItems: 'center' }}>
+        <div style={{ width: '8px', height: '8px', backgroundColor: 'red', borderRadius: '50px', marginRight: '5px' }} />
+        {error}
+      </div>}
+    </div>
+  );
+};
+
+const inputContainerStyle = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '15px',
+  maxWidth: '400px',
+  width: '100%',
+};
+
+const headingStyle = {
+  color: '#d4a5ff',
+  fontSize: '36px',
+};
+
+const inputStyle = {
+  padding: '10px',
+  fontSize: '16px',
+  borderRadius: '5px',
+  border: '1px solid #4b2e83',
+  marginBottom: '10px',
+  backgroundColor: '#2e2e4f',
+  color: '#fff',
+};
+
+const passwordInputContainerStyle = {
+  position: 'relative',
+  display: 'grid',
+};
+
+const eyeIconStyle = {
+  position: 'absolute',
+  right: '10px',
+  top: '50%',
+  transform: 'translateY(-50%)',
+  cursor: 'pointer',
+};
+
+const loginButtonStyle = {
+  padding: '12px 20px',
+  backgroundColor: '#6a4c9c',
+  color: '#fff',
+  border: 'none',
+  borderRadius: '5px',
+  fontSize: '16px',
+  cursor: 'pointer',
+  transition: 'background-color 0.3s',
+};
+
+const switchButtonStyle = {
+  marginTop: '10px',
+  color: '#fff',
+  background: 'none',
+  border: 'none',
+  cursor: 'pointer',
+  textDecoration: 'underline',
+};
+
+const buttonContainerStyle = {
+  display: 'flex',
+  justifyContent: 'center', 
+};
+
+const conditionsContainerStyle = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '10px',
+  marginTop: '15px',
+  maxWidth: '300px',
+};
+
+const conditionsHeaderStyle = {
+  color: '#d4a5ff',
+  fontSize: '20px',
+  marginBottom: '5px',
+};
+
+export default Auth;

frontend/app/WebSocketContext.js

@@ -9,43 +9,77 @@ export const useWebSocket = () => {
 export const WebSocketProvider = ({ children }) => {
   const [ws, setWs] = useState(null);
   const [status, setStatus] = useState('Disconnected');
+  const [retryCount, setRetryCount] = useState(0); // For retrying WebSocket connection
+  const [timeoutError, setTimeoutError] = useState(false); // Timeout error state
+
+  const maxRetries = 5; // Max retry attempts
 
   useEffect(() => {
     const relayUrl = process.env.NEXT_PUBLIC_RELAY_URL;
 
-    console.log(relayUrl)
-
     if (!relayUrl) {
       console.error('Environment variable NEXT_PUBLIC_RELAY_URL is not defined.');
       return;
     }
 
-    const socket = new WebSocket(relayUrl);
+    const connectWebSocket = () => {
+      const socket = new WebSocket(relayUrl);
 
-    socket.onopen = () => {
-      console.log('WebSocket connection opened.');
-      setStatus('Connected');
-    };
+      socket.onopen = () => {
+        console.log('WebSocket connection opened.');
+        setStatus('Connected');
+        setRetryCount(0); // Reset retry count on successful connection
+        setTimeoutError(false); // Reset timeout error
+      };
 
-    socket.onclose = () => {
-      console.log('WebSocket connection closed.');
-      setStatus('Disconnected');
+      socket.onclose = () => {
+        console.log('WebSocket connection closed.');
+        setStatus('Disconnected');
+        handleReconnection();
+      };
+
+      socket.onerror = (error) => {
+        console.error('WebSocket error:', error);
+        setStatus('Error');
+        handleReconnection();
+      };
+
+      setWs(socket);
     };
 
-    socket.onerror = (error) => {
-      console.error('WebSocket error:', error);
-      setStatus('Error');
+    // Function to handle reconnection with retry
+    const handleReconnection = () => {
+      if (retryCount < maxRetries) {
+        setRetryCount(retryCount + 1);
+        setStatus('Reconnecting...');
+        console.log(`Attempting reconnect ${retryCount + 1}/${maxRetries}`);
+        setTimeout(() => connectWebSocket(), 2000 * (retryCount + 1)); // Retry with increasing delay
+      } else {
+        console.error('Max retries reached. WebSocket connection failed.');
+        setStatus('Failed');
+      }
     };
 
-    setWs(socket);
+    connectWebSocket();
+
+    // Timeout mechanism to handle stuck connections
+    const timeout = setTimeout(() => {
+      if (status === 'Connecting' || status === 'Reconnecting') {
+        setTimeoutError(true);
+        setStatus('Timeout - Could not connect');
+      }
+    }, 10000); // 10 seconds timeout
 
     return () => {
-      socket.close();
+      clearTimeout(timeout); // Cleanup timeout on unmount
+      if (ws) {
+        ws.close();
+      }
     };
-  }, []);
+  }, [status, retryCount]);
 
   return (
-    <WebSocketContext.Provider value={{ ws, status }}>
+    <WebSocketContext.Provider value={{ ws, status, timeoutError }}>
       {children}
     </WebSocketContext.Provider>
   );

frontend/app/layout.js

@@ -4,6 +4,7 @@ import { useRouter } from 'next/navigation';
 import { WebSocketProvider, useWebSocket } from './WebSocketContext';
 import './globals.css';
 import Sidebar from './Sidebar';
+import Auth from './Auth';
 
 export default function RootLayout({ children }) {
   const [username, setUsername] = useState('');
@@ -77,18 +78,6 @@ function WebSocketLayout({
   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) {
@@ -104,15 +93,8 @@ function WebSocketLayout({
     }
   };
 
-  const handleSignup = () => {
-    if (!validateSignup()) return;
-
-    setIsLoading(true);
-
-    const signupData = JSON.stringify({ username, password, action: 'signup' });
-    if (ws && ws.readyState === WebSocket.OPEN) {
-      ws.send(signupData);
-    }
+  const handleUserSelect = (recipient) => {
+    router.push(`/u/${recipient}`);
   };
 
   useEffect(() => {
@@ -134,10 +116,6 @@ function WebSocketLayout({
     }
   }, [ws, username]);
 
-  const handleUserSelect = (recipient) => {
-    router.push(`/u/${recipient}`);
-  };
-
   return (
     <div>
       {isLoggedIn ? (
@@ -153,47 +131,21 @@ function WebSocketLayout({
         </div>
       ) : (
         <div style={loginContainerStyle}>
-          <div style={inputContainerStyle}>
-            <h2 style={headingStyle}>{isSignup ? 'Signup' : 'Login'}</h2>
-            <input
-              type="text"
-              placeholder="Username"
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              style={inputStyle}
-            />
-            <input
-              type="password"
-              placeholder="Password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              style={inputStyle}
-            />
-            {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>
-
+          <Auth
+            username={username}
+            setUsername={setUsername}
+            password={password}
+            setPassword={setPassword}
+            confirmPassword={confirmPassword}
+            setConfirmPassword={setConfirmPassword}
+            isLoading={isLoading}
+            setIsLoading={setIsLoading}
+            error={error}
+            setError={setError}
+            isSignup={isSignup}
+            setIsSignup={setIsSignup}
+            connectAndAuthenticate={connectAndAuthenticate}
+          />
         </div>
       )}
     </div>
@@ -207,46 +159,3 @@ const loginContainerStyle = {
   height: '100vh',
   backgroundColor: '#1c1c37',
 };
-
-const headingStyle = {
-  color: '#d4a5ff',
-  fontSize: '36px',
-};
-
-const inputContainerStyle = {
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '15px',
-  maxWidth: '400px',
-  width: '100%',
-};
-
-const inputStyle = {
-  padding: '10px',
-  fontSize: '16px',
-  borderRadius: '5px',
-  border: '1px solid #4b2e83',
-  marginBottom: '10px',
-  backgroundColor: '#2e2e4f',
-  color: '#fff',
-};
-
-const loginButtonStyle = {
-  padding: '12px 20px',
-  backgroundColor: '#6a4c9c',
-  color: '#fff',
-  border: 'none',
-  borderRadius: '5px',
-  fontSize: '16px',
-  cursor: 'pointer',
-  transition: 'background-color 0.3s',
-};
-
-const switchButtonStyle = {
-  marginTop: '10px',
-  color: '#fff',
-  background: 'none',
-  border: 'none',
-  cursor: 'pointer',
-  textDecoration: 'underline',
-};

frontend/app/page.js

@@ -3,10 +3,19 @@
 import { useState } from "react";
 
 export default function ChatPage() {
-
-
   return (
-    <div style={{ width: "100%", maxWidth: "600px" }}>
+    <div style={{ width: "100%", padding: "20px", backgroundColor: "rgb(28, 28, 47)", minHeight: "100vh" }}>
+      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '100%', width: '100%' }}>
+        <div style={{ textAlign: 'center' }}>
+          <h1 style={{ color: "#4a4a4a", fontSize: "24px", marginBottom: "20px" }}>Welcome to Nexus</h1>
+          <p style={{ color: "#7d7d7d", fontSize: "16px", marginBottom: "20px" }}>
+            Open the sidebar to find and start conversations with your contacts.
+          </p>
+          <div style={{ fontSize: "14px", color: "#aaa" }}>
+            <p>No chats selected yet. Choose a conversation from the sidebar.</p>
+          </div>
+        </div>
       </div>
-      );
-    }
+    </div>
+  );
+}

frontend/app/u/[recipientusername]/page.js

@@ -1,6 +1,7 @@
 "use client";
+
 import { useState, useEffect } from "react";
-import { useParams } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useWebSocket } from "../../WebSocketContext";
 import Image from "next/image";
 
@@ -12,6 +13,7 @@ export default function ChatPage() {
   const { ws } = useWebSocket();
 
   const [me, setMe] = useState("");
+  const router = useRouter(); // Hook to navigate
 
   useEffect(() => {
     // Retrieve 'me' from localStorage
@@ -84,6 +86,11 @@ export default function ChatPage() {
     return { ...message, timestamp: formattedTimestamp };
   };
 
+  const handleCloseChat = () => {
+    // Redirect to the root page ("/")
+    router.push("/");
+  };
+
   return (
     <div
       style={{
@@ -105,6 +112,7 @@ export default function ChatPage() {
               display: "flex",
               alignItems: "center",
               gap: "10px",
+              position: "relative",
             }}
           >
             <Image
@@ -119,6 +127,22 @@ export default function ChatPage() {
             <h1 style={{ margin: 0, fontSize: "20px" }}>
               {recipient === me ? `${recipient} (Me)` : recipient}
             </h1>
+
+            {/* Close Button */}
+            <button
+              onClick={handleCloseChat}
+              style={{
+                position: "absolute",
+                right: "10px",
+                background: "transparent",
+                border: "none",
+                color: "#fff",
+                fontSize: "30px",
+                cursor: "pointer",
+              }}
+            >
+              &times;
+            </button>
           </div>
 
           {/* Chat Log */}