Я хочу создать простую контактную форму с ReactJS.
Мое приложение. js is:
import React, { Component } from 'react';
import axios from 'axios';
class Contact extends Component {
state = {
name: '',
message: '',
email: '',
username: '',
password: '',
sent: false,
buttonText: 'Send Message'
}
formSubmit = (e) => {
e.preventDefault()
this.setState({
buttonText: '...sending'
})
let data = {
name: this.state.name,
email: this.state.email,
message: this.state.message,
username: this.state.username,
password: this.state.password
}
axios.post("http://wwww.localhost:4000/api/v1/", data)
.then( res => {
this.setState({ sent: true }, this.resetForm())
})
.catch( () => {
console.log('Message not sent')
})
}
resetForm = () => {
this.setState({
name: '',
message: '',
email: '',
buttonText: 'Message Sent'
})
}
render() {
return(
<form className="contact-form" onSubmit={ (e) => this.formSubmit(e)}>
<label className="message" htmlFor="message-input">Your Message</label>
<br/>
<textarea onChange={e => this.setState({ message: e.target.value})} name="message" className="message-input" type="text" placeholder="Please write your message here" value={this.state.message} required/>
<br/>
<label className="message-name" htmlFor="message-name">Your Name</label>
<br/>
<input onChange={e => this.setState({ name: e.target.value})} name="name" className="message-name" type="text" placeholder="Your Name" value={this.state.name}/>
<br/>
<label className="message-email" htmlFor="message-email">Your Email</label>
<br/>
<input onChange={(e) => this.setState({ email: e.target.value})} name="email" className="message-email" type="email" placeholder="your@email.com" required value={this.state.email} />
<div className="button--container">
<button type="submit" className="button button-primary">{ this.state.buttonText }</button>
</div>
</form>
);
}
}
export default Contact;
Каждый раз, когда я нажимаю кнопку подтверждения, сообщение отправлялось, но в инспекторе в окне «Сеть» я вижу это сообщение об ошибке:
{code: "EAUTH",…}
code: "EAUTH"
command: "AUTH PLAIN"
response: "535-5.7.8 Username and Password not accepted. Learn more at↵535 5.7.8 https://support.google.com/mail/?p=BadCredentials u6sm2013375ljd.68 - gsmtp"
responseCode: 535
My Api. js код:
const express = require('express');
const bodyParser = require('body-parser');
const nodemailer = require('nodemailer');
const cors = require('cors');
const app = express();
const port = 4000;
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.get('/', (req, res) => {
res.send('Welcome to my api');
})
app.post('/api/v1/', (req,res) => {
const { body: { username, password }} = req;
const params = req.params;
console.log(params)
var data = req.body;
var smtpTransport = nodemailer.createTransport({
service: 'Gmail',
port: 465,
auth: {
user: 'pizhevsoft@gmail.com',
pass: 'pass123'
}
});
var mailOptions = {
from: data.email,
to: 'pizhevsoft@gmail.com',
subject: 'New Request',
html: `<p>${data.name}</p>
<p>${data.email}</p>
<p>${data.message}</p>`
};
smtpTransport.sendMail(mailOptions,
(error, response) => {
if(error) {
res.send(error)
}else {
res.send('Success')
}
smtpTransport.close();
});
})
app.listen(port, () => {
console.log('We are live on port 4000');
});
Так что я не вижу сообщения по почте, но я 100 % уверен в моем пароле электронной почты .. Могу ли я взять пример Как это исправить ..