Improve Backend of Contact Page

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,13 +11,16 @@
   "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",
     "express": "^4.19.2",
     "express-async-handler": "^1.2.0",
     "jsonwebtoken": "^9.0.2",
     "mongoose": "^8.4.3",
+    "nodemailer": "^6.9.14",
     "nodemon": "^3.1.3"
-  }
+  },
+  "keywords": []
 }

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}`);
+});

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 {

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 (
         <div className='box'>