From f93f9874320dd3a6e866ebde377c8990f217ff91 Mon Sep 17 00:00:00 2001 From: Shivansh Date: Wed, 23 Oct 2024 04:55:28 +0530 Subject: [PATCH 1/2] toggle password --- client/src/component/Login.jsx | 20 ++++++++------ client/src/component/Signup.jsx | 43 +++++++++++------------------- client/src/component/css/Login.css | 4 +-- 3 files changed, 29 insertions(+), 38 deletions(-) diff --git a/client/src/component/Login.jsx b/client/src/component/Login.jsx index 68b049e..3f5adba 100644 --- a/client/src/component/Login.jsx +++ b/client/src/component/Login.jsx @@ -81,8 +81,9 @@ const Login = ({ mode, showAlert }) => { }; return ( +
{ onChange={onChange} autoComplete="on" required + className="h-10 text-xl" style={{ backgroundColor: mode === "dark" ? "black" : "white", color: mode === "dark" ? "white" : "black", @@ -119,27 +121,28 @@ const Login = ({ mode, showAlert }) => { value={credentials.password} onChange={onChange} autoComplete="on" - iconRender={(visible) => - visible ? : - } + className="h-10 text-xl" style={{ backgroundColor: mode === "dark" ? "black" : "white", color: mode === "dark" ? "white" : "black", }} required + iconRender={(visible) => + visible ? : + } />
- -

Don't have an account? - + {" "} Sign Up @@ -148,7 +151,7 @@ const Login = ({ mode, showAlert }) => { @@ -200,6 +203,7 @@ const Login = ({ mode, showAlert }) => {

+ ); }; diff --git a/client/src/component/Signup.jsx b/client/src/component/Signup.jsx index 0fe7d53..62aaceb 100644 --- a/client/src/component/Signup.jsx +++ b/client/src/component/Signup.jsx @@ -1,4 +1,4 @@ -import { Eye, EyeOff } from "lucide-react"; + import { useState } from "react"; import { Link, useNavigate } from "react-router-dom"; import { Input } from "antd"; @@ -6,6 +6,10 @@ import PropTypes from "prop-types"; import "./css/Signup.css"; import { registerValidation } from "../validations/validation"; import toast from "react-hot-toast"; +import { + EyeInvisibleOutlined, + EyeTwoTone, +} from "@ant-design/icons"; const host = "http://localhost:5000"; @@ -156,8 +160,7 @@ const Signup = ({ mode }) => { > Password - setPassword(e.target.value)} id="password" @@ -170,19 +173,11 @@ const Signup = ({ mode }) => { backgroundColor: mode === "dark" ? "#333" : "white", color: mode === "dark" ? "white" : "black", }} + iconRender={(visible) => + visible ? : + } /> - +
@@ -195,8 +190,7 @@ const Signup = ({ mode }) => { > Confirm Password - setCPassword(e.target.value)} id="cpassword" @@ -209,18 +203,11 @@ const Signup = ({ mode }) => { backgroundColor: mode === "dark" ? "#333" : "white", color: mode === "dark" ? "white" : "black", }} + iconRender={(visible) => + visible ? : + } /> - + {errors.cpassword && (
{errors.cpassword}
)} diff --git a/client/src/component/css/Login.css b/client/src/component/css/Login.css index 635c1f7..c9c3466 100644 --- a/client/src/component/css/Login.css +++ b/client/src/component/css/Login.css @@ -82,7 +82,7 @@ body { .footer { margin-top: 20px; - font-size: 0.9rem; + /* font-size: 0.9rem; */ } .link { @@ -224,7 +224,7 @@ body { .footer { margin-top: 15px; - font-size: 0.85rem; + /* font-size: 0.85rem; */ } .link { From 7f2678255c6a164c818d7ded098125952c4e044f Mon Sep 17 00:00:00 2001 From: Shivansh Date: Wed, 23 Oct 2024 22:53:53 +0530 Subject: [PATCH 2/2] fixed glitching issues --- client/src/App.jsx | 14 +- client/src/component/Discussion.jsx | 234 ++++++++++++++++------------ client/src/component/Login.jsx | 4 +- client/src/component/Signup.jsx | 21 +-- 4 files changed, 147 insertions(+), 126 deletions(-) diff --git a/client/src/App.jsx b/client/src/App.jsx index ea9e35f..f1d984e 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -47,9 +47,9 @@ const Layout = ({ children, mode, setProgress, toggleMode, showAlert }) => { const hideFooterRoutes = ["/login", "/signup", "/forgot-password"]; return ( - <> +
{/* Conditionally render the Navbar */} - {!hideNavbarRoutes.includes(location.pathname) && ( + {/* {!hideNavbarRoutes.includes(location.pathname) && ( */} { mode={mode} toggleMode={toggleMode} /> - )} + {/* )} */} {/* Main content */} {children} {/* Conditionally render the Footer */} - {!hideFooterRoutes.includes(location.pathname) && ( + {/* {!hideFooterRoutes.includes(location.pathname) && ( */}
- )} - + {/* )} */} +
); }; @@ -123,7 +123,7 @@ function App() { }; return ( -
+
diff --git a/client/src/component/Discussion.jsx b/client/src/component/Discussion.jsx index bc38429..c871e6f 100644 --- a/client/src/component/Discussion.jsx +++ b/client/src/component/Discussion.jsx @@ -1,127 +1,155 @@ -import { useEffect, useState } from 'react'; -import PropTypes from 'prop-types'; -import './css/Discussion.css'; -import { io } from 'socket.io-client'; +import { useEffect, useState } from "react"; +import PropTypes from "prop-types"; +import "./css/Discussion.css"; +import { io } from "socket.io-client"; // AUDIO -import recieveMsg from '../assets/music/recieveMsg.mp3'; -import userJoin from '../assets/music/userJoin.mp3'; -import userLeft from '../assets/music/userLeft.mp3'; -import InputModal from './InputModal'; +import recieveMsg from "../assets/music/recieveMsg.mp3"; +import userJoin from "../assets/music/userJoin.mp3"; +import userLeft from "../assets/music/userLeft.mp3"; +import InputModal from "./InputModal"; // Create a Socket const socket = io("http://localhost:5000", { transports: ["websocket"] }); const Discussion = (props) => { - const [messages, setMessages] = useState([]); // State to store chat messages - const [messageInput, setMessageInput] = useState(''); // State to store user input message - const [userName, setUserName] = useState(''); // State to store user's name - const [isModalOpen, setIsModalOpen] = useState(false); + const [messages, setMessages] = useState([]); // State to store chat messages + const [messageInput, setMessageInput] = useState(""); // State to store user input message + const [userName, setUserName] = useState(""); // State to store user's name + const [isModalOpen, setIsModalOpen] = useState(false); - useEffect(() => { - setIsModalOpen(true); + useEffect(() => { + setIsModalOpen(true); - socket.on('user-joined', name => { - // Update messages state with the new user's joining message - setMessages(prevMessages => [...prevMessages, { content: `${name} joined the chat`, position: 'center1' }]); - // Play audio when a user joins - playAudio(userJoin); - }); + socket.on("user-joined", (name) => { + // Update messages state with the new user's joining message + setMessages((prevMessages) => [ + ...prevMessages, + { content: `${name} joined the chat`, position: "center1" }, + ]); + // Play audio when a user joins + playAudio(userJoin); + }); - // Event listener for receiving a message from the server - socket.on('receive', data => { - // Update messages state with the received message - setMessages(prevMessages => [...prevMessages, { content: `${data.name}: ${data.message}`, position: 'left' }]); - // Play audio when receiving a message - playAudio(recieveMsg); - }); + // Event listener for receiving a message from the server + socket.on("receive", (data) => { + // Update messages state with the received message + setMessages((prevMessages) => [ + ...prevMessages, + { content: `${data.name}: ${data.message}`, position: "left" }, + ]); + // Play audio when receiving a message + playAudio(recieveMsg); + }); - // Event listener for a user leaving the chat - socket.on('left', name => { - // Update messages state with the user's leaving message - setMessages(prevMessages => [...prevMessages, { content: `${name} left the chat`, position: 'center2' }]); - // Play audio when a user leaves - playAudio(userLeft); - }); + // Event listener for a user leaving the chat + socket.on("left", (name) => { + // Update messages state with the user's leaving message + setMessages((prevMessages) => [ + ...prevMessages, + { content: `${name} left the chat`, position: "center2" }, + ]); + // Play audio when a user leaves + playAudio(userLeft); + }); - // Clean up socket listeners when component unmounts - return () => { - socket.off('user-joined'); - socket.off('receive'); - socket.off('left'); - }; - - }, []); - - // Function to handle audio playback - const playAudio = (audio) => { - const audioElement = new Audio(audio); // Create new Audio object - audioElement.play(); // Play the audio + // Clean up socket listeners when component unmounts + return () => { + socket.off("user-joined"); + socket.off("receive"); + socket.off("left"); }; + }, []); - // Function to handle form submission - const handleSubmit = (e) => { - e.preventDefault(); - const message = messageInput.trim(); - if (message !== '') { - // Append your own message immediately to avoid waiting for the server - setMessages(prevMessages => [...prevMessages, { content: `You: ${message}`, position: 'right' }]); - socket.emit('send', message); // Emit 'send' event to the server - setMessageInput(''); // Clear the message input field - } - }; - const handleJoin = (name) => { - setUserName(name); - socket.emit('join', name); // Notify the server that a user has joined - setIsModalOpen(false); // Close the modal after a successful join - }; - return ( -
- setIsModalOpen(false)} - onSubmit={handleJoin} - /> + // Function to handle audio playback + const playAudio = (audio) => { + const audioElement = new Audio(audio); // Create new Audio object + audioElement.play(); // Play the audio + }; -
- {/* Container for displaying chat messages */} -
-
{`Welcome ${userName} to the Bitbox Community`}
- {messages.map((message, index) => ( -
{message.content}
- ))} -
+ // Function to handle form submission + const handleSubmit = (e) => { + e.preventDefault(); + const message = messageInput.trim(); + if (message !== "") { + // Append your own message immediately to avoid waiting for the server + setMessages((prevMessages) => [ + ...prevMessages, + { content: `You: ${message}`, position: "right" }, + ]); + socket.emit("send", message); // Emit 'send' event to the server + setMessageInput(""); // Clear the message input field + } + }; + const handleJoin = (name) => { + setUserName(name); + socket.emit("join", name); // Notify the server that a user has joined + setIsModalOpen(false); // Close the modal after a successful join + }; + return ( +
+ setIsModalOpen(false)} + onSubmit={handleJoin} + /> - {/* Form for sending messages */} -
-
- setMessageInput(e.target.value)} - /> - -
-
+
+ {/* Container for displaying chat messages */} +
+
{`Welcome ${userName} to the Bitbox Community`}
+ {messages.map((message, index) => ( +
+ {message.content}
+ ))} +
+ + {/* Form for sending messages */} +
+
+ setMessageInput(e.target.value)} + /> + +
- ); +
+
+ ); }; // Props Validation Discussion.propTypes = { - title: PropTypes.string, - home: PropTypes.string, - community: PropTypes.string, - discussion: PropTypes.string, - myProjects: PropTypes.string, - about: PropTypes.string, - mode: PropTypes.string, - toggleMode: PropTypes.func, - showAlert: PropTypes.func, - isAuthenticated: PropTypes.bool, + title: PropTypes.string, + home: PropTypes.string, + community: PropTypes.string, + discussion: PropTypes.string, + myProjects: PropTypes.string, + about: PropTypes.string, + mode: PropTypes.string, + toggleMode: PropTypes.func, + showAlert: PropTypes.func, + isAuthenticated: PropTypes.bool, }; export default Discussion; diff --git a/client/src/component/Login.jsx b/client/src/component/Login.jsx index 093aea4..8c7d601 100644 --- a/client/src/component/Login.jsx +++ b/client/src/component/Login.jsx @@ -54,7 +54,7 @@ const Login = ({ mode, showAlert }) => { }; return ( -
+
{ color: mode === "dark" ? "white" : "black", }}> Don't have an account? - + {" "} Sign Up diff --git a/client/src/component/Signup.jsx b/client/src/component/Signup.jsx index 62aaceb..f3aee4c 100644 --- a/client/src/component/Signup.jsx +++ b/client/src/component/Signup.jsx @@ -1,4 +1,3 @@ - import { useState } from "react"; import { Link, useNavigate } from "react-router-dom"; import { Input } from "antd"; @@ -6,16 +5,11 @@ import PropTypes from "prop-types"; import "./css/Signup.css"; import { registerValidation } from "../validations/validation"; import toast from "react-hot-toast"; -import { - EyeInvisibleOutlined, - EyeTwoTone, -} from "@ant-design/icons"; +import { EyeInvisibleOutlined, EyeTwoTone } from "@ant-design/icons"; const host = "http://localhost:5000"; const Signup = ({ mode }) => { - const [showPassword, setShowPassword] = useState(false); - const [showConfirmPassword, setShowConfirmPassword] = useState(false); const navigate = useNavigate(); const [name, setName] = useState(""); @@ -88,9 +82,9 @@ const Signup = ({ mode }) => { Create An Account -
+
-
+
-
+
-
+
-
+