Fix forms

.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

app/api/contact/route.js

@@ -0,0 +1,36 @@
+import { NextRequest, NextResponse } from 'next/server';
+import nodemailer from 'nodemailer';
+
+export async function POST(request) {
+        require('dotenv').config()
+
+        let body = await request.formData();
+        let visitorname = body.get('visitorname');
+        let email = body.get('email');
+        let message = body.get('message');
+
+        const transporter = nodemailer.createTransport({
+          port: 465,
+          host: "smtp.gmail.com",
+          auth: {
+            user: process.env.MY_EMAIL,
+            pass: process.env.MY_PASSWORD,
+          },
+          secure: true,
+        })
+        const mailData = {
+          from: email,
+          to: '[email protected]',
+          subject: `Message From ${visitorname}`,
+          text: message + " | Sent from: " + email,
+          html: `<div>${message}</div><p>Sent from:
+          ${email}</p>`
+        }
+        transporter.sendMail(mailData, function (err, info) {
+          if(err)
+            console.log(err)
+          else
+            console.log(info)
+        })
+        return NextResponse.json({message: 'all good'})
+      }

app/api/newsletter/route.js

@@ -0,0 +1,34 @@
+import { NextRequest, NextResponse } from 'next/server';
+import nodemailer from 'nodemailer';
+
+export async function POST(request) {
+        require('dotenv').config()
+
+        let body = await request.formData();
+        let email = body.get('email');
+
+        const transporter = nodemailer.createTransport({
+          port: 465,
+          host: "smtp.gmail.com",
+          auth: {
+            user: process.env.MY_EMAIL,
+            pass: process.env.MY_PASSWORD,
+          },
+          secure: true,
+        })
+        const mailData = {
+          from: email,
+          to: '[email protected]',
+          subject: `Newsletter Request From ${email}`,
+          text: "Hello PyCon Uganda, kindly add me: " + email,
+          html: `<p>Hello PyCon Uganda, kindly add me: 
+          ${email}</p>`
+        }
+        transporter.sendMail(mailData, function (err, info) {
+          if(err)
+            console.log(err)
+          else
+            console.log(info)
+        })
+        return NextResponse.json({message: 'all good'})
+      }

app/api/sponsor/route.js

@@ -0,0 +1,36 @@
+import { NextRequest, NextResponse } from 'next/server';
+import nodemailer from 'nodemailer';
+
+export async function POST(request) {
+        require('dotenv').config()
+
+        let body = await request.formData();
+        let visitorname = body.get('visitorname');
+        let email = body.get('email');
+        let message = body.get('message');
+
+        const transporter = nodemailer.createTransport({
+          port: 465,
+          host: "smtp.gmail.com",
+          auth: {
+            user: process.env.MY_EMAIL,
+            pass: process.env.MY_PASSWORD,
+          },
+          secure: true,
+        })
+        const mailData = {
+          from: email,
+          to: '[email protected]',
+          subject: `Sponsorship Request From ${visitorname}`,
+          text: message + " | Sent from: " + email,
+          html: `<div>${message}</div><p>Sent from:
+          ${email}</p>`
+        }
+        transporter.sendMail(mailData, function (err, info) {
+          if(err)
+            console.log(err)
+          else
+            console.log(info)
+        })
+        return NextResponse.json({message: 'all good'})
+      }

app/contact/page.jsx

@@ -1,6 +1,42 @@
-import { PYCONUG_EMAIL } from "@/utils/constants";
+'use client';
+
+import { useState } from "react";
+import FormData from 'form-data';
 
 export default function ContactPage() {
+  const form = new FormData();
+  const [formData, setFormData] = useState(form);
+  const [successMessage, setSuccessMessage] = useState('');
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const handleFormSubmit = async (event) => {
+    event.preventDefault();
+
+    formData.append('visitorname', event.target.visitorname.value);
+    formData.append('email', event.target.email.value);
+    formData.append('message',event.target.message.value);
+
+    // Display formData in console (for debugging)
+    //console.log([...formData]);
+
+    try {
+      const response = await fetch('/api/contact', {
+        method: 'POST',
+        body: formData,
+      });
+      if (response.ok) {
+        setSuccessMessage('Your message has been received, we shall reach out soon!');
+        setErrorMessage('');
+      } else {
+        setErrorMessage('Something went wrong, please try again');
+        setSuccessMessage('');
+      }
+    } catch (err) {
+      setErrorMessage('An error occurred while submitting the form');
+      setSuccessMessage('');
+    }
+  };
+
   return (
     <>
       <section className="flex bg-cyan-900 text-zinc-300">
@@ -11,7 +47,7 @@ export default function ContactPage() {
             </h1>
             <p className="mt-4 sm:text-xl text-justify mx-5">
               Interested in sponsoring or have a question? We would love to hear
-              from you.
+              from you
             </p>
           </div>
         </div>
@@ -20,21 +56,20 @@ export default function ContactPage() {
         <div className="py-8 lg:py-16 px-4 mx-auto max-w-screen-md">
 
           <form
-            action={`mailto:${PYCONUG_EMAIL}`}
-            method="post"
-            encType="multipart/form-data"
+            onSubmit={handleFormSubmit}
             className="space-y-8"
           >
             <div>
               <label
-                htmlFor="name"
+                htmlFor="visitorname"
                 className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
               >
-                Your Name
+                Name
               </label>
               <input
                 type="text"
-                id="name"
+                id="visitorname"
+                name="visitorname"
                 className="block p-3 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
                 required
               />
@@ -49,6 +84,7 @@ export default function ContactPage() {
               <input
                 type="email"
                 id="email"
+                name="name"
                 className="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
                 required
               />
@@ -63,13 +99,14 @@ export default function ContactPage() {
               <textarea
                 id="message"
                 rows="6"
+                name="message"
                 className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
-                placeholder="Make your interest known..."
+                placeholder="Send us a message..."
               ></textarea>
             </div>
             <button
               type="submit"
-              className="py-3 px-5 text-sm font-medium text-center text-white rounded-lg bg-primary-700 sm:w-fit hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
+              className="hover:bg-pyconug-lightBlue border-2 hover:text-white border-pyconug-lightBlue py-2 px-10 m-2  rounded-3xl"
             >
               Send message
             </button>

app/sponsors/page.jsx

@@ -1,6 +1,41 @@
-import { PYCONUG_EMAIL } from "@/utils/constants";
+'use client';
+
+import { useState } from "react";
+import FormData from 'form-data';
 
 export default function SponsorsPage() {
+  const form = new FormData();
+  const [formData, setFormData] = useState(form);
+  const [successMessage, setSuccessMessage] = useState('');
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const handleFormSubmit = async (event) => {
+    event.preventDefault();
+
+    formData.append('visitorname', event.target.visitorname.value);
+    formData.append('email', event.target.email.value);
+    formData.append('message',event.target.message.value);
+
+    // Display formData in console (for debugging)
+    //console.log([...formData]);
+
+    try {
+      const response = await fetch('/api/sponsor', {
+        method: 'POST',
+        body: formData,
+      });
+      if (response.ok) {
+        setSuccessMessage('Thank you for showing interest to Sponsor PyCon Uganda 2023!');
+        setErrorMessage('');
+      } else {
+        setErrorMessage('Something went wrong, please try again');
+        setSuccessMessage('');
+      }
+    } catch (err) {
+      setErrorMessage('An error occurred while submitting the form');
+      setSuccessMessage('');
+    }
+  };
   return (
     <>
       <section className="flex bg-cyan-900 text-zinc-300">
@@ -507,22 +542,25 @@ export default function SponsorsPage() {
           <p className="mb-8 lg:mb-16 font-light text-center text-gray-500 dark:text-gray-400 sm:text-xl">
             Interested in sponsoring? We would love to hear from you.
           </p>
+
+          {successMessage && <p style={{ color: 'green' }}>{successMessage}</p>}
+          {errorMessage && <p style={{ color: 'red' }}>{errorMessage}</p>}
+
           <form
-            action={`mailto:${PYCONUG_EMAIL}`}
-            method="post"
-            encType="multipart/form-data"
+            onSubmit={handleFormSubmit}
             className="space-y-8"
           >
             <div>
               <label
-                htmlFor="name"
+                htmlFor="visitorname"
                 className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
               >
-                Your Name
+                Name or Company or Organization
               </label>
               <input
                 type="text"
-                id="name"
+                id="visitorname"
+                name="visitorname"
                 className="block p-3 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
                 required
               />
@@ -537,6 +575,7 @@ export default function SponsorsPage() {
               <input
                 type="email"
                 id="email"
+                name="name"
                 className="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
                 required
               />
@@ -551,13 +590,14 @@ export default function SponsorsPage() {
               <textarea
                 id="message"
                 rows="6"
+                name="message"
                 className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                 placeholder="Make your interest known..."
               ></textarea>
             </div>
             <button
               type="submit"
-              className="py-3 px-5 text-sm font-medium text-center text-white rounded-lg bg-primary-700 sm:w-fit hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
+              className="hover:bg-pyconug-lightBlue border-2 hover:text-white border-pyconug-lightBlue py-2 px-10 m-2  rounded-3xl"
             >
               Send message
             </button>