Skip to content

Commit

Permalink
fixed
Browse files Browse the repository at this point in the history
  • Loading branch information
@nishant0708
nishant0708 committed Aug 4, 2024
1 parent bc01f15 commit f7fbd73
Show file tree
Hide file tree
Showing 6 changed files with 174 additions and 127 deletions.
68 changes: 68 additions & 0 deletions server/controllers/Auth.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -624,3 +624,71 @@ exports.resetPassword = async (req, res) => {
res.status(500).json("Some error occurred!");
}
};

exports.Contact= async (req, res) => {
const { name, email, message } = req.body;

// Set up Nodemailer transport
const transporter = nodemailer.createTransport({
service: 'Gmail',
auth: {
user: process.env.EMAIL_USER,
pass: process.env.EMAIL_PASS,
},
});

const mailOptions = {
from: process.env.EMAIL_USER,
to: email,
subject: "Acknowledgment: We've received your message",
html: `
<div style="background-color: #ffffff; padding: 20px; font-family: Arial, sans-serif;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<tr>
<td align="center" bgcolor="#172554" style="padding: 20px 0; color: #ffffff;">
<img src="https://raw.githubusercontent.com/VanshKing30/FoodiesWeb/main/public/logo.png" alt="Foodies Logo" style="display: block; margin-bottom: 10px;" />
<h1 style="font-size: 24px; margin: 0;">Foodies</h1>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" style="padding: 20px; color: #172554;">
<h2 style="font-size: 20px;">Hello ${name},</h2>
<p style="font-size: 16px; line-height: 1.5;">
Thank you for contacting us. We have received your message:
</p>
<blockquote style="font-size: 16px; line-height: 1.5; color: #555555;">
"${message}"
</blockquote>
<p style="font-size: 16px; line-height: 1.5;">
We will get back to you shortly.
</p>
<p style="font-size: 16px; line-height: 1.5;">
Best regards,<br />
<strong>Foodies Web Team</strong>
</p>
</td>
</tr>
<tr>
<td bgcolor="#f0f0f0" style="padding: 20px; text-align: center; color: #555555;">
<p style="font-size: 14px;">&copy; 2024 Foodies. All rights reserved.</p>
</td>
</tr>
</table>
</div>
`,
};

try {
// Send acknowledgment email to the user
await transporter.sendMail(mailOptions);

// Save contact details in the database
const contact = new Contact({ name, email, message });
await contact.save();

res.status(200).json({ message: "Message sent and saved successfully." });
} catch (error) {
console.error("Error sending email or saving contact:", error);
res.status(500).json({ message: "Failed to send email or save message." });
}
};
11 changes: 11 additions & 0 deletions server/env-example
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
PORT=4000
DATABASE_URL=""
JWT_SECRET="32 long character"
CLOUDINARY_CLOUD_NAME=""
CLOUDINARY_API_KEY=""
CLOUDINARY_API_SECRET=""
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=""
SESSION_SECRET=
EMAIL_USER=""
EMAIL_PASS=""
25 changes: 19 additions & 6 deletions server/models/Contact.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,24 @@
const mongoose = require('mongoose');
const mongoose = require("mongoose");

const contactSchema = new mongoose.Schema({
name: { type: String, required: true },
email: { type: String, required: true },
message: { type: String, required: true },
const ContactSchema = new mongoose.Schema({
name: {
type: String,
required: true,
},
email: {
type: String,
required: true,
},
message: {
type: String,
required: true,
},
createdAt: {
type: Date,
default: Date.now,
},
});

const Contact = mongoose.model('Contact', contactSchema);
const Contact = mongoose.model("Contact", ContactSchema);

module.exports = Contact;
1 change: 1 addition & 0 deletions server/routes/contactRoutes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,5 @@ const router = express.Router();

router.post('/', saveContactMessage);


module.exports = router;
1 change: 1 addition & 0 deletions server/routes/student.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ router.post("/VerifyUser", authController.forgotPassword);
router.get("/resetPassword/:id/:token", authController.verifyLink);
router.post("/newPassword/:id/:token", authController.resetPassword);
router.get("/studentLogout", studentAuth, authController.studentLogout);
router.post("/contact", authController.Contact);
router.get("/canteenLogout", auth, authController.canteenLogout);
router.get("/canteen/:id", getCanteenData);
router.post('/submitFeedback', feedbackController.submitFeedback);
Expand Down
195 changes: 74 additions & 121 deletions src/pages/ContactUs.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import axios from "axios";
import emailjs from "@emailjs/browser";
import logo from "../assets/logo2.png";
import { Link } from "react-router-dom";
import React, { useRef, useState } from "react";

const Contact = () => {
const formRef = useRef();
const [form, setForm] = useState({
name: "",
email: "",
Expand All @@ -15,43 +13,26 @@ const Contact = () => {
const [loading, setLoading] = useState(false);

const handleChange = (e) => {
const { target } = e;
const { name, value } = target;

const { name, value } = e.target;
setForm({
...form,
[name]: value,
});
};

const handleEmailSubmit = async (e) => {
const handleSubmit = async (e) => {
e.preventDefault();
if (!form.name || !form.email || !form.message) {
alert("Please fill in all fields before submitting.");
return; // Stop further processing if form is incomplete
return;
}
setLoading(true);

try {
await emailjs.send(
'process.env.SERVICE_ID',//write service id here
'process.env.TEMPLETS_ID',//write templet id here
{
from_name: form.name,
to_name: "FoodiesWeb",
from_email: form.email,
to_email: "info@foodiweb.com",
message: form.message,
},
'process.env.PUBLIC_KEY' //write public_key here
);




// Send form data to backend
await axios.post("http://localhost:4000/api/v1/contact", form);
setLoading(false);
alert("Thank you. I will get back to you as soon as possible.");

alert("Thank you. Your message has been sent and saved.");
setForm({
name: "",
email: "",
Expand All @@ -60,111 +41,83 @@ const Contact = () => {
} catch (error) {
setLoading(false);
console.error(error);

alert("Sorry, something went wrong while sending your message. Please try again later.");
}
};
const handleSaveToDB = async (e) => {
e.preventDefault();
if (!form.name || !form.email || !form.message) {
alert("Please fill in all fields before submitting.");
return; // Stop further processing if form is incomplete
}
setLoading(true);

try {
// Save to MongoDB
await axios.post('http://localhost:3000/api/contact', form);

setLoading(false);
alert("Your message has been saved to the database.");

setForm({
name: "",
email: "",
message: "",
});
} catch (error) {
setLoading(false);
console.error(error);
alert("Sorry, something went wrong while saving your message to the database. Please try again later.");
}
};

return (
<div>
<div className="relative h-screen md:flex">
<div className="relative overflow-hidden md:flex w-1/2 bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 bg-no-repeat justify-around items-center hidden">
<div>
<img src={logo} alt="logo" className="w-48 h-12 mb-2" />
<p className="text-white mt-1 ml-3">
Connecting You to Your College Canteens
</p>
</div>
<div className="absolute -bottom-32 -left-40 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8"></div>
<div className="absolute -bottom-40 -left-20 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8"></div>
<div className="absolute -top-40 -right-0 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8"></div>
<div className="absolute -top-20 -right-20 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8"></div>
<div>
<div className="relative h-screen md:flex">
<div className="relative overflow-hidden md:flex w-1/2 bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 bg-no-repeat justify-around items-center hidden">
<div>
<img src={logo} alt="logo" className="w-48 h-12 mb-2" />
<p className="text-white mt-1 ml-3">
Connecting You to Your College Canteens
</p>
</div>
<div className="flex md:w-1/2 justify-center py-10 items-center bg-white">
<form className="bg-white p-8 rounded shadow-lg w-80" onSubmit={handleEmailSubmit}>
<h1 className="text-gray-800 font-bold text-2xl mb-1">Get in touch</h1>
<p className="text-sm font-normal text-gray-600 mb-7">Contact Us.</p>
<div className="mb-4">
<input
required
className="w-full py-2 px-3 border rounded-2xl border-b-3 border-customBlue"
type="text"
placeholder="Name"
name="name"
value={form.name}
onChange={handleChange}
/>
</div>
<div className="mb-4">
<input
required
className="w-full py-2 px-3 border rounded-2xl border-b-3 border-customBlue"
type="email"
placeholder="Email"
name="email"
value={form.email}
onChange={handleChange}
/>
</div>
<div className="mb-4">
<textarea
required
className="w-full py-2 px-3 border rounded-2xl border-b-3 border-customBlue"
type="text"
placeholder="Message"
name="message"
value={form.message}
onChange={handleChange}
rows={5}
/>
</div>
<div className='flex gap-3'>
<Link
className="w-full bg-gradient-to-t bg-white text-blue-950 py-2 rounded-2xl font-semibold mb-2 text-center border-b-3 border-customBlue hover:bg-gray-100 border"
to="/">
<button>
{loading ? "Go Back" : "Go Back"}
</button>
</Link>
<button
type='button'
onClick={handleSaveToDB}
className="w-full bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 py-2 rounded-2xl text-white font-semibold mb-2"
>
{loading ? "Saving..." : "Submit"}
<div className="absolute -bottom-32 -left-40 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8"></div>
<div className="absolute -bottom-40 -left-20 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8"></div>
<div className="absolute -top-40 -right-0 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8"></div>
<div className="absolute -top-20 -right-20 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8"></div>
</div>
<div className="flex md:w-1/2 justify-center py-10 items-center bg-white">
<form className="bg-white p-8 rounded shadow-lg w-80" onSubmit={handleSubmit}>
<h1 className="text-gray-800 font-bold text-2xl mb-1">Get in touch</h1>
<p className="text-sm font-normal text-gray-600 mb-7">Contact Us.</p>
<div className="mb-4">
<input
required
className="w-full py-2 px-3 border rounded-2xl border-b-3 border-customBlue"
type="text"
placeholder="Name"
name="name"
value={form.name}
onChange={handleChange}
/>
</div>
<div className="mb-4">
<input
required
className="w-full py-2 px-3 border rounded-2xl border-b-3 border-customBlue"
type="email"
placeholder="Email"
name="email"
value={form.email}
onChange={handleChange}
/>
</div>
<div className="mb-4">
<textarea
required
className="w-full py-2 px-3 border rounded-2xl border-b-3 border-customBlue"
type="text"
placeholder="Message"
name="message"
value={form.message}
onChange={handleChange}
rows={5}
/>
</div>
<div className="flex gap-3">
<Link
className="w-full bg-gradient-to-t bg-white text-blue-950 py-2 rounded-2xl font-semibold mb-2 text-center border-b-3 border-customBlue hover:bg-gray-100 border"
to="/">
<button>
{loading ? "Go Back" : "Go Back"}
</button>
</div>
</form>
</div>
</Link>
<button
type="submit"
className="w-full bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 py-2 rounded-2xl text-white font-semibold mb-2"
>
{loading ? "Submitting..." : "Submit"}
</button>
</div>
</form>
</div>
</div>
</div>
);
}

export default Contact;
export default Contact;

0 comments on commit f7fbd73

Please sign in to comment.