Merge pull request #202 from Shariq2003/FooterFixes

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
GDSC-RCCIIT · Oct 27, 2024 · db79f79 · db79f79
2 parents ac9366b + 1b517b1
commit db79f79
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 55 deletions.
diff --git a/.env.sample b/.env.sample
@@ -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
diff --git a/src/app/(pages)/api/generate/route.js b/src/app/(pages)/api/generate/route.js
@@ -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);
 
@@ -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 });
+    }
+}
diff --git a/src/components/Global/Footer.jsx b/src/components/Global/Footer.jsx
@@ -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('');
@@ -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',
@@ -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.");
     }
   };
 
@@ -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?
@@ -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
@@ -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
@@ -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>
@@ -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">
@@ -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>