add mail sender

components/contacts/index.tsx

@@ -1,18 +1,64 @@
 import styles from './Contacts.module.css'
-import React from "react"
+import React, { useState } from "react"
 import Link from 'next/link';
 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 = () =>{
+    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(
         <div className={styles.contacts} id="contacts">
         <h1>Связь с нами</h1>
-        <form className={styles.questForm}>
+        <form className={styles.questForm} onSubmit={formSend}>
             <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>
-            <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%"}}/>
         </form>
     </div>

next.config.js

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

package-lock.json

@@ -375,12 +375,26 @@
       "integrity": "sha1-9wtzXGvKGlycItmCw+Oef+ujva0=",
       "dev": true
     },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
+    },
     "axe-core": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz",
       "integrity": "sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw==",
       "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": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -458,6 +472,14 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "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": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -517,6 +539,11 @@
         "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": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -991,6 +1018,26 @@
       "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==",
       "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": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -1408,6 +1455,19 @@
         "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": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -1463,6 +1523,11 @@
         "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": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",

package.json

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