Forgot password

"use client";
import { useState, type SyntheticEvent } from "react";
import { LuArrowLeft, LuMail, LuMailCheck } from "react-icons/lu";
import { Button, EmptyState, Input } from "@nexera-ui/react";

/** Forgot password: ask for the work email, then confirm that the reset link was sent. */
export default function ForgotPassword() {
  const [email, setEmail] = useState("");
  const [sent, setSent] = useState(false);
  const [resent, setResent] = useState(false);

  const onSubmit = (event: SyntheticEvent<HTMLFormElement>) => {
    event.preventDefault();
    setSent(true); // replace with your reset request; always answer the same way so emails can't be probed
  };

  return (
    <div className="@container grid min-h-[520px] place-items-center bg-page px-4 py-10">
      <div className="grid w-full max-w-sm gap-6 rounded-xl border border-default bg-surface p-6 shadow-sm @sm:p-8">
        {sent ? (
          <EmptyState
            size="md"
            headingLevel={2}
            icon={<LuMailCheck />}
            title="Check your inbox"
            description={
              resent
                ? `We sent another link to ${email}. Only the newest link works.`
                : `If ${email} has a Northwind account, a reset link is on its way. The link works for 30 minutes.`
            }
            secondaryAction={
              <Button
                variant="secondary"
                size="sm"
                onPress={() => {
                  setSent(false);
                  setResent(false);
                }}
              >
                Use a different email
              </Button>
            }
            primaryAction={
              <Button
                size="sm"
                onPress={() => {
                  setResent(true);
                }}
              >
                Resend link
              </Button>
            }
          />
        ) : (
          <>
            <header className="grid gap-1">
              <h2 className="text-heading-h3 text-primary">Reset your password</h2>
              <p className="text-body-default text-secondary">
                Enter the email you use for Northwind and we&apos;ll send you a link to choose a new
                password.
              </p>
            </header>
            <form className="grid gap-4" onSubmit={onSubmit}>
              <Input
                label="Work email"
                type="email"
                name="email"
                autoComplete="email"
                leadingIcon={<LuMail />}
                placeholder="you@northwind.io"
                value={email}
                onChange={setEmail}
                isRequired
              />
              <Button type="submit" size="lg" className="w-full">
                Send reset link
              </Button>
            </form>
          </>
        )}
        <a
          href="#sign-in"
          className="inline-flex items-center justify-center gap-2 text-body-small text-brand-text underline underline-offset-4"
        >
          <LuArrowLeft aria-hidden="true" className="rtl:rotate-180" /> Back to sign in
        </a>
      </div>
    </div>
  );
}