debug 3

frontend/app/Auth.js

@@ -13,14 +13,46 @@ const Auth = ({
   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 [ws, setWs] = useState(null);  // WebSocket connection state
 
+  // Initialize WebSocket
+  const initializeWebSocket = () => {
+    const socket = new WebSocket('ws://your-websocket-server-url'); // Replace with actual WebSocket URL
+    socket.onopen = () => {
+      console.log('WebSocket connection established');
+    };
+    socket.onclose = () => {
+      console.log('WebSocket connection closed');
+    };
+    setWs(socket);
+  };
+
+  // Handle login and signup requests
+  const connectAndAuthenticate = (data) => {
+    setError('');
+    if (!username || !password) {
+      setError('Please enter both username and password');
+      return;
+    }
+
+    setIsLoading(true);
+
+    // Send authentication data over WebSocket if connection is open
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      ws.send(data);
+    } else {
+      setError('WebSocket connection is not established');
+      setIsLoading(false);
+    }
+  };
+
+  // Validation for signup form
   const validateSignup = () => {
     if (!username || !password || !confirmPassword) {
       setError('Please fill in all fields');
@@ -30,7 +62,7 @@ const Auth = ({
       setError('Username must be at least 4 characters');
       return false;
     }
-    if (password.length < 8) {  // Password must be at least 8 characters long
+    if (password.length < 8) {
       setError('Password must be at least 8 characters');
       return false;
     }
@@ -41,22 +73,22 @@ const Auth = ({
     return true;
   };
 
+  // Signup handler
   const handleSignup = () => {
     if (!validateSignup()) return;
 
-    setIsLoading(true);
-    const signupData = JSON.stringify({ username, password, action: 'signup' });  // Ensure 'signup' action is passed
+    const signupData = JSON.stringify({ username, password, action: 'signup' });
     connectAndAuthenticate(signupData);
   };
 
+  // Login handler
   const handleLogin = () => {
     if (!username || !password) {
       setError('Please enter both username and password');
       return;
     }
 
-    setIsLoading(true);
-    const loginData = JSON.stringify({ username, password, action: 'login' });  // Ensure 'login' action is passed
+    const loginData = JSON.stringify({ username, password, action: 'login' });
     connectAndAuthenticate(loginData);
   };
 
@@ -68,7 +100,7 @@ const Auth = ({
 
   const checkPassword = (value) => {
     setPassword(value);
-    setPasswordValid(value.length >= 8);  // Updated to check for minimum 8 characters
+    setPasswordValid(value.length >= 8);
   };
 
   const checkPasswordsMatch = (value) => {

frontend/app/layout.js

@@ -78,21 +78,6 @@ function WebSocketLayout({
   const { ws, status } = useWebSocket();
   const router = useRouter();
 
-  const connectAndAuthenticate = () => {
-    setError('');
-    if (!username || !password) {
-      setError('Please enter both username and password');
-      return;
-    }
-
-    setIsLoading(true);
-
-    const requestData = JSON.stringify({ username, password });
-    if (ws && ws.readyState === WebSocket.OPEN) {
-      ws.send(requestData);
-    }
-  };
-
   const handleUserSelect = (recipient) => {
     router.push(`/u/${recipient}`);
   };
@@ -144,7 +129,7 @@ function WebSocketLayout({
             setError={setError}
             isSignup={isSignup}
             setIsSignup={setIsSignup}
-            connectAndAuthenticate={connectAndAuthenticate}
+            
           />
         </div>
       )}