From 7b4809bfed3816af23ba6e52b5468448a8b21a7f Mon Sep 17 00:00:00 2001 From: Ojas Arora <127867874+Ojas-Arora@users.noreply.github.com> Date: Tue, 23 Jul 2024 20:48:05 +0530 Subject: [PATCH] Improve Backend of Contact Page --- BACKEND/package-lock.json | 13 ++- BACKEND/package.json | 7 +- BACKEND/server.js | 30 ++++++ .../footer_section/ContactUs/contact_us.css | 4 + .../footer_section/ContactUs/contact_us.js | 92 +++++++++++++------ 5 files changed, 117 insertions(+), 29 deletions(-) create mode 100644 BACKEND/server.js diff --git a/BACKEND/package-lock.json b/BACKEND/package-lock.json index 0bb01441..530006da 100644 --- a/BACKEND/package-lock.json +++ b/BACKEND/package-lock.json @@ -10,6 +10,7 @@ "license": "ISC", "dependencies": { "bcryptjs": "^2.4.3", + "body-parser": "^1.20.2", "cookie-parser": "^1.4.6", "cors": "^2.8.5", "dotenv": "^16.4.5", @@ -17,8 +18,10 @@ "express-async-handler": "^1.2.0", "jsonwebtoken": "^9.0.2", "mongoose": "^8.4.3", + "nodemailer": "^6.9.14", "nodemon": "^3.1.3" - } + }, + "devDependencies": {} }, "node_modules/@mongodb-js/saslprep": { "version": "1.1.7", @@ -943,6 +946,14 @@ "node": ">= 0.6" } }, + "node_modules/nodemailer": { + "version": "6.9.14", + "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.9.14.tgz", + "integrity": "sha512-Dobp/ebDKBvz91sbtRKhcznLThrKxKt97GI2FAlAyy+fk19j73Uz3sBXolVtmcXjaorivqsbbbjDY+Jkt4/bQA==", + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/nodemon": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.3.tgz", diff --git a/BACKEND/package.json b/BACKEND/package.json index 8e0057c2..a828acdd 100644 --- a/BACKEND/package.json +++ b/BACKEND/package.json @@ -1,7 +1,7 @@ { "name": "backend", "version": "1.0.0", - "description": "", + "description": "Uses Express js", "main": "index.js", "scripts": { "start": "nodemon index.js", @@ -11,6 +11,7 @@ "license": "ISC", "dependencies": { "bcryptjs": "^2.4.3", + "body-parser": "^1.20.2", "cookie-parser": "^1.4.6", "cors": "^2.8.5", "dotenv": "^16.4.5", @@ -18,6 +19,8 @@ "express-async-handler": "^1.2.0", "jsonwebtoken": "^9.0.2", "mongoose": "^8.4.3", + "nodemailer": "^6.9.14", "nodemon": "^3.1.3" - } + }, + "keywords": [] } diff --git a/BACKEND/server.js b/BACKEND/server.js new file mode 100644 index 00000000..2063c180 --- /dev/null +++ b/BACKEND/server.js @@ -0,0 +1,30 @@ +const express = require('express'); +const cors = require('cors'); +const multer = require('multer'); + +const app = express(); +const port = 3000; + +// Use CORS to allow requests from the frontend +app.use(cors()); + +// Set up multer for handling file uploads +const upload = multer({ dest: 'uploads/' }); + +app.post('/send', upload.single('attachments'), (req, res) => { + const { name, email, issue, message } = req.body; + const attachment = req.file; + + console.log('Received:', { name, email, issue, message, attachment }); + + // Simulate processing the data + if (name && email && issue && message) { + res.json({ success: true }); + } else { + res.json({ success: false }); + } +}); + +app.listen(port, () => { + console.log(`Server running at http://localhost:${port}`); +}); diff --git a/src/Components/footer_section/ContactUs/contact_us.css b/src/Components/footer_section/ContactUs/contact_us.css index 36585675..022d1bea 100644 --- a/src/Components/footer_section/ContactUs/contact_us.css +++ b/src/Components/footer_section/ContactUs/contact_us.css @@ -16,6 +16,7 @@ margin-top: 50px; margin-bottom: 50px; justify-content: space-around; + } .general { @@ -35,6 +36,7 @@ padding: 20px; background-color: #1e1b3a; border-radius: 10px; + box-shadow: 7px 7px 32px 0 #6052ff; } .box1:hover, @@ -46,6 +48,7 @@ outline: 3px solid white; border-radius: 15px; transition: 0.1s ease-in-out; + box-shadow: 7px 7px 32px 0 #6052ff; } .box1 h2, @@ -70,6 +73,7 @@ border: 3px solid white; border-radius: 15px; background-color: #2a2747; + box-shadow: 7px 7px 32px 0 #6052ff; } .form h2 { diff --git a/src/Components/footer_section/ContactUs/contact_us.js b/src/Components/footer_section/ContactUs/contact_us.js index 00ee21fa..c4a05768 100644 --- a/src/Components/footer_section/ContactUs/contact_us.js +++ b/src/Components/footer_section/ContactUs/contact_us.js @@ -1,39 +1,79 @@ -import './contact_us.css'; import React from 'react'; import { Link } from 'react-router-dom'; import homeIcon from '../../../img/homeicon.png'; import { ToastContainer, toast, Bounce } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; +import './contact_us.css'; function ContactUs() { - const handleSubmit = (event) => { + const handleSubmit = async (event) => { event.preventDefault(); - // Perform form validation or any other logic here - const email = document.getElementById("email").value; - const name = document.getElementById("flname").value; - const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/; + const formData = new FormData(); + const email = document.getElementById("email").value; + const name = document.getElementById("flname").value; + const issue = document.getElementById("issue").value; + const message = document.getElementById("message").value; + const attachment = document.getElementById("attachments").files[0]; + + const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/; + + if (!emailPattern.test(email)) { + toast.error("Please enter a valid email address."); + return; + } else if (name.length < 2 || name.length > 40) { + toast.error("Name should be within 2 - 40 characters only."); + return; + } + + // Append data to FormData object + formData.append('name', name); + formData.append('email', email); + formData.append('issue', issue); + formData.append('message', message); + if (attachment) { + formData.append('attachments', attachment); + } + + const sendButton = document.querySelector('button[type="submit"]'); + sendButton.disabled = true; + sendButton.textContent = 'Sending...'; + + try { + const response = await fetch('http://localhost:3000/send', { + method: 'POST', + body: formData, // Send FormData object + }); + + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + + const result = await response.json(); - if (!emailPattern.test(email)) { - toast.error("Please enter a valid email address."); - return; - } else if (name.length < 2 || name.length > 40) { - toast.error("Name should be within 2 - 40 characters only."); - return; - } - // Show success toast notification - toast.success("Sent Successfully!", { - position: "top-center", - autoClose: 5000, - hideProgressBar: false, - closeOnClick: true, - pauseOnHover: false, - draggable: true, - progress: undefined, - theme: "dark", - transition: Bounce, - }); - }; + if (result.success) { + toast.success("Sent Successfully!", { + position: "top-center", + autoClose: 3000, + hideProgressBar: false, + closeOnClick: true, + pauseOnHover: false, + draggable: true, + progress: undefined, + theme: "dark", + transition: Bounce, + }); + } else { + toast.error("Failed to send message. Please try again later."); + } + } catch (error) { + console.error("Error sending message:", error); + toast.error("Failed to send message. Please try again later."); + } finally { + sendButton.disabled = false; + sendButton.textContent = 'Submit'; + } + }; return (