hero: cleanup and fix button to redirect
This commit is contained in:
parent
07e068b658
commit
4896dce268
|
|
@ -2,104 +2,15 @@
|
|||
|
||||
import { motion } from "motion/react";
|
||||
import { Button } from "../ui/button";
|
||||
import { Input } from "../ui/input";
|
||||
import { SponsorButton } from "../ui/sponsor-button";
|
||||
import { VercelIcon } from "../icons";
|
||||
import { ArrowRight } from "lucide-react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
import Image from "next/image";
|
||||
import { Handlebars } from "./handlebars";
|
||||
import Link from "next/link";
|
||||
|
||||
export function Hero() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [csrfToken, setCsrfToken] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
fetch("/api/waitlist/token", {
|
||||
credentials: "include",
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
if (isMounted && data.token) {
|
||||
setCsrfToken(data.token);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("Failed to fetch CSRF token:", err);
|
||||
if (isMounted) {
|
||||
toast.error("Security initialization failed", {
|
||||
description: "Please refresh the page to continue.",
|
||||
});
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!email.trim()) {
|
||||
toast.error("Email required", {
|
||||
description: "Please enter your email address.",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!csrfToken) {
|
||||
toast.error("Security error", {
|
||||
description: "Please refresh the page and try again.",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/waitlist", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-CSRF-Token": csrfToken,
|
||||
},
|
||||
credentials: "include",
|
||||
body: JSON.stringify({ email: email.trim() }),
|
||||
});
|
||||
|
||||
const data = (await response.json()) as { error: string };
|
||||
|
||||
if (response.ok) {
|
||||
toast.success("Welcome to the waitlist! 🎉", {
|
||||
description: "You'll be notified when we launch.",
|
||||
});
|
||||
setEmail("");
|
||||
|
||||
fetch("/api/waitlist/token", { credentials: "include" })
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
if (data.token) setCsrfToken(data.token);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("Failed to refresh CSRF token:", err);
|
||||
});
|
||||
} else {
|
||||
toast.error("Oops!", {
|
||||
description:
|
||||
(data as { error: string }).error ||
|
||||
"Something went wrong. Please try again.",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error("Network error", {
|
||||
description: "Please check your connection and try again.",
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-[calc(100vh-4.5rem)] supports-[height:100dvh]:min-h-[calc(100dvh-4.5rem)] flex flex-col justify-between items-center text-center px-4">
|
||||
<Image
|
||||
|
|
@ -153,15 +64,16 @@ export function Hero() {
|
|||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 0.6, duration: 0.8 }}
|
||||
>
|
||||
<Button
|
||||
type="submit"
|
||||
size="lg"
|
||||
className="px-6 h-11 text-base bg-foreground"
|
||||
disabled={isSubmitting || !csrfToken}
|
||||
>
|
||||
Try early beta
|
||||
<ArrowRight className="relative z-10 ml-0.5 h-4 w-4 inline-block" />
|
||||
</Button>
|
||||
<Link href="/projects">
|
||||
<Button
|
||||
type="submit"
|
||||
size="lg"
|
||||
className="px-6 h-11 text-base bg-foreground"
|
||||
>
|
||||
Try early beta
|
||||
<ArrowRight className="relative z-10 ml-0.5 h-4 w-4 inline-block" />
|
||||
</Button>
|
||||
</Link>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue