diff --git a/src/homePage/Homepage.css b/src/homePage/Homepage.css index 92dd002..3cedd8a 100644 --- a/src/homePage/Homepage.css +++ b/src/homePage/Homepage.css @@ -6,6 +6,9 @@ .white-section { background-color: #ffffff; + padding-top: 5rem; + padding-bottom: 5rem; + padding-left: 18%; } #title .container-fluid { @@ -22,7 +25,9 @@ .housesIntro{ - padding: 4% 5%; + width: 1200px; + height: 800px; + } .contactIntro{ @@ -31,13 +36,9 @@ padding-bottom: 80px; } -.carouselSection { - margin: 2% 8%; -} - .headerImg{ - width: 2000px; - height: 600px; + width: 1200px; + height: 800px; } .heading-1{ diff --git a/src/homePage/Homepage.js b/src/homePage/Homepage.js index 2fd748e..9e6819b 100644 --- a/src/homePage/Homepage.js +++ b/src/homePage/Homepage.js @@ -4,6 +4,7 @@ import house1 from "../images/house1.jpg"; import house2 from "../images/house2.jpg"; import house3 from "../images/house3.jpg"; import Carousel from "react-bootstrap/Carousel"; +import axios from 'axios' class Homepage extends Component { constructor(props) { @@ -120,7 +121,26 @@ class Homepage extends Component { this.setState({ message: event.target.value }); } - handleSubmit(event) {} + handleSubmit(event) { + event.preventDefault(); + + axios({ + method: "POST", + url: "http://localhost:3002/send", + data: this.state + }).then((response) => { + if (response.data.status === 'success') { + alert("Message Sent."); + this.resetForm() + } else if (response.data.status === 'fail') { + alert("Message failed to send.") + } + }) + } + + resetForm() { + this.setState({ firstname: '', lastname: '', email: '', message: '' }) + } } export default Homepage; diff --git a/src/homePage/index.js b/src/homePage/index.js index 7d52476..de295e3 100644 --- a/src/homePage/index.js +++ b/src/homePage/index.js @@ -1 +1,59 @@ +var express = require('express'); +var router = express.Router(); +var nodemailer = require('nodemailer'); +var cors = require('cors'); +const creds = require('./config'); + +var transport = { + host: 'smtp.mailtrap.io', // Don’t forget to replace with the SMTP host of your provider + port: 2525, + auth: { + user: creds.USER, + pass: creds.PASS + } +} + +var transporter = nodemailer.createTransport(transport) + +transporter.verify((error, success) => { + if (error) { + console.log(error); + } else { + console.log('Server is ready to take messages'); + } +}); + +router.post('/send', (req, res, next) => { + var firstname = req.body.firstname + var lastname = req.body.lastname + var email = req.body.email + var message = req.body.message + var content = `firstname: ${firstname} \n lastname: ${lastname} \n email: ${email} \n message: ${message} ` + + var mail = { + from: email, + to: 'kenes@cribs.com', // Change to email address that you want to receive messages on + subject: 'New Message from Contact Form', + text: content + } + + transporter.sendMail(mail, (err, data) => { + if (err) { + res.json({ + status: 'fail' + }) + } else { + res.json({ + status: 'success' + }) + } + }) +}) + +const app = express() +app.use(cors()) +app.use(express.json()) +app.use('/', router) +app.listen(3002) + export { default } from "./homePage"; diff --git a/src/images/house1.jpg b/src/images/house1.jpg index c429663..9c9108b 100644 Binary files a/src/images/house1.jpg and b/src/images/house1.jpg differ diff --git a/src/images/house2.jpg b/src/images/house2.jpg index b5976ed..632343e 100644 Binary files a/src/images/house2.jpg and b/src/images/house2.jpg differ diff --git a/src/images/house3.jpg b/src/images/house3.jpg index 35034fe..d353ff7 100644 Binary files a/src/images/house3.jpg and b/src/images/house3.jpg differ