Merge branch 'main' of https://github.com/john-david3/cs3305-team11

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"
+              type="text"
-          value={inputMessage}
+              value={inputMessage}
-          onChange={(e) => setInputMessage(e.target.value)}
+              onChange={(e) => setInputMessage(e.target.value)}
-          onKeyDown={handleKeyPress}
+              onKeyDown={handleKeyPress}
-          placeholder={isLoggedIn ? "Type a message..." : "Login to chat"}
+              placeholder={isLoggedIn ? "Type a message..." : "Login to chat"}
-          disabled={!isLoggedIn}
+              disabled={!isLoggedIn}
-          extraClasses="flex-grow disabled:cursor-not-allowed"
+              extraClasses="flex-grow"
-        />
+              onClick={() => (!isLoggedIn && setShowAuthModal(true))} />
-        <button
+              <button
-          onClick={sendChat}
+                onClick={sendChat}
-          disabled={!isLoggedIn}
+                className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
-          className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
-        >
+                Send
-          Send
+              </button>
-        </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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import Navbar from "../components/Layout/Navbar";
-import Button from "../components/Layout/Button";
+import Button, { ToggleButton } from "../components/Layout/Button";
 import ChatPanel from "../components/Video/ChatPanel";
 import CheckoutForm, { Return } from "../components/Checkout/CheckoutForm";
 import { useNavigate, useParams } from "react-router-dom";
@@ -29,6 +29,13 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
   const [streamData, setStreamData] = useState<StreamDataProps>();
   const navigate = useNavigate();
 
+  const [isChatVisible, setIsChatVisible] = useState(false);
+  const [showAuthModal, setShowAuthModal] = useState(false);
+
+  const toggleChat = () => {
+    setIsChatVisible((prev) => !prev);
+  }
+
   // useEffect(() => {
   //   // Prevent scrolling when checkout is open
   //   if (showCheckout) {
@@ -44,8 +51,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
   useEffect(() => {
     // Fetch stream data for this streamer
     fetch(
-      `/api/get_stream_data/${streamerName}${
+      `/api/get_stream_data/${streamerName}${streamId == 0 ? "" : `/${streamId}`
-        streamId == 0 ? "" : `/${streamId}`
       }`
     ).then((res) => {
       if (!res.ok) {
@@ -67,14 +73,34 @@ 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 />
 
       <div id="container" className="bg-gray-900">
+
         <VideoPlayer streamId={streamId} />
 
-        <ChatPanel streamId={streamId} />
+        <ToggleButton
+          onClick={toggleChat}
+          toggled={isChatVisible}
+          extraClasses="absolute top-10 left-4 z-5"
+        >
+          {isChatVisible ? "Hide Chat" : "Show Chat"}
+        </ToggleButton>
+
+        {isChatVisible &&
+        <div id="chat" className="relative top-0 right-0 bg-gray-800 bg-opacity-75 text-white p-4 w-1/3 h-full z-10 overflow-y-auto">
+          <ChatPanel streamId={streamId} />
+        </div> }
 
         <div
           id="stream-info"

web_server/blueprints/oauth.py

@@ -0,0 +1,58 @@
+from authlib.integrations.flask_client import OAuth, OAuthError
+from flask import Blueprint, url_for, jsonify, session
+
+oauth_bp = Blueprint("oauth", __name__)
+def init_oauth(app):
+    oauth = OAuth(app)
+
+    google = oauth.register(
+        'google',
+        client_id=app.config['GOOGLE_CLIENT_ID'],
+        client_secret=app.config['GOOGLE_CLIENT_SECRET'],
+        authorize_url='https://accounts.google.com/o/oauth2/auth',
+        authorize_params=None,
+        access_token_url='https://accounts.google.com/o/oauth2/token',
+        access_token_params=None,
+        refresh_token_url=None,
+        redirect_uri=url_for('google.google_auth', _external=True),
+        scope='openid profile email',
+    )
+
+
+    @oauth_bp.route('/login/google')
+    def login_google():
+            """
+            Redirects to Google's OAuth authorization page
+            """
+            return  google.authorize_redirect(url_for('google.google_auth', _external=True))
+
+    @oauth_bp.route('/google_auth')
+    def google_auth():
+        try:
+            token = google.authorize_access_token()
+            user = google.parse_id_token(token)
+            
+            # check if email exists else create a database entry
+            user_email = user.get("email")
+
+            session.clear()
+            session["username"] = "a"
+            session["user_id"] = 1
+
+            return jsonify({
+                'message': 'User authenticated successfully',
+            })
+        
+        except OAuthError as e:
+            # Handle OAuth errors like failed authentication or invalid token
+            return jsonify({
+                'message': 'Authentication failed',
+                'error': str(e)
+            }), 400 
+
+        except Exception as e:
+            # Handle other unexpected errors
+            return jsonify({
+                'message': 'An unexpected error occurred',
+                'error': str(e)
+            }), 500 

web_server/requirements.txt

@@ -24,5 +24,6 @@ WTForms==3.2.1
 Gunicorn==20.1.0
 gevent>=22.10.2
 gevent-websocket
+flask-oauthlib==0.9.6
 celery==5.2.3
 redis==5.2.1