Registration: Show 'Check Email' message instead of auto-login

This commit is contained in:
fullsizemalt 2025-12-26 00:39:38 -08:00
parent ccc1164fa8
commit bceb7cb8c2

View file

@ -1,23 +1,20 @@
"use client" "use client"
import { useState } from "react" import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input" import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@/components/ui/card" import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@/components/ui/card"
import { Label } from "@/components/ui/label" import { Label } from "@/components/ui/label"
import { getApiUrl } from "@/lib/api-config" import { getApiUrl } from "@/lib/api-config"
import Link from "next/link" import Link from "next/link"
import { useAuth } from "@/contexts/auth-context"
export default function RegisterPage() { export default function RegisterPage() {
const [email, setEmail] = useState("") const [email, setEmail] = useState("")
const [username, setUsername] = useState("") const [username, setUsername] = useState("")
const [password, setPassword] = useState("") const [password, setPassword] = useState("")
const [error, setError] = useState("") const [error, setError] = useState("")
const router = useRouter()
const { login } = useAuth()
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const [success, setSuccess] = useState(false)
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault() e.preventDefault()
@ -25,7 +22,7 @@ export default function RegisterPage() {
setError("") setError("")
try { try {
// 1. Register // Register
const res = await fetch(`${getApiUrl()}/auth/register`, { const res = await fetch(`${getApiUrl()}/auth/register`, {
method: "POST", method: "POST",
headers: { headers: {
@ -39,24 +36,8 @@ export default function RegisterPage() {
throw new Error(data.detail || "Registration failed") throw new Error(data.detail || "Registration failed")
} }
// 2. Login automatically // Show success message instead of auto-login
const formData = new URLSearchParams() setSuccess(true)
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")
}
} catch (err: any) { } catch (err: any) {
setError(err.message) 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 ( return (
<div className="flex items-center justify-center min-h-[60vh]"> <div className="flex items-center justify-center min-h-[60vh]">
<Card className="w-full max-w-md"> <Card className="w-full max-w-md">