nodemailer

.gitignore

@@ -22,4 +22,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# /src/utils/auth_config.json
+/src/utils/auth_config.json
+/src/utils/secret.js

package-lock.json

@@ -14215,4 +14215,4 @@
       }
     }
   }
-}
+}

package.json

@@ -33,4 +33,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

src/components/ContactForm.jsx

@@ -1,18 +1,13 @@
 import React, { useState } from "react";
-// import { useInput } from "../utils/inputHook";
+// import { notificationMail, confirmationMail } from "../utils/mail";
 
-export const ContactForm = ({ onSubmit }) => {
+export const ContactForm = ({ setIsSubmitted }) => {
   const [firstName, setFirstName] = useState("");
   const [lastName, setLastName] = useState("");
   const [email, setEmail] = useState("");
   const [phone, setPhone] = useState("");
   const [message, setMessage] = useState("");
 
-  const handleSubmit = ev => {
-    ev.preventDefault();
-    onSubmit(true);
-  };
-
   const changeFirstName = ev => {
     const { value } = ev.target;
     setFirstName(value);
@@ -34,6 +29,14 @@ export const ContactForm = ({ onSubmit }) => {
     setMessage(value);
   };
 
+  const handleSubmit = ev => {
+    ev.preventDefault();
+    // confirmationMail(email);
+    // const body = `Sender: ${firstName} ${lastName}\nPhone: ${phone}\nMessage: ${message}`;
+    // notificationMail(email, `New message from ${firstName} ${lastName}`, body);
+    setIsSubmitted(true);
+  };
+
   return (
     <form onSubmit={handleSubmit}>
       <div className="row">
@@ -61,7 +64,13 @@ export const ContactForm = ({ onSubmit }) => {
             />
           </div>
           <div className="col s12 m6">
-            <ContactFormInput id="Phone" value={phone} onChange={changePhone} />
+            <ContactFormInput
+              id="Phone"
+              value={phone}
+              type="tel"
+              // pattern="[0-9]"
+              onChange={changePhone}
+            />
           </div>
           <div className="col s12">
             <ContactFormTextArea
@@ -87,6 +96,7 @@ const ContactFormInput = ({ id, type = "text", value, onChange }) => {
         id={id}
         value={value}
         onChange={onChange}
+        required
       />
       <label htmlFor={id}>{id}</label>
     </div>
@@ -103,6 +113,7 @@ const ContactFormTextArea = ({ id, value, onChange }) => {
         name={id}
         value={value}
         onChange={onChange}
+        required
       />
     </div>
   );

src/pages/Contact.jsx

@@ -17,7 +17,7 @@ export const ContactPage = () => {
   ) : (
     <div className="container">
       <h2 className="logo">Contact Us</h2>
-      <ContactForm onSubmit={setIsSubmitted} />
+      <ContactForm setIsSubmitted={setIsSubmitted} />
     </div>
   );
 };

src/utils/mail.js

@@ -0,0 +1,43 @@
+// This must be set on the server using express
+import { createTransport } from "nodemailer";
+import { mailPassword } from "./secret";
+
+const myMail = "ruidy.nemausat@gmail.com";
+const myPass = mailPassword;
+
+const handleMail = (mailTo, subject, text) => {
+  let transporter = createTransport({
+    service: "gmail",
+    auth: {
+      user: myMail,
+      pass: myPass
+    }
+  });
+
+  let mailOptions = {
+    from: myMail,
+    to: mailTo,
+    subject: subject,
+    text: text
+  };
+
+  transporter.sendMail(mailOptions, function(error, info) {
+    if (error) {
+      console.log(error);
+    } else {
+      console.log("Email sent: " + info.response);
+    }
+  });
+};
+
+export const confirmationMail = (
+  mailTo,
+  subject = "Your message has been sent",
+  text = "Thanks for your message. We'll reply you soon."
+) => {
+  handleMail(mailTo, subject, text);
+};
+
+export const notificationMail = (mailTo = myMail, subject, text) => {
+  handleMail(mailTo, subject, text);
+};