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

2025-01-31 00:13:08 +00:00
parent 4396d71c2d dcb58248c1
commit 7c2c70ac84
5 changed files with 140 additions and 22 deletions
--- a/frontend/src/components/Auth/AuthModal.tsx
+++ b/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}
      >
--- a/frontend/src/components/Video/ChatPanel.tsx
+++ b/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>
+    </>
  );
 };

--- a/frontend/src/pages/VideoPage.tsx
+++ b/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}${
-        streamId == 0 ? "" : `/${streamId}`
+      `/api/get_stream_data/${streamerName}${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"
--- a/web_server/blueprints/oauth.py
+++ b/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 
--- a/web_server/requirements.txt
+++ b/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