From bceb7cb8c2b31c9da7b0edf1466b2e39a00d1142 Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Fri, 26 Dec 2025 00:39:38 -0800
Subject: [PATCH] Registration: Show 'Check Email' message instead of
 auto-login

---
 frontend/app/register/page.tsx | 54 +++++++++++++++++++---------------
 1 file changed, 31 insertions(+), 23 deletions(-)

diff --git a/frontend/app/register/page.tsx b/frontend/app/register/page.tsx
index d90b504..593494e 100644
--- a/frontend/app/register/page.tsx
+++ b/frontend/app/register/page.tsx
@@ -1,23 +1,20 @@
 "use client"
 
 import { useState } from "react"
-import { useRouter } from "next/navigation"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@/components/ui/card"
 import { Label } from "@/components/ui/label"
 import { getApiUrl } from "@/lib/api-config"
 import Link from "next/link"
-import { useAuth } from "@/contexts/auth-context"
 
 export default function RegisterPage() {
     const [email, setEmail] = useState("")
     const [username, setUsername] = useState("")
     const [password, setPassword] = useState("")
     const [error, setError] = useState("")
-    const router = useRouter()
-    const { login } = useAuth()
     const [loading, setLoading] = useState(false)
+    const [success, setSuccess] = useState(false)
 
     const handleSubmit = async (e: React.FormEvent) => {
         e.preventDefault()
@@ -25,7 +22,7 @@ export default function RegisterPage() {
         setError("")
 
         try {
-            // 1. Register
+            // Register
             const res = await fetch(`${getApiUrl()}/auth/register`, {
                 method: "POST",
                 headers: {
@@ -39,24 +36,8 @@ export default function RegisterPage() {
                 throw new Error(data.detail || "Registration failed")
             }
 
-            // 2. Login automatically
-            const formData = new URLSearchParams()
-            formData.append('username', email)
-            formData.append('password', password)
-
-            const loginRes = await fetch(`${getApiUrl()}/auth/token`, {
-                method: "POST",
-                headers: { "Content-Type": "application/x-www-form-urlencoded" },
-                body: formData,
-            })
-
-            if (loginRes.ok) {
-                const loginData = await loginRes.json()
-                await login(loginData.access_token)
-                router.push("/profile")
-            } else {
-                router.push("/login")
-            }
+            // Show success message instead of auto-login
+            setSuccess(true)
 
         } catch (err: any) {
             setError(err.message)
@@ -65,6 +46,33 @@ export default function RegisterPage() {
         }
     }
 
+    if (success) {
+        return (
+            <div className="flex items-center justify-center min-h-[60vh]">
+                <Card className="w-full max-w-md text-center">
+                    <CardHeader>
+                        <CardTitle className="text-green-600">Check Your Email</CardTitle>
+                        <CardDescription className="text-base">
+                            We&apos;ve sent a verification link to <strong>{email}</strong>
+                        </CardDescription>
+                    </CardHeader>
+                    <CardContent className="space-y-4">
+                        <p className="text-sm text-muted-foreground">
+                            Click the link in the email to verify your account and complete registration.
+                        </p>
+                        <p className="text-xs text-muted-foreground">
+                            Didn&apos;t receive it? Check your spam folder or{" "}
+                            <Link href="/login" className="text-primary hover:underline">
+                                try logging in
+                            </Link>
+                            {" "}to resend.
+                        </p>
+                    </CardContent>
+                </Card>
+            </div>
+        )
+    }
+
     return (
         <div className="flex items-center justify-center min-h-[60vh]">
             <Card className="w-full max-w-md">