72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { useAuthActions } from "@convex-dev/auth/react";
|
|
import { useRouter } from "next/navigation";
|
|
import { useState } from "react";
|
|
|
|
export default function SignIn() {
|
|
const { signIn } = useAuthActions();
|
|
const [flow, setFlow] = useState<"signIn" | "signUp">("signIn");
|
|
const [error, setError] = useState<string | null>(null);
|
|
const router = useRouter();
|
|
return (
|
|
<div className="flex flex-col gap-8 w-96 mx-auto h-screen justify-center items-center">
|
|
<p>Log in to see the numbers</p>
|
|
<form
|
|
className="flex flex-col gap-2"
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
const formData = new FormData(e.target as HTMLFormElement);
|
|
formData.set("flow", flow);
|
|
void signIn("password", formData)
|
|
.catch((error) => {
|
|
setError(error.message);
|
|
})
|
|
.then(() => {
|
|
router.push("/");
|
|
});
|
|
}}
|
|
>
|
|
<input
|
|
className="bg-background text-foreground rounded-md p-2 border-2 border-slate-200 dark:border-slate-800"
|
|
type="email"
|
|
name="email"
|
|
placeholder="Email"
|
|
/>
|
|
<input
|
|
className="bg-background text-foreground rounded-md p-2 border-2 border-slate-200 dark:border-slate-800"
|
|
type="password"
|
|
name="password"
|
|
placeholder="Password"
|
|
/>
|
|
<button
|
|
className="bg-foreground text-background rounded-md"
|
|
type="submit"
|
|
>
|
|
{flow === "signIn" ? "Sign in" : "Sign up"}
|
|
</button>
|
|
<div className="flex flex-row gap-2">
|
|
<span>
|
|
{flow === "signIn"
|
|
? "Don't have an account?"
|
|
: "Already have an account?"}
|
|
</span>
|
|
<span
|
|
className="text-foreground underline hover:no-underline cursor-pointer"
|
|
onClick={() => setFlow(flow === "signIn" ? "signUp" : "signIn")}
|
|
>
|
|
{flow === "signIn" ? "Sign up instead" : "Sign in instead"}
|
|
</span>
|
|
</div>
|
|
{error && (
|
|
<div className="bg-red-500/20 border-2 border-red-500/50 rounded-md p-2">
|
|
<p className="text-foreground font-mono text-xs">
|
|
Error signing in: {error}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|