Feat: successfully send otp and verified otp

src/app/api/verify-mail/route.ts

@@ -0,0 +1,47 @@
+import { NextRequest, NextResponse } from "next/server";
+import sendEmail from "@/utils/sendMail";
+import prisma from "@/server/db";
+
+export async function POST(req: NextRequest) {
+  const body = await req.json();
+  console.log(body);
+  const { identifier, otp } = body;
+
+  const request = await prisma.verificationRequest.findFirst({
+    where: {
+      identifier,
+      otp,
+      expires: {
+        gte: new Date(),
+      },
+    },
+    orderBy: {
+      created_at: "desc",
+    },
+  });
+
+  if (!request) {
+    return NextResponse.json(
+      { message: "Invalid or expired OTP", status: 400 },
+      { status: 200 }
+    );
+  }
+
+  await prisma.verificationRequest.deleteMany({
+    where: {
+      identifier,
+    },
+  });
+
+  return NextResponse.json(
+    {
+      message: "OTP verified successfully back!",
+      status: 200,
+    },
+    { status: 200 }
+  );
+}
+
+export async function GET() {
+  return NextResponse.json({ message: "Hello from the Send mail!" });
+}

src/app/page.tsx

@@ -1,25 +1,64 @@
 "use client";
 
-import { getServerSideSession } from "@/lib/get-server-session";
-import { sendEmail } from "@/utils/sendMail";
+import { useState } from "react";
 import axios from "axios";
+
 export default function Home() {
-  const session = "";
+  const [otp, setOtp] = useState("");
 
   const sendVerificationEmail = async () => {
-    await axios.post("/api/send-mail", {
-      email: "[email protected]",
-      name: "Joywin",
-      token: "1234",
-    });
+    try {
+      await axios.post("/api/send-mail", {
+        email: "[email protected]",
+        name: "Joywin",
+      });
+      alert("Verification email sent!");
+    } catch (error) {
+      console.error("Error sending email:", error);
+    }
   };
 
-//   if (!session) {
-//     return (
-//       <div>
-//         <button>send verification mail</button>
-//       </div>
-//     );
-//   }
-  return <div>Hello  <button onClick={sendVerificationEmail}>send verification mail</button></div>;
+  return (
+    <div className="flex flex-col items-center justify-center h-screen bg-gray-100 p-4">
+      <h1 className="text-2xl font-bold text-gray-800 mb-6">
+        Welcome to the OTP Verification Page
+      </h1>
+      <button
+        onClick={sendVerificationEmail}
+        className="bg-blue-500 text-white py-2 px-4 rounded-lg shadow-lg hover:bg-blue-600 transition-colors"
+      >
+        Send Verification Mail
+      </button>
+      <div className="flex flex-col items-center mt-6">
+        <label htmlFor="otp" className="text-lg mb-2 text-gray-700">
+          Enter OTP:
+        </label>
+        <input
+          type="text"
+          id="otp"
+          value={otp}
+          onChange={(e) => setOtp(e.target.value)}
+          className="border border-gray-300 rounded-lg p-2 text-gray-700 focus:outline-none focus:border-blue-500"
+        />
+        <button
+          onClick={async () => {
+            try {
+              const response = await axios.post("/api/verify-mail", {
+                identifier: "[email protected]",
+                otp,
+              });
+              console.log("1",response.data);
+              if (response.data.status === 200) alert(response.data.message);
+              else if (response.data.status === 400) alert(response.data.message);
+            } catch (error) {
+              console.error("Error verifying OTP:", error);
+            }
+          }}
+          className="bg-blue-500 text-white py-2 px-4 rounded-lg shadow-lg hover:bg-blue-600 transition-colors mt-4"
+        >
+          Verify OTP
+        </button>
+      </div>
+    </div>
+  );
 }