dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

UPDATE: Updated VideoPage UI

Browse Source 
UPDATE: Added response to successful password reset redirect to homepage
This commit is contained in:
JustIceO7
2025-02-14 00:14:16 +00:00
parent 9bd1e249ed
commit 88c9b168fd
9 changed files with 98 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/public/images/category_banners/category_banners.json
View File

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

BIN
frontend/public/images/icons/user.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 571 B

8
frontend/src/components/Auth/PasswordResetForm.tsx
View File

@@ -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);

8
frontend/src/pages/ResetPasswordPage.tsx
View File

@@ -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>;
}

131
frontend/src/pages/VideoPage.tsx
View File

@@ -100,9 +100,8 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
<div
id="container"
className={`grid ${
isChatOpen ? "w-[100vw]" : "w-[125vw]"
} grid-rows-[auto_1fr] bg-gray-900 h-full grid-cols-[auto_25vw] transition-all`}
className={`grid ${isChatOpen ? "w-[100vw]" : "w-[125vw]"
} 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"
style={{ gridArea: "2 / 1 / 3 / 2" }}
className="flex flex-row items-center justify-between gap-4 p-4 bg-[#18181b] text-white text-lg rounded-md shadow-lg"
>
<h1 className="text-3xl text-center font-bold">
{streamData ? streamData.streamTitle : "Loading..."}
</h1>
<div>
<Button
extraClasses="flex flex-col items-center font-bold bg-[#ff0000] p-4 px-12 rounded-[3rem] cursor-pointer"
{/* Streamer Icon */}
<div className="flex flex-col items-center mb-[1em]">
<img
src="/images/monkey.png"
alt="streamer"
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>
<img
src="/images/monkey.png"
alt="streamer"
className="w-30 h-10 bg-indigo-500 rounded-full"
/>
</Button>
{streamData ? streamData.streamerName : "Loading..."}
</button>
</div>
{/* (Un)Follow Button */}
{!isFollowing ? (
<Button
extraClasses="w-full bg-purple-700 hover:bg-[#28005e]"
onClick={() => followUser(streamerId, setShowAuthModal)}
>
Follow
</Button>
) : (
<Button
extraClasses="w-full bg-green-400/30 hover:content-['Unfollow'] hover:border-[#a80000]"
onClick={() => unfollowUser(streamerId, setShowAuthModal)}
>
Following
</Button>
)}
{/* Stream Title */}
<div className="flex flex-col items-start flex-grow">
<h1 className="text-[0.75em] lg:text-[0.85em] xl:text-[1em] font-bold">
{streamData ? streamData.streamTitle : "Loading..."}
</h1>
<span className="text-[0.75em] lg:text-[0.85em] xl:text-[1em] text-gray-400">
{streamData ? streamData.categoryName : "Loading..."}
</span>
</div>
<div className="flex flex-col items-center font-bold">
<span className="font-thin">Viewers</span>
<span>{viewerCount}</span>
{/* Streamer Info */}
<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>
<span>
{/* Stream Stats */}
<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>
<span>{streamData ? streamData.categoryName : "Loading..."}</span>
{/* Subscribe Button */}
<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 && (
<Button extraClasses="mx-auto mb-4">Payment Screen Test</Button>
)}
{/* {showCheckout && <CheckoutForm onClose={() => setShowCheckout(false)} />} */}
{/* {showReturn && <Return />} */}
{showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
</div>
{/* {showCheckout && <CheckoutForm onClose={() => setShowCheckout(false)} />} */}
{/* {showReturn && <Return />} */}
{showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
</div>
</SocketProvider>
);

7
web_server/blueprints/oauth.py
View File

@@ -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']
)

8
web_server/blueprints/user.py
View File

@@ -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)
if response:
return 200
else:
return jsonify({"error": "Failed to reset password"}), 500
reset_password(new_password, email)
return jsonify({"message": "Password reset successful"}), 200
return jsonify({"error": "Invalid token"}), 400

4
web_server/utils/auth.py
View File

@@ -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

5
web_server/utils/email.py
View File

@@ -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