import { Form, useActionData, useTransition } from "@remix-run/react"; import type { ForgotPasswordActionData } from "../actions/forgot-password"; import LabeledTextField from "~/features/core/components/labeled-text-field"; import Button from "~/features/core/components/button"; export default function ForgotPasswordPage() { const actionData = useActionData<ForgotPasswordActionData>(); const transition = useTransition(); const isSubmitting = transition.state === "submitting"; return ( <section> <header> <h2 className="mt-6 text-center text-3xl leading-9 font-extrabold text-gray-900"> Forgot your password? </h2> </header> <Form method="post" className="mt-8 mx-auto w-full max-w-sm"> {actionData?.submitted ? ( <p className="text-center"> If your email is in our system, you will receive instructions to reset your password shortly. </p> ) : ( <> <LabeledTextField name="email" type="email" label="Email" disabled={isSubmitting} error={actionData?.errors?.email} tabIndex={1} /> <Button type="submit" disabled={transition.state === "submitting"} tabIndex={2} className="w-full flex justify-center py-2 px-4 text-base font-medium" > Send reset password link </Button> </> )} </Form> </section> ); }