UPDATE: Updated VideoPage UI

UPDATE: Added response to successful password reset redirect to homepage

frontend/public/images/category_banners/category_banners.json

@@ -1,5 +0,0 @@
-{
-    "1": "https://example.com/category/101",
-    "2": "https://example.com/category/102",
-    "3": "https://example.com/category/103"
-  }

frontend/src/components/Auth/PasswordResetForm.tsx

@@ -27,10 +27,6 @@ const PasswordResetForm: React.FC<SubmitProps> = ({ onSubmit, token }) => {
         confirmNewPassword: "",
     });
 
-    const confirmPasswordReset = () => {
-        alert(`${resetData.newPassword} - ${token}`);
- 
-      };
 
     const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const { name, value } = e.target;
@@ -77,9 +73,9 @@ const PasswordResetForm: React.FC<SubmitProps> = ({ onSubmit, token }) => {
 
                 if (!response.ok) {
                     const data = await response.json();
-                    throw new Error(data.message || "An error has occurred while resetting");
+                    throw new Error(data.error || "An error has occurred while resetting");
                 } else {
-                    confirmPasswordReset();
+                    onSubmit(true)
                 }
             } catch (error: any) {
                 console.error("Password reset error:", error.message);

frontend/src/pages/ResetPasswordPage.tsx

@@ -6,9 +6,13 @@ const ResetPasswordPage: React.FC = () => {
     const { token } = useParams<{ token: string }>();
     const navigate = useNavigate();
 
-    const handlePasswordReset = () => {
+    const handlePasswordReset = (success: boolean) => {
-
+        if (success) {
+            alert("Password reset successful!");
+            navigate("/");
+        } 
     };
+
     if (!token) {
         return <p className="text-red-500 text-center mt-4">Invalid or missing token.</p>;
     }

frontend/src/pages/VideoPage.tsx

@@ -100,9 +100,8 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
 
         <div
           id="container"
-          className={`grid ${
+          className={`grid ${isChatOpen ? "w-[100vw]" : "w-[125vw]"
-            isChatOpen ? "w-[100vw]" : "w-[125vw]"
+            } grid-rows-[auto_1fr] bg-gray-900 h-full grid-cols-[auto_25vw] transition-all`}
-          } grid-rows-[auto_1fr] bg-gray-900 h-full grid-cols-[auto_25vw] transition-all`}
         >
           <div className="relative">
             <VideoPlayer streamId={streamerId} />
@@ -114,7 +113,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
             extraClasses="group cursor-pointer absolute top-[70px] right-[20px] text-[1rem] flex items-center flex-nowrap"
           >
             {isChatOpen ? "Hide Chat" : "Show Chat"}
-            
+
             <small className="absolute right-0 left-0 -bottom-0 group-hover:-bottom-5 opacity-0 group-hover:opacity-100 text-white transition-all">Press C</small>
           </ToggleButton>
 
@@ -123,68 +122,98 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
             onViewerCountChange={(count: number) => setViewerCount(count)}
           />
 
+          {/* Stream Data */}
           <div
             id="stream-info"
-            className="flex flex-row items-center justify-evenly gap-2 p-8 text-white text-xl"
+            className="flex flex-row items-center justify-between gap-4 p-4 bg-[#18181b] text-white text-lg rounded-md shadow-lg"
-            style={{ gridArea: "2 / 1 / 3 / 2" }}
           >
-            <h1 className="text-3xl text-center font-bold">
+            {/* Streamer Icon */}
-              {streamData ? streamData.streamTitle : "Loading..."}
+            <div className="flex flex-col items-center mb-[1em]">
-            </h1>
+              <img
-            <div>
+                src="/images/monkey.png"
-              <Button
+                alt="streamer"
-                extraClasses="flex flex-col items-center font-bold bg-[#ff0000] p-4 px-12 rounded-[3rem] cursor-pointer"
+                className="w-[3em] h-[3em] rounded-full border-[0.15em] border-purple-500"
+                onClick={() => navigate(`/user/${streamerName}`)}
+              />
+              <button
+                className="text-white font-bold hover:underline mt-[0.5em]"
                 onClick={() => navigate(`/user/${streamerName}`)}
               >
-                <h1>{streamData ? streamData.streamerName : "Loading..."}</h1>
+                {streamData ? streamData.streamerName : "Loading..."}
-                <img
+              </button>
-                  src="/images/monkey.png"
+            </div>
-                  alt="streamer"
-                  className="w-30 h-10 bg-indigo-500 rounded-full"
-                />
-              </Button>
 
-              {/* (Un)Follow Button */}
+            {/* Stream Title */}
-              {!isFollowing ? (
+            <div className="flex flex-col items-start flex-grow">
-                <Button
+              <h1 className="text-[0.75em] lg:text-[0.85em] xl:text-[1em] font-bold">
-                  extraClasses="w-full bg-purple-700 hover:bg-[#28005e]"
+                {streamData ? streamData.streamTitle : "Loading..."}
-                  onClick={() => followUser(streamerId, setShowAuthModal)}
+              </h1>
-                >
+              <span className="text-[0.75em] lg:text-[0.85em] xl:text-[1em] text-gray-400">
-                  Follow
+                {streamData ? streamData.categoryName : "Loading..."}
-                </Button>
+              </span>
-              ) : (
-                <Button
-                  extraClasses="w-full bg-green-400/30 hover:content-['Unfollow'] hover:border-[#a80000]"
-                  onClick={() => unfollowUser(streamerId, setShowAuthModal)}
-                >
-                  Following
-                </Button>
-              )}
             </div>
-            <div className="flex flex-col items-center font-bold">
+
-              <span className="font-thin">Viewers</span>
+            {/* Streamer Info */}
-              <span>{viewerCount}</span>
+            <div className="flex items-center gap-[0.75em] flex-col lg:flex-row">
+              <div className="flex flex-col items-center lg:items-start">
+                {!isFollowing ? (
+                  <button
+                    className="bg-purple-600 text-white font-bold px-[1.5em] py-[0.5em] rounded-md hover:bg-purple-700 text-sm"
+                    onClick={() => followUser(streamerId, setShowAuthModal)}
+                  >
+                    Follow
+                  </button>
+                ) : (
+                  <button
+                    className="bg-gray-700 text-white font-bold px-[1.5em] py-[0.5em] rounded-md hover:bg-red-600 text-sm"
+                    onClick={() => unfollowUser(streamerId, setShowAuthModal)}
+                  >
+                    Unfollow
+                  </button>
+                )}
+              </div>
             </div>
-            <div className="flex flex-col items-center font-bold">
+
-              <span className="font-thin">Started</span>
+            {/* Stream Stats */}
-              <span>
+            <div className="flex flex-col items-center">
+              <div className="flex items-center gap-[0.5em]">
+                <img
+                  src="../../../images/icons/user.png"
+                  alt="Viewers Icon"
+                  className="w-[1em] h-[1em] md:w-[1.2em] md:h-[1.2em]"
+                />
+                <span className="font-bold text-[1.2em]">{viewerCount}</span>
+              </div>
+            </div>
+
+            <div className="flex flex-col items-center">
+              <span className="text-gray-400 text-[0.75em]">Started</span>
+              <span className="text-[0.75em]">
                 {streamData
-                  ? new Date(streamData.startTime).toLocaleString()
+                  ? `${Math.floor((Date.now() - new Date(streamData.startTime).getTime()) / 3600000)} hours ago`
                   : "Loading..."}
               </span>
             </div>
-            <div className="flex flex-col items-center font-bold">
+
-              <span className="font-thin">Category</span>
+            {/* Subscribe Button */}
-              <span>{streamData ? streamData.categoryName : "Loading..."}</span>
+            <div className="flex flex-col items-center">
+              <button
+                className="bg-red-600 text-white font-bold px-[1.5em] py-[0.5em] rounded-md hover:bg-red-700 text-sm"
+                onClick={() => {
+                  if (!isLoggedIn) {
+                    setShowAuthModal(true);
+                  }
+                }}
+              >
+                Subscribe
+              </button>
             </div>
+
           </div>
-          {isLoggedIn && (
+          {/* {showCheckout && <CheckoutForm onClose={() => setShowCheckout(false)} />} */}
-            <Button extraClasses="mx-auto mb-4">Payment Screen Test</Button>
+          {/* {showReturn && <Return />} */}
-          )}
+          {showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
         </div>
-        {/* {showCheckout && <CheckoutForm onClose={() => setShowCheckout(false)} />} */}
-        {/* {showReturn && <Return />} */}
-        {showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
       </div>
     </SocketProvider>
   );

web_server/blueprints/oauth.py

@@ -11,7 +11,8 @@ google = None
 
 from os import getenv
 load_dotenv()
-url = getenv("VITE_API_URL")
+url_api = getenv("VITE_API_URL")
+url = getenv("HOMEPAGE_URL")
 
 
 def init_oauth(app):
@@ -27,7 +28,7 @@ def init_oauth(app):
         api_base_url='https://www.googleapis.com/oauth2/v1/',
         userinfo_endpoint='https://openidconnect.googleapis.com/v1/userinfo',
         server_metadata_url='https://accounts.google.com/.well-known/openid-configuration',
-        redirect_uri=f"{url}/api/google_auth"
+        redirect_uri=f"{url_api}/google_auth"
     )
 
 @oauth_bp.route('/login/google')
@@ -40,7 +41,7 @@ def login_google():
     session["origin"] = request.args.get("next")
 
     return google.authorize_redirect(
-        f'{url}/api/google_auth',
+        f'{url_api}/google_auth',
         nonce=session['nonce']
     )
 

web_server/blueprints/user.py

@@ -131,11 +131,7 @@ def user_reset_password(token, new_password):
             r.delete(token)
 
     email = verify_token(token[:-5], salt_value)
-
     if email:
-        response = reset_password(new_password, email)
+        reset_password(new_password, email)
-        if response:
+        return jsonify({"message": "Password reset successful"}), 200
-            return 200
-        else:
-            return jsonify({"error": "Failed to reset password"}), 500
     return jsonify({"error": "Invalid token"}), 400

web_server/utils/auth.py

@@ -31,7 +31,7 @@ def verify_token(token: str, salt_value) -> Optional[str]:
         print("Token is invalid", flush=True)
         return None
 
-def reset_password(new_password: str, email: str) -> bool:
+def reset_password(new_password: str, email: str):
     """
     Given email and new password reset the password for a given user
     """
@@ -41,5 +41,3 @@ def reset_password(new_password: str, email: str) -> bool:
             SET password = ? 
             WHERE email = ?
         """, (generate_password_hash(new_password), email))
-    
-    return True

web_server/utils/email.py

@@ -12,6 +12,9 @@ r = redis.from_url(redis_url, decode_responses=True)
 
 load_dotenv()
 
+url = getenv("HOMEPAGE_URL")
+
+
 def send_email(email, func) -> None:
     """
     Send a verification email to the user.
@@ -53,7 +56,6 @@ def forgot_password_body(email) -> str:
 
     token = generate_token(email, salt)
     token += "R3sET" 
-    url = getenv("VITE_API_URL")
     r.setex(token, 3600, salt)
 
     full_url = url + "/reset_password/" + token
@@ -92,7 +94,6 @@ def confirm_account_creation_body(email) -> str:
 
     token = generate_token(email, salt)
     token += "CrEaTe"
-    url = getenv("VITE_API_URL")
     r.setex(token, 3600, salt)
 
     full_url = url + "/confirm_account_creation/" + token