Skip to content

Commit

Permalink
Merge pull request #202 from Shariq2003/FooterFixes
Browse files Browse the repository at this point in the history
Fixes :: Removed 3rd Party Links in Footer | Added Missing Validation in Newsletter | Added Submit Button in Newsletter | Added Newsletter Service | React Toast Alerts Added | Redirection Linking to Correct Pages of the Website | Issue #172
  • Loading branch information
rishicds authored Oct 27, 2024
2 parents ac9366b + 1b517b1 commit db79f79
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 55 deletions.
13 changes: 11 additions & 2 deletions .env.sample
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
GMAIL_USER=[email protected]
GMAIL_PASS=your-email-password

SMTP_EMAIL=
SMTP_PASSWORD=

GEMINI_API_KEY='Add your Gemini API Key'

# Also rename this file as .envNEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your-cloudinary-name
NEXT_PUBLIC_CLOUDINARY_API_KEY=your-cloudinary-api-key
NEXT_PUBLIC_CLOUDINARY_API_KEY=your-cloudinary-api-key


# Also rename this file as .env
31 changes: 31 additions & 0 deletions src/app/(pages)/api/generate/route.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { GoogleGenerativeAI } from '@google/generative-ai';
import { NextResponse } from "next/server";
import nodemailer from "nodemailer";

const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);

Expand All @@ -15,3 +17,32 @@ export async function POST(req) {
return new Response(error.message, { status: 500 });
}
}

const transporter = nodemailer.createTransport({
service: "gmail",
auth: {
user: process.env.GMAIL_USER,
pass: process.env.GMAIL_PASS,
},
});

export async function POST(req) {
const { email } = await req.json();

if (!email) {
return NextResponse.json({ message: "Email is required" }, { status: 400 });
}

try {
await transporter.sendMail({
from: process.env.GMAIL_USER,
to: email,
subject: "Subscription Confirmation",
text: "Thank you for subscribing to our newsletter!",
});
return NextResponse.json({ message: "Subscription successful!" });
} catch (error) {
console.error("Error sending email:", error);
return NextResponse.json({ message: "Failed to send email" }, { status: 500 });
}
}
114 changes: 61 additions & 53 deletions src/components/Global/Footer.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { FaLinkedin as Linkedin } from "react-icons/fa";
import { FaGithub as Github } from "react-icons/fa";
import { FaXTwitter } from "react-icons/fa6";
import Link from "next/link";
import { toast } from "react-toastify";

const Footer = () => {
const [email, setEmail] = useState('');
Expand All @@ -14,6 +15,12 @@ const Footer = () => {
const handleSubmit = async (e) => {
e.preventDefault();

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
toast.error("Please enter a valid email address.");
return;
}

try {
const response = await fetch('/api/subscribe', {
method: 'POST',
Expand All @@ -22,14 +29,15 @@ const Footer = () => {
});

if (response.ok) {
setMessage('Thank you for subscribing!');
setEmail("");
toast.success("Thank you for subscribing!");
} else {
const data = await response.json();
setMessage(data.message || 'Subscription failed. Please try again.');
toast.error(data.message || "Subscription failed. Please try again.");
}
} catch (error) {
console.error('Subscription error:', error);
setMessage('An error occurred. Please try again later.');
console.error("Subscription error:", error);
toast.error("An error occurred. Please try again later.");
}
};

Expand Down Expand Up @@ -58,31 +66,31 @@ const Footer = () => {
<ul className="space-y-4 text-center">
<li>
<a
href="https://flowbite.com/"
href="/"
className="text-gray-300 hover:text-white transition-all duration-200"
>
Location
</a>
</li>
<li>
<a
href="https://tailwindcss.com/"
href="/About"
className="text-gray-300 hover:text-white transition-all duration-200"
>
About GDG
</a>
</li>
<li>
<Link
href="https://tailwindcss.com/"
href="/how-apply"
className="text-gray-300 hover:text-white transition-all duration-200"
>
How to Apply
</Link>
</li>
<li>
<Link
href="https://tailwindcss.com/"
href="/who-apply"
className="text-gray-300 hover:text-white transition-all duration-200"
>
Who can apply?
Expand All @@ -99,7 +107,7 @@ const Footer = () => {
<ul className="space-y-4 text-center">
<li>
<Link
href="https://github.com/"
href="https://github.com/GDSC-RCCIIT/gdg-website"
className="text-gray-300 hover:text-white transition-all duration-200"
>
Github
Expand All @@ -115,15 +123,15 @@ const Footer = () => {
</li>
<li>
<Link
href="https://twitter.com/"
href="https://x.com/"
className="text-gray-300 hover:text-white transition-all duration-200"
>
Twitter
X
</Link>
</li>
<li>
<Link
href="https://twitter.com/"
href="https://www.linkedin.com/in/rishi-paul04/"
className="text-gray-300 hover:text-white transition-all duration-200"
>
Whatsapp
Expand Down Expand Up @@ -151,7 +159,7 @@ const Footer = () => {
href="/TermsAndConditions"
className="text-gray-300 hover:text-white transition-all duration-200"
>
Terms &amp; Conditions
Terms & Conditions
</a>
</li>
<li>
Expand All @@ -173,45 +181,45 @@ const Footer = () => {
Stay Updated
</h2>


{/* Newsletter Form */}
<div className="flex justify-center w-full">
<div className="max-w-sm min-w-[200px] w-full">
<form onSubmit={handleSubmit}>
<div className="relative">
<input
type="email"
className="w-full pl-3 pr-10 py-2 bg-transparent placeholder:text-slate-400 text-slate-600 text-sm border border-slate-200 rounded-md transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow"
placeholder="[email protected]"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
<button type="submit" className="absolute inset-y-0 right-0 px-4">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="w-5 h-5 text-black"
{/* Newsletter Form */}
<div className="flex justify-center w-full">
<div className="max-w-sm min-w-[200px] w-full">
<form onSubmit={handleSubmit} noValidate>
<div className="relative">
<input
type="email"
className="w-full pl-3 pr-10 py-2 bg-transparent placeholder:text-slate-400 text-white text-sm border border-slate-200 rounded-md transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow"
placeholder="[email protected]"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
<button
type="submit"
className="absolute inset-y-0 right-0 px-2 flex items-center space-x-1 bg-black rounded-md my-[1px] mx-[1px]"
>
<rect width="20" height="16" x="2" y="4" rx="2" />
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
</svg>
</button>
</div>
</form>
{message && <p className="mt-2 text-sm text-green-600">{message}</p>}
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="w-5 h-5 text-white"
>
<rect width="20" height="16" x="2" y="4" rx="2" />
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
</svg>
</button>
</div>
</form>
</div>
</div>
</div>
{/* Social Links */}
<h2 className="text-sm font-bold text-gray-900 dark:text-white uppercase tracking-wider mt-6 mb-2">

{/* Social Links */}
<h2 className="text-sm font-bold text-white dark:text-white uppercase tracking-wider mt-6 mb-2">
Socials
</h2>
<div className="flex gap-4">
Expand All @@ -228,15 +236,15 @@ const Footer = () => {
icon={<FaXTwitter size={20} className="hover:text-blue-400" />}
/>
<SocialLink
href="https://linkedin.com/"
href="https://www.linkedin.com/in/rishi-paul04/"
icon={<Linkedin size={20} className="hover:text-blue-600" />}
/>
<SocialLink
href="https://github.com/"
href="https://github.com/GDSC-RCCIIT/gdg-website"
icon={<Github size={20} className="hover:text-gray-500" />}
/>
<SocialLink
href="https://github.com/"
href="https://www.linkedin.com/in/rishi-paul04/"
icon={<FaWhatsapp size={20} className="hover:text-green-500" />}
/>
</div>
Expand Down

0 comments on commit db79f79

Please sign in to comment.