From c077223a2103f0e7d3658922bf5b76b872647211 Mon Sep 17 00:00:00 2001 From: deveshsawant05 Date: Tue, 22 Oct 2024 03:12:56 +0530 Subject: [PATCH] Added Email functionality to Contact Us Page --- package-lock.json | 9 + package.json | 1 + src/app/api/sendEmail/route.js | 56 ++++++ src/app/contact_us/page.jsx | 330 ++++++++++++++++++++------------- 4 files changed, 264 insertions(+), 132 deletions(-) create mode 100644 src/app/api/sendEmail/route.js diff --git a/package-lock.json b/package-lock.json index fd6c89e..1f91aae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33,6 +33,7 @@ "next": "14.2.5", "next-client-cookies": "^1.1.1", "next-sitemap": "^4.2.3", + "nodemailer": "^6.9.15", "react": "^18", "react-dom": "^18", "react-icons": "^5.2.1", @@ -3873,6 +3874,14 @@ "dev": true, "license": "MIT" }, + "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 0fa4c9d..0902ebd 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "next": "14.2.5", "next-client-cookies": "^1.1.1", "next-sitemap": "^4.2.3", + "nodemailer": "^6.9.15", "react": "^18", "react-dom": "^18", "react-icons": "^5.2.1", diff --git a/src/app/api/sendEmail/route.js b/src/app/api/sendEmail/route.js new file mode 100644 index 0000000..707cc94 --- /dev/null +++ b/src/app/api/sendEmail/route.js @@ -0,0 +1,56 @@ +import { NextRequest, NextResponse } from 'next/server'; +import nodemailer from 'nodemailer'; + +export async function POST(req) { + try { + const body = await req.json(); + const { name, email, message, contact, organisation, messageType } = body; + console.log(messageType); + + // Determine if it's a bug or a message + const typeTitle = messageType==="Message" ? 'Message from User': 'Bug Report from User'; + const typeMessage = messageType==="Message" ? 'Message' : 'Message/Issue'; + + const transporter = nodemailer.createTransport({ + service: 'gmail', + auth: { + user: process.env.EMAIL_USER, + pass: process.env.EMAIL_PASSWORD, + }, + }); + + const htmlContent = ` +
+
+

+ This message was sent via the IIITV Coding Club Website. +

+

${typeTitle}

+

Name: ${name}

+

Email: ${email}

+

Contact No.: ${contact}

+

Organisation: ${organisation}

+
+

${typeMessage}:

+

${message}

+
+ Reply to User +
+
+ `; + + const mailOptions = { + from: email, + to: 'codingclub@iiitvadodara.ac.in', + subject: `${typeTitle}: ${name}`, + html: htmlContent, + }; + + await transporter.sendMail(mailOptions); + + return NextResponse.json({ success: true, message: 'Email sent successfully' }); + } catch (error) { + console.error('❌ Error sending email:', error); + return NextResponse.json({ success: false, message: 'Failed to send email', error: error.message }, { status: 500 }); + } +} diff --git a/src/app/contact_us/page.jsx b/src/app/contact_us/page.jsx index e599f5c..42308e5 100644 --- a/src/app/contact_us/page.jsx +++ b/src/app/contact_us/page.jsx @@ -10,6 +10,9 @@ import "./styles.css"; import { Montserrat } from "next/font/google"; +import axios from "axios"; +import Alert from "@/components/ui/alert"; + const montserratFont = Montserrat({ weight: ["100", "200", "400", "600"], subsets: ["latin"], @@ -19,7 +22,18 @@ export default function Page() { const [messageOrBugDropdown, setMessageOrBugDropdown] = useState(false); const [messageOrBug, setMessageOrBug] = useState("Message"); + const [formData, setFormData] = useState({ + name: '', + email: '', + contact: '', + organisation: '', + messageType: 'Message', // Initialize with 'Message' by default + message: '', + }); + + const [formSubmitted, setFormSubmitted] = useState(false); + const [status, setStatus] = useState(''); const linkedInLink = "https://www.linkedin.com/company/iiitvcc/"; const twitterLink = "https://x.com/iiitvcc"; @@ -30,6 +44,41 @@ export default function Page() { function handleDropDownClick() { setMessageOrBugDropdown((prev) => !prev); } + + const handleChange = (e) => { + const { id, value } = e.target; + + setFormData({ + ...formData, + [id]: value, + }); + }; + + const handleSubmit = async (e) => { + e.preventDefault(); + + try { + setStatus("Sending"); + const response = await axios.post('/api/sendEmail', formData, { + headers: { + 'Content-Type': 'application/json', + }, + }); + + if (response.data.success) { + setStatus('Email sent successfully!'); + setFormSubmitted(true); + } else { + setStatus('Failed to send email.'); + console.error("Email sending failed"); + } + } catch (error) { + setStatus('Error occurred while sending email.'); + console.error("Error sending email: ", error); + } + }; + + return (
- {formSubmitted ? ( + {formSubmitted ?

Message Send Succesfully...

- ) : ( -
-
-
{ - event.preventDefault(); - setFormSubmitted(true); - }} - > -
- - -
-
- - -
-
- - -
-
- - -
-
- -
-
-

- {messageOrBug} -

- + : (status === "Sending" ?

Sending...

: + (
+
+ +
+ + +
+
+ +
-
-
-
+ + +
+
+ + +
+
+ +
+
- Message -

-
-

+ {messageOrBug} +

+ +
+
- Report a Bug -

+
+ +
+ +
+
-
-
-
-