FEAT: Added newsletter
This commit is contained in:
@@ -1,15 +1,42 @@
|
||||
import { useState } from "react";
|
||||
import { Mail, Facebook, Twitter, Instagram, Linkedin } from "lucide-react";
|
||||
|
||||
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 (
|
||||
<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">
|
||||
{/* About Section */}
|
||||
<div className="flex-1 min-w-[250px]">
|
||||
<h2 className="text-2xl font-bold">Gander</h2>
|
||||
<p className="text-sm mt-2">
|
||||
Your very favourite streaming service
|
||||
</p>
|
||||
<p className="text-sm mt-2">Your very favourite streaming service</p>
|
||||
</div>
|
||||
|
||||
{/* Office Section */}
|
||||
@@ -44,8 +71,11 @@ const Footer = () => {
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
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>
|
||||
|
||||
{/* Social Icons */}
|
||||
|
||||
@@ -3,7 +3,7 @@ from utils.user_utils import *
|
||||
from utils.auth import *
|
||||
from utils.utils import get_category_id
|
||||
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
|
||||
|
||||
redis_url = "redis://redis:6379/1"
|
||||
@@ -153,6 +153,11 @@ def user_forgot_password(email):
|
||||
send_email(email, lambda: forgot_password_body(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'])
|
||||
def user_reset_password(token, new_password):
|
||||
|
||||
@@ -65,7 +65,6 @@ def forgot_password_body(email) -> str:
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Password Reset</title>
|
||||
<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); }}
|
||||
@@ -105,7 +104,6 @@ def confirm_account_creation_body(email) -> str:
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Password Reset</title>
|
||||
<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); }}
|
||||
@@ -126,4 +124,44 @@ def confirm_account_creation_body(email) -> str:
|
||||
</html>
|
||||
"""
|
||||
|
||||
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
|
||||
|
||||
Reference in New Issue
Block a user