"use client";
import { Suspense, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import Link from "next/link";
import { createClient } from "@/lib/supabase/client";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { MessageSquare, UsersRound } from "lucide-react";
// `useSearchParams` opts the component out of static prerendering
// unless it sits under a Suspense boundary. We split the form into
// a child component so the outer page can prerender the chrome
// (background, card frame) while the form hydrates with the query
// string on the client.
export default function LoginPage() {
return (
);
}
function LoginPageInner() {
const searchParams = useSearchParams();
// Forwarded from `/join/` when the visitor already has an
// account. After a successful sign-in we send them to the join
// page to accept rather than to /dashboard.
const inviteToken = searchParams.get("invite");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState(null);
const [loading, setLoading] = useState(false);
const router = useRouter();
const supabase = createClient();
const handleLogin = async (e: React.FormEvent) => {
e.preventDefault();
setError(null);
setLoading(true);
const { error } = await supabase.auth.signInWithPassword({
email,
password,
});
if (error) {
setError(error.message);
setLoading(false);
return;
}
if (inviteToken) {
router.push(`/join/${encodeURIComponent(inviteToken)}`);
} else {
router.push("/dashboard");
}
};
return (
{inviteToken ? (
) : (
)}
{inviteToken ? "Sign in to accept" : "Welcome back"}
{inviteToken
? "Sign in and we'll take you to the invitation."
: "Sign in to your account"}