GUESTJOIN PAGE

 IN THE NAVBAR OF OUR LANDING PAGE , I CREATED  AN ANCHOR TAG THAT SAYS 

JOIN AS GUEST

WHEN AN USER DO NOT WANT TO SIGNUP , HE CAN USE JOIN AS GUEST OPTION, WHEN CLICKED HE WILL BE DIRECTED TO A GUEST PAGE ON WHICH A CARD IS DISPLAYED THAT ASKS FOR MEETING CODE JUST LIKE THE JOIN BLOCK OF HOME PAGE.

BUT WE WILL USE THE SAME BACKEND ROUTE TO JOIN MEETING. AS WE INTRODUCED GUEST WE WILL INCLUDE A NEW PARAMETER IN THE ROUTE THAT SAYS isGuest

 if (success) {
        handleSuccess(message);
        navigate(`/${meetingCode}`, {
          state: { isHost: false, isGuest: true },

SO IN THE HOME PAGE TOO , WE INCLUDE THIS PARAMETER FOR CREATE AND JOIN MEETING ROUTES.

CREATE

 const handleCreateMeeting = async () => {
    try {
      const { data } = await axios.post(
        "http://localhost:8080/createMeeting",
        {},
        {
          params: { token: localStorage.getItem("token") },
        }
      );
      const { success, code, message } = data;
      if (success) {
        await addToHistory(code);
        navigate(`/${code}`, { state: { isHost: true, isGuest: false } });
        handleSuccess(message);
      } else {
        handleFailure(message);
      }
    } catch (e) {
      console.log(e);
      handleFailure("Something went Wrong!");
    }
  };

JOIN

  const handleJoinMeeting = async () => {
    if (!meetingCode || meetingCode.length !== 6) {
      handleFailure("Please enter a valid meeting code.");
      return;
    }
    try {
      const { data } = await axios.post("http://localhost:8080/joinMeeting", {
        meeting_code: meetingCode,
      });
      const { success, message } = data;
      if (success) {
        await addToHistory(meetingCode);
        handleSuccess(message);
        navigate(`/${meetingCode}`, {
          state: { isHost: false, isGuest: false },
        });
      } else {
        handleFailure(message);
        console.log(message);
      }
    } catch (e) {
      console.log(e);
      handleFailure("Something went Wrong!");
    }
  };

ONCE THE GUEST ENDS THE MEETING HE SHOULD BE REDIRECTED BACK TO THE LANDING PAGE, HENCE IN THE VIDEO CONFERENCE PAGE, 

let handleCallEnd = () => {
    try {
      let tracks = localVideoRef.current.srcObject.getTracks();
      tracks.forEach((track) => track.stop());
    } catch (e) {
      console.log(e);
    }
    isGuest ? (window.location.href = "/") : (window.location.href = "/home");
  };

STYLING

FOR THE GRADIENTS VISIT UIGRADIENTS.COM

GUEST.MODULE.CSS

body {
  margin: 0;
  padding: 0;
  font-family: "DM Sans";
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  overflow-y: scroll;
}

.guestJoinContainer {
  top: 0;
  overflow: visible;
  margin: 0;
  position: absolute;
  box-sizing: border-box;
  padding: 0;
  display: inline;
  background: linear-gradient(
    to right,
    #000000,
    #434343
  ) !important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  width: 100vw;
  height: 100vh;
}

a {
  text-decoration: none;
  color: white;
  padding: 0.5rem;
}

a:hover {
  opacity: 0.5 !important;
}

.nav {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 10vh;
  background-color: #242424;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  z-index: 100;
}

.navHeader {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.navLinks {
  display: flex;
  gap: 2rem;
  width: 18rem;
}
.guestJoinCard {
  padding: 2rem;
  max-width: fit-content;
  margin: auto;
   background: linear-gradient(to right, #ece9e6, #ffffff)!important;
  animation: popOut 500ms ease-out 100ms 1 forwards;
}
@keyframes popOut {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.joinBlock {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100vh;
  margin: auto;
}
.joinBlock input {
  color: black;
}











Comments

Post a Comment

Popular posts from this blog

MIDDLEWARE.JS

  const User = require ( "../models/userModel" ); require ( "dotenv" ). config (); const jwt = require ( "jsonwebtoken" ); module . exports . userVerification = async ( req , res ) => {   console . log ( req . cookies );   const token = req . cookies . token ;   if ( ! token ) {     return res . status ( 404 ). json ({ message : "authentication failed!" });   }   jwt . verify ( token , process . env . TOKEN_KEY , async ( err , data ) => {     if ( err ) {       return res . status ( 400 ). json ({ message : "Invalid Token!" });     }     try {       console . log ( data );       const foundUser = await User . findById ( data . id );       if ( foundUser ) {         return res . status ( 200 ). json ({ message : "authentication successful!" });       } else {         r...
Read more

MODELS

 USER MODEL const mongoose = require ( "mongoose" ); const Schema = mongoose . Schema ; const Model = mongoose . model ; const bcrypt = require ( "bcryptjs" ); const userSchema = new Schema ({   name : {     type : String ,     required : true ,   },   username : {     type : String ,     required : true ,     unique : true ,   },   email : {     type : String ,     required : true ,     unique : true ,   },   password : {     type : String ,     required : true ,   }, }); userSchema . pre ( "save" , async function ( next ) {   if ( this . isModified ( "password" )) {     this . password = await bcrypt . hash ( this . password , 10 );   }   next (); }); const User = new Model ( "User" , userSchema ); module . exports = User ; MEETING MODEL const mongoose = require ( "mongoose...
Read more

AUTHENTICATION PAGE

 AUTH.JSX import React , { useState , useEffect } from "react" ; import axios from "axios" ; import Box from "@mui/material/Box" ; import IconButton from "@mui/material/IconButton" ; import Button from "@mui/material/Button" ; import ButtonGroup from "@mui/material/ButtonGroup" ; import InputAdornment from "@mui/material/InputAdornment" ; import TextField from "@mui/material/TextField" ; import Visibility from "@mui/icons-material/Visibility" ; import VisibilityOff from "@mui/icons-material/VisibilityOff" ; import MenuOutlinedIcon from "@mui/icons-material/MenuOutlined" ; import { useSnackbar } from "notistack" ; import Footer from "./Footer" ; import styles from "../styles/Auth.module.css" ; import { useNavigate } from "react-router-dom" ; import { Link } from "react-router-dom" ;...
Read more