From 464d284f339a01c823a32efcf1452613d2dd9d60 Mon Sep 17 00:00:00 2001 From: haseebzaki-07 Date: Fri, 25 Oct 2024 21:57:39 +0530 Subject: [PATCH] add email stay updated --- .env.example | 2 + package-lock.json | 9 +++ package.json | 1 + src/app/api/subscribe/route.js | 36 +++++++++++ src/components/Global/Footer.jsx | 83 +++++++++++++++++-------- src/components/Global/Header.jsx | 101 +++++++++++++++++-------------- 6 files changed, 161 insertions(+), 71 deletions(-) create mode 100644 .env.example create mode 100644 src/app/api/subscribe/route.js diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..93fc623 --- /dev/null +++ b/.env.example @@ -0,0 +1,2 @@ +SMTP_EMAIL= +SMTP_PASSWORD= diff --git a/package-lock.json b/package-lock.json index e099245..cad6a79 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33,6 +33,7 @@ "lucide-react": "^0.452.0", "next": "14.2.13", "next-themes": "^0.3.0", + "nodemailer": "^6.9.15", "react": "^18", "react-dom": "^18", "react-icons": "^5.3.0", @@ -2540,6 +2541,14 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/nodemailer": { + "version": "6.9.15", + "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.9.15.tgz", + "integrity": "sha512-AHf04ySLC6CIfuRtRiEYtGEXgRfa6INgWGluDhnxTZhHSKvrBu7lc1VVchQ0d8nPc4cFaZoPq8vkyNoZr0TpGQ==", + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/normalize-path": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", diff --git a/package.json b/package.json index cba5840..e6c966f 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "lucide-react": "^0.452.0", "next": "14.2.13", "next-themes": "^0.3.0", + "nodemailer": "^6.9.15", "react": "^18", "react-dom": "^18", "react-icons": "^5.3.0", diff --git a/src/app/api/subscribe/route.js b/src/app/api/subscribe/route.js new file mode 100644 index 0000000..ff1dc26 --- /dev/null +++ b/src/app/api/subscribe/route.js @@ -0,0 +1,36 @@ +import { NextResponse } from "next/server"; +import nodemailer from "nodemailer"; + +const transporter = nodemailer.createTransport({ + service: "gmail", + auth: { + user: process.env.SMTP_EMAIL, + pass: process.env.SMTP_PASSWORD, + }, +}); + +export async function POST(req, res) { + const { email } = await req.json(); + + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + if (!emailRegex.test(email)) { + return NextResponse.json({ message: "Invalid email format" }); + } + + try { + await transporter.sendMail({ + from: process.env.SMTP_EMAIL, + to: email, + subject: "Thank you for subscribing gdg-website!", + html: ` +

Thank you for subscribing!

+

We're glad to have you on board. Stay tuned for updates!

+ `, + }); + + return NextResponse.json({ message: "Thank you for subscribing!" }); + } catch (error) { + console.error("Error sending email:", error); + return NextResponse.json({ message: "Error sending email" }); + } +} diff --git a/src/components/Global/Footer.jsx b/src/components/Global/Footer.jsx index a7a1407..7a9e1a1 100644 --- a/src/components/Global/Footer.jsx +++ b/src/components/Global/Footer.jsx @@ -1,4 +1,5 @@ -import React from "react"; +"use client" +import React, { useState } from "react"; import { FiMail } from "react-icons/fi"; import { FaWhatsapp, FaInstagram as Instagram } from "react-icons/fa"; import { FaLinkedin as Linkedin } from "react-icons/fa"; @@ -7,6 +8,31 @@ import { FaXTwitter } from "react-icons/fa6"; import Link from "next/link"; const Footer = () => { + const [email, setEmail] = useState(''); + const [message, setMessage] = useState(''); + + const handleSubmit = async (e) => { + e.preventDefault(); + + try { + const response = await fetch('/api/subscribe', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ email }), + }); + + if (response.ok) { + setMessage('Thank you for subscribing!'); + } else { + const data = await response.json(); + setMessage(data.message || 'Subscription failed. Please try again.'); + } + } catch (error) { + console.error('Subscription error:', error); + setMessage('An error occurred. Please try again later.'); + } + }; + return (