Squashed commit of the following:

commit 549147a
Author: Deveesh Shetty <[email protected]>
Date:   Fri Mar 24 13:21:53 2023 +0530

    It works in production 🥳🥳🥳🥳🥳

commit ea28598
Author: Deveesh Shetty <[email protected]>
Date:   Fri Mar 24 13:09:50 2023 +0530

    IDK whats happening.......i am losing my mind now

commit 8b737ac
Author: Deveesh Shetty <[email protected]>
Date:   Fri Mar 24 12:45:10 2023 +0530

    Revert "Attempt 6....tired ://///"

    This reverts commit 1956bdb.

commit e1bc202
Author: Deveesh Shetty <[email protected]>
Date:   Fri Mar 24 12:31:46 2023 +0530

    Using nodemailer again with app password...

    Working in development

commit 1956bdb
Author: Deveesh Shetty <[email protected]>
Date:   Fri Mar 24 11:07:56 2023 +0530

    Attempt 6....tired ://///

commit 3e96b60
Author: Deveesh Shetty <[email protected]>
Date:   Fri Mar 24 11:00:15 2023 +0530

    Checking in production attempt 5

commit dbaafe7
Author: Deveesh Shetty <[email protected]>
Date:   Fri Mar 24 10:46:15 2023 +0530

    Attempt 4 :`)

commit 4798891
Author: Deveesh Shetty <[email protected]>
Date:   Fri Mar 24 10:35:15 2023 +0530

    Attempt to make it work in production

commit b2c13a6
Author: Deveesh Shetty <[email protected]>
Date:   Fri Mar 24 10:21:43 2023 +0530

    Works without nodemailer!!! in development..

    Time to check in production

commit efbc7d4
Author: Deveesh Shetty <[email protected]>
Date:   Fri Mar 24 09:03:02 2023 +0530

    Another attempt please work

commit 03c5cdd
Author: Deveesh Shetty <[email protected]>
Date:   Fri Mar 24 08:56:00 2023 +0530

    Attempt to fix the mail in production

commit 68cdbc5
Author: Deveesh Shetty <[email protected]>
Date:   Fri Mar 24 08:43:38 2023 +0530

    Testing for mail to work in production

commit 29d031e
Author: Deveesh Shetty <[email protected]>
Date:   Fri Mar 24 08:33:13 2023 +0530

    Minor UX changes

.env.example

@@ -1,7 +1,4 @@
-EMAIL = "<Email ID registered with google cloud console>"
+EMAIL = "email id of sender"
 
-CLIENT_ID = "your_client_ID"
-CLIENT_SECRET = "your_client_secret"
-
-REFRESH_TOKEN = "refresh_token"
-ACCESS_TOKEN = "access_token"
+RECEIPIENT_EMAIL = "email id of receiver"
+PASSWORD = "app password generated by EMAIL"

package.json

@@ -17,6 +17,7 @@
     "eslint": "8.35.0",
     "eslint-config-next": "13.2.1",
     "framer-motion": "^10.2.4",
+    "google-auth-library": "^8.7.0",
     "googleapis": "^113.0.0",
     "next": "13.2.1",
     "nextjs-progressbar": "^0.0.16",
@@ -26,7 +27,8 @@
     "react-parallax-tilt": "^1.7.117",
     "react-toastify": "^9.1.2",
     "typescript": "4.9.5",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "vercel": "^28.18.1"
   },
   "devDependencies": {
     "@iconify/react": "^4.1.0",

src/components/Contact/ContactForm.tsx

@@ -1,6 +1,6 @@
 import { FormEvent, useState, ChangeEvent } from "react"
 import axios from "axios"
-import { ToastContainer, toast } from "react-toastify"
+import { toast } from "react-toastify"
 import Loading from "@/components/UIComponents/Loading/Loading"
 import styles from "./ContactForm.module.css"
 
@@ -15,10 +15,29 @@ function ContactForm() {
 
   async function handleFormSubmit(e: FormEvent) {
     e.preventDefault()
-    setLoading(true)
-    if (!details.email || !details.name) return
+    if (!details.email || !details.name) {
+      toast.error("Fill the email and name fields", {
+        position: "bottom-right",
+        autoClose: 3000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "light",
+      })
+      return
+    }
+
     try {
-      const response = await axios.post("/api/mail", details)
+      setLoading(true)
+      const response = await axios("/api/mail", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        data: details,
+      })
 
       if (response.status === 200) {
         console.log(response.data)
@@ -66,7 +85,6 @@ function ContactForm() {
               onChange={onChange}
               placeholder="[email protected]"
               value={details.email}
-              required
             />
           </div>
           <div>
@@ -78,7 +96,6 @@ function ContactForm() {
               onChange={onChange}
               placeholder="Developer X"
               value={details.name}
-              required
             />
           </div>
           <div>
@@ -93,7 +110,7 @@ function ContactForm() {
             ></textarea>
           </div>
           <div>
-            <button type="submit">
+            <button type="submit" disabled={loading}>
               <div>{loading ? <Loading /> : "Send"}</div>
             </button>
           </div>

src/pages/api/mail.ts

@@ -1,7 +1,6 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 import type { NextApiRequest, NextApiResponse } from "next"
 import nodemailer from "nodemailer"
-import { google } from "googleapis"
 
 type Data = {
   success: boolean
@@ -10,33 +9,28 @@ type Data = {
   error?: any
 }
 
-const { CLIENT_ID, CLIENT_SECRET, REFRESH_TOKEN, REDIRECT_URI } = process.env
-const { EMAIL, RECEIPIENT_EMAIL } = process.env
-
-const OAuth2 = google.auth.OAuth2
-const oAuth2Client = new OAuth2(CLIENT_ID, CLIENT_SECRET, REDIRECT_URI)
-
-oAuth2Client.setCredentials({
-  refresh_token: REFRESH_TOKEN,
-})
+const { EMAIL, RECEIPIENT_EMAIL, PASSWORD } = process.env
 
 const transporter = nodemailer.createTransport({
   service: "gmail",
   auth: {
-    type: "OAuth2",
     user: EMAIL,
-    clientId: CLIENT_ID,
-    clientSecret: CLIENT_SECRET,
-    refreshToken: REFRESH_TOKEN,
+    pass: PASSWORD,
   },
-  secure: true,
 })
 
 export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse<Data>
 ) {
   const { email, name, desc } = req.body
+
+  if (req.method !== "POST") {
+    return res
+      .status(404)
+      .json({ success: false, message: "The method is not defined" })
+  }
+
   if (!email || !name) {
     return res
       .status(400)
@@ -53,18 +47,22 @@ export default async function handler(
   }
 
   try {
-    transporter.sendMail(mailData, (error, info) => {
-      if (error) {
-        console.log(error)
-        return res.status(500).json({ success: false, error: error })
-      } else {
-        console.log("Mail has been sent successfully")
-        return res.status(200).json({
-          success: true,
-          name,
-          message: `${name} your mail has been sent, I will reach back to you soon`,
-        })
-      }
+    await new Promise((resolve, reject) => {
+      transporter.sendMail(mailData, (error, info) => {
+        if (error) {
+          console.log(error)
+          reject(error)
+          return res.status(500).json({ success: false, error: error })
+        } else {
+          console.log("Mail has been sent successfully")
+          resolve(true)
+          return res.status(200).json({
+            success: true,
+            name,
+            message: `${name} your mail has been sent.   Thank You :)`,
+          })
+        }
+      })
     })
   } catch (error) {
     console.log(error)