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

FEAT: Added newsletter

Browse Source
This commit is contained in:
white
2025-02-26 14:33:19 +00:00
parent 379140852a
commit c98f892e3e
3 changed files with 81 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/components/Layout/Footer.tsx
View File

@@ -1,15 +1,42 @@
import { useState } from "react";
import { Mail, Facebook, Twitter, Instagram, Linkedin } from "lucide-react"; import { Mail, Facebook, Twitter, Instagram, Linkedin } from "lucide-react";
const Footer = () => { const Footer = () => {
const [email, setEmail] = useState("");
const handleKeyDown = async (event) => {
if (event.key === "Enter") {
if (email.trim() === "") return;
try {
const response = await fetch(`/api/send_newsletter/${email}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
});
if (!response.ok) {
throw new Error("Failed to subscribe");
}
setEmail("");
alert("Successfully added to newsletter");
} catch (error) {
console.error("Error subscribing:", error);
}
}
};
return ( return (
<footer className="bg-gradient-to-r from-[#1a1a2e] to-[#3a0ca3] text-white p-10"> <footer className="bg-gradient-to-r from-[#1a1a2e] to-[#3a0ca3] text-white p-10">
<div className="flex flex-wrap justify-between gap-x-10 gap-y-6"> <div className="flex flex-wrap justify-between gap-x-10 gap-y-6">
{/* About Section */} {/* About Section */}
<div className="flex-1 min-w-[250px]"> <div className="flex-1 min-w-[250px]">
<h2 className="text-2xl font-bold">Gander</h2> <h2 className="text-2xl font-bold">Gander</h2>
<p className="text-sm mt-2"> <p className="text-sm mt-2">Your very favourite streaming service</p>
Your very favourite streaming service
</p>
</div> </div>
{/* Office Section */} {/* Office Section */}
@@ -44,8 +71,11 @@ const Footer = () => {
type="email" type="email"
placeholder="Enter your email" placeholder="Enter your email"
className="bg-transparent outline-none text-sm flex-1 px-2" className="bg-transparent outline-none text-sm flex-1 px-2"
value={email}
onChange={(e) => setEmail(e.target.value)}
onKeyDown={handleKeyDown}
/> />
<Mail className="text-white cursor-pointer" /> <Mail className="text-white cursor-pointer" onClick={() => handleKeyDown({ key: "Enter" })} />
</div> </div>
{/* Social Icons */} {/* Social Icons */}

7
web_server/blueprints/user.py
View File

@@ -3,7 +3,7 @@ from utils.user_utils import *
from utils.auth import * from utils.auth import *
from utils.utils import get_category_id from utils.utils import get_category_id
from blueprints.middleware import login_required from blueprints.middleware import login_required
from utils.email import send_email, forgot_password_body from utils.email import send_email, forgot_password_body, newsletter_conf
import redis import redis
redis_url = "redis://redis:6379/1" redis_url = "redis://redis:6379/1"
@@ -153,6 +153,11 @@ def user_forgot_password(email):
send_email(email, lambda: forgot_password_body(email)) send_email(email, lambda: forgot_password_body(email))
return email return email
@user_bp.route("/send_newsletter/<string:email>", methods=["POST"])
def send_newsletter(email):
send_email(email, lambda: newsletter_conf(email))
return email
@user_bp.route('/user/reset_password/<string:token>/<string:new_password>', methods=['POST']) @user_bp.route('/user/reset_password/<string:token>/<string:new_password>', methods=['POST'])
def user_reset_password(token, new_password): def user_reset_password(token, new_password):

42
web_server/utils/email.py
View File

@@ -65,7 +65,6 @@ def forgot_password_body(email) -> str:
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Password Reset</title>
<style> <style>
body {{ font-family: Arial, sans-serif; background-color: #f4f4f4; padding: 20px; text-align: center; }} body {{ font-family: Arial, sans-serif; background-color: #f4f4f4; padding: 20px; text-align: center; }}
.container {{ background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }} .container {{ background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }}
@@ -105,7 +104,6 @@ def confirm_account_creation_body(email) -> str:
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Password Reset</title>
<style> <style>
body {{ font-family: Arial, sans-serif; background-color: #f4f4f4; padding: 20px; text-align: center; }} body {{ font-family: Arial, sans-serif; background-color: #f4f4f4; padding: 20px; text-align: center; }}
.container {{ background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }} .container {{ background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }}
@@ -127,3 +125,43 @@ def confirm_account_creation_body(email) -> str:
""" """
return content return content
def newsletter_conf(email):
"""
Handles sending a confirmation email that a user has joined a newsletter
"""
salt = token_hex(32)
token = generate_token(email, salt)
token += "CrEaTe"
r.setex(token, 3600, salt)
full_url = url + "/confirm_account_creation/" + token
content = f"""
<html>
<head>
<meta charset="UTF-8">
<style>
body {{ font-family: Arial, sans-serif; background-color: #f4f4f4; padding: 20px; text-align: center; }}
.container {{ background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }}
.btn {{ display: inline-block; padding: 10px 20px; color: white; background-color: #FFFFFF; text-decoration: none; border-radius: 5px; border: 1px solid #000000; font-weight: bold; }}
.btn:hover {{ background-color: #E0E0E0; }}
p {{ color: #000000; }}
a.btn {{ color: #000000; }}
</style>
</head>
<body>
<div class="container">
<h1>Gander</h1>
<h2>Welcome to the Official Gander Newsletter!</h2>
<p>If you are receiving this email, it means that you have been officially added to the Monthly Gander newsletter.</p>
<p>In this newsletter, you will receive updates about: your favourite streamers; important Gander updates; and more!</p>
<small><a href="{url}" class="btn">unsubscribe</a></small>
</div>
</body>
</html>
"""
return content