Initial SeConectai briefing system

app/(publico)/recuperar-senha/recuperar-senha-form.tsx

@@ -0,0 +1,39 @@
+"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>
+  );
+}