Merge branch 'main' into flicker

frontend/package.json

@@ -16,11 +16,13 @@
     "express": "^4.19.2",
     "flowbite": "^2.3.0",
     "flowbite-react": "^0.9.0",
+    "framer-motion": "^11.2.6",
     "mongoose": "^8.3.5",
     "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-datepicker": "^6.9.0",
     "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
     "react-icons": "^5.2.1",
     "react-multi-carousel": "^2.8.5",
     "react-router-dom": "^6.23.1",

frontend/src/Components/Pages/Landing-Page/JoinWithCode.jsx

@@ -1,25 +1,150 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
 import img2 from '../../../assets/Landing-Page-Assets/refresh.png';
+
 const JoinWithCode = () => {
+  const [meetingCode, setMeetingCode] = useState('');
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
+
+  const handleInputChange = (e) => {
+    setMeetingCode(e.target.value);
+  };
+
+  const handleJoinRoom = () => {
+    // Perform actions when the "Join Room" button is clicked
+    console.log('Joining room with code:', meetingCode);
+  };
+
+  const updateMedia = () => {
+    setIsMobile(window.innerWidth <= 768);
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', updateMedia);
+    return () => window.removeEventListener('resize', updateMedia);
+  });
+
+  const containerStyle = {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: '40px',
+    padding: '20px',
+    fontWeight: 'bold',
+    color: 'white',
+    background: '#1e2228',
+    borderRadius: '20px',
+    boxShadow: '0 10px 20px rgba(0, 0, 0, 0.3)',
+    maxWidth: '90%',
+    margin: '20px auto',
+    fontFamily: 'Arial, sans-serif',
+    fontSize: '18px',
+    flexWrap: isMobile ? 'wrap' : 'nowrap',
+    textAlign: isMobile ? 'center' : 'left',
+  };
+
   return (
-    <div className='flex tracking-wide justify-center mb-20 items-center px-16 py-6 lg:m-10 m-3 font-bold text-white normal rounded-xl bg-transparent border-2 border-zinc-400 max-md:px-5'>
-      <div className='flex gap-5 w-full max-w-screen-lg max-md:flex-wrap max-md:justify-center max-md:max-w-[500px]'>
-        <div className='flex-auto my-auto text-xl whitespace-nowrap text-center'>
-          Paste the meeting code
-        </div>
-        <input
-          className='justify-center lg:mr-20 md:w-fit lg:w-[300px] px-8 py-6 text-md whitespace-nowrap rounded-xl bg-zinc-800 max-md:px-5 '
-          placeholder='abc-def-xyz'></input>
-        <div className='justify-center self-center p-3 text-md bg-[#077BE7] rounded-xl border-[1px] border-[#1D2026] cursor-pointer hover:bg-transparent hover:border-[1px] hover:border-[#077BE7]'>
-          Join Room
-        </div>
-        <img
-          loading='lazy'
-          src={img2}
-          className='flex justify-center items-center self-center cursor-pointer w-[40px] h-[40px] p-2 bg-[#077BE7] rounded-xl hover:bg-transparent hover:border-[1px] hover:border-[#077BE7]'
-        />
-      </div>
-    </div>
+
+//     <div className='flex tracking-wide justify-center mb-20 items-center px-16 py-6 lg:m-10 m-3 font-bold text-white normal rounded-xl bg-transparent border-2 border-zinc-400 max-md:px-5'>
+//       <div className='flex gap-5 w-full max-w-screen-lg max-md:flex-wrap max-md:justify-center max-md:max-w-[500px]'>
+//         <div className='flex-auto my-auto text-xl whitespace-nowrap text-center'>
+//           Paste the meeting code
+//         </div>
+//         <input
+//           className='justify-center lg:mr-20 md:w-fit lg:w-[300px] px-8 py-6 text-md whitespace-nowrap rounded-xl bg-zinc-800 max-md:px-5 '
+//           placeholder='abc-def-xyz'></input>
+//         <div className='justify-center self-center p-3 text-md bg-[#077BE7] rounded-xl border-[1px] border-[#1D2026] cursor-pointer hover:bg-transparent hover:border-[1px] hover:border-[#077BE7]'>
+//           Join Room
+//         </div>
+//         <img
+//           loading='lazy'
+//           src={img2}
+//           className='flex justify-center items-center self-center cursor-pointer w-[40px] h-[40px] p-2 bg-[#077BE7] rounded-xl hover:bg-transparent hover:border-[1px] hover:border-[#077BE7]'
+//         />
+//       </div>
+//     </div>
+
+    <motion.div
+      initial={{ opacity: 0, y: -50 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -50 }}
+      transition={{ duration: 0.5 }}
+      style={containerStyle}
+    >
+      <motion.div
+        initial={{ opacity: 0, scale: 0 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ delay: 0.5 }}
+        style={{
+          marginRight: isMobile ? '0' : '20px',
+          fontSize: '2rem',
+          textShadow: '2px 2px 4px rgba(0, 0, 0, 0.4)',
+          marginBottom: isMobile ? '10px' : '0',
+          flex: isMobile ? '1 1 100%' : 'none',
+        }}
+      >
+        Paste the meeting code
+      </motion.div>
+      <motion.input
+        whileHover={{ scale: 1.05 }}
+        whileTap={{ scale: 0.95 }}
+        style={{
+          width: '100%',
+          maxWidth: '400px',
+          padding: '16px',
+          fontSize: '1rem',
+          borderRadius: '10px',
+          border: '2px solid #4b5563',
+          backgroundColor: '#222222',
+          color: 'white',
+          outline: 'none',
+          transition: 'border-color 0.3s ease',
+          marginBottom: isMobile ? '10px' : '0',
+        }}
+        placeholder='abc-def-xyz'
+        value={meetingCode}
+        onChange={handleInputChange}
+      />
+      <motion.button
+        whileHover={{ scale: 1.05 }}
+        whileTap={{ scale: 0.95 }}
+        onClick={handleJoinRoom}
+        style={{
+          padding: '14px 28px',
+          fontSize: '1rem',
+          backgroundColor: '#1e90ff',
+          borderRadius: '20px',
+          border: 'none',
+          cursor: 'pointer',
+          marginLeft: isMobile ? '0' : '20px',
+          boxShadow: '0 4px 8px rgba(0, 0, 0, 0.3)',
+          transition: 'transform 0.3s ease, box-shadow 0.3s ease',
+          marginBottom: isMobile ? '10px' : '0',
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
+        Join Room
+      </motion.button>
+      <motion.img
+        whileHover={{ scale: 1.1 }}
+        whileTap={{ scale: 0.9 }}
+        loading='lazy'
+        src={img2}
+        alt='Refresh'
+        style={{
+          width: '40px',
+          height: '40px',
+          marginLeft: '20px',
+          backgroundColor: '#1e90ff',
+          borderRadius: '50%',
+          cursor: 'pointer',
+          boxShadow: '0 4px 8px rgba(0, 0, 0, 0.3)',
+          transition: 'transform 0.3s ease, box-shadow 0.3s ease',
+        }}
+      />
+    </motion.div>
   );
 };
 

frontend/src/Components/common/Toast.jsx

@@ -0,0 +1,19 @@
+import { toast } from 'react-hot-toast';
+
+export const showLoadingToast = (promise, defaultMessages) => {
+  return toast.promise(
+    promise,
+    {
+      loading: defaultMessages.loading,
+      success: (data) => <b>{data.message || defaultMessages.success}</b>,
+      error: (error) => <b>{error.message || defaultMessages.error}</b>,
+    },
+    {
+      position: 'top-center',
+      style: {
+        background: 'white',
+        color: 'black',
+      },
+    }
+  );
+};

services/Auth/src/controllers/auth.controller.js

@@ -1,16 +1,15 @@
 const bcrypt = require("bcryptjs");
 const User = require("../models/user.model");
-const { errorHadnler } = require("../utils/error");
+const { errorHandler } = require("../utils/error");
 const cookie = require('cookie'); // Import the 'cookie' library
 
-async function signup(req, res) {
+async function signup(req, res, next) {
   try {
     const { name, email, password } = req.body;
 
     //Check if input is as expected or not
     if (!name || !password || !email) {
-      res.json (errorHadnler(401,'All fields must be filled'))
-      return
+      return next(errorHandler(401,'All fields must be filled'))
     }
 
     let user = await User.findOne({ email });
@@ -20,8 +19,7 @@ async function signup(req, res) {
     // if user already exists;
 
     if (user) {
-      res.json(errorHadnler(400, "user already exists"));
-      return
+      return next(errorHandler(400, "user already exists"));
     }
 
     user = new User({
@@ -58,7 +56,7 @@ async function signup(req, res) {
 
     return res.status(200).json({ ...userResponse, token });
   } catch (error) {
-    res.status(500).json({ ...error });
+    next(error);
   }
 }
 
@@ -68,27 +66,23 @@ async function signin(req, res, next) {
 
   //Check if input is as expected or not
   if (!email || !password) {
-    res.json (errorHadnler(401,'All fields must be filled'))
-    return
+    return next(errorHandler(401,'All fields must be filled'))
   }
 
     let user = await User.findOne({ email });
-    // console.log(user);
 
     // checking whether user exists or not;
 
     if (!user) {
-      res.json(errorHadnler(404, "User does not exists"));
-      return
+      return next(errorHandler(404, "User does not exists"));
     }
 
     const isMatch = await bcrypt.compare(password, user.password);
 
     // if the password not matched;
 
     if (!isMatch) {
-      res.json(errorHadnler(401, "Invalid password"));
-      return
+      return next(errorHandler(401, "Invalid password"));
     }
 
     // generating jwt token;
@@ -115,8 +109,7 @@ async function signin(req, res, next) {
 
     return res.status(200).json({ token, userResposne });
   } catch (error) {
-    console.log(error);
-    res.status(500).json({ ...error });
+    next(error);
   }
 }
 

services/Auth/src/main.js

@@ -27,6 +27,17 @@ async function server() {
   app.listen(config.PORT, () => {
     console.log(`server is running at: http://localhost:${config.PORT}`);
   });
+  app.use((err, req, res, next) => {
+    const statusCode = err.statusCode || 500;
+    const message = err.message || "Internal Server Error";
+    const stack = config.NODE_ENV === "development" ? err.stack : undefined;
+    return res.status(statusCode).json({
+      success: false,
+      statusCode,
+      message,
+      stack
+    });
+  });
 }
 
 module.exports = server;

services/Auth/src/middleware/auth.middleware.js

@@ -15,7 +15,7 @@ const userauth = async (req, res, next) => {
 
     const user = await User.findOne({ _id: id });
 
-    if (!user) return res.status(401, "please login again");
+    if (!user) return next(errorHadnler(401, "please login again"));
 
     res.cookie("token", token, { httpOnly: true, maxAge: 24 * 60 * 60 * 1000 });
 

services/Auth/src/middleware/validate.schema.js

@@ -1,14 +1,13 @@
+const { errorHandler } = require('../utils/error');
+
 const validate = (schema) => async (req, res, next) => {
     try {
         const parsedBody = await schema.parseAsync(req.body);
         req.body = parsedBody; 
         next();
     } catch (err) {
-        console.log(err);
         const yourerror = err.errors[0].message;
-        res.status(400).json({
-            msg: yourerror,
-        });
+        next(errorHandler(400, yourerror, err));
     }
 }
 

services/Auth/src/utils/error.js

@@ -1,8 +1,11 @@
-const errorHadnler = (statusCode, message) => {
+const errorHandler = (statusCode, message, err = null) => {
   const error = new Error();
   error.statusCode = statusCode;
   error.message = message;
+  if (err) {
+    error.stack = err.stack;
+  }
   return error;
 };
 
-module.exports = { errorHadnler };
+module.exports = { errorHandler };