feat: add login form with state and data collection to object

backend/app.js

@@ -25,10 +25,8 @@ app.get('/', (req, res) => {
   res.send('here will be login page')
 })
 
-//login page
-app.get('/chat', (req, res) => {
-  res.send('Chat page')
-})
+
+
 
 //on connection listen messages and send back text and user name in chat
 io.on("connection", (socket) => {

frontend/src/App.js

@@ -1,6 +1,7 @@
 import './App.css';
 import {io} from 'socket.io-client';
-import { Login } from './components/loginForm/LoginForm';
+import { LoginForm } from './components/loginForm/LoginForm';
+import { ChatPage } from './components/chatPage/ChatPage';
 
 
 
@@ -10,34 +11,33 @@ const socket = io.connect(SERVER_URL);
 
 
 //connecting with server and get back messages for chat
-socket.on("connect", () => {
-    socket.on('chat_message', (data) => {
-        console.log(data); 
-    }); 
-});   
+// socket.on("connect", () => {
+//     socket.on('chat_message', (data) => {
+//         console.log(data); 
+//     }); 
+// });   
 
 
-//testing send messages
-const sendMessage = (data) => {
-    socket.emit("message", data);
-    console.log(`send `)
-}
+// //testing send messages
+// const sendMessage = (data) => {
+//     socket.emit("message", data);
+//     console.log(`send `)
+// }
 
 
 
-sendMessage({
-    message: 'some 24334 message',
-    name: 'some name'
-});
+// sendMessage({
+//     message: 'some 24334 message',
+//     name: 'some name'
+// });
 
 
 
 
 function App() {
   return (
-    <>
-       <Login/>
-    </>
+    
+    <LoginForm/>
   );
 }
 

frontend/src/components/chatPage/ChatPage.js

@@ -0,0 +1,45 @@
+import Container from '@mui/material/Container';
+import { MessageForm } from './messageForm/MessageForm';
+import { MessageList} from './messageList/MessageList';
+import { UserInfo } from './userInfo/UserInfo';
+import { Userslist } from './usersList/UsersList';
+import Box from '@mui/material/Box';
+
+
+export const ChatPage = () => {
+    return (
+        <Container maxWidth="lg">
+            <Box 
+            sx={{
+                display: 'flex',
+            }}>
+                <Box
+                sx={{
+                    display: 'flex',
+                    flexGrow:'2',
+                    flexDirection: 'column',
+                    
+                }}
+                >
+                    <MessageList></MessageList>
+                    <MessageForm></MessageForm>
+                </Box>
+                <Box
+                sx={{
+                  
+                    display: 'flex',
+                    flexDirection: 'column',
+                    
+                }}
+                >
+                    <UserInfo></UserInfo>
+                    <Userslist></Userslist>
+                </Box>
+
+            </Box>
+         
+        </Container>
+        
+    )
+
+}

frontend/src/components/chatPage/message/Message.js

@@ -0,0 +1,13 @@
+import './message.css'
+
+export const Message= () => {
+    return (
+        <div className="message">
+
+        </div>
+
+
+        
+    )
+
+}

frontend/src/components/chatPage/message/message.css

@@ -0,0 +1,5 @@
+.message {
+    background-color: beige;
+    width: 200px;
+    height: 500px;
+}

frontend/src/components/chatPage/messageForm/MessageForm.js

@@ -0,0 +1,15 @@
+import Container from '@mui/material/Container';
+import TextField from '@mui/material/TextField';
+
+
+export const MessageForm = () => {
+    return (
+        <Container maxWidth="xs">
+
+           <TextField id="outlined-basic" label="Type a message..." variant="outlined" />
+        
+        </Container>
+        
+    )
+
+}

frontend/src/components/chatPage/messageList/MessageList.js

@@ -0,0 +1,7 @@
+import { Message } from "../message/Message"
+export const MessageList= () => {
+    return (
+        <Message></Message>
+    )
+
+}

frontend/src/components/chatPage/userInfo/UserInfo.js

@@ -0,0 +1,14 @@
+import Container from '@mui/material/Container';
+import TextField from '@mui/material/TextField';
+
+export const UserInfo = () => {
+    return (
+        <Container maxWidth="xs">
+ 
+        
+        
+        </Container>
+        
+    )
+
+}

frontend/src/components/chatPage/usersList/UsersList.js

@@ -0,0 +1,14 @@
+import Container from '@mui/material/Container';
+import TextField from '@mui/material/TextField';
+
+export const Userslist = () => {
+    return (
+        <Container maxWidth="xs">
+ 
+        
+        
+        </Container>
+        
+    )
+
+}

frontend/src/components/loginForm/LoginForm.js

@@ -1,19 +1,31 @@
+
 import Button from '@mui/material/Button';
 import TextField from '@mui/material/TextField';
 import Container from '@mui/material/Container';
-import CssBaseline from '@mui/material/CssBaseline';
 import Box from '@mui/material/Box';
+import { useState } from 'react';
+
+
 
+export const LoginForm = () => {
 
-export const Login = () => {
+    const [userData, setUserdata] = useState({userName:'', password: ''});
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        console.log(userData)
+        setUserdata({userName:'', password: ''});
+    }
+    
     return (
         <Container maxWidth="xs">
             <Box
+            component="form" 
+            onSubmit={(e) => handleSubmit(e)}
             sx={{
                 marginTop: 40,
                 display: 'flex',
                 flexDirection: 'column',
-                alignItems: 'center',
             }}
             >
                 <TextField
@@ -25,6 +37,9 @@ export const Login = () => {
                 name="userName"
                 autoComplete="email"
                 autoFocus
+                value={userData.userName}
+                onChange={e => setUserdata({...userData, userName: e.target.value})}
+                
                 />
                 <TextField
                 margin="normal"
@@ -35,8 +50,12 @@ export const Login = () => {
                 type="password"
                 id="password"
                 autoComplete="current-password"
+                value={userData.password}
+                onChange={e => setUserdata({...userData, password: e.target.value})}
+
                 />
                 <Button 
+                type="submit"
                 variant="contained"
                 fullWidth>Login
                 </Button>