48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { useSearchParams } from "next/navigation";
|
|
import { useFormState, useFormStatus } from "react-dom";
|
|
import { Alert, AlertDescription } from "@/components/ui/alert";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { login, type LoginState } from "./actions";
|
|
|
|
const initialState: LoginState = { ok: false };
|
|
|
|
function SubmitButton() {
|
|
const { pending } = useFormStatus();
|
|
|
|
return (
|
|
<Button type="submit" className="w-full" disabled={pending}>
|
|
{pending ? "Entrando..." : "Entrar"}
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
export function LoginForm() {
|
|
const searchParams = useSearchParams();
|
|
const [state, action] = useFormState(login, initialState);
|
|
const callbackUrl = searchParams.get("callbackUrl") ?? "";
|
|
|
|
return (
|
|
<form action={action} className="space-y-4">
|
|
<input type="hidden" name="callbackUrl" value={callbackUrl} />
|
|
{state.message ? (
|
|
<Alert variant="destructive">
|
|
<AlertDescription>{state.message}</AlertDescription>
|
|
</Alert>
|
|
) : null}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email">E-mail</Label>
|
|
<Input id="email" name="email" type="email" autoComplete="email" required />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="senha">Senha</Label>
|
|
<Input id="senha" name="senha" type="password" autoComplete="current-password" required />
|
|
</div>
|
|
<SubmitButton />
|
|
</form>
|
|
);
|
|
}
|