40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
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 { solicitarRecuperacao, type RecuperarSenhaState } from "./actions";
|
|
|
|
const initialState: RecuperarSenhaState = { ok: false };
|
|
|
|
function SubmitButton() {
|
|
const { pending } = useFormStatus();
|
|
|
|
return (
|
|
<Button type="submit" className="w-full" disabled={pending}>
|
|
{pending ? "Enviando..." : "Enviar instrucoes"}
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
export function RecuperarSenhaForm() {
|
|
const [state, action] = useFormState(solicitarRecuperacao, initialState);
|
|
|
|
return (
|
|
<form action={action} className="space-y-4">
|
|
{state.message ? (
|
|
<Alert>
|
|
<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>
|
|
<SubmitButton />
|
|
</form>
|
|
);
|
|
}
|