add mail sender

This commit is contained in:
Firesieht 2022-05-02 23:22:54 +03:00
parent bb4c46abb2
commit 827fabe758
4 changed files with 124 additions and 5 deletions

View File

@ -1,18 +1,64 @@
import styles from './Contacts.module.css' import styles from './Contacts.module.css'
import React from "react" import React, { useState } from "react"
import Link from 'next/link'; import Link from 'next/link';
import Image from 'next/image'; import Image from 'next/image';
import axios from "axios"
// const nodemailer = require("nodemailer");
// async function main(textMail:string){
// let transporter = nodemailer.createTransport({
// host: "smtp.yandex.ru",
// port: 465,
// secure: true,
// auth: {
// user: "vasilifibonachi@yandex.ru",
// pass: "8uP5HzwE_NMBgCj"
// }
// });
// let info = await transporter.sendMail({
// from: 'vasilifibonachi@yandex.ru',
// to: "firesieht@mail.ru",
// subject: "Проверка почты",
// text: textMail,
// });
// console.log("Message sent: %s", info.messageId);
// }
export const Contacts : React.FC = () =>{ export const Contacts : React.FC = () =>{
let [name, setName] = useState("")
let [email, setEmail] = useState("")
let [message, setMessage] = useState("")
const validateEmail = (email:string) =>{
var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
return pattern.test(email)
}
const formSend = (e:any) =>{
e.preventDefault();
if (name != null && validateEmail(email) && message != null){
console.log({name, email, message})
axios.get("https://mail-sender-pyc.herokuapp.com/send-mail", {params:{name:name, message:message, email:email}})
alert("Данные отправлены, мы с вами свяжемся")
}
else{
alert("Форма введена некорректно")
}
}
return( return(
<div className={styles.contacts} id="contacts"> <div className={styles.contacts} id="contacts">
<h1>Связь с нами</h1> <h1>Связь с нами</h1>
<form className={styles.questForm}> <form className={styles.questForm} onSubmit={formSend}>
<div className={styles.formWrapper}> <div className={styles.formWrapper}>
<input type="text" className={styles.inp} placeholder="Имя"/> <input onChange={(e)=>setName(e.target.value)} type="text" className={styles.inp} placeholder="Имя"/>
<input type="email" className={styles.inp} placeholder="E-mail"/> <input onChange={(e)=>setEmail(e.target.value)} type="email" className={styles.inp} placeholder="E-mail"/>
</div> </div>
<textarea className={styles.inp} rows={10} cols={45} placeholder="Комментарий"></textarea> <textarea className={styles.inp} onChange={(e)=>setMessage(e.target.value)} rows={10} cols={45} placeholder="Комментарий"></textarea>
<input type="submit" value="Отправить" className={styles.btn} style={{width: "100%"}}/> <input type="submit" value="Отправить" className={styles.btn} style={{width: "100%"}}/>
</form> </form>
</div> </div>

View File

@ -1,6 +1,11 @@
/** @type {import('next').NextConfig} */ /** @type {import('next').NextConfig} */
const nextConfig = { const nextConfig = {
reactStrictMode: true, reactStrictMode: true,
}
nextConfig.node = {
fs: 'empty',
} }
module.exports = nextConfig module.exports = nextConfig

65
package-lock.json generated
View File

@ -375,12 +375,26 @@
"integrity": "sha1-9wtzXGvKGlycItmCw+Oef+ujva0=", "integrity": "sha1-9wtzXGvKGlycItmCw+Oef+ujva0=",
"dev": true "dev": true
}, },
"asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
},
"axe-core": { "axe-core": {
"version": "4.4.1", "version": "4.4.1",
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz", "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz",
"integrity": "sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw==", "integrity": "sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw==",
"dev": true "dev": true
}, },
"axios": {
"version": "0.27.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
"integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
"requires": {
"follow-redirects": "^1.14.9",
"form-data": "^4.0.0"
}
},
"axobject-query": { "axobject-query": {
"version": "2.2.0", "version": "2.2.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@ -458,6 +472,14 @@
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true "dev": true
}, },
"combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"requires": {
"delayed-stream": "~1.0.0"
}
},
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@ -517,6 +539,11 @@
"object-keys": "^1.0.12" "object-keys": "^1.0.12"
} }
}, },
"delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
},
"dir-glob": { "dir-glob": {
"version": "3.0.1", "version": "3.0.1",
"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@ -991,6 +1018,26 @@
"integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==", "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==",
"dev": true "dev": true
}, },
"follow-redirects": {
"version": "1.14.9",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
"integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w=="
},
"form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"requires": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
}
},
"fs": {
"version": "0.0.1-security",
"resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz",
"integrity": "sha1-invTcYa23d84E/I4WLV+yq9eQdQ="
},
"fs.realpath": { "fs.realpath": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@ -1408,6 +1455,19 @@
"picomatch": "^2.2.3" "picomatch": "^2.2.3"
} }
}, },
"mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
},
"mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"requires": {
"mime-db": "1.52.0"
}
},
"minimatch": { "minimatch": {
"version": "3.1.2", "version": "3.1.2",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@ -1463,6 +1523,11 @@
"use-subscription": "1.5.1" "use-subscription": "1.5.1"
} }
}, },
"nodemailer": {
"version": "6.7.3",
"resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.7.3.tgz",
"integrity": "sha512-KUdDsspqx89sD4UUyUKzdlUOper3hRkDVkrKh/89G+d9WKsU5ox51NWS4tB1XR5dPUdR4SP0E3molyEfOvSa3g=="
},
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",

View File

@ -9,7 +9,10 @@
"lint": "next lint" "lint": "next lint"
}, },
"dependencies": { "dependencies": {
"axios": "^0.27.2",
"fs": "0.0.1-security",
"next": "12.1.0", "next": "12.1.0",
"nodemailer": "^6.7.3",
"react": "17.0.2", "react": "17.0.2",
"react-dom": "17.0.2" "react-dom": "17.0.2"
}, },