Вот моя форма, созданная с помощью response-final-form:
import React from "react"
import { Form, Field } from "react-final-form"
import * as Yup from "yup"
import axios from "axios"
import Layout from "../components/layout"
import servisStyles from "./servis.module.sass"
const onSubmit = async values => {
await axios.post("/send", { values }).then(console.log(values))
}
const Contact = ({ email, password, newsletter, plan }) => (
<Layout>
<Form
onSubmit={onSubmit}
initialValues={{
email: email || "",
password: password || "",
newsletter: newsletter || true,
plan: plan || "free",
}}
render={({ handleSubmit, submitting }) => (
<form onSubmit={handleSubmit} className={servisStyles.form__control}>
<Field
name="email"
validate={value => {
try {
Yup.string()
.required("Email is required")
.email("Email not valid")
.validateSync(value)
} catch (err) {
return err.errors[0]
}
}}
render={({ input, meta }) => (
<div>
{meta.touched && meta.error && <p>{meta.error}</p>}
<input {...input} type="email" placeholder="Email" />
</div>
)}
/>
<Field
name="password"
validate={value => {
try {
Yup.string()
.required("Password is required")
.min(6, "Password must be 9 characters or longer")
.validateSync(value)
} catch (err) {
return err.errors[0]
}
}}
render={({ input, meta }) => (
<div>
{meta.touched && meta.error && <p>{meta.error}</p>}
<input {...input} type="password" placeholder="Password" />
</div>
)}
/>
<div>
<Field name="newsletter" type="checkbox" component="input" />
<label> Join our newsletter </label>
</div>
<Field name="plan" component="select">
<option value="free">Free</option>
<option value="premium">Premium</option>
</Field>
<button type="submit" disabled={submitting}>
Submit
</button>
</form>
)}
/>
</Layout>
)
export default Contact
... и вот код для файла server.js:
const express = require("express")
const bodyParser = require("body-parser")
const nodemailer = require("nodemailer")
const app = express()
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
async function main() {
const output = `
<p>You have a new contact request</p>
<h3>Contact Details</h3>
<ul>
<li>Email: </li>
<li>Password: </li>
<li>Newsletter: </li>
<li>Plan: </li>
</ul>
<h3>Message</h3>
<p>Message goes here</p>
`
let transporter = nodemailer.createTransport({
host: "smtp.mail.yahoo.com",
port: 587,
secure: false,
auth: {
user: "account_username_here",
pass: "account_password_here",
})
// send mail with defined transport object
let info = await transporter.sendMail({
from: "Test Name <test@test.com>", // sender address
to: "receiver@email.com", // list of receivers
subject: "Message Subject", // Subject line
html: output, // html body
})
console.log("Message sent: %s", info.messageId)
}
main().catch(console.error)
Когда я запускаю контактную формуи нажмите кнопку ОТПРАВИТЬ. Значения отправляются, и я вижу их в консоли.
Когда я запускаю server.js, он работает и отправляет сообщение на мою электронную почту.
Проблема в том, что я не знаюкак соединить эти 2 файла и создать рабочую контактную форму.
Пожалуйста, помогите.
Я пытался обернуть код nodemailer в
app.post('/send', values => {
async function main() {
....
}
})
, но это не такt работа.
РЕДАКТИРОВАТЬ: Теперь у меня есть новая проблема.Контактная форма работает и сообщение отправлено, но через некоторое время я получаю сообщение об ошибке:
BadRequestError: request aborted
[0] at IncomingMessage.onAborted (/Users/denis/Desktop/gatsby/node_modules/body-parser/node_modules/raw-body/index.js:231:10)
[0] at IncomingMessage.emit (events.js:182:13)
[0] at abortIncoming (_http_server.js:444:9)
[0] at socketOnClose (_http_server.js:437:3)
[0] at Socket.emit (events.js:187:15)
[0] at TCP._handle.close (net.js:599:12)
[0] BadRequestError: request aborted
[0] at IncomingMessage.onAborted (/Users/denis/Desktop/gatsby/node_modules/body-parser/node_modules/raw-body/index.js:231:10)
[0] at IncomingMessage.emit (events.js:182:13)
[0] at abortIncoming (_http_server.js:444:9)
[0] at socketOnClose (_http_server.js:437:3)
[0] at Socket.emit (events.js:187:15)
[0] at TCP._handle.close (net.js:599:12)
error Error when trying to proxy request "/api/send" to "http://localhost:3000/api/send"
[1]
[1] RequestError: socket hang up
[1]
[1] - index.js:220 ClientRequest.req.once.err
[1] [gatsby]/[got]/index.js:220:22
[1]
[1] - next_tick.js:63 process._tickCallback
[1] internal/process/next_tick.js:63:19