45 lines
1.5 KiB
TypeScript
45 lines
1.5 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 { redefinirSenha, type RedefinirSenhaState } from "./actions";
|
|
|
|
const initialState: RedefinirSenhaState = { ok: false };
|
|
|
|
function SubmitButton() {
|
|
const { pending } = useFormStatus();
|
|
|
|
return (
|
|
<Button type="submit" className="w-full" disabled={pending}>
|
|
{pending ? "Salvando..." : "Redefinir senha"}
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
export function RedefinirSenhaForm({ token }: { token: string }) {
|
|
const [state, action] = useFormState(redefinirSenha, initialState);
|
|
|
|
return (
|
|
<form action={action} className="space-y-4">
|
|
<input type="hidden" name="token" value={token} />
|
|
{state.message ? (
|
|
<Alert variant="destructive">
|
|
<AlertDescription>{state.message}</AlertDescription>
|
|
</Alert>
|
|
) : null}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="senha">Nova senha</Label>
|
|
<Input id="senha" name="senha" type="password" autoComplete="new-password" required />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="confirmarSenha">Confirmar nova senha</Label>
|
|
<Input id="confirmarSenha" name="confirmarSenha" type="password" autoComplete="new-password" required />
|
|
</div>
|
|
<SubmitButton />
|
|
</form>
|
|
);
|
|
}
|