FEAT: Login Via Chat

Added Functionality where is user not register/login they can access press chat to login and pop-up appears

frontend/src/components/Auth/AuthModal.tsx

@@ -25,10 +25,10 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
   return (
     <>
       {/*Background Blur*/}
-      <div id="blurring-layer" className="fixed z-10 inset-0 w-screen h-screen backdrop-blur-sm group-has-[input:focus]:backdrop-blur-[5px]"></div>
+      <div id="blurring-layer" className="fixed z-50 inset-0 w-screen h-screen backdrop-blur-sm group-has-[input:focus]:backdrop-blur-[5px]"></div>
       {/*Container*/}
       <div
-        className="container fixed inset-0 flex flex-col items-center justify-around z-50 
+        className="container fixed inset-0 flex flex-col items-center justify-around z-[9999] 
         h-[75vh] m-auto min-w-[45vw] w-fit py-[50px] rounded-[5rem] transition-all animate-floating"
         style={{ "--spin-duration": spinDuration } as React.CSSProperties}
       >

frontend/src/components/Video/ChatPanel.tsx

@@ -2,6 +2,8 @@ import React, { useState, useEffect, useRef } from "react";
 import Input from "../Layout/Input";
 import { useAuth } from "../../context/AuthContext";
 import { useSocket } from "../../context/SocketContext";
+import Button from "../Layout/Button";
+import AuthModal from "../Auth/AuthModal";
 
 interface ChatMessage {
   chatter_username: string;
@@ -93,7 +95,22 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId }) => {
     }
   };
 
+  //added to show login/reg if not
+  const [showAuthModal, setShowAuthModal] = useState(false);
+
+  useEffect(() => {
+    if (showAuthModal) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "unset";
+    }
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [showAuthModal]);
+
   return (
+    <>
     <div id="chat-panel" className="h-full flex flex-col rounded-lg p-4">
       <h2 className="text-xl font-bold mb-4 text-white">Stream Chat</h2>
 
@@ -124,24 +141,40 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId }) => {
       </div>
 
       <div className="flex justify-center gap-2">
+        {isLoggedIn &&
+        <>
         <Input
-          type="text"
-          value={inputMessage}
-          onChange={(e) => setInputMessage(e.target.value)}
-          onKeyDown={handleKeyPress}
-          placeholder={isLoggedIn ? "Type a message..." : "Login to chat"}
-          disabled={!isLoggedIn}
-          extraClasses="flex-grow disabled:cursor-not-allowed"
-        />
-        <button
-          onClick={sendChat}
-          disabled={!isLoggedIn}
-          className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed"
-        >
-          Send
-        </button>
+              type="text"
+              value={inputMessage}
+              onChange={(e) => setInputMessage(e.target.value)}
+              onKeyDown={handleKeyPress}
+              placeholder={isLoggedIn ? "Type a message..." : "Login to chat"}
+              disabled={!isLoggedIn}
+              extraClasses="flex-grow"
+              onClick={() => (!isLoggedIn && setShowAuthModal(true))} />
+              <button
+                onClick={sendChat}
+                className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
+              >
+                Send
+              </button>
+              </>
+        }
+        
+        {!isLoggedIn && 
+              <Button
+              extraClasses="absolute top-[20px] left-[20px] text-[1rem] flex items-center flex-nowrap z-[999]"
+              onClick={() => (setShowAuthModal(true))}></Button>
+        }
+
       </div>
-    </div>
+      {showAuthModal && (
+        <div className="fixed inset-0 z-[9999] flex items-center justify-center">
+          <AuthModal onClose={() => setShowAuthModal(false)} />
+        </div>
+      )}
+      </div>
+    </>
   );
 };
 

frontend/src/pages/VideoPage.tsx

@@ -30,6 +30,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
   const navigate = useNavigate();
 
   const [isChatVisible, setIsChatVisible] = useState(false);
+  const [showAuthModal, setShowAuthModal] = useState(false);
 
   const toggleChat = () => {
     setIsChatVisible((prev) => !prev);
@@ -72,6 +73,14 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
     });
   }, [streamId, streamerName]);
 
+  useEffect(() => {
+    document.body.style.overflow = showAuthModal ? "hidden" : "unset";
+
+    return () => {
+      document.body.style.overflow = "unset";  // Cleanup
+    };
+  }, [showAuthModal]);
+
   return (
     <div id="videoPage" className="w-full">
       <Navbar />
@@ -83,7 +92,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
         <ToggleButton
           onClick={toggleChat}
           toggled={isChatVisible}
-          extraClasses="absolute top-10 left-4 z-20"
+          extraClasses="absolute top-10 left-4 z-5"
         >
           {isChatVisible ? "Hide Chat" : "Show Chat"}
         </ToggleButton>