From e1b6ba450ca151f7c1f1f196655690cb1f907173 Mon Sep 17 00:00:00 2001
From: Sosokker <sirinza29@gmail.com>
Date: Sun, 17 Nov 2024 17:48:04 +0700
Subject: [PATCH] feat: add email confirmation after signup

---
 src/app/verify/page.tsx            | 43 ++++++++++++++++++++++++++++++
 src/components/auth/action.ts      |  1 +
 src/components/auth/signupForm.tsx | 10 ++++---
 src/middleware.ts                  |  2 +-
 4 files changed, 52 insertions(+), 4 deletions(-)
 create mode 100644 src/app/verify/page.tsx

diff --git a/src/app/verify/page.tsx b/src/app/verify/page.tsx
new file mode 100644
index 0000000..7628437
--- /dev/null
+++ b/src/app/verify/page.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { useSearchParams } from "next/navigation";
+import { Mail } from "lucide-react";
+import Link from "next/link";
+
+const VerifyPage = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const email = searchParams.get("email");
+
+  useEffect(() => {
+    if (!email) {
+      router.push("/");
+    }
+  }, [email, router]);
+
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
+      <div className="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg max-w-md w-full">
+        <div className="flex justify-center mb-4">
+          <Mail className="text-blue-600 dark:text-blue-400 w-10 h-10" />
+        </div>
+        <h2 className="text-2xl font-semibold text-center text-blue-600 dark:text-blue-400 mb-4">Check Your Email</h2>
+        <p className="text-gray-600 dark:text-gray-300 text-center mb-4">
+          We have sent a verification link to <strong>{email}</strong>. Please check your inbox (and spam folder) to
+          confirm your email address.
+        </p>
+        <p className="text-sm text-center text-gray-500 dark:text-gray-400">
+          If you did not receive the email, click below to contact support.
+        </p>
+        <Link href="mailto:b2d.ventures.contact@gmail.com">
+          <Button className="w-full mt-4">Contact Support</Button>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default VerifyPage;
diff --git a/src/components/auth/action.ts b/src/components/auth/action.ts
index a4c2ff0..cc2ac2d 100644
--- a/src/components/auth/action.ts
+++ b/src/components/auth/action.ts
@@ -33,6 +33,7 @@ export async function signup(formData: FormData) {
     password: formData.get("password") as string,
     options: {
       captchaToken: formData.get("captchaToken") as string,
+      emailRedirectTo: "http://localhost:3000/auth",
     },
   };
 
diff --git a/src/components/auth/signupForm.tsx b/src/components/auth/signupForm.tsx
index afcd9cd..82d913b 100644
--- a/src/components/auth/signupForm.tsx
+++ b/src/components/auth/signupForm.tsx
@@ -16,6 +16,7 @@ export function SignupForm() {
   const [error, setError] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
   const [captchaToken, setCaptchaToken] = useState<string | undefined>(undefined);
+  const [isSendingForm, setIsSendingForm] = useState(false);
   const captcha = useRef<HCaptcha | null>(null);
 
   const handleSignup = async (event: React.FormEvent<HTMLFormElement>) => {
@@ -42,13 +43,16 @@ export function SignupForm() {
     }
 
     try {
+      setIsSendingForm(true);
       await signup(formData);
       captcha.current?.resetCaptcha();
       toast.success("Account created successfully!");
-      router.push("/");
+      router.push(`/verify?email=${formData.get("email") as string}`);
     } catch (error: any) {
       captcha.current?.resetCaptcha();
       setError(error.message);
+    } finally {
+      setIsSendingForm(false);
     }
   };
 
@@ -86,8 +90,8 @@ export function SignupForm() {
         }}
       />
       {error && <p className="text-red-600">{error}</p>}
-      <Button id="signup" type="submit">
-        Sign Up
+      <Button id="signup" type="submit" disabled={isSendingForm}>
+        {isSendingForm ? "Sending" : "Sign Up"}
       </Button>
     </form>
   );
diff --git a/src/middleware.ts b/src/middleware.ts
index eeadf78..7729b2b 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -14,6 +14,6 @@ export const config = {
      * - favicon.ico (favicon file)
      * Feel free to modify this pattern to include more paths.
      */
-    "/((?!_next/static|_next/image|$|favicon.ico|payment-success|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
+    "/((?!_next/static|_next/image|$|favicon.ico|payment-success|verify|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
   ],
 };