Added styles to project + rewrote some logic

backend/routes/Users.js

@@ -5,10 +5,11 @@ import shortid from 'shortid';
 const router = express.Router();
 
 router.post('/', async (req, res) => {
+    const {username, password} = req.body
     try{
         const user = new User({
-            username: req.body.username,
-            password: req.body.password
+            username,
+            password
         });
         user.generateToken();
         await user.save();

frontend/.env

+VITE_BASE_URL=http://localhost:8000/
\ No newline at end of file

frontend/package-lock.json

@@ -17,6 +17,7 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "axios": "^1.1.2",
+        "dotenv": "^16.0.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-redux": "^8.0.4",
@@ -7201,11 +7202,11 @@
       }
     },
     "node_modules/dotenv": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
-      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
+      "version": "16.0.3",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz",
+      "integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==",
       "engines": {
-        "node": ">=10"
+        "node": ">=12"
       }
     },
     "node_modules/dotenv-expand": {
@@ -14731,6 +14732,14 @@
         }
       }
     },
+    "node_modules/react-scripts/node_modules/dotenv": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
+      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -22602,9 +22611,9 @@
       }
     },
     "dotenv": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
-      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q=="
+      "version": "16.0.3",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz",
+      "integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ=="
     },
     "dotenv-expand": {
       "version": "5.1.0",
@@ -27857,6 +27866,13 @@
         "webpack-dev-server": "^4.6.0",
         "webpack-manifest-plugin": "^4.0.2",
         "workbox-webpack-plugin": "^6.4.1"
+      },
+      "dependencies": {
+        "dotenv": {
+          "version": "10.0.0",
+          "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
+          "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q=="
+        }
       }
     },
     "react-transition-group": {

frontend/package.json

@@ -12,6 +12,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.1.2",
+    "dotenv": "^16.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.4",

frontend/src/Components/ChatWindow/ChatWindow.css

@@ -10,7 +10,8 @@
 .ChatWindow {
     width: 100%;
     height: 87%;
-    border: 1px solid blueviolet;
+    border: 2px solid rgb(0, 0, 0);
+    background: rgba(66, 66, 66, 0.527);
     border-radius: 20px;
     padding: 20px;
     box-sizing: border-box;

frontend/src/Components/Header/Header.css

@@ -6,6 +6,7 @@
     height: 5vh;
     padding: 15px 0;
     background-color: rgba(18, 18, 18, 0.7);
+    transition: 0.2s;
 }
 
 .headerTitle {

frontend/src/Components/Register/Register.js

@@ -10,7 +10,6 @@ import './Register.css';
 const Register = (props) => {
     const {registerError, isLoading} = useSelector(state => state.users, shallowEqual);
     const dispatch = useDispatch();
-
     const [state, setState] = useState({
         username: '',
         password: ''
@@ -21,9 +20,9 @@ const Register = (props) => {
         setState(prevState => ({...prevState, [name]: value}));
     };
 
-    const submitHandler = (e) => {
+    const submitHandler = async (e) => {
         e.preventDefault();
-        dispatch(registerUser({
+        await dispatch(registerUser({
             userData: {...state}
         }));
     };

frontend/src/Components/UI/Form/Form.css

@@ -20,10 +20,6 @@
     animation: pulsate 1.2s linear infinite;
 }
 
-@keyframes pulsate {
-    50% {color:#fff; text-shadow:0 -1px rgba(0,0,0,.3), 0 0 5px #f03000, 0 0 8px #f80000;}
-}
-
 .register_form {
     display: flex;
     height: 100%;

frontend/src/Container/Authentication/Authentication.css

+
+.Authentication{
+    padding: 20px;
+    border-radius: 5px;
+    background: rgba(0, 0, 0, 0.516)
+}
\ No newline at end of file

frontend/src/Container/Authentication/Authentication.js

@@ -10,31 +10,31 @@ import './Authentication.css';
 
 
 const Authentication = () => {
-    const [state, setState] = useState({
+    const [authState, setAuthState] = useState({
         isRegister: 'active',
         isLogin: 'no-active'
     });
 
     const handleChange = (e) => {
         if(e.target.value === 'register') {
-            setState(prevState => ({...prevState, isLogin: 'no-active', isRegister: 'active'}));
+            setAuthState(prevState => ({...prevState, isLogin: 'no-active', isRegister: 'active'}));
         } else {
-            setState(prevState => ({...prevState, isLogin: 'active', isRegister: 'no-active'}));
+            setAuthState(prevState => ({...prevState, isLogin: 'active', isRegister: 'no-active'}));
         };
     };
 
     return(
         <div className="Authentication">
             <div className="Authentication_pagination">
+            </div>
             <FormControl>
                 <RadioGroup aria-labelledby="demo-radio-buttons-group-label" defaultValue="register" name="radio-buttons-group">
-                    <FormControlLabel onClick={handleChange} sx={{color: 'blueviolet', textShadow: '0px 0px 20px blueviolet'}} value="register" control={<Radio color="secondary"/>} label="Register" />
-                    <FormControlLabel onClick={handleChange} sx={{color: 'blueviolet', textShadow: '0px 0px 20px blueviolet'}} value="login" control={<Radio color="secondary"/>} label="Login" />
+                    <FormControlLabel onClick={handleChange} sx={{color: 'white', textShadow: '0px 0px 20px blueviolet'}} value="register" control={<Radio color="secondary"/>} label="Register" />
+                    <FormControlLabel onClick={handleChange} sx={{color: 'white', textShadow: '0px 0px 20px blueviolet'}} value="login" control={<Radio color="secondary"/>} label="Login" />
                 </RadioGroup>
             </FormControl>
-            </div>
-            <Register registerState={state.isRegister}/>
-            <Login loginState={state.isLogin}/>
+            <Register registerState={authState.isRegister}/>
+            <Login loginState={authState.isLogin}/>
         </div>
     );
 };

frontend/src/Store/Services/messagesSlice.js

@@ -22,8 +22,7 @@ const messagesSlice = createSlice({
             state.users = action.payload;
         },
         deleteOfflineUser: (state, action) => {
-            const index = state.users.findIndex(user => user._id === action.payload);
-            state.users.splice(index, 1);
+            state.users = state.users.filter((user) => user._id !== action.payload)
         }
     }
 });

frontend/src/Store/Services/usersSlice.js

@@ -72,6 +72,7 @@ const usersSlice = createSlice({
             state.registerError = action.payload;
         },
         catchLoginError: (state, action) => {
+            console.log(action.payload);
             state.loginError = action.payload;
         },
         globalError: (state, action) => {